-
自然排名 點擊多少均不要錢喲！
可能會幫您的生意提高幾倍，幾十倍 -
在網(wǎng)頁設(shè)計中我們都會講到網(wǎng)頁布局，我們經(jīng)常提到它，但你真正理解它的意思嗎？
“布局”是指頁面內(nèi)容的尺寸、間距及位置。有效的布局對于幫助用戶快速找到他們想要的內(nèi)容至關(guān)重要，并可以在結(jié)構(gòu)外觀上令用戶感到舒服。
如何設(shè)計有效的布局？
1.具有清晰的視覺層次。布局應(yīng)當(dāng)讓頁面各元素之間的關(guān)系和重要性一目了然。你可以通過適當(dāng)使用下列屬性來實現(xiàn)視覺層次：
焦點：指用戶首先關(guān)注的區(qū)域。形式上被賦予焦點屬性的UI元素一定要表達(dá)重要的內(nèi)容。
視覺流：指用戶關(guān)注區(qū)域的順序。可以根據(jù)任務(wù)邏輯和用戶的瀏覽習(xí)慣來設(shè)計恰當(dāng)?shù)囊曈X流。好的視覺流應(yīng)該清晰、合理、順暢、自然。
關(guān)聯(lián)：在邏輯上相關(guān)的UI元素應(yīng)具有清晰的視覺關(guān)系。
錯誤：
邏輯上相關(guān)的UI元素在空間上被分隔，且沒有明顯的視覺關(guān)聯(lián)。
對齊：使頁面工整，信息呈現(xiàn)有序，便于用戶掃視。
錯誤：
沒有對齊影響了頁面效果且不便于用戶掃視。不要因為功能需要和對更限情況的顧慮而輕易犧牲掉頁面的視覺展現(xiàn)。
強(qiáng)調(diào)：可以根據(jù)UI元素間的相對重要程度進(jìn)行強(qiáng)調(diào)。
2.針對用戶的閱讀模式來設(shè)計布局。
大部分人的閱讀習(xí)慣是從左向右，至上而下。
閱讀分為沉浸式閱讀（immersive reading）和掃視（scanning），前者的目的在于理解，后者在于定位。
瀏覽網(wǎng)站時，用戶不會沉浸在UI本身，而是沉浸在他們的目標(biāo)任務(wù)中，因此掃視是更常使用的閱讀模式。用戶只在確信必要時才仔細(xì)閱讀大量文本。
針對掃視的布局設(shè)計可以適當(dāng)強(qiáng)調(diào)主要的UI元素，弱化次要的。包括：
1）將主UI元素放在掃視路徑上。
2）避免將重要信息放在左下角或者頁面底端或者需要滾動很多的控件上。
3）考慮使用漸進(jìn)展開方式來隱藏次要的UI元素。
4）將任務(wù)相關(guān)的重要信息要直接表現(xiàn)在控件上。用戶更傾向于關(guān)注交互控件上的標(biāo)簽，而不是輔助型的靜態(tài)文本。
錯誤：
用戶必須閱讀輔助型文本后才能明確“確定”按鈕的作用。
正確：
直接將按鈕的作用描述作為控件標(biāo)簽，便于用戶理解。
5）不要展示大段文本，去除不必要的文本。多文本時格式化展示。
注：常規(guī)模式也存在例外。眼動議實驗指出，真實用戶的行為很沒有規(guī)律。此模式的目的在于幫助你做出更好的決定，而不是精準(zhǔn)的描述用戶行為。
3.合理利用頁面空間。
保持頁面的視覺平衡。避免擁擠和對空間的浪費。
確保關(guān)鍵數(shù)據(jù)沒有被截斷，除非數(shù)據(jù)特別長。
錯誤：
邏輯上相關(guān)的UI元素在空間上被分隔，且沒有明顯的視覺關(guān)聯(lián)。
控件的尺寸和間距恰當(dāng)，沒有不必要的滾動。一個任務(wù)盡量在一屏內(nèi)完成。
實際情況中，我們用戶的頁面空間要小于屏幕分辨率，它會因各種因素而壓縮，如：非全屏操作（彈出窗口和對比瀏覽），瀏覽器本身及各種輔助欄對屏幕的占用等，設(shè)計中要考慮這些情況。
4.不要讓布局本身成為突出的UI元素，保持視覺簡潔（visual simplicity）。
減少內(nèi)容和展現(xiàn)上的嵌套層級。
減少控件不同尺寸的數(shù)量，例如，在界面上只使用一兩種按鈕寬度。
采用輕量級的分組和分割方式，可以用布局本身和分隔符代替分組框。
使用盡量少的對齊線。
5.選擇與頁面類型相匹配的版式。在設(shè)計之初，應(yīng)充分考慮頁面承載的內(nèi)容、功能和屬性，繼而選擇適合該頁面的版式。不合適的版式會造成用戶的閱讀困擾，降低任務(wù)的完成效率。
標(biāo)準(zhǔn)和規(guī)范：
1.柵格化：
我們所說的柵格化是指在網(wǎng)頁設(shè)計工作中對柵格系統(tǒng)的建立和應(yīng)用。網(wǎng)頁柵格系統(tǒng)來源于平面柵格系統(tǒng)，它以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。
柵格化可以使信息呈現(xiàn)工整簡潔、美觀易讀，降低頁面開發(fā)和運維成本。它結(jié)構(gòu)變化相對靈活，擴(kuò)展性強(qiáng)。
2.以8px為橫向柵格單位：
以8px為橫向柵格單位，頁面所有元素寬度都可以是2的倍數(shù)，包括圖片和版塊寬度，這樣可以在一定程度上加快頁面（特別是對于J-PEG圖片）的渲染速度（基于計算機(jī)內(nèi)部二進(jìn)制的運算機(jī)制）。其在擴(kuò)展和兼容性上也有一定優(yōu)勢。
在阿里巴巴中文站中，布局間距的更小單位為8px，布局區(qū)塊采用32px（8px*4）和24（8px*3）兩種粒度單位，分別組成以下兩種可實現(xiàn)的柵格系統(tǒng)：
32px：適用于市場、社區(qū)等相關(guān)頁面
24px：適用于旺鋪相關(guān)頁面
3.頁面定寬：
自適應(yīng)可以根據(jù)瀏覽器顯示情況自動調(diào)整頁面寬度，但是因為用戶水平方向的聚焦范圍有限，所以當(dāng)頁面過寬時，用戶的瀏覽和操作成本會增加；而當(dāng)頁面過窄時（如用戶同時開啟兩個瀏覽器對比查看商品搜索結(jié)果），自適應(yīng)則會導(dǎo)致布局變形和內(nèi)容錯亂。給頁面規(guī)定寬度可以避免這些問題。
在綜合考慮當(dāng)下主流分辨率情況、瀏覽器外觀對顯示空間的占用、人機(jī)工程學(xué)中對水平視角和聚焦范圍的規(guī)定以及8px單位等多種因素后，我們認(rèn)為960px是一個相對更加合理的頁面寬度。在阿里巴巴中文網(wǎng)站中，推薦使用定寬960px的頁面，去除左右各4px的邊距，中間的可視寬度為952px。
只有考慮到以上這些因素，才能更好地進(jìn)行網(wǎng)頁設(shè)計，那樣設(shè)計出的網(wǎng)頁也會更漂亮。網(wǎng)頁布局在網(wǎng)頁制作中是非常重要的一環(huán)。大家應(yīng)多了解它。
細(xì)說網(wǎng)頁布局，希望對您有用。
