移動端導(dǎo)航欄

可以作為應(yīng)用主體導(dǎo)航

標(biāo)簽導(dǎo)航

標(biāo)簽導(dǎo)航是IOS系統(tǒng)中最常見的導(dǎo)航绒尊,它繼承了桌面導(dǎo)航的樣式,對圖標(biāo)進(jìn)行了扁平化處理。在IOS系統(tǒng)原生頁面中可以看到許多頁面都使用了標(biāo)簽導(dǎo)航的設(shè)計(jì),包括我們常用的微信瞭空、支付寶、微博等軟件,都使用標(biāo)簽導(dǎo)航做為它們的一級導(dǎo)航咆畏⊥继穑可以說標(biāo)簽導(dǎo)航是最符合IOS用戶習(xí)慣的一種導(dǎo)航。

image

總結(jié):標(biāo)簽導(dǎo)航適用于主導(dǎo)航各功能重要程度一致鳖眼,并且主功能數(shù)量在3-5個之間黑毅,相互之間切換頻繁的場景。

TAB導(dǎo)航(同時也可以作為頁面導(dǎo)航)

TAB導(dǎo)航是IOS和安卓端都十分常見的導(dǎo)航钦讳,它和標(biāo)簽導(dǎo)航本質(zhì)上其實(shí)相似矿瘦,但是展現(xiàn)形式有很大區(qū)別。tab導(dǎo)航一般處于頁面的頂部愿卒,在使用數(shù)量和形式上更加靈活缚去。

image
image
image

總結(jié):通過案例可以發(fā)現(xiàn)TAB導(dǎo)航在使用上十分靈活多變,外觀簡潔琼开,能完美運(yùn)用到各場景易结,是目前十分流行的導(dǎo)航模式。

舵式導(dǎo)航

舵式導(dǎo)航是標(biāo)簽導(dǎo)航的變體柜候,也是比較常見的導(dǎo)航之一搞动。因?yàn)橥庥^看起來像船舵,所以取名舵式導(dǎo)航渣刷。和標(biāo)簽導(dǎo)航不同的是它將核心功能放在導(dǎo)航正中央鹦肿,并用對比強(qiáng)烈的色彩來和其他導(dǎo)航進(jìn)行區(qū)分,常用于發(fā)布按鈕辅柴。

image

總結(jié):舵式導(dǎo)航彌補(bǔ)了標(biāo)簽導(dǎo)航功能數(shù)量的限制箩溃,重點(diǎn)突出了核心功能,適用于發(fā)布功能下有多種同級分類選項(xiàng)的應(yīng)用碌嘀,常用+號表示涣旨,以及在功能型產(chǎn)品中核心功能的開關(guān)按鈕。但是相比標(biāo)簽導(dǎo)航不足的是股冗,舵式導(dǎo)航將核心功能全部隱藏在+號中霹陡,需要用戶二次點(diǎn)擊才能到達(dá)目標(biāo),增加了點(diǎn)擊次數(shù)魁瞪,藏在+號中的功能使用頻率會比一級導(dǎo)航大大降低穆律。

應(yīng)用輔導(dǎo)航

抽屜式導(dǎo)航

抽屜式導(dǎo)航外觀小巧惠呼,占用空間少导俘,容量大。外觀設(shè)計(jì)的像抽屜剔蹋,可以自由伸縮旅薄,也是我們常說的漢堡菜單。它的核心目的是隱藏不常用的功能,減少主界面導(dǎo)航控件數(shù)量少梁,讓界面更加干凈利落洛口。這種設(shè)計(jì)模式曾經(jīng)非常流行。但是正因?yàn)樗男∏煽Γ痔幵陧撁孀笊戏降谘妫菃问植僮鲿r非常不容易點(diǎn)擊到的區(qū)域,這也導(dǎo)致藏在抽屜里的功能很少用戶會使用妨马。所以目前抽屜導(dǎo)航在市面上的使用量已經(jīng)越來越少挺举。但目前仍有一些主流軟件在使用抽屜導(dǎo)航的設(shè)計(jì),一般用來放置輔助功能烘跺。

總結(jié):抽屜式導(dǎo)航適合作為產(chǎn)品的輔助導(dǎo)航湘纵,一般用來放置需要但是不常用到的功能,例如設(shè)置滤淳、當(dāng)前用戶等信息梧喷。

常見頁面導(dǎo)航

宮格式導(dǎo)航

宮格式導(dǎo)航也是較為常見的一種,它的特點(diǎn)是占據(jù)空間大脖咐,入口扁平化铺敌,以平鋪的形式展示所有功能,這一點(diǎn)和桌面類似屁擅,在使用上讓功能一目了然适刀,在設(shè)計(jì)上更加富有情感化。

image
image

總結(jié):宮格導(dǎo)航常用在二級菜單煤蹭,在使用上充分利用了頁面空間笔喉,使頁面更飽滿,視覺更清晰硝皂。但缺點(diǎn)是不方便同級功能之間互相切換常挚,必須退出到導(dǎo)航頁面重新選擇。常用作同級別下使用頻率相近又彼此獨(dú)立且功能之間切換頻
率不高的場景稽物。

列表式導(dǎo)航

列表導(dǎo)航是手機(jī)和網(wǎng)頁端都十分常見的導(dǎo)航模式奄毡,主要用于展示文字信息。使用列表式導(dǎo)航的頁面都十分干凈贝或,內(nèi)容清晰吼过,能快速定位到目標(biāo)。APP中一般以圖文結(jié)合的模式展示咪奖。

小結(jié):

采用列表導(dǎo)航的頁面內(nèi)容多為左對齊盗忱,同時頁面會產(chǎn)生大面積留白,使頁面看起來干凈整潔羊赵。使用上需根據(jù)具體需求來設(shè)計(jì)展示內(nèi)容和高度趟佃,用戶關(guān)注點(diǎn)在哪里,就展示哪些信息。適合功能之間互相獨(dú)立闲昭,切換頻率不高罐寨,以內(nèi)容為主的信息或分類展示。

分段式導(dǎo)航

分段式導(dǎo)航也是IOS系統(tǒng)自帶的標(biāo)準(zhǔn)控件序矩,它體積小巧鸯绿,可根據(jù)內(nèi)容自由伸縮,能輕松融入界面簸淀,不占用空間楞慈,是目前IOS端使用頻率較高的一種導(dǎo)航。

image

小結(jié):

分段式導(dǎo)航IOS的標(biāo)準(zhǔn)控件啃擦,可以根據(jù)頁面內(nèi)容自由伸縮大小囊蓝,使用上十分靈活,可以很輕松的融入頁面令蛉。適合頁面分類切換頻率較高聚霜,導(dǎo)航數(shù)量在2-4個之間的場景,不適合安卓珠叔,和一級導(dǎo)航蝎宇。

輪播式導(dǎo)航

輪播式導(dǎo)航是通過橫向輪播面板衍生出的一種導(dǎo)航模式。通過橫向列表把信息藏到頁面之外祷安,充分利用空間姥芥。只需滑動手指就能輕松的切換。配合大圖背景汇鞭,讓用戶同一時間專注一個目標(biāo)凉唐,使用上體驗(yàn)更好。

image

小結(jié):

通過案例,我們不難發(fā)現(xiàn)使用輪播式導(dǎo)航的頁面整體十分干凈整潔,配合大圖的展示視覺沖擊更強(qiáng)烈瞳遍,體驗(yàn)更好。但缺點(diǎn)一次只能切換相鄰的選項(xiàng)卡搭盾。用戶也大多會選擇優(yōu)先出現(xiàn)的功能,藏在后面的功能使用頻率會相對較少。適合功能之間不頻繁跳轉(zhuǎn),內(nèi)容經(jīng)常更新强品,視覺效果直觀,彼此獨(dú)立的內(nèi)容屈糊。在使用上注意需要在頁面邊緣給出提示的榛,引導(dǎo)用戶滑動。

懸浮按鈕導(dǎo)航

懸浮按鈕導(dǎo)航是將導(dǎo)航頁面分層另玖,無論你到達(dá)APP的哪個頁面困曙,懸浮圖標(biāo)永遠(yuǎn)懸浮在頁面頂層,依靠懸浮層可以迅速對當(dāng)前頁面進(jìn)行操作谦去。懸浮按鈕也是Material design的標(biāo)準(zhǔn)控件慷丽,同時在Android UI 交互中也是最常見的元素之一。常用來放置其核心功能鳄哭,在用戶流程中起到重要作用要糊,常出現(xiàn)在頁面右下方,并使用對比強(qiáng)烈的色彩突出妆丘,點(diǎn)擊時彈出其功能锄俄。

image

小結(jié):

通過案例可以發(fā)現(xiàn)浮動按鈕在頁面上十分突出,通常用來承載相關(guān)度最高勺拣、最常用奶赠、最重要的操作。并根據(jù)頁面來顯示隱藏以及切換不同狀態(tài)药有,是非常實(shí)用的一種導(dǎo)航模式毅戈,一般出現(xiàn)在需要正向操作的頁面。但是需要注意的是愤惰,懸浮icon會遮擋某些頁面的操作苇经,如上圖Gmail頁面中浮動按鈕擋住了下面的收藏,用戶需要額外的滑動頁面才能點(diǎn)擊宦言。所以在設(shè)計(jì)時應(yīng)該考慮進(jìn)去扇单,比如在懸浮按鈕出現(xiàn)的頁面為它留有位置。

復(fù)合式導(dǎo)航

隨著應(yīng)用功能越來越多奠旺,頁面的分類也越來越細(xì)致蜘澜,單一的導(dǎo)航模式已經(jīng)無法滿足信息的層級分類,這時就需要使用復(fù)合式導(dǎo)航能將多種導(dǎo)航組合到一起响疚,使大量信息通過多層級分類有序的展示在一個頁面兼都,是目前最常見的導(dǎo)航模式。

image
image

小結(jié):

復(fù)合式導(dǎo)航的設(shè)計(jì)隨處可見稽寒,其優(yōu)點(diǎn)是將多層級的信息有序的排列在一個頁面扮碧,使信息分類更明確,頁面更有活力杏糙。使用上多為一個主導(dǎo)航加兩個輔助導(dǎo)航的設(shè)計(jì)慎王,比較少有超過3種以上的設(shè)計(jì),過多的導(dǎo)航會使用戶失去焦點(diǎn)宏侍,在導(dǎo)航的層級搭配上也需要注意赖淤。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市谅河,隨后出現(xiàn)的幾起案子咱旱,更是在濱河造成了極大的恐慌确丢,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吐限,死亡現(xiàn)場離奇詭異鲜侥,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)诸典,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進(jìn)店門描函,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人狐粱,你說我怎么就攤上這事舀寓。” “怎么了肌蜻?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵互墓,是天一觀的道長。 經(jīng)常有香客問我蒋搜,道長轰豆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任齿诞,我火速辦了婚禮酸休,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘祷杈。我一直安慰自己斑司,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布但汞。 她就那樣靜靜地躺著宿刮,像睡著了一般。 火紅的嫁衣襯著肌膚如雪私蕾。 梳的紋絲不亂的頭發(fā)上僵缺,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天,我揣著相機(jī)與錄音踩叭,去河邊找鬼磕潮。 笑死,一個胖子當(dāng)著我的面吹牛容贝,可吹牛的內(nèi)容都是我干的自脯。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼斤富,長吁一口氣:“原來是場噩夢啊……” “哼膏潮!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起满力,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤焕参,失蹤者是張志新(化名)和其女友劉穎轻纪,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體叠纷,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡刻帚,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了讲岁。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片我擂。...
    茶點(diǎn)故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡衬以,死狀恐怖缓艳,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情看峻,我是刑警寧澤阶淘,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站互妓,受9級特大地震影響溪窒,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜冯勉,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一澈蚌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧灼狰,春花似錦宛瞄、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蝴簇,卻和暖如春杯活,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背熬词。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工旁钧, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人互拾。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓均践,卻偏偏與公主長得像,于是被迫代替她去往敵國和親摩幔。 傳聞我的和親對象是個殘疾皇子彤委,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評論 2 353

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