在進入今天的主題之前,我們先來探討導航的重要性,並分析一下門戶網站中導航的表現。
導航直接影響到公司的財政收入
導航會給我們帶來哪些好處?導航不光只是提供信息獲取的途徑,它的設計優劣會直接影響到整個公司財政收入。下面我們看一個例子(以下內容來自alibaba李凡的《設計師的商業意識》):
alibaba大致的廣告價格
上圖反映了阿裡巴巴網站大致的廣告價格。
其實頁面上方大量的空間都被導航占據了,見下圖:
可以看出,上方的導航非常龐大,在一屏之內,用戶幾乎看不到搜索結果。
用戶是來找信息的,第一屏完全看不到結果!!!
下面我們要為導航減肥:
導航減肥後的頁面
這是減肥之後的導航,搜索結果在更高的位置呈現,同時每個產品位的價格也增加了很多,第一個位置的廣告位由9.5萬增加到12萬。
導航的改變,直接帶來了網站的財政收益。
門戶網站的導航
導航在Web設計中占據著非常重要的位置,但是我們在設計網站時,常常會忽略導航的重要性,特別在門戶網站中,這種現象更加普遍。以下為網易財經頻道的頁面導航:
財經頻道頁面
第一幅圖是財經頻道的首頁、第二幅為二級頻道股票的首頁,第三幅圖是大盤的首頁。
從上圖可以看出:
總覽各大門戶網站,由於信息內容龐大,結構復雜,前期規劃不當,信息需要快速迭代等因素,導航上面都會有很多問題。解決導航問題已經刻不容緩。
在研究導航問題時,閱讀了《Web導航設計》這本書,對書中的內容進行了一些總結歸納。今天主要分享一下“導航設計中的信息結構”這一方面。
導航的信息結構
什麼是信息結構
結構能夠具體的涵蓋頁面和內容的特定位置。信息結構指的是網站上頁面的規劃或是架構圖,它是你網站的骨架。信息的結構類型包括:
線型結構、網狀結構、層級結構、分面結構、逐漸顯露的結構
信息結構的具體分析
1、線性結構
如下圖,在此頁面可以限制淘寶買家按線性結構完成購買流程。上方的1,2,3,4的步驟很好的引導用戶一步一步完成任務,並告知用戶所在流程中的位置。
一般的面包屑導航,也是一個線性結構:
2、網狀結構
如下圖,這是可以由用戶設置產出的頁面。
網狀結構的導航沒有起點也沒有終點,甚至是沒有層級或是序列。
3、層級結構
大多數的網站可能都是采用這種結構。以上下級關系排列節點,以展開其層級。
以下為網易數碼頻道的導航:
4、分面結構
分面結構中,一個項目的定位由它的屬性類別給出:項目1屬於類別a,b,c,但不屬於d、它有多個訪問點。
如下圖九天音樂,歌手林宥嘉同時可以在歌手或是排行榜中找到。人們可以從任何順序取值,從而支持了同一個目標的多種完成方式:
5、逐漸顯露的結構
它不是一個事先建立好的信息結構,而是自發形成的,這就是逐漸顯露的結構。例如維基百科,它是由每個貢獻者參與構建了網站的內容,規模,甚至是方向。
從上面的結構類型可以看出,不同的網站類型需要不同的信息結構,比如音樂類的網址,就是需要通過“音樂”、“歌手”等分面結構來呈現。
理解和掌握這些結構類型有助於我們更好的把握導航的設計。
延伸:信息的組織
確定了信息結構以後,我們要考慮的就是如何組織信息。
比如汽車頻道按字母排序的例子:
信息結構和信息組織設計-卡片分類法
卡片分類介紹
在進行網站信息結構和組織設計的時候,我們會用到卡片分類法,卡片分類需要:
在進行卡片分類時,一般會有兩個階段:
卡片分類在實際過程中的應用
卡片分類定量結果
在進行卡片分類時,會用到兩個軟件usort和ezsort,usort用於導入用戶卡片分類的結果,ezsort可以將所有結果都導進去,並產出統計圖。
卡片分類統計結果
總結
這次分享,主要是我對於“web導航設計”這本書部分內容的總結和一些感悟,希望大家在今後的設計中,更加重視導航的設計,在導航設計中找到一些有效的方法。
當然導航設計不光只是信息結構或是組織方法,還與導航的交互方式,導航的視覺表現,導航的擴展性,導航的平衡等有很多聯系。針對門戶類網站,也有它特殊的導航需求,這是我下面需要研究的內容。