• 
• 
• 
• 
• 
• 
• 

知識(shí)普及 ? 如何設(shè)計(jì)有效的布局？

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

奈薇網(wǎng)頁(yè)設(shè)計(jì) 于2019-07-24 11:31發(fā)表 閱讀次數(shù) 2312次

該[指南]版權(quán)以及最終解釋權(quán)為作者阿里巴巴（中文站）用戶體驗(yàn)設(shè)計(jì)部李龍（李小帥）所有，轉(zhuǎn)載請(qǐng)注明出處。 　　什么是布局？ 　　“布局”是指頁(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)使用下列屬性來(lái)實(shí)現(xiàn)視覺(jué)層次： 　　焦點(diǎn)：指用戶首先關(guān)注的區(qū)域。形式上被賦予焦點(diǎn)屬性的UI元素一定要表達(dá)重要的內(nèi)容。 　　視覺(jué)流：指用戶關(guān)注區(qū)域的順序?？梢愿鶕?jù)任務(wù)邏輯和用戶的瀏覽習(xí)慣來(lái)設(shè)計(jì)恰當(dāng)?shù)囊曈X(jué)流。好的視覺(jué)流應(yīng)該清晰、合理、順暢、自然。 　　關(guān)聯(lián)：在邏輯上相關(guān)的UI元素應(yīng)具有清晰的視覺(jué)關(guān)系。 　　錯(cuò)誤： 　　邏輯上相關(guān)的UI元素在空間上被分隔，且沒(méi)有明顯的視覺(jué)關(guān)聯(lián)。 　　對(duì)齊：使頁(yè)面工整，信息呈現(xiàn)有序，便于用戶掃視。 　　錯(cuò)誤： 　　沒(méi)有對(duì)齊影響了頁(yè)面效果且不便于用戶掃視。不要因?yàn)楣δ苄枰蛯?duì)極限情況的顧慮而輕易犧牲掉頁(yè)面的視覺(jué)展現(xiàn)。 　　強(qiáng)調(diào)：可以根據(jù)UI元素間的相對(duì)重要程度進(jìn)行強(qiáng)調(diào)。 　　2.針對(duì)用戶的閱讀模式來(lái)設(shè)計(jì)布局。 　　大部分人的閱讀習(xí)慣是從左向右，至上而下。 　　閱讀分為沉浸式閱讀（immersivereading）和掃視（scanning），前者的目的在于理解，后者在于定位。 　　瀏覽網(wǎng)站時(shí)，用戶不會(huì)沉浸在UI本身，而是沉浸在他們的目標(biāo)任務(wù)中，因此掃視是最常使用的閱讀模式。用戶只在確信必要時(shí)才仔細(xì)閱讀大量文本。 　　針對(duì)掃視的布局設(shè)計(jì)可以適當(dāng)強(qiáng)調(diào)主要的UI元素，弱化次要的。包括： 　　1)將主UI元素放在掃視路徑上。 　　2)避免將重要信息放在左下角或者頁(yè)面底端或者需要滾動(dòng)很多的控件上。 　　3)考慮使用漸進(jìn)展開(kāi)方式來(lái)隱藏次要的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í)用戶的行為很沒(méi)有規(guī)律。此模式的目的在于幫助你做出更好的決定，而不是精準(zhǔn)的描述用戶行為。 　　3.合理利用頁(yè)面空間。 　　保持頁(yè)面的視覺(jué)平衡。避免擁擠和對(duì)空間的浪費(fèi)。 　　確保關(guān)鍵數(shù)據(jù)沒(méi)有被截?cái)?，除非?shù)據(jù)特別長(zhǎng)。 　　錯(cuò)誤： 　　有效空間沒(méi)有被充分利用，從而導(dǎo)致多條關(guān)鍵數(shù)據(jù)被截?cái)唷?br /> 　　控件的尺寸和間距恰當(dāng)，沒(méi)有不必要的滾動(dòng)。一個(gè)任務(wù)盡量在一屏內(nèi)完成。 　　實(shí)際情況中，我們用戶的頁(yè)面空間要小于屏幕分辨率，它會(huì)因各種因素而壓縮，如：非全屏操作（彈出窗口和對(duì)比瀏覽），瀏覽器本身及各種輔助欄對(duì)屏幕的占用等，設(shè)計(jì)中要考慮這些情況。 　　4.不要讓布局本身成為突出的UI元素，保持視覺(jué)簡(jiǎn)潔（visualsimplicity）。 　　減少內(nèi)容和展現(xiàn)上的嵌套層級(jí)。 　　減少控件不同尺寸的數(shù)量，例如，在界面上只使用一兩種按鈕寬度。 　　采用輕量級(jí)的分組和分割方式，可以用布局本身和分隔符代替分組框。 　　使用盡量少的對(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è)面開(kāi)發(fā)和運(yùn)維成本。它結(jié)構(gòu)變化相對(duì)靈活，擴(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)頁(yè)面 　　24px:適用于旺鋪相關(guān)頁(yè)面 　　3.頁(yè)面定寬： 　　自適應(yīng)可以根據(jù)瀏覽器顯示情況自動(dòng)調(diào)整頁(yè)面寬度，但是因?yàn)橛脩羲椒较虻木劢狗秶邢?，所以?dāng)頁(yè)面過(guò)寬時(shí)，用戶的瀏覽和操作成本會(huì)增加；而當(dāng)頁(yè)面過(guò)窄時(shí)（如用戶同時(shí)開(kāi)啟兩個(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是一個(gè)相對(duì)更加合理的頁(yè)面寬度。在阿里巴巴中文網(wǎng)站中，推薦使用定寬960px的頁(yè)面，去除左右各4px的邊距，中間的可視寬度為952px。

如何設(shè)計(jì)有效的布局？相關(guān)標(biāo)簽：申請(qǐng)網(wǎng)站，網(wǎng)絡(luò)公司，企業(yè)做網(wǎng)站，網(wǎng)站改版

相關(guān)熱點(diǎn)推薦

TDK是什么？有什么作 微信為什么這么人在用 網(wǎng)站排名第三頁(yè)不到首頁(yè) 青島網(wǎng)站設(shè)計(jì)中關(guān)于al 好設(shè)計(jì)應(yīng)該是平凡的設(shè)計(jì) 網(wǎng)站LOGO簡(jiǎn)論 網(wǎng)頁(yè)布局設(shè)計(jì)基礎(chǔ) 優(yōu)秀網(wǎng)站的五大特點(diǎn) 新站快速推廣經(jīng)驗(yàn)，百度 為中文而設(shè)計(jì)的文本框 關(guān)于網(wǎng)站優(yōu)化五大技巧 如何進(jìn)行網(wǎng)站首頁(yè)改版 web設(shè)計(jì)師可以走得更 專業(yè)設(shè)計(jì)網(wǎng)站的公司哪里 青島網(wǎng)站設(shè)計(jì)的幾點(diǎn)知識(shí) 青島網(wǎng)站制作哪家強(qiáng) 交互設(shè)計(jì)的8項(xiàng)黃金法則 設(shè)計(jì)良好網(wǎng)頁(yè)的4項(xiàng)原則 公司網(wǎng)站制作需要注意的 如何讓你的網(wǎng)站更有吸引 泛泛而談界面中的斑馬紋 網(wǎng)絡(luò)營(yíng)銷的五個(gè)階段 青島網(wǎng)站設(shè)計(jì)成功要素 小型企業(yè)網(wǎng)站維護(hù) 奈薇建站網(wǎng)科技2016 國(guó)內(nèi)網(wǎng)頁(yè)設(shè)計(jì)經(jīng)驗(yàn)談 微信營(yíng)銷推廣的特性-奈 什么是自助建站？ 如何從營(yíng)銷的角度策劃建 建網(wǎng)站必備六步 基本搜索引擎優(yōu)化策略 新人做站之網(wǎng)站定位與網(wǎng) Web頁(yè)面設(shè)計(jì)原則 個(gè)人網(wǎng)站站長(zhǎng)看過(guò)來(lái)網(wǎng)站 網(wǎng)站設(shè)計(jì)中的簡(jiǎn)潔與簡(jiǎn)單 以“產(chǎn)品”思維搭建網(wǎng)站 關(guān)于VIP用戶研究與產(chǎn) 營(yíng)銷型網(wǎng)站優(yōu)化需要注意 如何制作友情連接？做友

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開(kāi)發(fā)區(qū)信息港 山東在線門(mén)戶