五大技巧幫你提速響應式網頁設計項目

 　　沒有哪個成功的Web項目是在設計師和開發無法流暢溝通的前提下搞定的，協作才是做好項目的基礎。

　　我曾看到經驗豐富的設計師和開發者因為溝通不暢和誤會導致項目失敗，也見過新手設計師和開發團隊一起通過高效協同，做出驚艷無比的設計項目。在項目之初充分的磨合，能讓項目在後續的快速迭代中更為流暢。足夠和諧的溝通不僅有利於工作，而且能讓整個團隊保持情緒的穩定性。

　　而在響應式網頁設計項目中，設計師和開發者之間的溝通流暢與否，就顯得更為重要。

　　設計響應式網站的時候，整個團隊必須為大量不同尺寸屏幕的設備充分考慮，習慣於“像素精准”的設計師和開發者需要對流動的界面和大量的不同比例的設備有充分的准備。簡而言之，響應式設計使得整個項目交付面臨著大量的不確定因素，這也是響應式網站項目的難點。

　　希望接下來的5個小技巧，能幫各個團隊順利搞定這種項目中的溝通障礙和技術問題。

　　1、優先專注“極端”尺寸

　　當你面對著手機屏幕和桌面端顯示器這兩種極端的屏幕尺寸之時，疑問會自然而然出現。有的設計師打一開始就從動態的視角開始他們的設計，但是絕大多數的設計師仍然是從靜態的頁面開始著手設計的：選擇一個固定的高度和寬度，繪制相應的草圖或者視覺稿。

　　這樣一來，就引出了幾個問題：你的開發團隊優先考慮什麼尺寸?設計團隊首先交付的高保真視覺稿是哪個尺寸的?從技術限制的角度出發，你應該優先考慮什麼設備?

　　我始終推薦從用戶最基本的“極端”尺寸開始考慮，推薦當前(2015年)常用設備中最小和最大的情況：

　　320 x 568 px (iPhone 5 ，由於它是視網膜屏幕，平時我們是按照72dpi來設計，但是iPhone 5的顯示實際是144px，所以我們給出了這樣的一個設計尺寸。作為UI設計師的你應該很清楚@2x和@3x的問題)

　　1600×1000 px (桌面顯示器的常見尺寸)

　　當然，你的用戶的實際情況可能略有不同，稍加調查，確定“極端情況”。

　　“剛剛開始響應式網頁項目的時候，從用戶最常見的最大和最小尺寸設計著手。”

　　當你面對最小的屏幕的時候，你需要在小屏幕上呈現出最重要的內容，如何選取是一件頗為費神的事情。但是面對大屏幕的時候，你所思考的事情又是截然相反的：怎麼展示內容才算是過多?分欄是否因太寬降低了易讀性?如何選取元素才能避免這樣的問題?最後，面對兩個不同尺寸的界面，你還要考慮它們所涉及的輸入方式，最小的屏幕上通常是觸摸屏和虛擬鍵盤，最大的屏幕上，絕大多數時候是傳統的鍵盤鼠標。

　　這裡最重要的事情可能是你需要一次挑選兩個界面尺寸來做，而不是傳統的針對一個屏幕設計，然後完成剩下的部分。設計師和開發者在這個問題上出現分歧，對後續的影響是非常大的。

　　2、討論不同斷點之間內容布局

　　在日常的網頁設計中，大家對於靜態的線框圖投注了如此之多的關注，但是在做響應式設計的時候，應該始終謹記頁面內的布局是流動的。這也就意味著，你網頁的用戶絕大多屬時候所體驗到的頁面其實是它的“中間態”。所以，你必須考慮隨著屏幕尺寸大小的轉變，布局設計的每一個調整和改變。比如，當屏幕尺寸變小的時候，文本內容需要收縮，並且和混排的圖片會與文章縮到一欄中去。

　　這些適配能與不能、該與不該的問題上，盡量不要同你的開發團隊去“假設”或者“推測”。積極主動地去確定這些信息，在你負責開發的同事還沒有做太多之前，和他們達成共識。對於復雜的布局改變，事先繪制先框圖或者草圖來單獨說明，是非常明智的選擇。對於一些不那麼重要的特性，通過簡短的討論或者電子郵件通知就足夠了。

　　3、對於圖片素材的處理策略早做准備

　　響應式網頁中的圖片，通常是由一組多個不同尺寸的圖片組成的。比如我的個人網站首頁頂部的大圖，就是由一組6個圖片組成的，分辨率和尺寸各不相同，確保不同的設備都能匹配上對應的圖片。

　　圖片格式和尺寸通常會讓團隊內的設計師和開發者之間產生隔閡。你可以用PNG，也可以用JPG，圖標字體和SVG也會在網頁上很好的運用。也就是說，並沒有一個正確的答案：用什麼更多是取決於可用的內容和資源本身。但是重要的地方在於，大家要在使用格式上達成共識，並且堅持使用下去。另外，你可能也想鑽研出一套通用的圖片尺寸體系，運用在不同的項目中。

　　不過對於現代的響應式網頁設計，這僅僅只是一個起點。現在要做你至少需要兩套圖片素材，一種是給普通PPI的屏幕所設計，一種是給高PPI的視網膜屏所准備的。更完備的響應式網頁，對於圖集和素材的要求更高，細分更多，針對性更強。

　　盡量避免將響應式圖片格式的篩選決策留到項目後期。

　　最起碼，你得針對不同像素密度的屏幕作出基本的區分。仔細讀一下這篇關於srcset的文章，或者使用Picturefill這樣的工具來確保跨浏覽器支持。如果你覺得整個方案不堪重負，那麼不妨從小的部分開始做起。逐步調整圖片元素的srcset屬性就是一個不錯的開始，在這個過程中，你會逐步看到網頁的響應越來越靠譜。

　　4、從基礎元素開始思考，使用模塊化設計

　　我的響應式網頁設計流程深深地受到了Brad Frost 的Atomic Web Design和Jonathan Snook 的SMACSS的影響。兩個框架都依靠小而可復用的基礎組件來實現強大的網絡架構。

　　所以，在與開發者交接的過程中，我會優先專注小而可復用的組件，因為它們能給不同平台不同設備帶來相同的用戶體驗和視覺效果。這種一致性會更容易為開發團隊所消化吸收。而且，小組件在不同頁面之間的復用性也非常強，所以，如果你設計出了一套高效的方案，今後還會有用武之地。

　　想象一下，你正在設計一個帶有大標題、高清大圖和表單的注冊頁面。由於網頁是響應式的，所以所有這些元素都會隨著設備和屏幕的轉換而變化尺寸。那麼在項目研發早期，應該同開發團隊一起鑽研，敲定頁面所涉及的各個細節。它看起來應該是什麼樣子?用什麼樣的驗證機制?如果要輸入表單，如何配合觸摸屏和傳統的鍵鼠?

　　5、讓開發者給視覺和體驗設計做反饋

　　有些設計師在產品設計會議、可用性設計環節和其他的溝通環節不讓開發者參與或提供反饋。這種放任和封閉是錯的。要知道，經驗豐富的開發者在產品、體驗和設計領域同樣有著極為豐富的知識。讓他們參與到這些環節中，能讓產品更加成熟。前端和設計師在技能上的重疊就更多了。

　　越來越多的設計師開始自己寫代碼了，開發者也逐漸習慣於制作快速原型、先框圖，並且也會在私底下惡補美學和設計類的知識。響應式網頁設計的出現，使得兩個職業之間的交疊越來越多，加劇了這一趨勢。雖然沒有設計師的頭銜掛在開發者頭上，但是他們對於設計往往能說出驚人之語，發人深省。

　　當然，不同的角色和職責的劃分依然是極為重要的。但是稍微調整一些小步驟，確實能顯著提高最終產品。所以，你做下一輪產品可用性測試的時候，不妨帶著開發者一起來討論。

　　結語

　　所有這五個技巧都需要實現計劃，並且不停補充。絕大多數團隊都將注意力放在產品的發布和卡Deadline上，這個階段再來考慮這些問題，不利於產品，也不適合此刻團隊內的設計師和開發者。

　　項目開發之初，稍加計劃，後期的回報絕對是豐厚的。