注：設(shè)計師和開發(fā)人員在構(gòu)建網(wǎng)站時，需要考慮很多事情，從視覺外觀到功能設(shè)計。為了簡化這個過程，我們準(zhǔn)備了這個指南。限于篇幅限制，將這一指南分為三部分，此為第三部分內(nèi)容。
前兩篇：
《網(wǎng)頁設(shè)計綜合指南》（一）：網(wǎng)站地圖優(yōu)化篇
《網(wǎng)頁設(shè)計綜合指南》（二）：內(nèi)容布局、頁面結(jié)構(gòu)等
本篇包含內(nèi)容
三、移動端適配
3.1 響應(yīng)式設(shè)計
3.2 手勢操作
四、無障礙設(shè)計
4.1 弱視用戶
4.2 色盲用戶
4.3 盲人用戶
4.4 鍵盤適配
五、測試
5.1 持續(xù)測試
5.2 頁面加載測試
5.3 A/B測試
六、開發(fā)交接
七、總結(jié)
三、移動端適配
如今，網(wǎng)站用戶中有50％左右的用戶通過移動設(shè)備訪問。這對網(wǎng)頁設(shè)計師意味著什么？意味著我們必須為網(wǎng)站進行移動端適配設(shè)計。
3.1 響應(yīng)式設(shè)計
PC端和移動端有著不同的屏幕分辨率，進行適配優(yōu)化尤為重要。
采用單列布局。手機屏幕上單列布局基本效果都不錯。單列不僅可以管理小屏幕上的有限空間，還可以輕松地在不同屏幕分辨率之間以及縱橫比之間進行縮放。
使用 Priority+ 導(dǎo)航模式。Priority+是Michael Scharnagl提出的，展示重要的導(dǎo)航選項， 不重要的導(dǎo)航選項集合在“更多”按鈕。它能充分利用可用的屏幕空間。隨著屏幕的增加，展示的導(dǎo)航選項也隨之增加，從而可以提高可視性和吸引力。這種模式對于有很多不同的模塊和頁面的網(wǎng)站（如新聞網(wǎng)站或電商網(wǎng)站）特別有用。
確保圖像適合PC端和移動端。網(wǎng)站必須適應(yīng)所有不同的設(shè)備和分辨率，像素密度和方向。圖像適配是構(gòu)建響應(yīng)式網(wǎng)站時面臨的主要挑戰(zhàn)之一。為了簡化這個任務(wù)，您可以使用諸如Responsive Image Breakpoints Generator這樣的工具地處理圖像。
Responsive Image Breakpoints Generator 可幫助您生成及管理圖像的不同尺寸。
更多資訊關(guān)注巨推傳媒:http://www.jutui360.com/list-8/ 聯(lián)系電話:400-606-5558 qq/微信:shijianyingxiao8
