導讀:設計是為用戶(hù)服務(wù)的，而不是為設計本身。

正文

社會(huì )心理學(xué)中有個(gè)概念:首因效應。解釋為個(gè)體在社會(huì )認知過(guò)程中，通過(guò)“*印象”*輸入的信息對客體以后的認知產(chǎn)生影響，即我們常說(shuō)的，*印象決定最終印象。在人和人的交往中，首因效應起到了重要作用，在用戶(hù)與網(wǎng)站或者其它互聯(lián)網(wǎng)產(chǎn)品的交互中，首因效應同樣影響巨大。

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

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

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

一欄式布局

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

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

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

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

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

缺點(diǎn):

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

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

兩欄式布局

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

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

左窄右寬式

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

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

三欄式布局

三欄式布局是最為復雜的界面布局方式。

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

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

缺點(diǎn):

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

三欄式布局主要分為中間寬、兩邊窄，和兩欄寬、一欄窄。即使選擇某一種， 在設計上，三欄的寬度也并不是一成不變的，應根據導航與內容的比重調整寬度比例。

中間寬、兩邊窄

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

兩欄寬、一欄窄

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

混合式布局

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

*還要說(shuō)明的是，不論哪種Web界面布局方式，其都是為信息展示服務(wù)的。無(wú)論是導航引導還是內容引導，無(wú)論是一欄還是多欄，最終的落腳點(diǎn)，都是幫助用戶(hù)盡快地看到最希望看到的內容。說(shuō)到底還是那句話(huà):設計是為用戶(hù)服務(wù)的，而不是為設計本身。南通青鳥(niǎo)IT教育UI培訓班感謝您的關(guān)注！