如何設計合理的B端導航?先學會從產品架構入手

0 評論 5791 瀏覽 50 收藏 9 分鐘

對一個B端產品來說,合理的導航設計是非常重要的。本篇文章就從導航分類、如何合理的選擇導航以及如何靈活使用導航這三部分說清楚,該如何選擇合適的B端導航,感興趣的朋友快來看看吧。

Halo,這里是設計夾,今天為大家分享的是「B端導航」。本篇主要總結一下如何正確選取合適的B端導航。

對B端產品架構而言,一個合理的導航設計能夠解決多方面問題。

對團隊內部:解決堆砌功能開發混亂;對外部用戶:解決找不到功能的問題。所以本篇從產品結構、使用場景等方面總結如何選取合適的導航。

一、從產品結構明確導航分類

B端后臺的導航大類從產品架構層面來講可以分為:全局導航(頂部、側邊、混合)、局部導航(菜單欄、面包屑、選項卡、步驟條、文字鏈接)、輔助導航、內嵌導航、友好導航和遠程導航。

1. 全局導航

表現為產品的一級導航,需要具有良好的穩定性和拓展性。提示:清晰穩定的路徑比少點擊一次更重要!

如何設計合理的B端導航?先學會從產品架構入手

2. 局部導航

局部導航包括:菜單欄、面包屑、選項卡、步驟條、文字鏈接。

局部導航在同一個架構中,可以到這個節點上下一級的通路;有嚴格的父子級關系,局部導航與全局導航有層級關系,幫助用戶進入特定頁面。

通常來說局部導航依附于全局導航,常作為二級導航出現。

如何設計合理的B端導航?先學會從產品架構入手

3. 輔助導航

提供用戶在全局/局部導航不可到達的相關內容的快捷途徑。

如何設計合理的B端導航?先學會從產品架構入手

4. 內嵌導航

也叫上下文導航,常用做對頁面中的操作項進行解釋,例如幫助引導鏈接等。

如何設計合理的B端導航?先學會從產品架構入手

5. 友好導航

為用戶提供便利的前進途徑,常見于新手引導、幫助助手等場景,在不需要時可進行隱藏。

如何設計合理的B端導航?先學會從產品架構入手

6. 遠程導航

指不包含在產品結構中的功能入口,常見于網站地圖、OA產品的工作臺等。

如何設計合理的B端導航?先學會從產品架構入手

二、如何進行合適的導航選擇

1. 保證產品結構的穩定性

B端產品通常情況下都是復雜的,對用戶來說具備一定的使用門檻和學習成本。

所以導航首先要保證產品架構的穩定性,同時保證交互操作路徑符合用戶操作習慣。重點:不可為了追求少一次點擊而隨便進行更改!

如何設計合理的B端導航?先學會從產品架構入手

2. 便于后續擴展

在導航選擇時需要考慮到后續產品的發展情況,在保證產品結構穩定性的前提下,為后續的功能擴展打好基礎。

如何設計合理的B端導航?先學會從產品架構入手

3. 操作清晰、易懂

在多層級的導航中要保證每一層級導航的視覺反饋清晰、明確。

如何設計合理的B端導航?先學會從產品架構入手

4. 靈活適應

導航的功能選項可以根據使用場景的需求靈活添加,可以為了提升效率,在不同的導航選項下出現相同的功能入口。

如何設計合理的B端導航?先學會從產品架構入手

5. 保持一致的交互規范

相同類型的導航控件,交互樣式要保持一致。例如,飛書面包屑的文字交互樣式和文字鏈接的交互樣式就做出了明顯的區分。

如何設計合理的B端導航?先學會從產品架構入手

6. 可不遵循層級關系

根據導航的定義而言,導航就是對信息進行分類,引導用戶完成操作。我們可以根據用戶反饋和數據埋點,將常用的操作功能前置,打破層級約束,實現對用戶的操作提效。

如何設計合理的B端導航?先學會從產品架構入手

三、根據場景,靈活使用導航

1. 頂部導航

頂部導航常用于官網類結構簡單的產品。

優點:節省空間、視覺干擾小,有沉浸式使用體驗;

缺點:結構簡單,拓展性低。

如何設計合理的B端導航?先學會從產品架構入手

2. 側邊導航

側邊導航常用于操作比較復雜,專注操作的后臺類產品,例如SaaS產品等。

優點:操作效率高、拓展性強、更容易進行功能收納。

如何設計合理的B端導航?先學會從產品架構入手

3. 混合導航

混合導航常用于操作很復雜,一級二級功能條目多的后臺產品。例如云產品(二級導航功能超多)。

優點:比較綜合。

如何設計合理的B端導航?先學會從產品架構入手

四、最后

最后對如何選擇B端導航進行三點總結:

  1. 一級導航需要足夠的穩定性和拓展性:清晰、穩定的路徑比少點擊一次更重要;導航的排序盡量不要改變用戶的操作習慣。
  2. 二、三級導航要合理分組收納:利用分組控制導航的顆粒度,在二級導航只有一個時,無需分組。
  3. 判斷功能是否應該作為全局導航:選擇相對高頻的分類,作為全局導航;低頻的分類,作為局部導航。

專欄作家

作者:Clippp,微信公眾號:Clip設計夾。每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。

本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自 Unsplash,基于CC0協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!