APP常用導(dǎo)航總結(jié)

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

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

當(dāng)然,導(dǎo)航也是可以嵌套使用的,不過嵌套的時(shí)候建議選用不同的導(dǎo)航形式。

導(dǎo)航大概有如下:①底部Tab,②頂部Tab,③抽屜式、④下拉篩選式、⑤側(cè)邊欄式、⑥九宮格式、⑦列表式。

一、底部Tab


(微信iOS版)[1]

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

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

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

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

缺點(diǎn):

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

2、占據(jù)空間大,一般都是文字+圖標(biāo)的形式,占據(jù)空間略大。

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

(Path iOS版)[3]

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

二、頂部Tab


(網(wǎng)易新聞 Android ?v5.3.1)

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

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

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

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

3、手勢(shì)操作非常方便。

缺點(diǎn):

可見性略遜:這是空間占據(jù)的區(qū)域變小之后的后果。

當(dāng)然,頂部Tab有時(shí)候也會(huì)容納一些按鍵,形成一種super tab,如上圖的網(wǎng)易新聞,某種意義上,那就是一種super tab。

三、抽屜式

(手機(jī)QQ Android版v5.8.0.2505)

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

漢堡菜單按鈕

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

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

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

缺點(diǎn):

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

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

四、下拉篩選式


(安智市場(chǎng)安卓版v5.7)


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

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

1、占據(jù)空間小,所以很容易嵌套到其他的導(dǎo)航里面去。

缺點(diǎn):

1、可見性差

2、操作步驟較多

關(guān)于這個(gè)下拉篩選式,我設(shè)想的是如下的嵌套方式:

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

五、側(cè)邊欄式

(天天動(dòng)聽Android 8.1.1)

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

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

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

2、擴(kuò)展性好

缺點(diǎn):

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

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

六、九宮格式

(支付寶安卓版9.0)

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

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

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

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

缺點(diǎn):

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

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

七、列表式

(微信Android版6.2.5)

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

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

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

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

缺點(diǎn):

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

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

這篇東西其實(shí)只是一個(gè)總結(jié),總結(jié)得也比較淺顯,更多的是希望在以后自己在設(shè)計(jì)的時(shí)候,有個(gè)參考的東西而已。而且是考慮當(dāng)有導(dǎo)航嵌套的時(shí)候,要怎么樣選用這些導(dǎo)航。

而且,不同的導(dǎo)航之間,其實(shí)差別都不是特別大,翻來覆去就是:可見性、操作性以及是否會(huì)擠占內(nèi)容展示空間這幾點(diǎn)。這些點(diǎn)在導(dǎo)航設(shè)計(jì)中也不是難點(diǎn)。

[1] App常用導(dǎo)航框架http://www.lxweimin.com/p/45930d06d504

[2][系列]APP設(shè)計(jì)之五:導(dǎo)航http://www.lxweimin.com/p/33073c336be4

[3]一種新的底欄交互方式嘗試http://www.lxweimin.com/p/94b2ebfd2128

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容