版權聲明：轉載時請以超鏈接形式標明文章原始出處和作者信息及本聲明
　　http://lilong4174.blogbus.com/logs/46317761.html

　　該[指南]版權以及最終解釋權為作者阿里巴巴（中文站）用戶體驗設計部 李龍（李小帥）所有，轉載請注明出處。

　　什么是布局？
　　“布局”是指頁面內容的尺寸、間距及位置。有效的布局對于幫助用戶快速找到他們想要的內容至關重要，并可以在結構外觀上令用戶感到舒服。

　　如何設計有效的布局？

　　1. 具有清晰的視覺層次。布局應當讓頁面各元素之間的關系和重要性一目了然。你可以通過適當使用下列屬性來實現視覺層次：

　　錯誤：
　　
　　 邏輯上相關的UI元素在空間上被分隔，且沒有明顯的視覺關聯。

　　錯誤：
　　
　　沒有對齊影響了頁面效果且不便于用戶掃視。不要因為功能需要和對極限情況的顧慮而輕易犧牲掉頁面的視覺展現。

　　2.針對用戶的閱讀模式來設計布局。

　　1)將主UI元素放在掃視路徑上。
　　2)避免將重要信息放在左下角或者頁面底端或者需要滾動很多的控件上。
　　3)考慮使用漸進展開方式來隱藏次要的UI元素。
　　4)將任務相關的重要信息要直接表現在控件上。用戶更傾向于關注交互控件上的標簽，而不是輔助型的靜態文本。
　　錯誤：
　　
　　用戶必須閱讀輔助型文本后才能明確“確定”按鈕的作用。

　　正確：
　　
直接將按鈕的作用描述作為控件標簽，便于用戶理解。
　　5）不要展示大段文本，去除不必要的文本。多文本時格式化展示。

　　注：常規模式也存在例外。眼動議實驗指出，真實用戶的行為很沒有規律。此模式的目的在于幫助你做出更好的決定，而不是精準的描述用戶行為。

　　3.合理利用頁面空間。

錯誤：

有效空間沒有被充分利用，從而導致多條關鍵數據被截斷。

　　
　　4.不要讓布局本身成為突出的UI元素，保持視覺簡潔（visual simplicity）。

　　5.選擇與頁面類型相匹配的版式。在設計之初，應充分考慮頁面承載的內容、功能和屬性，繼而選擇適合該頁面的版式。不合適的版式會造成用戶的閱讀困擾，降低任務的完成效率。

　　標準和規范：

　　1.柵格化：

　　2.以8px為橫向柵格單位：

32px:適用于市場、社區等相關頁面

24px:適用于旺鋪相關頁面

　　3.頁面定寬：