談?wù)刉eb界面的三種布局

    談?wù)?a href="http://afrimangol.com/web/" target="_self">Web界面的三種布局。社會(huì)心理學(xué)中有個(gè)概念：首因效應(yīng)。解釋為個(gè)體在社會(huì)認(rèn)知過(guò)程中，通過(guò)“第一印象”最先輸入的信息對(duì)客體以后的認(rèn)知產(chǎn)生影響，即我們常說(shuō)的，第一印象決定最終印象。在人和人的交往中，首因效應(yīng)起到了重要作用，在用戶(hù)與網(wǎng)站或者其它互聯(lián)網(wǎng)產(chǎn)品的交互中，首因效應(yīng)同樣影響巨大。

    以Web端為例，對(duì)于初次瀏覽的網(wǎng)站，如果界面排列有序，顏色搭配得當(dāng)，頁(yè)面的重要、次要內(nèi)容清晰可見(jiàn)，那么用戶(hù)至少不會(huì)產(chǎn)生厭惡感，也有更大的意愿繼續(xù)瀏覽，進(jìn)而進(jìn)行深入閱讀、注冊(cè)等操作；反之，如果整個(gè)頁(yè)面混亂不堪，毫無(wú)重點(diǎn)，如同二手市場(chǎng)，那么用戶(hù)第一反應(yīng)就是這個(gè)網(wǎng)站有些low，頓時(shí)厭煩感爆棚，即使網(wǎng)站的內(nèi)容質(zhì)量再高，恐怕用戶(hù)也不愿繼續(xù)瀏覽，用戶(hù)甚至不會(huì)關(guān)心網(wǎng)站的內(nèi)容和信息，只想趁早離開(kāi)。網(wǎng)站內(nèi)容的優(yōu)劣，PM們無(wú)法把控，但如果是因?yàn)榻缑娌季趾皖伾钆涞膯?wèn)題，讓用戶(hù)沒(méi)能留下來(lái)，那我們就要好好反思了。

    因此我們應(yīng)該更好地利用首因效應(yīng)，重視起能夠給用戶(hù)留下“第一印象”的界面布局，設(shè)計(jì)出符合用戶(hù)使用和視覺(jué)習(xí)慣的界面，給用戶(hù)提供盡可能無(wú)壓力的、舒適的使用環(huán)境。

    Web界面布局就是指網(wǎng)頁(yè)的整體結(jié)構(gòu)分布。界面布局的目標(biāo)是提高用戶(hù)興趣、方便用戶(hù)閱讀。過(guò)于花哨的頁(yè)面可能會(huì)提高用戶(hù)興趣，但是也會(huì)影響用戶(hù)瀏覽網(wǎng)站的視覺(jué)流，甚至成為用戶(hù)使用產(chǎn)品的阻礙，因此要在視覺(jué)美觀(guān)和頁(yè)面內(nèi)容中找到一個(gè)平衡點(diǎn)。按照分欄方式的不同，可以將網(wǎng)站的界面布局分為一欄式、兩欄式和三欄式。

    一欄式布局

    Jesse James Garrett在《用戶(hù)體驗(yàn)要素》中說(shuō)，成功的界面設(shè)計(jì)時(shí)那些能讓用戶(hù)一眼就看到的“最重要的東西”的界面設(shè)計(jì)。一欄式布局顯然是最容易讓用戶(hù)關(guān)注到重要東西的布局方式。

    一欄式布局，顧名思義，就是整個(gè)頁(yè)面都為信息展示區(qū)，其優(yōu)點(diǎn)和缺點(diǎn)都很突出。

    優(yōu)點(diǎn)：

    結(jié)構(gòu)簡(jiǎn)單，頁(yè)面清楚，不會(huì)給用戶(hù)過(guò)多的視覺(jué)壓力，用戶(hù)視覺(jué)流清晰；

    信息展示集中，頁(yè)面的重點(diǎn)突出，用戶(hù)能夠迅速找到網(wǎng)頁(yè)的重點(diǎn)內(nèi)容。

    缺點(diǎn)：

    排版方式受到局限，頁(yè)面可承載的信息量小。

    由于這種布局方式收到排版和信息量的限制，因此適用于信息量小、目的單一的網(wǎng)站，主要用于企業(yè)網(wǎng)站的首頁(yè)、搜索引擎首頁(yè)、表單填寫(xiě)頁(yè)面。

    企業(yè)網(wǎng)站首頁(yè)

    企業(yè)網(wǎng)站的目的是介紹、宣傳企業(yè)產(chǎn)品與企業(yè)文化。一欄式首頁(yè)通過(guò)大篇幅的圖片、Flash或者宣傳視頻，能夠迅速抓取用戶(hù)眼球，吸引用戶(hù)注意，更好地起到企業(yè)宣傳的作用，比如寶馬首頁(yè)。

    一欄式布局應(yīng)用在企業(yè)首頁(yè)上時(shí)，要注意兩點(diǎn)：

    需要利用大幅的精美圖片或者視頻等，造成強(qiáng)烈的視覺(jué)沖擊力，給用戶(hù)留下深刻印象，提升品牌效應(yīng)，留住用戶(hù)進(jìn)一步瀏覽；

    由于一欄式可展示的信息量有限，所以應(yīng)在首頁(yè)添加導(dǎo)航或者重要鏈接的入口，引導(dǎo)用戶(hù)深度瀏覽，起到入口和信息分流的作用。

    搜索引擎首頁(yè)

    用戶(hù)使用搜索引擎的需求明確且單一，只是搜索目標(biāo)詞的相關(guān)內(nèi)容，因此搜索引擎首頁(yè)要為用戶(hù)提供便捷、迅速的入口，盡量減少非搜索相關(guān)因素對(duì)用戶(hù)的影響。故常見(jiàn)的搜索引擎首頁(yè)，在設(shè)計(jì)上以簡(jiǎn)單、清爽為主，沒(méi)有大幅圖片或者復(fù)雜設(shè)計(jì)，而且突出搜索框和按鈕。如百度、Google首頁(yè)以及一些網(wǎng)站的站內(nèi)搜索頁(yè)。

    表單填寫(xiě)頁(yè)

    在表單頁(yè)，用戶(hù)的需求同樣明確且單一，且用戶(hù)需要盡快地填寫(xiě)完成表單，不讓操作本身占據(jù)過(guò)多時(shí)間，因此表單填寫(xiě)頁(yè)和搜索引擎頁(yè)對(duì)設(shè)計(jì)的要求基本相同，以簡(jiǎn)單、整潔為主。下圖為京東的注冊(cè)頁(yè)。

    這里要說(shuō)一下知乎的網(wǎng)頁(yè)設(shè)計(jì)，對(duì)于未登錄用戶(hù)，知乎的首頁(yè)即為注冊(cè)/登錄頁(yè)。這樣設(shè)計(jì)的好處之一是引導(dǎo)用戶(hù)注冊(cè)，好處之二是首頁(yè)顯得清爽、專(zhuān)業(yè)。但是這樣設(shè)計(jì)的同時(shí)，就意味著未登錄用戶(hù)無(wú)法以游客的身份瀏覽內(nèi)容，給用戶(hù)造成了一定的壓力。然而換句話(huà)說(shuō)，這樣也對(duì)用戶(hù)進(jìn)行了篩選，提高了使用壁壘，便于營(yíng)造社區(qū)氣氛。所以這個(gè)首頁(yè)和注冊(cè)/登錄合為一體的設(shè)計(jì)，有利有弊，值得借鑒與學(xué)習(xí)。

    首頁(yè)即為注冊(cè)/登錄頁(yè)的設(shè)計(jì)在一些存在用戶(hù)準(zhǔn)入門(mén)檻的網(wǎng)站中，較為常見(jiàn)，典型例子為pt類(lèi)網(wǎng)站。

    兩欄式布局

    兩欄式布局綜合了一欄式和三欄式的優(yōu)缺點(diǎn)，是一種折中的界面布局方式。相比于一欄式，其可以容納更多內(nèi)容，但是不具備視覺(jué)沖擊力 ；相比于三欄式，其信息不至于過(guò)度擁擠和凌亂，但不具備超大內(nèi)容量的優(yōu)點(diǎn)。

    兩欄式布局可分為左窄右寬式、左寬右窄式和左右均等式，每種方式的頁(yè)面重點(diǎn)和視覺(jué)流都有所不同，其所適用的頁(yè)面類(lèi)型也不盡相同。

    左窄右寬式

    在設(shè)計(jì)上，左側(cè)較窄，放置導(dǎo)航信息或者其他次要信息，右邊較寬，為信息展示區(qū)，放置主要內(nèi)容。因此網(wǎng)頁(yè)應(yīng)利用左側(cè)的導(dǎo)航信息引導(dǎo)用戶(hù)瀏覽網(wǎng)頁(yè)，用戶(hù)的視覺(jué)流也相應(yīng)地從導(dǎo)航開(kāi)始，進(jìn)而瀏覽頁(yè)面內(nèi)容。

    這種設(shè)計(jì)方式，適合于內(nèi)容豐富、導(dǎo)航清楚的網(wǎng)頁(yè)，拉勾網(wǎng)的首頁(yè)和163郵箱的界面設(shè)計(jì)即為此種。

    此外，對(duì)于左窄右寬式布局，左側(cè)也可能放置推薦式導(dǎo)航和其他次要信息，比如京東的商品詳情頁(yè)。

    左寬右窄式

    在設(shè)計(jì)上，左側(cè)較寬，放置主要內(nèi)容，右邊較窄，放置次要內(nèi)容，大多為輔助導(dǎo)航或者廣告信息。這種布局方式更突出用戶(hù)當(dāng)前瀏覽的內(nèi)容，引導(dǎo)用戶(hù)將視線(xiàn)聚焦于當(dāng)前內(nèi)容上。這種界面布局方式，常見(jiàn)于一些以?xún)?nèi)容為主導(dǎo)的網(wǎng)站，比如百度的搜索結(jié)果頁(yè)，知乎的幾乎全部頁(yè)面。

    左右均等式

    在設(shè)計(jì)上，左右兩側(cè)均為信息展示區(qū)，在尺寸上，兩側(cè)的比例相差較小，甚至完全一致，常見(jiàn)于一些不出現(xiàn)內(nèi)容主次的網(wǎng)站。

    這種設(shè)計(jì)方式較極端，在這類(lèi)網(wǎng)頁(yè)中，用戶(hù)不易發(fā)現(xiàn)重點(diǎn)內(nèi)容，視覺(jué)流也不夠清晰。貓撲采用的是這種布局方式，其將頁(yè)面左右兩側(cè)分別設(shè)計(jì)為獨(dú)立的分區(qū)，不同分區(qū)可以分別進(jìn)行滾動(dòng)、瀏覽等操作。

    綜上，兩欄式布局具有折中、沒(méi)有鮮明缺點(diǎn)的特點(diǎn)，也是目前最常用的布局方式?？偨Y(jié)三種兩欄式布局的特點(diǎn)和視覺(jué)流。

    三欄式布局

    三欄式布局是最為復(fù)雜的界面布局方式。

    優(yōu)點(diǎn)：

    可以盡量多地顯示出信息內(nèi)容，盡可能地增加信息的密集度。

    缺點(diǎn)：

    會(huì)造成頁(yè)面上信息的擁擠，增加用戶(hù)找到目標(biāo)信息的時(shí)間成本，降低網(wǎng)站內(nèi)容的可控性。

    三欄式布局主要分為中間寬、兩邊窄，和兩欄寬、一欄窄。即使選擇某一種， 在設(shè)計(jì)上，三欄的寬度也并不是一成不變的，應(yīng)根據(jù)導(dǎo)航與內(nèi)容的比重調(diào)整寬度比例。

    中間寬、兩邊窄

    這種布局方式中，中間欄的寬度較大，在視覺(jué)比例上相對(duì)突出，更容易抓住眼球，因此用戶(hù)默認(rèn)中間為重點(diǎn)信息，兩邊的內(nèi)容為次要信息或者廣告；這種布局方式，引導(dǎo)用戶(hù)的視覺(jué)流聚焦于中間，然后向兩側(cè)移動(dòng)。這種界面布局的典型應(yīng)用就是新浪微博。

    由于新浪微博內(nèi)容龐雜且細(xì)分的類(lèi)目極多，故其首頁(yè)有兩個(gè)導(dǎo)航區(qū)，左側(cè)為主導(dǎo)航區(qū)，應(yīng)用Tab導(dǎo)航，右側(cè)為輔助導(dǎo)航區(qū)，應(yīng)用推薦位導(dǎo)航。

    兩欄寬、一欄窄

    相比于中間寬、兩邊窄的布局方式，這種方式有著能夠展示更多的重點(diǎn)內(nèi)容，提高頁(yè)面利用率的優(yōu)點(diǎn)，但同時(shí)，也不如上一種方式突出和集中，用戶(hù)視覺(jué)流易分散。這種界面布局方式常見(jiàn)于信息量巨大的門(mén)戶(hù)網(wǎng)站的首頁(yè)設(shè)計(jì)上，比如騰訊首頁(yè)。

    混合式布局

    現(xiàn)在很多信息極豐富的大型網(wǎng)站，尤其是電商網(wǎng)站，其界面布局方式已經(jīng)不單是以上中的某一種，而是幾種布局方式的結(jié)合，以京東首頁(yè)為例，進(jìn)入頁(yè)面時(shí)，主界面為三欄式，從左至右依次為：列表導(dǎo)航區(qū)、信息展示區(qū)和推薦位導(dǎo)航區(qū)，而下面的商品展示和廣告位，則采用一欄式的界面布局方式。這種多布局方式結(jié)合的頁(yè)面設(shè)計(jì)，既利用導(dǎo)航引導(dǎo)了用戶(hù)的視覺(jué)流、又利用精美圖片吸引用戶(hù)注意，而且保證了頁(yè)面空間的充分利用，可以說(shuō)是比較合理、高效的界面設(shè)計(jì)。

    最后還要說(shuō)明的是，不論哪種Web界面布局方式，其都是為信息展示服務(wù)的。無(wú)論是導(dǎo)航引導(dǎo)還是內(nèi)容引導(dǎo)，無(wú)論是一欄還是多欄，最終的落腳點(diǎn)，都是幫助用戶(hù)盡快地看到最希望看到的內(nèi)容。說(shuō)到底還是那句話(huà)：設(shè)計(jì)是為用戶(hù)服務(wù)的，而不是為設(shè)計(jì)本身。