創(chuàng)新互聯(lián)APP項目組首席設計師帶您了解APP常用導航。

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

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

 

一、底部Tab

底部Tab是iOS提出來的導航方式，已經(jīng)延續(xù)使用了很多年，所以這種導航最為常見。

優(yōu)點：

1、可見性非常好，底部Tab非常明顯，易于發(fā)現(xiàn)；

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

缺點：

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

2、占據(jù)空間大，一般都是文字+圖標的形式，占據(jù)空間略大。當然，這種導航還存在一種變形的形式。某些app會嘗試在這里加入重要的操作，形成super tab，變成了一種兼顧導航和操作的導航欄。

 

二、頂部Tab

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

優(yōu)點：

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

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

3、手勢操作非常方便。

缺點：可見性略遜：這是空間占據(jù)的區(qū)域變小之后的后果。當然，頂部Tab有時候也會容納一些按鍵，形成一種super tab，如上圖的網(wǎng)易新聞，某種意義上，那就是一種super tab。

 

三、抽屜式

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

優(yōu)點：

1、擴展性好，導航的個數(shù)沒上限。

2、不占據(jù)空間，通過按鈕觸發(fā)，所以這種導航是占據(jù)空間最小的。

缺點：

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

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

 

四、下拉篩選式

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

優(yōu)點：占據(jù)空間小，所以很容易嵌套到其他的導航里面去。

缺點：

1、可見性差。

2、操作步驟較多

 

五、側(cè)邊欄式

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

優(yōu)點：

1、可見性好，易于發(fā)現(xiàn)。

2、擴展性好。

缺點：

1、擠占了內(nèi)容展示的空間。

2、手指難以觸及，因為一般都是在左上角的位置

六、九宮格式

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

優(yōu)點：

1、擴展性非常好。

2、視野范圍內(nèi)可以展示的功能入口多

缺點：

1、單純的只是作為入口，無法展示內(nèi)容。

2、當排布過多的時候，用戶容易眼花繚亂

七、列表式

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

優(yōu)點：

1、擴展性非常好。

2、視野范圍內(nèi)可以展示的功能入口多

缺點：

1、單純的只是作為入口，無法展示內(nèi)容。

2、當排布過多的時候，用戶容易眼花繚亂

這篇東西其實只是一個總結(jié)，總結(jié)得也比較淺顯，因為在創(chuàng)新互聯(lián)每周的工作例會中都要和大家分享下自己工作的心得和收獲，所以就寫了這些。更多的是希望在以后自己在設計的時候，有個參考的東西而已。而且是考慮當有導航嵌套的時候，要怎么樣選用這些導航。而且，不同的導航之間，其實差別都不是特別大，翻來覆去就是：可見性、操作性以及是否會擠占內(nèi)容展示空間這幾點。這些點在導航設計中也不是難點。

文章標題：APP常用導航總結(jié)！
網(wǎng)頁URL：http://jinyejixie.com/news26/17126.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、搜索引擎優(yōu)化、企業(yè)建站、手機網(wǎng)站建設、品牌網(wǎng)站制作、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)