說(shuō)到網(wǎng)頁(yè)設(shè)計(jì)就不得不提一重要的因素-布局.是的,一恰到好處的的布局能使頁(yè)面內(nèi)容變得工整,增加用戶的視覺(jué)領(lǐng)會(huì),也可幫助用戶快速的找到他們需要獲得的內(nèi)容,增加工作效率. 什么是布局?

“布局”是指頁(yè)面內(nèi)容的尺寸、間距及地方。有效的布局對(duì)于幫助用戶快速找到他們需要的內(nèi)容至關(guān)重要，并可在結(jié)構(gòu)外觀上令用戶感到舒適。

怎么樣設(shè)計(jì)有效的布局?

1. 具有清楚的視覺(jué)層次。布局應(yīng)當(dāng)讓頁(yè)面各元素之間的關(guān)系與重要性一目了然。你可通過(guò)恰當(dāng)運(yùn)用下列屬性來(lái)實(shí)現(xiàn)視覺(jué)層次：

焦點(diǎn)：指用戶第一步注意的區(qū)域。形式上被賦予焦點(diǎn)屬性的UI元素一定要表達(dá)重要的內(nèi)容。 視覺(jué)流：指用戶注意區(qū)域的順序。可依照任務(wù)邏輯與用戶的瀏覽習(xí)慣來(lái)設(shè)計(jì)恰當(dāng)?shù)囊曈X(jué)流。好的視覺(jué)流應(yīng)該清楚、合理、順暢、自然。

相關(guān)：在邏輯上關(guān)聯(lián)的UI元素應(yīng)具有清楚的視覺(jué)關(guān)系。 錯(cuò)誤：

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

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

沒(méi)有對(duì)齊影響了頁(yè)面效果且不便于用戶掃視。不能由于功能想要與對(duì)極限情況的顧慮而容易犧牲掉頁(yè)面的視覺(jué)展現(xiàn)。

強(qiáng)調(diào)：可依照UI元素間的比較重要程度執(zhí)行強(qiáng)調(diào)。 2.針對(duì)用戶的閱讀模式來(lái)設(shè)計(jì)布局。

大部分人的閱讀習(xí)慣是從左朝右，至上而下。 閱讀分為沉浸式閱讀(immersive reading)與掃視(scanning)，前者的目的在于了解，后者在于定位。

瀏覽網(wǎng)站時(shí)，用戶不會(huì)沉浸在UI本身，而是沉浸在他們的目標(biāo)任務(wù)中，所以掃視是最常運(yùn)用的閱讀模式。用戶只在確信必要時(shí)才細(xì)心閱讀大量文本。 針對(duì)掃視的布局設(shè)計(jì)可恰當(dāng)強(qiáng)調(diào)主要的UI元素，弱化次要的。包括： 1)把主UI元素放到掃視路徑上。

2)避免把重要信息放到左下角或頁(yè)面底端或想要滾動(dòng)很多的控件上。

3)考慮運(yùn)用漸進(jìn)展開方式來(lái)隱蔽次要的UI元素。

4)把任務(wù)關(guān)聯(lián)的重要信息要徑直表此時(shí)控件上。用戶更傾向于注意交互控件上的標(biāo)簽，而不是輔助型的靜態(tài)文本。

錯(cuò)誤：

用戶必須閱讀輔助型文本后才能明確“確認(rèn)”按鈕的作用。

準(zhǔn)確：

徑直把按鈕的作用說(shuō)明作為控件標(biāo)簽，便于用戶了解。

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

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

3.合理運(yùn)用頁(yè)面空間。

保持頁(yè)面的視覺(jué)平衡。避免擁擠與對(duì)空間的浪費(fèi)。 確保重點(diǎn)數(shù)據(jù)沒(méi)有被截?cái)啵菙?shù)據(jù)特殊長(zhǎng)。 錯(cuò)誤：

有效空間沒(méi)有被充分運(yùn)用，從而導(dǎo)致多條重點(diǎn)數(shù)據(jù)被截?cái)唷?br />
控件的尺寸與間距恰當(dāng)，沒(méi)有不必要的滾動(dòng)。一任務(wù)盡量在一屏內(nèi)做完。 實(shí)際情況中，我們用戶的頁(yè)面空間要小于屏幕分辨率，它會(huì)因各種因素而壓縮，如：非全屏操作(彈出窗口與對(duì)比瀏覽)，瀏覽器本身及各種輔助欄對(duì)屏幕的占用等，設(shè)計(jì)中要考慮這些情況。

4.不能讓布局本身成為突出的UI元素，保持視覺(jué)簡(jiǎn)潔(visual simplicity)。

減少內(nèi)容與展現(xiàn)上的嵌套層級(jí)。 減少控件不同尺寸的數(shù)量，例如，在界面上只運(yùn)用一兩種按鈕寬度。 采用輕量級(jí)的分組與分割方式，可用布局本身與分隔符代替分組框。 運(yùn)用盡量少的對(duì)齊線。 5.選取和頁(yè)面類型相匹配的版式。在設(shè)計(jì)之初，應(yīng)充分考慮頁(yè)面承載的內(nèi)容、功能與屬性，繼而選取合適該頁(yè)面的版式。不適合的版式會(huì)造成用戶的閱讀困擾，降低任務(wù)的做完效率。

標(biāo)準(zhǔn)與規(guī)范：

1.柵格化：

我們所說(shuō)的柵格化是指在網(wǎng)頁(yè)設(shè)計(jì)工作中對(duì)柵格系統(tǒng)的新建與應(yīng)用。網(wǎng)頁(yè)柵格系統(tǒng)來(lái)源于平面柵格系統(tǒng)，它以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)與規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布。 柵格化可使信息呈現(xiàn)工整簡(jiǎn)潔、美觀易讀，降低頁(yè)面開發(fā)與運(yùn)維成本。它結(jié)構(gòu)變化比較靈活，擴(kuò)展性強(qiáng)。 2.以8px為橫向柵格單位：

以8px為橫向柵格單位，頁(yè)面所有元素寬度都可是2的倍數(shù)，包括照片與版塊寬度，如此可在一定程度上加快頁(yè)面(特殊是對(duì)于J-PEG照片)的渲染速度(基于計(jì)算機(jī)內(nèi)部二進(jìn)制的運(yùn)算機(jī)制)。其在擴(kuò)展與兼容性上也有一定優(yōu)勢(shì)。 在阿里巴巴中文站中，布局間距的最小單位為8px，布局區(qū)塊采用32px(8px*4)與24(8px*3)兩種粒度單位，分別組成下面兩種可實(shí)現(xiàn)的柵格系統(tǒng)： 32px:適用于市場(chǎng)、社區(qū)等關(guān)聯(lián)頁(yè)面

24px:適用于旺鋪關(guān)聯(lián)頁(yè)面

3.頁(yè)面定寬：

自適應(yīng)可依照瀏覽器顯示情況主動(dòng)調(diào)節(jié)頁(yè)面寬度，可是由于用戶水平方向的聚焦范圍有限，因此當(dāng)頁(yè)面過(guò)寬時(shí)，用戶的瀏覽與操作成本會(huì)提高;而當(dāng)頁(yè)面 過(guò)窄時(shí)(如用戶同時(shí)開啟兩個(gè)瀏覽器對(duì)比觀察商品搜索結(jié)果)，自適應(yīng)則會(huì)導(dǎo)致布局變形與內(nèi)容錯(cuò)亂。給頁(yè)面規(guī)定寬度可避免這些問(wèn)題。 在綜合考慮當(dāng)下主流分辨率情況、瀏覽器外觀對(duì)顯示空間的占用、人機(jī)工程學(xué)中對(duì)水平視角與聚焦范圍的規(guī)定以及8px單位等幾種因素后，我們認(rèn)為 960px是一比較越加合理的頁(yè)面寬度。在阿里巴巴中文網(wǎng)站中，推薦運(yùn)用定寬960px的頁(yè)面，除去左右各4px的邊距，中間的可視寬度為952px

分享文章：網(wǎng)頁(yè)設(shè)計(jì)布局指南
文章來(lái)源：http://jinyejixie.com/news28/320078.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、微信小程序、網(wǎng)頁(yè)設(shè)計(jì)公司、動(dòng)態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)