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