注：設計師和開發人員在構建網站時，需要考慮很多事情，從視覺外不雅觀到功能設計。為了簡化這個過程，我們準備了這個指南。限于篇幅限制，將這一指南分為三部分，此為第三部分內容。

前兩篇：

《網頁設計綜合指南》（一）：網站地圖優化篇

《網頁設計綜合指南》（二）：內容布局、頁面結構等

三、移動端適配

3.1 響應式設計

3.2 手勢操作

四、無障礙設計

4.1 弱視用戶

4.2 色盲用戶

4.3 盲人用戶

4.4 鍵盤適配

五、測試

5.1 持續測試

5.2 頁面加載測試

5.3 A/B測試

六、開發交接

七、總結

如今，網站用戶中有50％擺布的用戶通過移動設備拜候。這對網頁設計師意味著什么？意味著我們必需為網站進行移動端適配設計。

3.1 響應式設計

PC端和移動端有著差別的屏幕分辨率，進行適配優化尤為重要。

采用單列布局。手機屏幕上單列布局基本效果都不錯。單列不但可以辦理小屏幕上的有限空間，還可以輕松地在差別屏幕分辨率之間以及縱橫比之間進行縮放。

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

確保圖像適合PC端和移動端。網站必需適應所有差別的設備和分辨率，，像素密度和標的目的。圖像適配是構建響應式網站時面臨的主要挑戰之一。為了簡化這個任務，您可以使用諸如Responsive Image Breakpoints Generator這樣的工具地處理圖像。

Responsive Image Breakpoints Generator 可幫手您生成及辦理圖像的差別尺寸。

標簽：烏魯木齊 九江 林芝 東營 鹽城