從首因效應說起,談談Web界面的三種布局

微信號:91產品

微信號:chanpin91

91經營社群招募中,勾搭小編微信號:yueyingzheng88入社群

  • 每周91公開課,91風暴,全員參與,實際案例實際分析

  • 問題答疑,你提問題我解答

  • 行業專場,互聯網金融,電商,新媒體經營等專場

  • 各地分站交流

  • 資源及人脈共享

  • 其他的。。。。

歡迎各行業互聯網經營達人加入我們91經營大家庭,會經營的人都來這裡了!

導讀:設計是為用戶服務的,而不是為設計本身。

正文

社會心理學中有個概念:首因效應。解釋為個體在社會認知過程中,通過「第一印象」最先輸入的信息對客體以後的認知產生影響,即我們常說的,第一印象決定最終印象。在人和人的交往中,首因效應起到了重要作用,在用戶與網站或者其它互聯網產品的交互中,首因效應同樣影響巨大。

以Web端為例,對於初次瀏覽的網站,如果界面排列有序,顏色搭配得當,頁面的重要、次要內容清晰可見,那麼用戶至少不會產生厭惡感,也有更大的意願繼續瀏覽,進而進行深入閱讀、註冊等操作;反之,如果整個頁面混亂不堪,毫無重點,如同二手市場,那麼用戶第一反應就是這個網站有些low,頓時厭煩感爆棚,即使網站的內容質量再高,恐怕用戶也不願繼續瀏覽,用戶甚至不會關心網站的內容和信息,只想趁早離開。網站內容的優劣,PM們無法把控,但如果是因為界面布局和顏色搭配的問題,讓用戶沒能留下來,那我們就要好好反思了。

因此我們應該更好地利用首因效應,重視起能夠給用戶留下「第一印象」的界面布局,設計出符合用戶使用和視覺習慣的界面,給用戶提供盡可能無壓力的、舒適的使用環境。

Web界面布局就是指網頁的整體結構分布。界面布局的目標是提高用戶興趣、方便用戶閱讀。過於花哨的頁面可能會提高用戶興趣,但是也會影響用戶瀏覽網站的視覺流,甚至成為用戶使用產品的阻礙,因此要在視覺美觀和頁面內容中找到一個平衡點。按照分欄方式的不同,可以將網站的界面布局分為一欄式、兩欄式和三欄式。

一欄式布局

Jesse James Garrett在《用戶體驗要素》中說,成功的界面設計時那些能讓用戶一眼就看到的「最重要的東西」的界面設計。一欄式布局顯然是最容易讓用戶關注到重要東西的布局方式。

一欄式布局,顧名思義,就是整個頁面都為信息展示區,其優點和缺點都很突出。

優點:

  • 結構簡單,頁面清楚,不會給用戶過多的視覺壓力,用戶視覺流清晰;

  • 信息展示集中,頁面的重點突出,用戶能夠迅速找到網頁的重點內容。

缺點:

  • 排版方式受到局限,頁面可承載的信息量小。

由於這種布局方式收到排版和信息量的限制,因此適用於信息量小、目的單一的網站,主要用於企業網站的首頁、搜尋引擎首頁、表單填寫頁面。

企業網站首頁

企業網站的目的是介紹、宣傳企業產品與企業文化。一欄式首頁通過大篇幅的圖片、Flash或者宣傳視頻,能夠迅速抓取用戶眼球,吸引用戶注意,更好地起到企業宣傳的作用,比如BMW首頁。

一欄式布局應用在企業首頁上時,要注意兩點:

  • 需要利用大幅的精美圖片或者視頻等,造成強烈的視覺衝擊力,給用戶留下深刻印象,提升品牌效應,留住用戶進一步瀏覽;

  • 由於一欄式可展示的信息量有限,所以應在首頁添加導航或者重要鏈接的入口,引導用戶深度瀏覽,起到入口和信息分流的作用。

搜尋引擎首頁

用戶使用搜尋引擎的需求明確且單一,只是搜尋目標詞的相關內容,因此搜尋引擎首頁要為用戶提供便捷、迅速的入口,盡量減少非搜尋相關因素對用戶的影響。故常見的搜尋引擎首頁,在設計上以簡單、清爽為主,沒有大幅圖片或者複雜設計,而且突出搜尋框和按鈕。如百度、Google首頁以及一些網站的站內搜尋頁。

表單填寫頁

在表單頁,用戶的需求同樣明確且單一,且用戶需要盡快地填寫完成表單,不讓操作本身占據過多時間,因此表單填寫頁和搜尋引擎頁對設計的要求基本相同,以簡單、整潔為主。下圖為京東的註冊頁。

這裡要說一下知乎的網頁設計,對於未登錄用戶,知乎的首頁即為註冊/登錄頁。這樣設計的好處之一是引導用戶註冊,好處之二是首頁顯得清爽、專業。但是這樣設計的同時,就意味著未登錄用戶無法以遊客的身份瀏覽內容,給用戶造成了一定的壓力。然而換句話說,這樣也對用戶進行了篩選,提高了使用壁壘,便於營造社區氣氛。所以這個首頁和註冊/登錄合為一體的設計,有利有弊,值得借鑒與學習。

首頁即為註冊/登錄頁的設計在一些存在用戶準入門檻的網站中,較為常見,典型例子為pt類網站。

兩欄式布局

兩欄式布局綜合了一欄式和三欄式的優缺點,是一種折中的界面布局方式。相比於一欄式,其可以容納更多內容,但是不具備視覺衝擊力 ;相比於三欄式,其信息不至於過度擁擠和凌亂,但不具備超大內容量的優點。

兩欄式布局可分為左窄右寬式、左寬右窄式和左右均等式,每種方式的頁面重點和視覺流都有所不同,其所適用的頁面類型也不盡相同。

左窄右寬式

在設計上,左側較窄,放置導航信息或者其他次要信息,右邊較寬,為信息展示區,放置主要內容。因此網頁應利用左側的導航信息引導用戶瀏覽網頁,用戶的視覺流也相應地從導航開始,進而瀏覽頁面內容。

這種設計方式,適合於內容豐富、導航清楚的網頁,拉勾網的首頁和163郵箱的界面設計即為此種。

此外,對於左窄右寬式布局,左側也可能放置推薦式導航和其他次要信息,比如京東的商品詳情頁。

左寬右窄式

在設計上,左側較寬,放置主要內容,右邊較窄,放置次要內容,大多為輔助導航或者廣告信息。這種布局方式更突出用戶當前瀏覽的內容,引導用戶將視線聚焦於當前內容上。這種界面布局方式,常見於一些以內容為主導的網站,比如百度的搜尋結果頁,知乎的幾乎全部頁面。

左右均等式

在設計上,左右兩側均為信息展示區,在尺寸上,兩側的比例相差較小,甚至完全一致,常見於一些不出現內容主次的網站。

這種設計方式較極端,在這類網頁中,用戶不易發現重點內容,視覺流也不夠清晰。貓撲採用的是這種布局方式,其將頁面左右兩側分別設計為獨立的分區,不同分區可以分別進行滾動、瀏覽等操作。

綜上,兩欄式布局具有折中、沒有鮮明缺點的特點,也是目前最常用的布局方式。總結三種兩欄式布局的特點和視覺流,如下:

三欄式布局

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

優點:

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

缺點:

  • 會造成頁面上信息的擁擠,增加用戶找到目標信息的時間成本,降低網站內容的可控性。

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

中間寬、兩邊窄

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

由於新浪微博內容龐雜且細分的類目極多,故其首頁有兩個導航區,左側為主導航區,應用Tab導航,右側為輔助導航區,應用推薦位導航。

兩欄寬、一欄窄

相比於中間寬、兩邊窄的布局方式,這種方式有著能夠展示更多的重點內容,提高頁面利用率的優點,但同時,也不如上一種方式突出和集中,用戶視覺流易分散。這種界面布局方式常見於信息量巨大的門戶網站的首頁設計上,比如騰訊首頁。

混合式布局

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

最後還要說明的是,不論哪種Web界面布局方式,其都是為信息展示服務的。無論是導航引導還是內容引導,無論是一欄還是多欄,最終的落腳點,都是幫助用戶盡快地看到最希望看到的內容。說到底還是那句話:設計是為用戶服務的,而不是為設計本身。

本文由 @李小新 原創發布於人人都是產品經理。

據說,只有打賞的才是真粉絲哦,8塊8請小編喝杯咖啡吧,長按二維碼勾搭小編微信(yueyingzheng88)加入91經營社群,全年100多場免費公開課,定期問題答疑等著你,會經營的人都在這裡了!

歡迎關注91經營網旗下垂直帳號:

91產品:(微信ID:chanpin91)

致力於為產品新人、產品經理等廣大產品愛好者打造一個全方位的學習交流平台,分享產品設計、交互設計、產品經營乾貨。

91經營網:(微信ID:yunying-91)

專注於互聯網產品經營乾貨,聚焦互聯網產品策劃,電子商務,網路行銷,移動互聯網,融資創業等領域經驗分享。

熱門文章