創(chuàng)新互聯(lián)APP項(xiàng)目組首席設(shè)計(jì)師帶您了解APP常用導(dǎo)航。

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

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

 

一、底部Tab

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

優(yōu)點(diǎn)：

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

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

缺點(diǎn)：

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

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

 

二、頂部Tab

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

優(yōu)點(diǎn)：

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

2、占據(jù)空間小：相比于底部Tab，頂部Tab一般占據(jù)的空間更小（因?yàn)椴恍枰紤]手指點(diǎn)擊，所以可以把區(qū)域縮小，只選用圖標(biāo)或者文字即可），可以把更多的空間安排給內(nèi)容展示。

3、手勢操作非常方便。

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

 

三、抽屜式

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

優(yōu)點(diǎn)：

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

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

缺點(diǎn)：

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

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

 

四、下拉篩選式

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

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

缺點(diǎn)：

1、可見性差。

2、操作步驟較多

 

五、側(cè)邊欄式

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

優(yōu)點(diǎn)：

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

2、擴(kuò)展性好。

缺點(diǎn)：

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

2、手指難以觸及，因?yàn)橐话愣际窃谧笊辖堑奈恢?

六、九宮格式

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

優(yōu)點(diǎn)：

1、擴(kuò)展性非常好。

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

缺點(diǎn)：

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

2、當(dāng)排布過多的時候，用戶容易眼花繚亂

七、列表式

這也是一種常見的功能導(dǎo)航。

優(yōu)點(diǎn)：

1、擴(kuò)展性非常好。

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

缺點(diǎn)：

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

2、當(dāng)排布過多的時候，用戶容易眼花繚亂

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

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

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

廣告

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