B端管理后臺導航設計對比分析

avatar
avatar
小編007
270819
文章
0
評論
發布時間:2020/02/2908:02:46 評論 83 views

導航常見形式有:水平導航、垂直導航以及組合導航,主要針對這三種導航討論。

在選擇時,作為設計師我們需要了解產品的范圍層(內容和功能)和結構層(信息框架和交互),初步把握菜單的廣度和深度,充分了解各種導航的優缺點外;還可以再進一步考慮到用戶體驗的,了解用戶的認知、操作、視覺負荷。以及后臺管理的主要內容及表現形式、中英文切換差異、產品是否有根據角色劃分功能權限等細節。

一、各類導航的基本表現形式及優缺點:

水平導航:

水平導航的優點:

1.位于頂部,為內容騰出了更多的空間。(一些類目多的大型表格頁,垂直導航占用更多屏幕寬度,水平導航很大程度能夠減少用戶因表單展示不全而鼠標來回橫劃拖動的不便。)

2對于閱讀的視覺干擾小。符合上而下瀏覽的習慣,相對于縱向導航不會打斷用戶對于內容的沉浸感。

3.現代人對于橫向閱讀快于縱向閱讀,對于菜單的獲取速度更快。

4.排版穩定,不受用戶終端顯示器的影響。

水平導航的缺點:

1.擴展性有限,面積較小菜單的廣度和深度受限制。導航標題必須很短,不適合一級導航很多的信息結構。

2.水平導航懸浮展開更深層菜單點擊操作后一般會收起,視覺定位沒有縱向菜單二三級菜單外漏那么明顯。

3.在縱向空間上有些犧牲,占用界面高度。


水平導航適用于:內容較為簡單,或追求沉浸式閱讀操作的后臺。一般固定在頂部導航,方便頁面切換。

尺寸(大部分系統類):64px;

計算公式:48+8n


垂直導航:

(垂直導航展開)

(垂直導航收起)

垂直導航的優點:

1.一般位于左側不會占用屏高,而且內容橫向空間有限時,可以折疊收起,空間擴展更強。

2.在國內操作后臺更流行常見,對于菜單欄文本長度容載量更大。

3.操作效率高,在菜單切換時鼠標移動上下距離更短,用戶在操作和瀏覽中可以快速的定位和切換。

4.擴展性強,可以通納大量、多級菜單。一、二、三級菜單可以更流暢且根據關聯性的展示。

垂直導航的缺點:

1.操作菜單欄,展開收起二級菜單需要手動多次點擊。

2.視覺層次上不如橫向導航一二級導航視覺區分明顯。

3.受使用者設備影響,整個頁面排版不穩定。


垂直導航適用于:專注于功能,快速切換操作,有一定復雜度的后臺。

側邊導航寬度計算公式:200+8n


混合型導航:


混合的導航綜合了水平導航、垂直導航。層級可以擴展到二、三級菜單,且能夠更加清晰的區分常用業務功能操作和輔助操作(如站點名稱、欄目、搜索、信息、用戶ID等。

混合型導航的優缺點也綜合了水平和垂直導航的優缺點。

混合導航適用于:功能模塊較多、復雜度較大的后臺。


二、進一步的深入考慮


1.功能較多的B端后臺,是否考慮了根據用戶角色配置權限功能,保持每級的菜單項在7+-2左右,為了避免菜單項過多用戶難以記憶。

2.對于一般系統來說,菜但層級最多到三級就可以了,層級不易過深。

3.導航的設計在范圍層要考慮:產品功能的數量及嵌套關系。在用戶層要考慮:用戶的認知負荷(思考和記憶);視覺負荷(瀏覽習慣與辨識度);行動負荷(點擊、操作鼠標左右拖動進度條、頁面是否需要經常切換等);內容層:以何種內容為主,內容在橫向上還是縱向上需要更大的展示區域。

4.認知負荷小于行動負荷時,對于用戶更友好。用戶必須經過十幾次點擊才能完成任務,結果他們完成時還是會抬頭笑道:“好輕松??!”這是因為每個步驟都很合理,都提供了用戶所預期的信息。他們不必動腦思考,思考的負荷比點擊更沉重?!对O計師要懂心理學》? Susan Weinschenk? 第四章 人如何思考。

5.導航菜單語言清晰易理解,信息歸類屬性界限清晰,信息記憶學習成本較低的適合菜單遞進式展開;如果信息分類屬性模糊,學習成本較高需要用戶記憶的則推薦平鋪式導航。

6.如果有中英文切換功能的話,考慮中英文的語言差異,中文字符較為緊湊。相同功能英文表述可能會更長。


三、思考題

1.當三級導航無法滿足需求,子導航內出現更多的導航還有那些表現形式解決辦法?

2.導航背景色是與內容頁面明顯區別好or弱化導航視覺層次背景色與內容頁視覺層次相近好?


文章參考:


1.作者:maye 《ToB web后臺產品設計:導航設計》

鏈接:https://www.jianshu.com/p/19d36bb29d62? 來源:簡書

2.Antdesign 組件-layout-布局介紹

匿名

發表評論

匿名網友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: