網站作為信息的集合體,要囊括海量的資源,從首頁到二級頁再到專題頁進而底層頁等等等等,信息的層級多且繁雜,所以就容易形成tab套tab再套tab的局面。那么作為導航塑身的第一步,我們要做的就是把這負責的結構盡量簡化,讓導航變得輕盈起來,或者至少看起來不那么臃腫。
A. 通過面包屑來簡化導航結構
面包屑通常水平地出現在頁面頂部,一般會位于標題或頁頭的下方。它們提供給用戶返回之前任何一個頁面的鏈接(這些鏈接也是能到達當前頁面的路徑),在層級架構中通常是這個頁面的父級頁面。面包屑提供給用戶回溯到網站首頁或入口頁面的一條快速路徑。
一個門戶網站常見的結構是首頁-頻道頁-專題頁-子專題-底層頁。如果我們想在門戶網站看NBA的視頻直播,那么我們來看下他的導航:
如果把信息層級全部展現在用戶面前,就會形成上面的這種tab套tab的形式,使得導航臃腫不堪,占據頁面很大的空間??墒侨绻覀儼延脩絷P心的導航內容提取出來,就會得到下面的結構:
再扁平化一下:
這就是清晰的面包屑導航。綜上,面包屑導航能夠讓復雜的層級結構扁平化,使得導航更加輕盈。
面包屑導航還有一些變體,是基于用戶線性操作邏輯衍生出來的。在無線端產品中應用更為廣泛,因為移動設備的顯示區域有限,無力支撐龐大的導航結構。在用戶點擊當前導航內容后,當前導航消失進去下一級導航,并提供返回按鈕。
當然,使用面包屑來簡化導航結構也是有條件的,不是所有的導航層級都可以用這種方法來簡化。面包屑導航更符合用戶線性思維導向下的操作邏輯,例如,用戶想要看NBA直播,那么他一定不關心娛樂圈發生了哪些八卦,也不care足球或者網球有什么新聞,CBA,CUBA他可能也不十分在意,那么面包屑的線性導航就可以滿足用戶的需求?;蛘呤怯捎诳臻g或者設備原因,我們無法提供更為詳細的導航,而采用線性簡化導航的處理方法。
B. 合并導航層級
導航的龐大往往是由于層級過多導致,那么減少層級的一種有效方法就是合并導航層級,例如把二級和三級導航合并,就減少了三級導航,讓導航輕便一些。
如上圖,圖片庫包括動態圖片和靜態圖片,每個分類下面又有小的分類,這樣的導航層級在產品中十分常見,略顯臃腫。那么通過合并層級就可以把導航精簡到兩級,處理后的導航如下:
瘦身后的導航看起來結構也比較清晰,而且沒有影響到信息的傳達。
對比下美團和糯米的導航:
美團把注冊登錄和個人信息等功能性導航和網站主導航做了合并處理,為網站首屏節約出了寶貴的空間。
C.隱藏部分導航
簡化導航結構的第三種方法是把部分層級或者導航內容隱藏起來,使得導航看上去輕便一些。
當導航里的內容特別多的時候,可以選擇把主要內容留下,次要內容隱藏的方法來處理。例如:
當頁面空間有限,無法容納更多層級的時候,可以選擇把次層級隱藏收起,鼠標滑過或者點擊后觸發此層級的方法處理,這樣的例子有很多:
2.優化形式
有些時候,我們無法判斷用戶在瀏覽產品或網站時是否是線性思維,也無法對導航結構進行再精簡,那么我們怎樣讓導航再“瘦”那么一點呢。
A.將一維導航變為二維導航
將一維導航轉化為二維導航,能夠有效的減少層疊導航帶給人的重復感和復雜感,能夠讓操作富有變化,進而提升體驗。
類似的列子也有很多:
B.將復雜的層級單獨處理
當某一層級的導航內容豐富到一定程度,他就可以充當一個獨立控件來單獨設計了,他們可以作為頁面的元素來單獨存在,可能看起來都不太像是導航。
3.打磨UI