導航設計:web端 ToB產品中應該選用哪種導航?

McGovern(the founder and CEO of CustomerCarewords)說,相比於直接搜索,用戶更喜歡用導航。因爲導航是讓用戶做選擇題,而搜索是填空題。如果鏈接的文案與用戶尋找的內容相符,他們直接點擊鏈接的可能性更大。

 

導航設計一直是一個有爭議的話題,web端、移動依舊有些不錯的應用規則在我們進行網站導航設計時值得參考的:

 

例如:

 

•保持(導航結構的)連貫性和一致性

•設計清晰易懂的交互方式

•設計扁平的導航結構

•考慮響應式設備的兼容性

 

 

導航的設計原則

 

導航是組織產品信息的樹幹,它能夠讓用戶更輕鬆的在產品中找到所需的信息。爲了讓導航更適用,首先要定義用戶,他們使用產品的典型路徑以及產品經理希望他們使用的功能。

 

1、明確用戶羣體和核心任務就可以解構流程、通過信息架構搭建產品枝幹。

 

2、選擇合理的信息架構設計產品

 

設計一個優秀的導航結構,分析信息架構的層級是關鍵。

 

當產品的信息層級結構圖出來時,扁平的導航結構是更好的選擇。這是因爲,這種扁平的結構能讓用戶只需要點擊一到兩次就可以去到最底層的頁面。

 

扁平的導航結構固然很理想,但並不是說把菜單設計得很簡短就是好的。就像Nielsen Norman Group 所說,導航項的意義是讓用戶辨識導航欄項目,並不是讓用戶去回憶(導航欄項目)。

 

所以,導航菜單必須簡短表達明確,方便用戶瀏覽。

 

 

限制導航層級

 

 

導航結構的層級數由產品信息層級決定,理想狀態下,用戶需要點擊的導航層級越少,用戶到達目標頁面也越快越清晰。就像Nielsen Norman Group說的“信息層級越深,則用戶越容易被誤導”。

 

扁平的導航層級結構

 

 

深層級的導航結構

 

 

大部分產品都是3-4個信息層級,這樣產品頁面比較容易被觸達,但保持產品信息在3-4個層級需要確保導航結構不過於寬泛。

 

要理清產品到底幾個信息層級是合適的,可以把現有的信息層級結構劃分成互不相關的獨立部分。然後審視各個子頁面的分組,看看他們是否可以被升至更高一個層級,這時要注意:

 

•更新一下當前信息版塊下的標籤

 

•建立一個完全新的信息版塊去容納那些原本屬於交叉版塊的子頁面

 

•重新調整各個信息版塊之間的關係— 也許他們應該依照操作行爲來被分組而不是主題


 

三種信息架構

 

1、多個高頻需求

2、單個高頻若干個低頻

3、單個高頻無低頻需求

 


 

導航的類型

 

 

1.橫向導航

 

 

 

優點:

通常使用比較少的菜單,簡單,容易記憶。

位於頁面頂部,不佔用橫向空間。

由於位於頂部,在視覺上更突出,更容易識別。

菜單選項之間視覺權重的區分更明顯,左邊最強右邊最弱。

 

 

缺點:

擴展性有限,不能很好地承載大量和多層級菜單。

佔用屏幕高度,特別是當固定於屏幕頂部時。

來回切換菜單選項時,橫向移動鼠標的距離更長,操作效率更低。

 

 

2.縱向導航

 

 

優點:

能夠承載的菜單項數量和層級更多,擴展性強。

不佔用屏幕高度且可以收起,爲內容提供更多空間。

在菜單間切換時鼠標移動距離短。

能夠更好地適應屏幕寬度較小的設備。

 

缺點:

菜單數量多層級複雜時,不容易記憶。

菜單選項文字不宜過長,可能會截斷。

各菜單選項之間的視覺權重差別不明顯。

 

 

3.橫向導航擴展

 

 

但總體來說,單獨的橫向導航方式層級不能超過 3 層,多於 3 級就不利於用戶的閱讀和選擇。

 

 

4.縱向導航擴展

 

 

 

相對於橫向,縱向的拓展性強,不管多少級都可以一直往下加,但層級高過於 3 層,用戶對導航的分辨和記憶會明顯下降。

 

當然,有時候單獨只有橫向或者縱向一種導航不能完全滿足我們的需求,根據以上特點,我們也可以有如下組合的形式。

 

 

5.組合導航

 

 

 

很明顯,這樣的組合導航,適用於一級導航不太多(最好少於 5 個)且內容權重差別很明顯,一級導航之後的導航內容和層級比較多且內容複雜。

 

另外,如果嫌縱向導航佔空間,則可以考慮將縱向導航做成可摺疊收起的模式,適用於貼着瀏覽器的縱向導航。

 

 

6.可摺疊的縱向導航

 

 

爲了讓用戶每天都要“看”的這件事情變得簡單高效有質量,導航設計就這樣誕生了。希望大家能在設計導航中發現更多有趣、有益的內容,激發更多、更好的創意,完成優秀的B端web產品。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章