移動導(dǎo)航的基本模式(下)

上期小結(jié)了常見的五種移動導(dǎo)航,標(biāo)簽導(dǎo)航、TAB導(dǎo)航、舵式導(dǎo)航、抽屜導(dǎo)航和宮格式導(dǎo)航。這期繼續(xù)分享另外五種常見的導(dǎo)航。
列表式導(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)航的層級搭配上也需要注意。
總結(jié)
通過兩期對移動導(dǎo)航的分析和小結(jié),我們不難發(fā)現(xiàn)移動導(dǎo)航的設(shè)計(jì)上是非常多樣性的,不同的產(chǎn)品功能會出現(xiàn)形式各異的導(dǎo)航,每一種導(dǎo)航都有各自的使用場景。沒有最完美的導(dǎo)航,只有最適合的導(dǎo)航。
當(dāng)我們在實(shí)際場景中運(yùn)用時可以先觀察競品如何設(shè)計(jì),分析其利弊,再結(jié)合自己產(chǎn)品實(shí)際的需求、功能、內(nèi)容、用戶使用場景等進(jìn)一步思考,做出多套方案后進(jìn)行最優(yōu)選擇。
在平時使用產(chǎn)品的過程中觀察各種層級的導(dǎo)航變化,思考它們的設(shè)計(jì)方式,進(jìn)行適當(dāng)小結(jié)。
通過長時間的積累,我相信大家對各種導(dǎo)航都能夠運(yùn)用自如。
相關(guān)閱讀
本文由 @李惠丸 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
不錯,不錯,謝謝分享
很好