• 
• 
• 
• 
• 
• 
• 

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

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

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

該[指南]版權(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)簽：網(wǎng)站制作公司，網(wǎng)頁(yè)設(shè)計(jì)，企業(yè)網(wǎng)站建設(shè)，網(wǎng)頁(yè)設(shè)計(jì)

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

用戶體驗(yàn)中溝通的技巧 如何計(jì)算搜索引擎關(guān)鍵詞 網(wǎng)頁(yè)設(shè)計(jì)中的版式原理- 做網(wǎng)站的一些定律 為什么網(wǎng)站制作價(jià)格越來(lái) 網(wǎng)頁(yè)配色密碼 響應(yīng)式網(wǎng)頁(yè)你了解嗎？ 如何創(chuàng)建一個(gè)用戶體驗(yàn)良 店鋪推廣之SEO入門(mén) 寫(xiě)給在職設(shè)計(jì)師們 分類目錄 一個(gè)好的網(wǎng)站應(yīng)該同時(shí)具 網(wǎng)頁(yè)設(shè)計(jì)制作應(yīng)注意的問(wèn) 網(wǎng)頁(yè)界面設(shè)計(jì)教程四：色 化妝品的網(wǎng)站策劃分析 網(wǎng)站設(shè)計(jì)如何做好風(fēng)格統(tǒng) 網(wǎng)站重建怎么保護(hù)已有的 頻繁改版引發(fā)的合意性思 迅速提高網(wǎng)站流量的方法 企業(yè)建站誤區(qū) 防止IE主頁(yè)被修改的辦 WEB設(shè)計(jì)經(jīng)驗(yàn) 網(wǎng)站推廣技巧之鏈接策略 如何做出創(chuàng)意設(shè)計(jì)的網(wǎng)站 網(wǎng)頁(yè)的版式設(shè)計(jì)—文字的 平度網(wǎng)站設(shè)計(jì)公司哪家好 搜索引擎的算法 一個(gè)網(wǎng)站，5個(gè)目標(biāo) 軟件與網(wǎng)站設(shè)計(jì)的區(qū)別 如何挑選專業(yè)的網(wǎng)站建設(shè) 個(gè)人主頁(yè)作用 生動(dòng)的設(shè)計(jì) 如何處理和把握網(wǎng)頁(yè)設(shè)計(jì) 中國(guó)中小企業(yè)網(wǎng)站建設(shè)規(guī) 網(wǎng)站建設(shè)時(shí)，設(shè)計(jì)首頁(yè)時(shí) 專業(yè)網(wǎng)站建設(shè)準(zhǔn)則

奈薇建站網(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)戶