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

雖然我承認(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


(微信iOS版)[1]

底部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)航欄。

(Path iOS版)[3]

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

二旭从、頂部Tab


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

頂部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。

三褒傅、抽屜式

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

抽屜式也是谷歌提出來的一種導(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)簽頁切換步驟也比較多涣脚。

四、下拉篩選式


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


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

優(yōu)點:

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

缺點:

1险耀、可見性差

2、操作步驟較多

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

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

五甩牺、側(cè)邊欄式

(天天動聽Android 8.1.1)

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

優(yōu)點:

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

2澎媒、擴(kuò)展性好

缺點:

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

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

六请敦、九宮格式

(支付寶安卓版9.0)

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

優(yōu)點:

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

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

缺點:

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

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

七齐媒、列表式

(微信Android版6.2.5)

這也是一種常見的功能導(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市噪舀,隨后出現(xiàn)的幾起案子魁淳,更是在濱河造成了極大的恐慌,老刑警劉巖与倡,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件界逛,死亡現(xiàn)場離奇詭異,居然都是意外死亡纺座,警方通過查閱死者的電腦和手機(jī)息拜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來净响,“玉大人少欺,你說我怎么就攤上這事〔鱿停” “怎么了赞别?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長配乓。 經(jīng)常有香客問我仿滔,道長,這世上最難降的妖魔是什么犹芹? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任崎页,我火速辦了婚禮,結(jié)果婚禮上腰埂,老公的妹妹穿的比我還像新娘飒焦。我一直安慰自己,他們只是感情好屿笼,可當(dāng)我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布牺荠。 她就那樣靜靜地躺著,像睡著了一般刁卜。 火紅的嫁衣襯著肌膚如雪志电。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天蛔趴,我揣著相機(jī)與錄音挑辆,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛鱼蝉,可吹牛的內(nèi)容都是我干的洒嗤。 我是一名探鬼主播,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼魁亦,長吁一口氣:“原來是場噩夢啊……” “哼渔隶!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起洁奈,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤间唉,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后利术,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體呈野,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年印叁,在試婚紗的時候發(fā)現(xiàn)自己被綠了被冒。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡轮蜕,死狀恐怖昨悼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情跃洛,我是刑警寧澤率触,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站税课,受9級特大地震影響闲延,放射性物質(zhì)發(fā)生泄漏痊剖。R本人自食惡果不足惜韩玩,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望陆馁。 院中可真熱鬧找颓,春花似錦、人聲如沸叮贩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽益老。三九已至彪蓬,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間捺萌,已是汗流浹背档冬。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人酷誓。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓披坏,卻偏偏與公主長得像,于是被迫代替她去往敵國和親盐数。 傳聞我的和親對象是個殘疾皇子棒拂,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,779評論 2 354

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,110評論 25 707
  • 當(dāng)確定了APP的設(shè)計需求和產(chǎn)品的整體結(jié)構(gòu)之后,要著手開始規(guī)劃和制作APP的原型及UI界面玫氢。一款A(yù)PP的好與不好帚屉,很...
    設(shè)計思考閱讀 45,981評論 7 117
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 46,758評論 22 665
  • 人,為什么要長大呢漾峡? 小時候的模樣涮阔,不是最好的模樣嗎? 無憂無慮灰殴,在熟悉的地方奔跑著敬特,與三兩伙伴打著彈珠,期待著每...
    浮生夢蘇閱讀 243評論 0 2
  • 在義馬,碰見個高中同學(xué) 他從東來 我往西走 我們漫步在 春天的街頭 上次那個邂逅 是在三十年前 三十年前我們在校留...
    本無痕閱讀 453評論 4 4