可靠的導航設計能幫助用戶達成目標,找到所需的內容,提升頁面的轉化率。但設計不合理的導航對於用戶體驗來說簡直就是災難,間接影響網站的轉化率和用戶的留存率。那麼,怎樣的導航設計才算是成熟呢?
成熟的導航設計之下拉菜單
下拉菜單是UI設計中最常見的設計元素之一。隨着簡約風格的盛行,為了確保導航的整潔和清晰,如今網頁的主要導航類目通常都會太多,一般控制在4-6個選項,而下拉菜單則用來承載二級導航元素,這樣既可以節省空間,也可以讓信息層級變得更加清晰。
下拉菜單可以應付多層級、大量選項的導航需求,但值得注意的是,光標懸浮觸發下拉菜單時,展現的動效要足夠微妙,降低用戶打開的突兀感,這樣會讓用戶體驗更加優秀。
成熟的導航設計之漢堡菜單
漢堡菜單加彈出式側邊欄是ios和android平台上常見的導航設計模式。雖然漢堡菜單和彈出式側邊欄在打開率上不如常見的線性導航,但是隱藏式的側邊欄導航和漢堡菜單,在很大程度能讓整個界面更加簡約、整潔,讓用戶更加專注於主要界面內容。
漢堡菜單和側邊欄的搭配特別適用於響應式的網頁設計,用戶點擊漢堡菜單,側邊欄導航從側面滑出顯示,用戶可選擇他們想要點擊的選項。所以在很多情況下,這種隱藏性的設計更符合實際需求。
成熟的導航設計之懸浮固定導航菜單
目前,懸浮固定導航菜單已經成為常見的導航設計,選擇這樣的導航設計能讓用戶快速跳轉目標頁。當用戶在滾動頁面向下瀏覽的時候,懸浮固定導航在頁面頂部懸浮不動,用戶瀏覽到哪個位置,都無需滾動到頂部就可以點擊導航跳轉。
根據 Akamai 和 Gomez.com 的調研,79%的線上購物的用戶,在遭遇糟糕的瀏覽和導航體驗之後,會一去不復返。所以選擇快速便捷的導航欄設計,能讓用戶減少很多麻煩,更符合用戶體驗。
成熟的導航設計之超大導航欄
超大導航欄雖然和下拉菜單導航類似,當能容納更多導航條目,而且更加視覺化。由於超大導航菜單欄當中的選項足夠大,視覺化設計也足夠突出,有些選項當中甚至會包含文本和說明,更便於用戶進行選擇。
超大導航菜單適合可訪問性要求高的網頁,尤其是對於有視力障礙和進階用戶更為友好。另外,超大導航菜單還能為設計師提供更多發揮空間。
成熟的導航設計之響應式卡片柵格導航
導航選項被設計成為小卡片,置於導航欄的柵格當中,當屏幕尺寸發生改變的時候,導航中的小卡片會隨着自適應的柵格而重新排列,以匹配整個布局。這種設計不僅高度可視化,而且可以根據主題風格,進行深度的定製。
響應式卡片柵格導航不僅便於光標點擊,而且在移動端上,更加適合手指點擊,可以說是跨平台響應式設計的首選, 因此很多網站目前都採用這樣的導航設計。
導航欄在整個網站起著近乎骨架的作用,所以在進行導航設計的時候,設計師不僅要確保這個路標足夠清晰,而且還要讓導航的過程足夠順滑、流暢、清晰。