小紐扣

在B端產品做設計的時候,第一件事是決定界面的結構布局,導航放在哪成為一件亟需要考慮的事情。典型的,有橫向導航與縱向導航之分,拿ant design來舉例,如下面2張圖所示;

兩者看起來都行,但選擇哪個,心理會有第一眼的直覺,但光有直覺不行,還得羅列個123出來,這樣展示方案的時候,才能服己服人。

(橫向導航)

 

橫向導航

優點:

1. 通常使用比較少的菜單,簡單,容易記憶;

2. 位于頁面頂部,不占用橫向空間;

3. 由于位于頂部,在視覺上更突出,更容易識別;

4. 菜單選項之間視覺權重的區分更明顯,左邊最強右邊最弱;

 

缺點:

1. 擴展性有限,不能很好的承載大量和多層級菜單;
2. 占用屏幕高度,特備是當固定于屏幕頂部時;
3. 來回切換菜單選項時,橫向移動鼠標的距離更長,操作效率更低;

(縱向導航)

 

縱向導航:

優點:

1. 能夠承載的菜單項數量和層級更多,擴展性強;
2. 不占用屏幕高度且可以收起,為內容提供更多空間;
3. 在菜單間切換時鼠標移動距離短;
4. 能夠更好地適應屏幕寬度較小的設備;

 

缺點:

1. 菜單數量多層級復雜時,不容易記憶;
2. 菜單選項文字不宜過長,可能會截斷;
3. 各菜單選項之間的視覺權重差別不明顯。
他們都可以在已有的方向上進行擴展,如下圖

(橫向導航擴展)

 

但總體來說,單獨的橫向導航方式層級不能超過3層,多于3級就不利于用戶的閱讀和選擇。

(縱向導航擴展)

 

相對于橫向縱向的拓展性強,不管多少級都可以一致往下加,但層級高過于3層,用戶對導航的分辨和記憶會明顯下降。
當然,有時候單獨只有橫向或者縱向一種導航不能完全滿足我們的需求,他們有那么,根據以上特點,我們也可以有如下組合的形式。

(組合導航)

 

很明顯,這樣的組合導航,適用于一級導航不太多(做好少于5個)且內容權重差別很明顯,一級導航之后的導航內容和層級比較多且內容復雜。
另外,如果嫌縱向導航占空間,則可以考慮將縱向導航做成可折疊收起的模式,適用于貼著瀏覽器的縱向導航。

(可折疊的縱向導航)

 

總結一下:

1.橫向導航易記憶、易看,各導航權重區分明顯,越靠左越重要,但切換效率慢;
2.縱向導航擴展性強,可折疊,各導航權重區分不明顯,切換效率更高;
3.如果兩者都不能單獨滿足,可嘗試組合的形式。

 

原文地址:Sophia的玲瓏閣(公眾號)
作者:Sophia的玲瓏閣

轉載請注明:學UI網 » B端設計之導航

登錄收藏
 
你可能喜歡的:
點贊功能是如何讓用戶上癮的?點贊功能是如何讓用戶上癮的?
從什么時候開始,你覺得自己做設計不會排版?從什么時候開始,你覺得自己做設計不會排版?
從淘寶、微信等產品中掌握“搜索”交互從淘寶、微信等產品中掌握“搜索”交互
巴甫洛夫反應 - 你必須知道的心理學系列巴甫洛夫反應 – 你必須知道的心理學系列
像蘋果Google一樣做設計語言,帶你了解全流程(上)像蘋果Google一樣做設計語言,帶你了解全流程(上)
Apple 的設計哲學 · 聲音篇Apple 的設計哲學 · 聲音篇
返回、取消與關閉的使用邏輯返回、取消與關閉的使用邏輯
為什么,人們喜歡簡單,卻購買復雜!(下)為什么,人們喜歡簡單,卻購買復雜!(下)
送你10個技巧,打造精致的UI界面送你10個技巧,打造精致的UI界面
淺析教育APP中的兒童鎖設計淺析教育APP中的兒童鎖設計
?
天津十一选五app 游戏麻将之四人麻将 三多棋牌下载? 深圳机场股票行情走 吉祥棋牌最新版下载? 内蒙福彩3地开奖结果 股票代码查询一览表 四人长春麻将小鸡飞蛋 腾讯分分彩一星技巧 篮球场围网生产厂家 追光娱乐官网下载