從首因效應說起,談談Web界面的三種布局
設計是為用戶服務的,而不是為設計本身。
社會心理學中有個概念:首因效應。解釋為個體在社會認知過程中,通過“第一印象”最先輸入的信息對客體以后的認知產生影響,即我們常說的,第一印象決定最終印象。在人和人的交往中,首因效應起到了重要作用,在用戶與網站或者其它互聯網產品的交互中,首因效應同樣影響巨大。
以Web端為例,對于初次瀏覽的網站,如果界面排列有序,顏色搭配得當,頁面的重要、次要內容清晰可見,那么用戶至少不會產生厭惡感,也有更大的意愿繼續瀏覽,進而進行深入閱讀、注冊等操作;反之,如果整個頁面混亂不堪,毫無重點,如同二手市場,那么用戶第一反應就是這個網站有些low,頓時厭煩感爆棚,即使網站的內容質量再高,恐怕用戶也不愿繼續瀏覽,用戶甚至不會關心網站的內容和信息,只想趁早離開。網站內容的優劣,PM們無法把控,但如果是因為界面布局和顏色搭配的問題,讓用戶沒能留下來,那我們就要好好反思了。
因此我們應該更好地利用首因效應,重視起能夠給用戶留下“第一印象”的界面布局,設計出符合用戶使用和視覺習慣的界面,給用戶提供盡可能無壓力的、舒適的使用環境。
Web界面布局就是指網頁的整體結構分布。界面布局的目標是提高用戶興趣、方便用戶閱讀。過于花哨的頁面可能會提高用戶興趣,但是也會影響用戶瀏覽網站的視覺流,甚至成為用戶使用產品的阻礙,因此要在視覺美觀和頁面內容中找到一個平衡點。按照分欄方式的不同,可以將網站的界面布局分為一欄式、兩欄式和三欄式。
一欄式布局
Jesse James Garrett在《用戶體驗要素》中說,成功的界面設計時那些能讓用戶一眼就看到的“最重要的東西”的界面設計。一欄式布局顯然是最容易讓用戶關注到重要東西的布局方式。
一欄式布局,顧名思義,就是整個頁面都為信息展示區,其優點和缺點都很突出。
優點:
- 結構簡單,頁面清楚,不會給用戶過多的視覺壓力,用戶視覺流清晰;
- 信息展示集中,頁面的重點突出,用戶能夠迅速找到網頁的重點內容。
缺點:
- 排版方式受到局限,頁面可承載的信息量小。
由于這種布局方式收到排版和信息量的限制,因此適用于信息量小、目的單一的網站,主要用于企業網站的首頁、搜索引擎首頁、表單填寫頁面。
企業網站首頁
企業網站的目的是介紹、宣傳企業產品與企業文化。一欄式首頁通過大篇幅的圖片、Flash或者宣傳視頻,能夠迅速抓取用戶眼球,吸引用戶注意,更好地起到企業宣傳的作用,比如寶馬首頁。
一欄式布局應用在企業首頁上時,要注意兩點:
- 需要利用大幅的精美圖片或者視頻等,造成強烈的視覺沖擊力,給用戶留下深刻印象,提升品牌效應,留住用戶進一步瀏覽;
- 由于一欄式可展示的信息量有限,所以應在首頁添加導航或者重要鏈接的入口,引導用戶深度瀏覽,起到入口和信息分流的作用。
搜索引擎首頁
用戶使用搜索引擎的需求明確且單一,只是搜索目標詞的相關內容,因此搜索引擎首頁要為用戶提供便捷、迅速的入口,盡量減少非搜索相關因素對用戶的影響。故常見的搜索引擎首頁,在設計上以簡單、清爽為主,沒有大幅圖片或者復雜設計,而且突出搜索框和按鈕。如百度、Google首頁以及一些網站的站內搜索頁。
表單填寫頁
在表單頁,用戶的需求同樣明確且單一,且用戶需要盡快地填寫完成表單,不讓操作本身占據過多時間,因此表單填寫頁和搜索引擎頁對設計的要求基本相同,以簡單、整潔為主。下圖為京東的注冊頁。
這里要說一下知乎的網頁設計,對于未登錄用戶,知乎的首頁即為注冊/登錄頁。這樣設計的好處之一是引導用戶注冊,好處之二是首頁顯得清爽、專業。但是這樣設計的同時,就意味著未登錄用戶無法以游客的身份瀏覽內容,給用戶造成了一定的壓力。然而換句話說,這樣也對用戶進行了篩選,提高了使用壁壘,便于營造社區氣氛。所以這個首頁和注冊/登錄合為一體的設計,有利有弊,值得借鑒與學習。
首頁即為注冊/登錄頁的設計在一些存在用戶準入門檻的網站中,較為常見,典型例子為pt類網站。
兩欄式布局
兩欄式布局綜合了一欄式和三欄式的優缺點,是一種折中的界面布局方式。相比于一欄式,其可以容納更多內容,但是不具備視覺沖擊力 ;相比于三欄式,其信息不至于過度擁擠和凌亂,但不具備超大內容量的優點。
兩欄式布局可分為左窄右寬式、左寬右窄式和左右均等式,每種方式的頁面重點和視覺流都有所不同,其所適用的頁面類型也不盡相同。
左窄右寬式
在設計上,左側較窄,放置導航信息或者其他次要信息,右邊較寬,為信息展示區,放置主要內容。因此網頁應利用左側的導航信息引導用戶瀏覽網頁,用戶的視覺流也相應地從導航開始,進而瀏覽頁面內容。
這種設計方式,適合于內容豐富、導航清楚的網頁,拉勾網的首頁和163郵箱的界面設計即為此種。
此外,對于左窄右寬式布局,左側也可能放置推薦式導航和其他次要信息,比如京東的商品詳情頁。
左寬右窄式
在設計上,左側較寬,放置主要內容,右邊較窄,放置次要內容,大多為輔助導航或者廣告信息。這種布局方式更突出用戶當前瀏覽的內容,引導用戶將視線聚焦于當前內容上。這種界面布局方式,常見于一些以內容為主導的網站,比如百度的搜索結果頁,知乎的幾乎全部頁面。
左右均等式
在設計上,左右兩側均為信息展示區,在尺寸上,兩側的比例相差較小,甚至完全一致,常見于一些不出現內容主次的網站。
這種設計方式較極端,在這類網頁中,用戶不易發現重點內容,視覺流也不夠清晰。貓撲采用的是這種布局方式,其將頁面左右兩側分別設計為獨立的分區,不同分區可以分別進行滾動、瀏覽等操作。
綜上,兩欄式布局具有折中、沒有鮮明缺點的特點,也是目前最常用的布局方式??偨Y三種兩欄式布局的特點和視覺流,如下:
三欄式布局
三欄式布局是最為復雜的界面布局方式。
優點:
- 可以盡量多地顯示出信息內容,盡可能地增加信息的密集度。
缺點:
- 會造成頁面上信息的擁擠,增加用戶找到目標信息的時間成本,降低網站內容的可控性。
三欄式布局主要分為中間寬、兩邊窄,和兩欄寬、一欄窄。即使選擇某一種, 在設計上,三欄的寬度也并不是一成不變的,應根據導航與內容的比重調整寬度比例。
中間寬、兩邊窄
這種布局方式中,中間欄的寬度較大,在視覺比例上相對突出,更容易抓住眼球,因此用戶默認中間為重點信息,兩邊的內容為次要信息或者廣告;這種布局方式,引導用戶的視覺流聚焦于中間,然后向兩側移動。這種界面布局的典型應用就是新浪微博。
由于新浪微博內容龐雜且細分的類目極多,故其首頁有兩個導航區,左側為主導航區,應用Tab導航,右側為輔助導航區,應用推薦位導航。
兩欄寬、一欄窄
相比于中間寬、兩邊窄的布局方式,這種方式有著能夠展示更多的重點內容,提高頁面利用率的優點,但同時,也不如上一種方式突出和集中,用戶視覺流易分散。這種界面布局方式常見于信息量巨大的門戶網站的首頁設計上,比如騰訊首頁。
?混合式布局
現在很多信息極豐富的大型網站,尤其是電商網站,其界面布局方式已經不單是以上中的某一種,而是幾種布局方式的結合,以京東首頁為例,進入頁面時,主界面為三欄式,從左至右依次為:列表導航區、信息展示區和推薦位導航區,而下面的商品展示和廣告位,則采用一欄式的界面布局方式。這種多布局方式結合的頁面設計,既利用導航引導了用戶的視覺流、又利用精美圖片吸引用戶注意,而且保證了頁面空間的充分利用,可以說是比較合理、高效的界面設計。
最后還要說明的是,不論哪種Web界面布局方式,其都是為信息展示服務的。無論是導航引導還是內容引導,無論是一欄還是多欄,最終的落腳點,都是幫助用戶盡快地看到最希望看到的內容。說到底還是那句話:設計是為用戶服務的,而不是為設計本身。
本文由 @李小新 原創發布于人人都是產品經理。未經許可,禁止轉載。
對web頁面分析的很全面,也很到位
“錨定與調整法則指在沒有把握的情況下,人們通常利用某個參照點和錨(Anchor)來降低模糊性,然后再通過一定的調整來得出最后的結論。Kahneman 和 Tversky描述的幸運輪實驗清晰地證明了這一傾向:人們過多地受到并沒有什么意義的初始值的約束與左右?!?br /> 有幫助的,之后會多看下這方面的內容,多謝
不論哪種Web界面布局方式,其都是為信息展示服務的。無論是導航引導還是內容引導,無論是一欄還是多欄,最終的落腳點,都是幫助用戶盡快地看到最希望看到的內容