沒(méi)有成功Web項(xiàng)目是在設(shè)計(jì)師與開(kāi)發(fā)人員溝通不暢的前提下完成的，合作是做好項(xiàng)目的基礎(chǔ)。我見(jiàn)過(guò)經(jīng)驗(yàn)豐富的設(shè)計(jì)師和開(kāi)發(fā)人員因溝通不暢和誤解而失敗。我也見(jiàn)過(guò)新手設(shè)計(jì)師和開(kāi)發(fā)團(tuán)隊(duì)通過(guò)高效的合作，制作出驚人的設(shè)計(jì)項(xiàng)目。在項(xiàng)目開(kāi)始時(shí)充分磨合可以使項(xiàng)目在后續(xù)的快速迭代中更加順暢。和諧的溝通不僅有利于工作，而且使整個(gè)團(tuán)隊(duì)保持情緒穩(wěn)定。在響應(yīng)性網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目中，設(shè)計(jì)師與開(kāi)發(fā)者之間的溝通是否順暢更為重要。在設(shè)計(jì)響應(yīng)性網(wǎng)站時(shí)，整個(gè)團(tuán)隊(duì)必須充分考慮大量不同尺寸屏幕的設(shè)備。習(xí)慣于準(zhǔn)確像素的設(shè)計(jì)師和開(kāi)發(fā)者需要充分準(zhǔn)備流量界面和大量不同比例的設(shè)備。總之，響應(yīng)式設(shè)計(jì)使整個(gè)項(xiàng)目的交付面臨著許多不確定性，這也是響應(yīng)式網(wǎng)站項(xiàng)目的難點(diǎn)。希望以下五個(gè)小技巧能幫助各團(tuán)隊(duì)順利解決這個(gè)項(xiàng)目的溝通障礙和技術(shù)問(wèn)題。1.優(yōu)先考慮極端尺寸invisionpost_rwdrange當(dāng)你面對(duì)手機(jī)屏幕和桌面顯示器的極端屏幕尺寸時(shí)，問(wèn)題自然會(huì)出現(xiàn)。一些設(shè)計(jì)師從動(dòng)態(tài)的角度開(kāi)始設(shè)計(jì)，但絕大多數(shù)設(shè)計(jì)師仍然從靜態(tài)頁(yè)面開(kāi)始：選擇固定的高度和寬度，繪制相應(yīng)的草圖或視覺(jué)草圖。這導(dǎo)致了幾個(gè)問(wèn)題:你的開(kāi)發(fā)團(tuán)隊(duì)優(yōu)先考慮什么尺寸？設(shè)計(jì)團(tuán)隊(duì)首先交付的高保真視覺(jué)稿是什么尺寸？從技術(shù)限制的角度來(lái)看，你應(yīng)該優(yōu)先考慮哪些設(shè)備？我一直建議從用戶(hù)的基本極端尺寸入手，推薦目前(2016年)常用設(shè)備中小、大的情況:320x568px（iPhone5.因?yàn)槭且暰W(wǎng)膜屏幕，我們通常遵循72dpi但是iPhone實(shí)際顯示實(shí)際上是144px，所以我們給出了這樣的設(shè)計(jì)尺寸。作為UI你應(yīng)該很清楚設(shè)計(jì)師@2x和@3x的問(wèn)題）   1600×1000px(桌面顯示器的常見(jiàn)尺寸)當(dāng)然，您的用戶(hù)的實(shí)際情況可能略有不同，稍加調(diào)查，確定極端情況。響應(yīng)網(wǎng)頁(yè)項(xiàng)目剛剛開(kāi)始，從用戶(hù)常見(jiàn)的大小尺寸設(shè)計(jì)入手。”當(dāng)你面對(duì)小屏幕時(shí)，你需要在小屏幕上展示重要的內(nèi)容。如何選擇是一件非常麻煩的事情。但面對(duì)大屏幕，你所想的是完全相反的：如何顯示太多的內(nèi)容？由于過(guò)寬，分欄的易讀性降低了嗎？如何選擇元素來(lái)避免這樣的問(wèn)題？之后，面對(duì)兩個(gè)不同尺寸的界面，你也應(yīng)該考慮它們所涉及的輸入模式。觸摸屏和虛擬鍵盤(pán)通常在小屏幕上，傳統(tǒng)鍵盤(pán)鼠標(biāo)大多在大屏幕上。這里重要的是，你需要選擇兩個(gè)界面尺寸，而不是傳統(tǒng)的屏幕設(shè)計(jì)，然后完成剩余的部分。設(shè)計(jì)師和開(kāi)發(fā)者在這個(gè)問(wèn)題上存在分歧，對(duì)后續(xù)影響很大。2.討論不同斷點(diǎn)之間的內(nèi)容布局在日常的網(wǎng)頁(yè)設(shè)計(jì)中，我們非常關(guān)注靜態(tài)線(xiàn)框圖，但在做響應(yīng)設(shè)計(jì)時(shí)，我們應(yīng)該始終記住頁(yè)面中的布局是流動(dòng)的。這意味著絕大多數(shù)用戶(hù)在你的網(wǎng)頁(yè)上體驗(yàn)到的頁(yè)面實(shí)際上是它的中間態(tài)。所以，你必須考慮隨著屏幕尺寸大小的轉(zhuǎn)變，布局設(shè)計(jì)的每一個(gè)調(diào)整和改變。例如，當(dāng)屏幕尺寸變小時(shí)，文本內(nèi)容需要收縮，與文章混合的圖片將收縮到一欄。盡量不要和你的開(kāi)發(fā)團(tuán)隊(duì)一起假設(shè)或推測(cè)這些適應(yīng)問(wèn)題。在你負(fù)責(zé)開(kāi)發(fā)的同事做太多之前，積極確定這些信息，并與他們達(dá)成共識(shí)。對(duì)于復(fù)雜的布局變化，提前繪制框圖或草圖單獨(dú)解釋是非常明智的選擇。對(duì)于一些不那么重要的特征，通過(guò)簡(jiǎn)短的討論或電子郵件通知就足夠了。3.提前準(zhǔn)備圖片素材的處理策略invisionpost_rwdimages響應(yīng)網(wǎng)頁(yè)中的圖片通常由一組不同尺寸的圖片組成。例如，我個(gè)人網(wǎng)站頁(yè)面頂部的大圖片由一組6張圖片組成，分辨率和大小不同，以確保不同的設(shè)備能夠匹配相應(yīng)的圖片。圖片格式和尺寸通常會(huì)使團(tuán)隊(duì)中的設(shè)計(jì)師和開(kāi)發(fā)者疏遠(yuǎn)。你可以用PNG，也可以用JPG，圖標(biāo)字體和SVG它也將很好地應(yīng)用于網(wǎng)頁(yè)。換句話(huà)說(shuō)，沒(méi)有正確的答案：使用什么更多地取決于可用的內(nèi)容和資源本身。但重要的是要在使用格式上達(dá)成共識(shí)，堅(jiān)持使用。此外，您還可能希望在不同的項(xiàng)目中研究一通用的圖片尺寸系統(tǒng)。但對(duì)于現(xiàn)代響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，這只是一個(gè)起點(diǎn)。現(xiàn)在你至少需要兩套圖片材料來(lái)做，一種是給普通人PPI屏幕設(shè)計(jì)，一種是高PPI準(zhǔn)備的視網(wǎng)膜屏。響應(yīng)性網(wǎng)頁(yè)更完整，對(duì)圖集和素材要求更高，細(xì)分更多，針對(duì)性更強(qiáng)。盡量避免在項(xiàng)目后期保留響應(yīng)圖片格式的篩選決策。至少，你必須基本區(qū)分不同像素密度的屏幕。仔細(xì)閱讀這篇文章srcset文章，或使用Picturefill確保跨瀏覽器支持的工具。假如你覺(jué)得整個(gè)計(jì)劃不堪重負(fù)，那么不妨從小部分開(kāi)始。逐步調(diào)整圖片元素srcset屬性就是一個(gè)不錯(cuò)的開(kāi)始，在這個(gè)過(guò)程中，你會(huì)逐步看到網(wǎng)頁(yè)的響應(yīng)越來(lái)越靠譜。4.從基本元素出發(fā)，使用模塊化設(shè)計(jì)我的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)流程深深地受到了BradFrost的AtomicWebDesign和JonathanSnook的SMACSS的影響。兩個(gè)框架都依靠小而可重用的基本組件來(lái)實(shí)現(xiàn)強(qiáng)大的網(wǎng)絡(luò)架構(gòu)。因此，在與開(kāi)發(fā)人員交接的過(guò)程中，我將優(yōu)先考慮小型和可重復(fù)使用的組件，因?yàn)樗鼈兛梢越o不同的平臺(tái)和設(shè)備帶來(lái)相同的用戶(hù)體驗(yàn)和視覺(jué)效果。這種一致性將更容易被開(kāi)發(fā)團(tuán)隊(duì)消化和吸收。而且，小組件在不同頁(yè)面之間的重用性也很強(qiáng)，所以，如果你設(shè)計(jì)了一高效的解決方案，將來(lái)會(huì)有用。想象一下，你正在設(shè)計(jì)一個(gè)帶有大標(biāo)題、高清圖片和表單的注冊(cè)頁(yè)面。因?yàn)榫W(wǎng)頁(yè)是響應(yīng)性的，所有這些元素都會(huì)隨著設(shè)備和屏幕的轉(zhuǎn)換而變化。然后，在項(xiàng)目研發(fā)的早期階段，我們應(yīng)該與開(kāi)發(fā)團(tuán)隊(duì)一起研究，確定頁(yè)面涉及的細(xì)節(jié)。應(yīng)該是什么樣子？用什么樣的驗(yàn)證機(jī)制？如何配合觸摸屏和傳統(tǒng)鍵鼠輸入表單？5.讓開(kāi)發(fā)者反饋視覺(jué)和體驗(yàn)設(shè)計(jì)一些設(shè)計(jì)師不允許開(kāi)發(fā)者參與或反饋產(chǎn)品設(shè)計(jì)會(huì)議、可用性設(shè)計(jì)和其他溝通環(huán)節(jié)。這種放任和封閉是錯(cuò)誤的。要知道，經(jīng)驗(yàn)豐富的開(kāi)發(fā)者在產(chǎn)品、經(jīng)驗(yàn)和設(shè)計(jì)領(lǐng)域也有非常豐富的知識(shí)。讓他們參與這些鏈接，使產(chǎn)品更加成熟。前端和設(shè)計(jì)師在技能上的重疊更多。越來(lái)越多的設(shè)計(jì)師開(kāi)始自己編寫(xiě)代碼，開(kāi)發(fā)人員逐漸習(xí)慣于制作快速原型和先框圖，并私下補(bǔ)充美學(xué)和設(shè)計(jì)知識(shí)。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的出現(xiàn)，使得兩個(gè)職業(yè)之間的交疊越來(lái)越多，加劇了這一趨勢(shì)。雖然開(kāi)發(fā)者頭上沒(méi)有設(shè)計(jì)師的頭銜，但他們往往能對(duì)設(shè)計(jì)說(shuō)出驚人的話(huà)，發(fā)人深省。當(dāng)然，不同角色和職責(zé)的劃分仍然非常重要。但稍微調(diào)整一些小步驟，確實(shí)可以顯著改進(jìn)最終產(chǎn)品。因此，當(dāng)您進(jìn)行下一輪產(chǎn)品可用性測(cè)試時(shí)，您不妨與開(kāi)發(fā)人員討論。結(jié)語(yǔ)所有這五項(xiàng)技能都需要實(shí)現(xiàn)計(jì)劃并不斷補(bǔ)充。絕大多數(shù)團(tuán)隊(duì)都關(guān)注產(chǎn)品的發(fā)布和卡片Deadline現(xiàn)階段再考慮這些問(wèn)題，不利于產(chǎn)品，也不適合團(tuán)隊(duì)中的設(shè)計(jì)師和開(kāi)發(fā)者。項(xiàng)目開(kāi)發(fā)之初，稍加規(guī)劃，后期回報(bào)絕對(duì)豐厚。