這5種成熟的導航設計模式,可以為用戶體驗加分

這5種成熟的導航設計模式,可以為用戶體驗加分

導航設計千變萬化,但是能夠同時兼顧到可用性、易用性還能夠帶來足夠舒適體驗的導航模式,就不是那麼多了。可靠的導航設計需要幫助用戶達成目標,找到內容,提升頁面的轉化率。設計不合理的導航對於用戶體驗是災難性的,最直接的影響,是用戶不再能足夠快捷方便的找到想要的頁面和內容,間接地影響了網站的轉化率和用戶的留存率。

而易用性良好的UI界面很大程度上是從設計優良的導航開始的。導航是用戶從A點走向B點的重要指引,設計師在設計過程中不僅要確保這個路標足夠清晰,而且要讓導航的過程足夠順滑、流暢。在整個設計流程中,導航設計應該佔據有一定的優先順序,因為它不僅僅在整個網頁的信息架構中佔據著近乎骨架的作用,而且在整個體驗設計中也扮演著重要的角色。在原型設計階段,導航的設計應該就已經打磨清晰,並且集中了所需的設計素材,確保開發伊始便能搞定導航。

在諸多導航設計當中,有一些優秀的設計模式已經經過反覆的設計驗證,今天的文中就挑選出其中最突出的 5 種,供你參考。

1、帶有流暢動效的下拉導航菜單

這5種成熟的導航設計模式,可以為用戶體驗加分

下代菜單是UI設計中最常見的設計元素,作為一種擴展性良好的控制項,它在被觸發之後擴展顯示更多的選項,呈現更多的內容。下拉菜單有許多種不同的衍生樣式,在導航設計中也很常見。許多傳統的導航當中,導航元素的下拉菜單是需要點擊觸發的,而現在更多的設計師會選擇游標懸浮在導航元素上的時候觸發,這樣對於用戶會更加省心省力。

為了確保導航的整潔清晰,如今網頁的主要導航類目通常不會太多,控制在4~ 6 個選項,而下拉菜單則用來承載二級導航元素,這樣就節省了空間,也讓信息層級更加清晰。

這種設計模式對於用戶而言並不陌生,瀏覽起來也頗為方便,對於多層級、大量選項的導航需求而言,它正好可以應對。值得注意的是,游標懸浮觸發下拉菜單的時候,展現的動效要足夠的微妙,降低用戶打開的突兀感,這樣會讓體驗更加優秀。

2、漢堡菜單+側邊欄

這5種成熟的導航設計模式,可以為用戶體驗加分

漢堡菜單加上彈出式的側邊欄在iOS和 Android
平台上都是極為常見的導航設計模式。雖然有數據表明,漢堡菜單和默認隱藏的側邊欄導航在打開率上並不如常見的顯性導航,但是它在體驗上有獨特的優勢,讓整個界面更加簡約、整潔,干擾性更小。用戶點擊漢堡菜單,側邊欄導航從側面滑出顯示,用戶可選擇他們想要點擊的選項。

漢堡菜單和側邊欄的搭配特別適用於響應式的網頁設計,例如Android 平台的 Gmail 官方應用,YouTube 和 Facebook,均是沿用了這樣的設計。

隱藏式的側邊欄導航,在很大程度上讓用戶更加專註於主要的界面內容,讓界面更加整潔。雖然打開率不如顯性導航,但是在很多情況下,這種隱藏性的設計更符合實際需求。

3、懸浮固定網頁導航菜單

這5種成熟的導航設計模式,可以為用戶體驗加分

懸浮固定的導航菜單在越來越多的網頁設計中出現,當用戶在滾動頁面向下瀏覽的時候,懸浮固定導航在頁面頂部懸浮不動,隨著用戶瀏覽,它們一直都可見,用戶無需滾動到頂部就可以點擊導航跳轉。

目前,懸浮固定導航菜單已經成為常見的導航設計手法,電商、產品類的網站,多會選擇這樣的導航設計,便於用戶快速跳轉。這種導航設計的優勢在於快速、便捷,用戶對於在網站不同的頁面間跳轉的需求比較大,那麼這樣的設計能夠省去很多麻煩。根據
Akamai 和 Gomez.com
的調研,79%的線上購物的用戶,在遭遇糟糕的瀏覽和導航體驗之後,會一去不復返,由此可見,便捷的導航是多麼重要。

4、深度定製的超大導航菜單

這5種成熟的導航設計模式,可以為用戶體驗加分

此處我們所說的深度定製的超大導航菜單,更接近選項卡的設計,它們大多分為 2 個層級,不同的選項被組織到不同的選項卡當中,選項卡中所承載的導航選項相比於下拉菜單更大,設計也更加視覺化,更易於點擊選取。有的選項當中甚至會包含文本和說明,便於用戶進行選擇。

這種超大導航菜單當中的子選項的尺寸足夠大,視覺化設計也足夠突出,可見性極強,用戶很難選錯。

超大導航菜單所能容納的導航條目相對更多、更加視覺化,和開頭所說的下拉菜單導航類似,游標懸浮在標籤頁上的時候,自動顯示下面的選項。根據 NNGroup 的研究,這類導航當中,導航菜單越大,越受歡迎。

這種導航菜單適合對可訪問性要求高的網頁,對於有視力障礙和進階用戶都更為友好。另外一方面,這種導航還為設計師提供了更多發揮的空間。

5、響應式卡片柵格導航

這5種成熟的導航設計模式,可以為用戶體驗加分

響應式的設計就不必贅述,但是卡片柵格式的導航無疑是從移動端開始流行的導航模式。在這裡,導航選項被設計成為小卡片,置於導航欄的柵格當中,當屏幕尺寸發生改變的時候,導航中的小卡片會隨著自適應的柵格而重新排列,以匹配整個布局。這種設計不僅高度可視化,而且可以根據主題風格,進行深度的定製。

這種導航當中,各個選項不僅便於游標點擊,而且在移動端上,更加適合手指點擊,可以說是跨平台響應式設計的首選。許多網站目前都採用了這樣的導航設計,比如 Pinterest 和著名的音樂服務 Spotify。

發表迴響