什么是布局？

       “布局”是指頁面內(nèi)容的大小、間距和位置。高效的布局對(duì)于幫助用戶快速找到他們想要的東西和讓用戶在結(jié)構(gòu)化的外觀中感到舒適非常關(guān)鍵。

       如何設(shè)計(jì)有效的布局？

       1、有一個(gè)清晰的視覺層次。布局應(yīng)該使頁面元素的關(guān)系和重要性一目了然。通過適當(dāng)使用以下屬性，您可以實(shí)現(xiàn)可視化層次結(jié)構(gòu)：

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

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

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

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

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

       錯(cuò)誤：沒有對(duì)齊影響頁面效果，用戶掃描很難。不要犧牲頁面的視覺顯示，僅僅是因?yàn)樾枰δ芎蛯?duì)限制條件的顧慮。

       重點(diǎn)：重點(diǎn)對(duì)UI元素的相對(duì)重要性。

       2。針對(duì)用戶的閱讀模式設(shè)計(jì)布局。

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

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

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

       掃視的布局設(shè)計(jì)，主要的UI元素，可以適當(dāng)?shù)貜?qiáng)調(diào)和繼發(fā)性減弱。包括：

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

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

       3）考慮使用漸進(jìn)部署隱藏更小的UI元素。

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

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

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

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

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

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

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