移動(dòng)導(dǎo)航的基本模式(下)
上期小結(jié)了常見(jiàn)的五種移動(dòng)導(dǎo)航,標(biāo)簽導(dǎo)航、TAB導(dǎo)航、舵式導(dǎo)航、抽屜導(dǎo)航和宮格式導(dǎo)航。這期繼續(xù)分享另外五種常見(jiàn)的導(dǎo)航。
列表式導(dǎo)航
列表導(dǎo)航是手機(jī)和網(wǎng)頁(yè)端都十分常見(jiàn)的導(dǎo)航模式,主要用于展示文字信息。使用列表式導(dǎo)航的頁(yè)面都十分干凈,內(nèi)容清晰,能快速定位到目標(biāo)。APP中一般以圖文結(jié)合的模式展示。
小結(jié):
采用列表導(dǎo)航的頁(yè)面內(nèi)容多為左對(duì)齊,同時(shí)頁(yè)面會(huì)產(chǎn)生大面積留白,使頁(yè)面看起來(lái)干凈整潔。使用上需根據(jù)具體需求來(lái)設(shè)計(jì)展示內(nèi)容和高度,用戶(hù)關(guān)注點(diǎn)在哪里,就展示哪些信息。適合功能之間互相獨(dú)立,切換頻率不高,以?xún)?nèi)容為主的信息或分類(lè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ù)頁(yè)面內(nèi)容自由伸縮大小,使用上十分靈活,可以很輕松的融入頁(yè)面。適合頁(yè)面分類(lèi)切換頻率較高,導(dǎo)航數(shù)量在2-4個(gè)之間的場(chǎng)景,不適合安卓,和一級(jí)導(dǎo)航。
輪播式導(dǎo)航
輪播式導(dǎo)航是通過(guò)橫向輪播面板衍生出的一種導(dǎo)航模式。通過(guò)橫向列表把信息藏到頁(yè)面之外,充分利用空間。只需滑動(dòng)手指就能輕松的切換。配合大圖背景,讓用戶(hù)同一時(shí)間專(zhuān)注一個(gè)目標(biāo),使用上體驗(yàn)更好。
小結(jié):
通過(guò)案例,我們不難發(fā)現(xiàn)使用輪播式導(dǎo)航的頁(yè)面整體十分干凈整潔,配合大圖的展示視覺(jué)沖擊更強(qiáng)烈,體驗(yàn)更好。但缺點(diǎn)一次只能切換相鄰的選項(xiàng)卡。用戶(hù)也大多會(huì)選擇優(yōu)先出現(xiàn)的功能,藏在后面的功能使用頻率會(huì)相對(duì)較少。適合功能之間不頻繁跳轉(zhuǎn),內(nèi)容經(jīng)常更新,視覺(jué)效果直觀(guān),彼此獨(dú)立的內(nèi)容。在使用上注意需要在頁(yè)面邊緣給出提示,引導(dǎo)用戶(hù)滑動(dòng)。
懸浮按鈕導(dǎo)航
懸浮按鈕導(dǎo)航是將導(dǎo)航頁(yè)面分層,無(wú)論你到達(dá)APP的哪個(gè)頁(yè)面,懸浮圖標(biāo)永遠(yuǎn)懸浮在頁(yè)面頂層,依靠懸浮層可以迅速對(duì)當(dāng)前頁(yè)面進(jìn)行操作。懸浮按鈕也是Material design的標(biāo)準(zhǔn)控件,同時(shí)在A(yíng)ndroid UI 交互中也是最常見(jiàn)的元素之一。常用來(lái)放置其核心功能,在用戶(hù)流程中起到重要作用,常出現(xiàn)在頁(yè)面右下方,并使用對(duì)比強(qiáng)烈的色彩突出,點(diǎn)擊時(shí)彈出其功能。
小結(jié):
通過(guò)案例可以發(fā)現(xiàn)浮動(dòng)按鈕在頁(yè)面上十分突出,通常用來(lái)承載相關(guān)度最高、最常用、最重要的操作。并根據(jù)頁(yè)面來(lái)顯示隱藏以及切換不同狀態(tài),是非常實(shí)用的一種導(dǎo)航模式,一般出現(xiàn)在需要正向操作的頁(yè)面。但是需要注意的是,懸浮icon會(huì)遮擋某些頁(yè)面的操作,如上圖Gmail頁(yè)面中浮動(dòng)按鈕擋住了下面的收藏,用戶(hù)需要額外的滑動(dòng)頁(yè)面才能點(diǎn)擊。所以在設(shè)計(jì)時(shí)應(yīng)該考慮進(jìn)去,比如在懸浮按鈕出現(xiàn)的頁(yè)面為它留有位置。
復(fù)合式導(dǎo)航
隨著應(yīng)用功能越來(lái)越多,頁(yè)面的分類(lèi)也越來(lái)越細(xì)致,單一的導(dǎo)航模式已經(jīng)無(wú)法滿(mǎn)足信息的層級(jí)分類(lèi),這時(shí)就需要使用復(fù)合式導(dǎo)航能將多種導(dǎo)航組合到一起,使大量信息通過(guò)多層級(jí)分類(lèi)有序的展示在一個(gè)頁(yè)面,是目前最常見(jiàn)的導(dǎo)航模式。
小結(jié):
復(fù)合式導(dǎo)航的設(shè)計(jì)隨處可見(jiàn),其優(yōu)點(diǎn)是將多層級(jí)的信息有序的排列在一個(gè)頁(yè)面,使信息分類(lèi)更明確,頁(yè)面更有活力。使用上多為一個(gè)主導(dǎo)航加兩個(gè)輔助導(dǎo)航的設(shè)計(jì),比較少有超過(guò)3種以上的設(shè)計(jì),過(guò)多的導(dǎo)航會(huì)使用戶(hù)失去焦點(diǎn),在導(dǎo)航的層級(jí)搭配上也需要注意。
總結(jié)
通過(guò)兩期對(duì)移動(dòng)導(dǎo)航的分析和小結(jié),我們不難發(fā)現(xiàn)移動(dòng)導(dǎo)航的設(shè)計(jì)上是非常多樣性的,不同的產(chǎn)品功能會(huì)出現(xiàn)形式各異的導(dǎo)航,每一種導(dǎo)航都有各自的使用場(chǎng)景。沒(méi)有最完美的導(dǎo)航,只有最適合的導(dǎo)航。
當(dāng)我們?cè)趯?shí)際場(chǎng)景中運(yùn)用時(shí)可以先觀(guān)察競(jìng)品如何設(shè)計(jì),分析其利弊,再結(jié)合自己產(chǎn)品實(shí)際的需求、功能、內(nèi)容、用戶(hù)使用場(chǎng)景等進(jìn)一步思考,做出多套方案后進(jìn)行最優(yōu)選擇。
在平時(shí)使用產(chǎn)品的過(guò)程中觀(guān)察各種層級(jí)的導(dǎo)航變化,思考它們的設(shè)計(jì)方式,進(jìn)行適當(dāng)小結(jié)。
通過(guò)長(zhǎng)時(shí)間的積累,我相信大家對(duì)各種導(dǎo)航都能夠運(yùn)用自如。
相關(guān)閱讀
本文由 @李惠丸 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
不錯(cuò),不錯(cuò),謝謝分享
很好
沙發(fā)、抱大腿、蹭腿毛