&

網(wǎng)頁設(shè)計(jì):怎樣創(chuàng)建整潔有序的網(wǎng)頁布局：

網(wǎng)頁設(shè)計(jì):怎樣創(chuàng)建整潔有序的網(wǎng)頁布局——什么是布局？“布局”是指頁面內(nèi)容的尺寸、間距及位置。有效的布局對(duì)于幫助用戶快速找到他們想要的內(nèi)容至關(guān)重要，并可以在結(jié)構(gòu)外觀上令用戶感到舒服。

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

1.具有清晰的視覺層次。布局應(yīng)當(dāng)讓頁面各元素之間的關(guān)系和重要性一目了然。你可以通過適當(dāng)使用下列屬性來實(shí)現(xiàn)視覺層次：

焦點(diǎn)：指用戶首先關(guān)注的區(qū)域。形式上被賦予焦點(diǎn)屬性的UI元素一定要表達(dá)重要的內(nèi)容。

視覺流：指用戶關(guān)注區(qū)域的順序?？梢愿鶕?jù)任務(wù)邏輯和用戶的瀏覽習(xí)慣來設(shè)計(jì)恰當(dāng)?shù)囊曈X流。好的視覺流應(yīng)該清晰、合理、順暢、自然。

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

錯(cuò)誤：

邏輯上相關(guān)的UI元素在空間上被分隔，且沒有明顯的視覺關(guān)聯(lián)。

對(duì)齊：使頁面工整，信息呈現(xiàn)有序，便于用戶掃視。

錯(cuò)誤：

沒有對(duì)齊影響了頁面效果且不便于用戶掃視。不要因?yàn)楣δ苄枰蛯?duì)極限情況的顧慮而輕易犧牲掉頁面的視覺展現(xiàn)。

強(qiáng)調(diào)：可以根據(jù)UI元素間的相對(duì)重要程度進(jìn)行強(qiáng)調(diào)。

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

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

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

瀏覽網(wǎng)站時(shí)，用戶不會(huì)沉浸在UI本身，而是沉浸在他們的目標(biāo)任務(wù)中，因此掃視是最常使用的閱讀模式。用戶只在確信必要時(shí)才仔細(xì)閱讀大量文本。

針對(duì)掃視的布局設(shè)計(jì)可以適當(dāng)強(qiáng)調(diào)主要的UI元素，弱化次要的。包括：

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

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

3）考慮使用漸進(jìn)展開方式來隱藏次要的UI元素。

4）將任務(wù)相關(guān)的重要信息要直接表現(xiàn)在控件上。用戶更傾向于關(guān)注交互控件上的標(biāo)簽，而不是輔助型的靜態(tài)文本。

錯(cuò)誤：

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

正確：

直接將按鈕的作用描述作為控件標(biāo)簽，便于用戶理解。

5）不要展示大段文本，去除不必要的文本。多文本時(shí)格式化展示。

注：常規(guī)模式也存在例外。眼動(dòng)議實(shí)驗(yàn)指出，真實(shí)用戶的行為很沒有規(guī)律。此模式的目的在于幫助你做出更好的決定，而不是精準(zhǔn)的描述用戶行為。

3.合理利用頁面空間。

保持頁面的視覺平衡。避免擁擠和對(duì)空間的浪費(fèi)。

確保關(guān)鍵數(shù)據(jù)沒有被截?cái)啵菙?shù)據(jù)特別長。

錯(cuò)誤：

邏輯上相關(guān)的UI元素在空間上被分隔，且沒有明顯的視覺關(guān)聯(lián)。

控件的尺寸和間距恰當(dāng)，沒有不必要的滾動(dòng)。一個(gè)任務(wù)盡量在一屏內(nèi)完成。

實(shí)際情況中，我們用戶的頁面空間要小于屏幕分辨率，它會(huì)因各種因素而壓縮，如：非全屏操作（彈出窗口和對(duì)比瀏覽），瀏覽器本身及各種輔助欄對(duì)屏幕的占用等，設(shè)計(jì)中要考

慮這些情況。

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

減少內(nèi)容和展現(xiàn)上的嵌套層級(jí)。

減少控件不同尺寸的數(shù)量，例如，在界面上只使用一兩種按鈕寬度。

采用輕量級(jí)的分組和分割方式，可以用布局本身和分隔符代替分組框。

使用盡量少的對(duì)齊線。

5.選擇與頁面類型相匹配的版式。在設(shè)計(jì)之初，應(yīng)充分考慮頁面承載的內(nèi)容、功能和屬性，繼而選擇適合該頁面的版式。不合適的版式會(huì)造成用戶的閱讀困擾，降低任務(wù)的完成效率。網(wǎng)頁布局設(shè)計(jì)

Web Design: How to create a clean and orderly and page layout - What is the layout? "Layout" refers to the page content, size, spacing and location. Effective layout to help users quickly find the content they want is critical, and can make appearance in the structure of the user feel comfortable.

本文由廣州網(wǎng)站建設(shè)公司-三行網(wǎng)絡(luò)原創(chuàng)，轉(zhuǎn)載請(qǐng)保留版權(quán)（廣州網(wǎng)站建設(shè)huiduochem.com ）三行網(wǎng)絡(luò)——專注于企業(yè)網(wǎng)站建設(shè)、響應(yīng)式營銷型網(wǎng)站定制，歡迎來電咨詢！熱線：020-85628720、15915767698