雖然我承認(rèn)導(dǎo)航這種東西在現(xiàn)在的app非常常見沙兰,但是實際上槐臀,這種東西也不是必須存在的葡幸。如果應(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)容了秒啦。
當(dāng)然,導(dǎo)航也是可以嵌套使用的搀玖,不過嵌套的時候建議選用不同的導(dǎo)航形式余境。
導(dǎo)航大概有如下:①底部Tab,②頂部Tab灌诅,③抽屜式芳来、④下拉篩選式、⑤側(cè)邊欄式猜拾、⑥九宮格式即舌、⑦列表式。
一挎袜、底部Tab
底部Tab是iOS提出來的導(dǎo)航方式顽聂,已經(jīng)延續(xù)使用了很多年,所以這種導(dǎo)航最為常見盯仪。
優(yōu)點:
1紊搪、可見性非常好,底部Tab非常明顯全景,易于發(fā)現(xiàn)耀石;
2、同時爸黄,由于實在底部滞伟,操作性也非常好揭鳞,用戶很方便就能觸及到這個區(qū)域。
缺點:
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)點:
1鸽素、擴(kuò)展性非常好:標(biāo)簽的個數(shù)沒有上限,不過太多的話亦鳞,越是后面的頁面滲透率會越低馍忽。
2、占據(jù)空間醒嗖睢:相比于底部Tab遭笋,頂部Tab一般占據(jù)的空間更小(因為不需要考慮手指點擊徒探,所以可以把區(qū)域縮小坐梯,只選用圖標(biāo)或者文字即可),可以把更多的空間安排給內(nèi)容展示刹帕。
3吵血、手勢操作非常方便谎替。
缺點:
可見性略遜:這是空間占據(jù)的區(qū)域變小之后的后果。
當(dāng)然蹋辅,頂部Tab有時候也會容納一些按鍵钱贯,形成一種super tab,如上圖的網(wǎng)易新聞侦另,某種意義上秩命,那就是一種super tab。
三褒傅、抽屜式
抽屜式也是谷歌提出來的一種導(dǎo)航模式弃锐,由于虛擬按鍵的存在,所以在安卓上使用底部Tab會造成雙底欄殿托,視覺觀感不佳霹菊。但是,多重導(dǎo)航普遍是需要的支竹,所以旋廷,谷歌提出來側(cè)邊欄的形式。通過漢堡菜單按鈕(如下)觸發(fā)這個側(cè)邊欄礼搁。
優(yōu)點:
1饶碘、擴(kuò)展性好,導(dǎo)航的個數(shù)沒上限馒吴。
2扎运、不占據(jù)空間,通過按鈕觸發(fā)饮戳,所以這種導(dǎo)航是占據(jù)空間最小的绪囱。
缺點:
1、可見性太差莹捡,用戶還沒能把漢堡菜單按鈕和側(cè)邊欄聯(lián)系起來鬼吵,所以,側(cè)邊欄的滲透率很低篮赢。
2齿椅、操作復(fù)雜,漢堡菜單放置的位置比較難以觸及启泣,同時不同的標(biāo)簽頁切換步驟也比較多涣脚。
四、下拉篩選式
下拉篩選式跟抽屜式很類似寥茫,可以說只是視覺上的一些區(qū)別而已遣蚀。
優(yōu)點:
1、占據(jù)空間小,所以很容易嵌套到其他的導(dǎo)航里面去芭梯。
缺點:
1险耀、可見性差
2、操作步驟較多
關(guān)于這個下拉篩選式玖喘,我設(shè)想的是如下的嵌套方式:
五甩牺、側(cè)邊欄式
側(cè)邊欄式是一種在手機(jī)上很少見的導(dǎo)航,更多的是在PC端會常見一些累奈。
優(yōu)點:
1贬派、可見性好,易于發(fā)現(xiàn)
2澎媒、擴(kuò)展性好
缺點:
1搞乏、擠占了內(nèi)容展示的空間
2、手指難以觸及戒努,因為一般都是在左上角的位置
六请敦、九宮格式
九宮格是一種常見的功能型導(dǎo)航,這種導(dǎo)航的思路很簡單柏卤,就是把功能排布出來冬三,任君挑選匀油。
優(yōu)點:
1缘缚、擴(kuò)展性非常好
2、視野范圍內(nèi)可以展示的功能入口多
缺點:
1敌蚜、單純的只是作為入口桥滨,無法展示內(nèi)容
2、當(dāng)排布過多的時候弛车,用戶容易眼花繚亂
七齐媒、列表式
這也是一種常見的功能導(dǎo)航。
優(yōu)點:
1纷跛、擴(kuò)展性非常好
2喻括、視野范圍內(nèi)可以展示的功能入口多
缺點:
1、單純的只是作為入口贫奠,無法展示內(nèi)容
2唬血、當(dāng)排布過多的時候,用戶容易眼花繚亂
這篇東西其實只是一個總結(jié)唤崭,總結(jié)得也比較淺顯拷恨,更多的是希望在以后自己在設(shè)計的時候,有個參考的東西而已谢肾。而且是考慮當(dāng)有導(dǎo)航嵌套的時候腕侄,要怎么樣選用這些導(dǎo)航。
而且,不同的導(dǎo)航之間冕杠,其實差別都不是特別大微姊,翻來覆去就是:可見性、操作性以及是否會擠占內(nèi)容展示空間這幾點拌汇。這些點在導(dǎo)航設(shè)計中也不是難點柒桑。
[1] App常用導(dǎo)航框架http://www.reibang.com/p/45930d06d504
[2][系列]APP設(shè)計之五:導(dǎo)航http://www.reibang.com/p/33073c336be4
[3]一種新的底欄交互方式嘗試http://www.reibang.com/p/94b2ebfd2128