可以作為應(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)航。
總結(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ù)量和形式上更加靈活缚去。
總結(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ā)布按鈕辅柴。
總結(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ì)上更加富有情感化。
總結(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)航。
小結(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)更好。
小結(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)擊時彈出其功能锄俄。
小結(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)航模式。
小結(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)航的層級搭配上也需要注意赖淤。