注：設(shè)計(jì)師和開發(fā)人員在構(gòu)建網(wǎng)站時(shí)，需要考慮很多事情，從視覺外觀到功能設(shè)計(jì)。為了簡(jiǎn)化這個(gè)過程，我們準(zhǔn)備了這個(gè)指南。限于篇幅限制，將這一指南分為三部分，此為第三部分內(nèi)容。

前兩篇：

《網(wǎng)頁設(shè)計(jì)綜合指南》（一）：網(wǎng)站地圖優(yōu)化篇

《網(wǎng)頁設(shè)計(jì)綜合指南》（二）：內(nèi)容布局、頁面結(jié)構(gòu)等

本篇包含內(nèi)容

三、移動(dòng)端適配

  • 3.1 響應(yīng)式設(shè)計(jì)

  • 3.2 手勢(shì)操作

四、無障礙設(shè)計(jì)

  • 4.1 弱視用戶

  • 4.2 色盲用戶

  • 4.3 盲人用戶

  • 4.4 鍵盤適配

五、測(cè)試

  • 5.1 持續(xù)測(cè)試

  • 5.2 頁面加載測(cè)試

  • 5.3 A/B測(cè)試

六、開發(fā)交接

七、總結(jié)

三、移動(dòng)端適配

如今，網(wǎng)站用戶中有50％左右的用戶通過移動(dòng)設(shè)備訪問。這對(duì)網(wǎng)頁設(shè)計(jì)師意味著什么？意味著我們必須為網(wǎng)站進(jìn)行移動(dòng)端適配設(shè)計(jì)。

3.1 響應(yīng)式設(shè)計(jì)

PC端和移動(dòng)端有著不同的屏幕分辨率，進(jìn)行適配優(yōu)化尤為重要。

采用單列布局。手機(jī)屏幕上單列布局基本效果都不錯(cuò)。單列不僅可以管理小屏幕上的有限空間，還可以輕松地在不同屏幕分辨率之間以及縱橫比之間進(jìn)行縮放。

使用 Priority+ 導(dǎo)航模式。Priority+是Michael Scharnagl提出的，展示重要的導(dǎo)航選項(xiàng)， 不重要的導(dǎo)航選項(xiàng)集合在“更多”按鈕。它能充分利用可用的屏幕空間。隨著屏幕的增加，展示的導(dǎo)航選項(xiàng)也隨之增加，從而可以提高可視性和吸引力。這種模式對(duì)于有很多不同的模塊和頁面的網(wǎng)站（如新聞網(wǎng)站或電商網(wǎng)站）特別有用。

確保圖像適合PC端和移動(dòng)端。網(wǎng)站必須適應(yīng)所有不同的設(shè)備和分辨率，像素密度和方向。圖像適配是構(gòu)建響應(yīng)式網(wǎng)站時(shí)面臨的主要挑戰(zhàn)之一。為了簡(jiǎn)化這個(gè)任務(wù)，您可以使用諸如Responsive Image Breakpoints Generator這樣的工具地處理圖像。

Responsive Image Breakpoints Generator 可幫助您生成及管理圖像的不同尺寸。

更多資訊關(guān)注巨推傳媒:http://www.jutui360.com/list-8/ 聯(lián)系電話:400-606-5558 qq/微信:shijianyingxiao8