APP常用導航總結

4 評論 14222 瀏覽 1329 收藏 8 分鐘

雖然我承認導航這種東西在現在的app非常常見,但是實際上,這種東西也不是必須存在的。如果應用夠輕,比如雅虎每日新聞News Digest就不存在導航這種東西。只有當app的架構擴大到一定的程度,當內容繁雜到無法展示在一個頁面中,這時候才需要用到導航。

在選用導航的形式之前,更重要的是對內容進行分類(只針對內容,功能的導航可以不需要)。類別分清楚了,就對這個類別起個名字。之后,用戶就可以根據類別來找到他們需要的內容了。

當然,導航也是可以嵌套使用的,不過嵌套的時候建議選用不同的導航形式。

導航大概有如下:

  • 底部Tab
  • 頂部Tab
  • 抽屜式
  • 下拉篩選式
  • 側邊欄式
  • 九宮格式
  • 列表式

一、底部Tab

1

(微信iOS版)[1]

底部Tab是iOS提出來的導航方式,已經延續使用了很多年,所以這種導航最為常見。

優點:

1、可見性非常好,底部Tab非常明顯,易于發現;

2、同時,由于實在底部,操作性也非常好,用戶很方便就能觸及到這個區域。

缺點:

1、容納導航的類別有限,iOS建議最多五個,超過五個之后,底部有人就容納不下了。

2、占據空間大,一般都是文字+圖標的形式,占據空間略大。

當然,這種導航還存在一種變形的形式。某些app會嘗試在這里加入重要的操作,形成super tab,變成了一種兼顧導航和操作的導航欄。

2

(Path iOS版)[3]

不過,有個小小的疑問就是,為什么我見到的所有的操作都是放在中間的呢?這個問題歡迎探討一下。

二、頂部Tab

頂部Tab是谷歌提出來的,為了區分與iOS的區別的一種導航模式,由于在頂部,手指難以觸及,所以谷歌對應地提出了手勢操作的解決方法:通過在屏幕左右滑動來切換標簽。

優點:

1、擴展性非常好:標簽的個數沒有上限,不過太多的話,越是后面的頁面滲透率會越低。

2、占據空間?。合啾扔诘撞縏ab,頂部Tab一般占據的空間更?。ㄒ驗椴恍枰紤]手指點擊,所以可以把區域縮小,只選用圖標或者文字即可),可以把更多的空間安排給內容展示。

3、手勢操作非常方便。

缺點:

可見性略遜:這是空間占據的區域變小之后的后果。

當然,頂部Tab有時候也會容納一些按鍵,形成一種super tab,如上圖的網易新聞,某種意義上,那就是一種super tab。

三、抽屜式

804591-8e95ee11b79f5622

(手機QQ Android版v5.8.0.2505)

抽屜式也是谷歌提出來的一種導航模式,由于虛擬按鍵的存在,所以在安卓上使用底部Tab會造成雙底欄,視覺觀感不佳。但是,多重導航普遍是需要的,所以,谷歌提出來側邊欄的形式。通過漢堡菜單按鈕804591-9d3c50d0982d4e89觸發這個側邊欄。

優點:

1、擴展性好,導航的個數沒上限。

2、不占據空間,通過按鈕觸發,所以這種導航是占據空間最小的。

缺點:

1、可見性太差,用戶還沒能把漢堡菜單按鈕和側邊欄聯系起來,所以,側邊欄的滲透率很低。

2、操作復雜,漢堡菜單放置的位置比較難以觸及,同時不同的標簽頁切換步驟也比較多。

四、下拉篩選式

804591-41f7687741182d3c

(安智市場安卓版v5.7)

下拉篩選式跟抽屜式很類似,可以說只是視覺上的一些區別而已。

優點:

  1. 占據空間小,所以很容易嵌套到其他的導航里面去。

缺點:

  1. 可見性差
  2. 操作步驟較多

關于這個下拉篩選式,我設想的是如下的嵌套方式:

804591-5b68a534605baaa5

頂部Tab與下來篩選式的嵌套

五、側邊欄式

804591-e427004aebef2bf2

(天天動聽Android 8.1.1)

側邊欄式是一種在手機上很少見的導航,更多的是在PC端會常見一些。

優點:

  1. 可見性好,易于發現
  2. 擴展性好

缺點:

  1. 擠占了內容展示的空間
  2. 手指難以觸及,因為一般都是在左上角的位置

六、九宮格式

804591-8ebbb3622abb32ac

(支付寶安卓版9.0)

九宮格是一種常見的功能型導航,這種導航的思路很簡單,就是把功能排布出來,任君挑選。

優點:

  1. 擴展性非常好
  2. 視野范圍內可以展示的功能入口多

缺點:

  1. 單純的只是作為入口,無法展示內容
  2. 當排布過多的時候,用戶容易眼花繚亂

七、列表式

804591-504cb61d7bdf335e

(微信Android版6.2.5)

這也是一種常見的功能導航。

優點:

  1. 擴展性非常好
  2. 視野范圍內可以展示的功能入口多

缺點:

  1. 單純的只是作為入口,無法展示內容
  2. 當排布過多的時候,用戶容易眼花繚亂

這篇東西其實只是一個總結,總結得也比較淺顯,更多的是希望在以后自己在設計的時候,有個參考的東西而已。而且是考慮當有導航嵌套的時候,要怎么樣選用這些導航。

而且,不同的導航之間,其實差別都不是特別大,翻來覆去就是:可見性、操作性以及是否會擠占內容展示空間這幾點。這些點在導航設計中也不是難點。

[1] App常用導航框架??http://www.jianshu.com/p/45930d06d504

[2][系列]APP設計之五:導航

[3]一種新的底欄交互方式嘗試

 

本文由 @yqqyzy?原創發布于人人都是產品經理?,未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 如果說一下每一種導航適用于哪一種,就更好了

    來自重慶 回復
    1. 很容易看出來啦,體會一下場景與信息優先級

      來自廣東 回復
  2. 學到了很多

    來自天津 回復
  3. ??

    來自北京 回復