如何設計有效的布局

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

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

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

如何設計有效的布局？

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

焦點：指用戶首先關注的區域。形式上被賦予焦點屬性的UI元素一定要表達重要的內容。
視覺流：指用戶關注區域的順序。可以根據任務邏輯和用戶的瀏覽習慣來設計恰當的視覺流。好的視覺流應該清晰、合理、順暢、自然。

關聯：在邏輯上相關的UI元素應具有清晰的視覺關系。

              錯誤：

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

對齊：使頁面工整，信息呈現有序，便于用戶掃視。

              錯誤：

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

強調：可以根據UI元素間的相對重要程度進行強調。

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

大部分人的閱讀習慣是從左向右，至上而下。

閱讀分為沉浸式閱讀（immersive reading）和掃視（scanning），前者的目的在于理解，后者在于定位。

瀏覽網站時，用戶不會沉浸在UI本身，而是沉浸在他們的目標任務中，因此掃視是最常使用的閱讀模式。用戶只在確信必要時才仔細閱讀大量文本。

針對掃視的布局設計可以適當強調主要的UI元素，弱化次要的。包括：

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

              用戶必須閱讀輔助型文本后才能明確“確定”按鈕的作用。

                       正確：

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

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

3.合理利用頁面空間。