什么是布局？

       “布局”是指頁面內容的大小、間距和位置。高效的布局對于幫助用戶快速找到他們想要的東西和讓用戶在結構化的外觀中感到舒適非常關鍵。

       如何設計有效的布局？

       1、有一個清晰的視覺層次。布局應該使頁面元素的關系和重要性一目了然。通過適當使用以下屬性，您可以實現(xiàn)可視化層次結構：

       重點：該區(qū)域是用戶的第一關注對象。正式指定焦點屬性的UI元素必須表示重要內容。

       可視化流：用戶關心區(qū)域的順序。根據(jù)任務邏輯和用戶瀏覽習慣，西寧網(wǎng)站設計適當?shù)目梢暬?。良好的視覺過程應該清晰、合理、流暢、自然。

       關聯(lián)：邏輯相關的UI元素應該具有清晰的可視關系。

       錯誤：邏輯相關的UI元素在空間上分離，沒有明顯的視覺關聯(lián)。

       對齊：讓用戶瀏覽的頁面整潔有序和容易。

       錯誤：沒有對齊影響頁面效果，用戶掃描很難。不要犧牲頁面的視覺顯示，僅僅是因為需要功能和對限制條件的顧慮。

       重點：重點對UI元素的相對重要性。

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

       大多數(shù)人的閱讀習慣是從左到右，從上到下。

       閱讀分為閱讀（浸泡）和掃描（掃描）。在理解前者的目的，后者是方向。

       瀏覽網(wǎng)站時，用戶不會沉浸在UI本身，而是沉浸在他們的目標任務中，因此掃描是最常用的閱讀方法。用戶閱讀大量的文本，只在必要的時候。

       掃視的布局設計，主要的UI元素，可以適當?shù)貜娬{和繼發(fā)性減弱。包括：

       1）將主UI元素放上掃視路徑。

       2）避免把重要信息放在左下角或頁面底部，或者你需要滾動很多的控件上。

       3）考慮使用漸進部署隱藏更小的UI元素。

       4）任務相關的重要信息應直接顯示在控件上。用戶傾向于關注交互式控件上的標記，而不是幫助靜態(tài)文本。錯誤：在點擊OK按鈕的功能之前，用戶必須閱讀輔助文本。正確的:按鈕的功能直接描述為控件標簽，便于用戶理解。

       5）不顯示大量文本，并刪除不必要的文字。當多個顯示文本格式。注：有傳統(tǒng)模式的例外。眼動實驗表明，真實用戶的行為是非常不規(guī)則的。該模型的目標是幫助您做出比準確描述用戶行為更好的決策。

       3、讓頁面的空間合理利用。

       保持頁面的視覺平衡。避免擁塞和浪費空間。確保關鍵數(shù)據(jù)不被截斷，除非數(shù)據(jù)特別長。錯誤：邏輯相關的UI元素在空間上分離，沒有明顯的視覺關聯(lián)?？丶诖笮『烷g距上是精確的，并且不需要滾動。完成盡可能多的工作在屏幕上。

在實踐中，我們的用戶頁面空間小于屏幕分辨率，它會受到壓縮，由于各種各樣的因素的影響：如非操作（全屏瀏覽、彈出和對比）各種輔助桿瀏覽器和屏幕占用，考慮這些在設計中。

       4，不要讓布局本身成為一個突出的UI元素，并保持簡單性（可見性）。

       減少內容和表示的嵌套層次。減少不同大小的控件，例如，在接口上只使用一個或兩個按鈕寬度。使用輕量級分組和分段，可以使用布局本身和分隔符，而不使用分組框。