提高響應式網(wǎng)頁(yè)設計的制作效率方法發(fā)布者：本站     時(shí)間：2020-04-19 12:04:31

沒(méi)有哪個(gè)成功的Web項目是在設計師和開(kāi)發(fā)無(wú)法流暢溝通的前提下搞定的，協(xié)作才是做好項目的基礎。

我曾看到經(jīng)驗豐富的設計師和開(kāi)發(fā)者因為溝通不暢和誤會(huì )導致項目失敗，也見(jiàn)過(guò)新手設計師和開(kāi)發(fā)團隊一起通過(guò)高效協(xié)同，做出驚艷無(wú)比的設計項目。在項目之初充分的磨合，能讓項目在后續的快速迭代中更為流暢。足夠和諧的溝通不僅有利于工作，而且能讓整個(gè)團隊保持情緒的穩定性。

而在響應式網(wǎng)頁(yè)設計項目中，設計師和開(kāi)發(fā)者之間的溝通流暢與否，就顯得更為重要。

設計響應式網(wǎng)站的時(shí)候，整個(gè)團隊必須為大量不同尺寸屏幕的設備充分考慮，習慣于“像素精準”的設計師和開(kāi)發(fā)者需要對流動(dòng)的界面和大量的不同比例的設備有充分的準備。簡(jiǎn)而言之，響應式設計使得整個(gè)項目交付面臨著(zhù)大量的不確定因素，這也是響應式網(wǎng)站項目的難點(diǎn)。

希望接下來(lái)的5個(gè)小技巧，能幫各個(gè)團隊順利搞定這種項目中的溝通障礙和技術(shù)問(wèn)題。

1、優(yōu)先專(zhuān)注“極端”尺寸
invisionpost_rwdrange

當你面對著(zhù)手機屏幕和桌面端顯示器這兩種極端的屏幕尺寸之時(shí)，疑問(wèn)會(huì )自然而然出現。有的設計師打一開(kāi)始就從動(dòng)態(tài)的視角開(kāi)始他們的設計，但是絕大多數的設計師仍然是從靜態(tài)的頁(yè)面開(kāi)始著(zhù)手設計的：選擇一個(gè)固定的高度和寬度，繪制相應的草圖或者視覺(jué)稿。

這樣一來(lái)，就引出了幾個(gè)問(wèn)題：你的開(kāi)發(fā)團隊優(yōu)先考慮什么尺寸？設計團隊首先交付的高保真視覺(jué)稿是哪個(gè)尺寸的？從技術(shù)限制的角度出發(fā)，你應該優(yōu)先考慮什么設備？

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

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

1600×1000 px （桌面顯示器的常見(jiàn)尺寸）

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

“剛剛開(kāi)始響應式網(wǎng)頁(yè)項目的時(shí)候，從用戶(hù)最常見(jiàn)的最大和最小尺寸設計著(zhù)手?！?br />
當你面對最小的屏幕的時(shí)候，你需要在小屏幕上呈現出最重要的內容，如何選取是一件頗為費神的事情。但是面對大屏幕的時(shí)候，你所思考的事情又是截然相反的：怎么展示內容才算是過(guò)多？分欄是否因太寬降低了易讀性？如何選取元素才能避免這樣的問(wèn)題？最后，面對兩個(gè)不同尺寸的界面，你還要考慮它們所涉及的輸入方式，最小的屏幕上通常是觸摸屏和虛擬鍵盤(pán)，最大的屏幕上，絕大多數時(shí)候是傳統的鍵盤(pán)鼠標。

這里最重要的事情可能是你需要一次挑選兩個(gè)界面尺寸來(lái)做，而不是傳統的針對一個(gè)屏幕設計，然后完成剩下的部分。設計師和開(kāi)發(fā)者在這個(gè)問(wèn)題上出現分歧，對后續的影響是非常大的。

2、討論不同斷點(diǎn)之間內容布局
在日常的網(wǎng)頁(yè)設計中，大家對于靜態(tài)的線(xiàn)框圖投注了如此之多的關(guān)注，但是在做響應式設計的時(shí)候，應該始終謹記頁(yè)面內的布局是流動(dòng)的。這也就意味著(zhù)，你網(wǎng)頁(yè)的用戶(hù)絕大多屬時(shí)候所體驗到的頁(yè)面其實(shí)是它的“中間態(tài)”。所以，你必須考慮隨著(zhù)屏幕尺寸大小的轉變，布局設計的每一個(gè)調整和改變。比如，當屏幕尺寸變小的時(shí)候，文本內容需要收縮，并且和混排的圖片會(huì )與文章縮到一欄中去。

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

3、對于圖片素材的處理策略早做準備
invisionpost_rwdimages

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

圖片格式和尺寸通常會(huì )讓團隊內的設計師和開(kāi)發(fā)者之間產(chǎn)生隔閡。你可以用PNG，也可以用JPG，圖標字體和SVG也會(huì )在網(wǎng)頁(yè)上很好的運用。也就是說(shuō)，并沒(méi)有一個(gè)正確的答案：用什么更多是取決于可用的內容和資源本身。但是重要的地方在于，大家要在使用格式上達成共識，并且堅持使用下去。另外，你可能也想鉆研出一套通用的圖片尺寸體系，運用在不同的項目中。

不過(guò)對于現代的響應式網(wǎng)頁(yè)設計，這僅僅只是一個(gè)起點(diǎn)?，F在要做你至少需要兩套圖片素材，一種是給普通PPI的屏幕所設計，一種是給高PPI的視網(wǎng)膜屏所準備的。更完備的響應式網(wǎng)頁(yè)，對于圖集和素材的要求更高，細分更多，針對性更強。

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

最起碼，你得針對不同像素密度的屏幕作出基本的區分。仔細讀一下這篇關(guān)于srcset的文章，或者使用Picturefill這樣的工具來(lái)確?？鐬g覽器支持。如果你覺(jué)得整個(gè)方案不堪重負，那么不妨從小的部分開(kāi)始做起。逐步調整圖片元素的srcset屬性就是一個(gè)不錯的開(kāi)始，在這個(gè)過(guò)程中，你會(huì )逐步看到網(wǎng)頁(yè)的響應越來(lái)越靠譜。

4、從基礎元素開(kāi)始思考，使用模塊化設計
我的響應式網(wǎng)頁(yè)設計流程深深地受到了Brad Frost 的Atomic Web Design和Jonathan Snook 的SMACSS的影響。兩個(gè)框架都依靠小而可復用的基礎組件來(lái)實(shí)現強大的網(wǎng)絡(luò )架構。

所以，在與開(kāi)發(fā)者交接的過(guò)程中，我會(huì )優(yōu)先專(zhuān)注小而可復用的組件，因為它們能給不同平臺不同設備帶來(lái)相同的用戶(hù)體驗和視覺(jué)效果。這種一致性會(huì )更容易為開(kāi)發(fā)團隊所消化吸收。而且，小組件在不同頁(yè)面之間的復用性也非常強，所以，如果你設計出了一套高效的方案，今后還會(huì )有用武之地。

想象一下，你正在設計一個(gè)帶有大標題、高清大圖和表單的注冊頁(yè)面。由于網(wǎng)頁(yè)是響應式的，所以所有這些元素都會(huì )隨著(zhù)設備和屏幕的轉換而變化尺寸。那么在項目研發(fā)早期，應該同開(kāi)發(fā)團隊一起鉆研，敲定頁(yè)面所涉及的各個(gè)細節。它看起來(lái)應該是什么樣子？用什么樣的驗證機制？如果要輸入表單，如何配合觸摸屏和傳統的鍵鼠？

5、讓開(kāi)發(fā)者給視覺(jué)和體驗設計做反饋
有些設計師在產(chǎn)品設計會(huì )議、可用性設計環(huán)節和其他的溝通環(huán)節不讓開(kāi)發(fā)者參與或提供反饋。這種放任和封閉是錯的。要知道，經(jīng)驗豐富的開(kāi)發(fā)者在產(chǎn)品、體驗和設計領(lǐng)域同樣有著(zhù)極為豐富的知識。讓他們參與到這些環(huán)節中，能讓產(chǎn)品更加成熟。前端和設計師在技能上的重疊就更多了。

越來(lái)越多的設計師開(kāi)始自己寫(xiě)代碼了，開(kāi)發(fā)者也逐漸習慣于制作快速原型、先框圖，并且也會(huì )在私底下惡補美學(xué)和設計類(lèi)的知識。響應式網(wǎng)頁(yè)設計的出現，使得兩個(gè)職業(yè)之間的交疊越來(lái)越多，加劇了這一趨勢。雖然沒(méi)有設計師的頭銜掛在開(kāi)發(fā)者頭上，但是他們對于設計往往能說(shuō)出驚人之語(yǔ)，發(fā)人深省。

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

結語(yǔ)
所有這五個(gè)技巧都需要實(shí)現計劃，并且不停補充。絕大多數團隊都將注意力放在產(chǎn)品的發(fā)布和卡Deadline上，這個(gè)階段再來(lái)考慮這些問(wèn)題，不利于產(chǎn)品，也不適合此刻團隊內的設計師和開(kāi)發(fā)者。