迷路的定義是什么?

2018-09-26 3070 0

生活中大家或多或少都會(huì)有迷路的經(jīng)驗(yàn),但你是不是從來(lái)沒(méi)思考過(guò)迷路的定義是什么?

 

迷路的定義其實(shí)有兩個(gè)核心:

1.想要到達(dá)一個(gè)目的地。

2.不知道自己在哪里,應(yīng)該往哪走。


和生活中的迷路一樣,用戶在使用APP過(guò)程中也可能會(huì)「迷路」。因?yàn)橛脩羰褂肁PP時(shí)同樣需要到達(dá)一個(gè)頁(yè)面,如果沒(méi)有合適引導(dǎo),用戶很難知道他需要怎么跳轉(zhuǎn)才能到達(dá)自己想要的頁(yè)面。在APP中,導(dǎo)航設(shè)計(jì)起到的正是這種關(guān)鍵作用:讓用戶了解他此時(shí)在哪個(gè)頁(yè)面,他想要到達(dá)某個(gè)頁(yè)面應(yīng)該怎么跳轉(zhuǎn)。

 

下面我們通過(guò)實(shí)例從是什么、為什么、怎么做這三個(gè)方面來(lái)介紹一下目前APP設(shè)計(jì)中最常用的幾種導(dǎo)航。


一、底部標(biāo)簽導(dǎo)航

 

1.簡(jiǎn)介

底部標(biāo)簽導(dǎo)航是APP中最常見(jiàn)的導(dǎo)航。

為什么它會(huì)是最常見(jiàn)的?就像超市把利潤(rùn)最高(最想賣給顧客)的商品擺在顧客觸手可及的地方一樣,APP最核心的功能通常也應(yīng)該放在用戶觸手可及的地方。在用戶握持手機(jī)時(shí),屏幕底部區(qū)域恰好是大拇指最方便觸及的區(qū)域。因此大多數(shù)APP產(chǎn)品才會(huì)選擇底部標(biāo)簽導(dǎo)航的形式來(lái)呈現(xiàn)產(chǎn)品核心功能。


2.設(shè)計(jì)特征

1)通常作為APP的一級(jí)導(dǎo)航(主導(dǎo)航)。

原因同簡(jiǎn)介里的解釋。

 

2)標(biāo)簽數(shù)通常為3-5個(gè)。

為什么不更多?因?yàn)榇竽粗赣|摸屏幕時(shí)的接觸面積較大,一旦標(biāo)簽數(shù)超過(guò)5個(gè),每個(gè)標(biāo)簽的所占面積不足,將會(huì)使正確的標(biāo)簽點(diǎn)擊選擇變得困難,甚至導(dǎo)致誤點(diǎn)擊。

 

3)標(biāo)簽通常是圖標(biāo)+文字形式的。

標(biāo)簽通??梢杂形淖?、圖標(biāo)、文字加圖標(biāo)這3種設(shè)計(jì)形式,為什么非要用圖標(biāo)+文字?

首先,文字的意義指向性強(qiáng)于圖標(biāo)。舉個(gè)例子,一個(gè)X,可以表示關(guān)閉,也可以表示錯(cuò)誤,甚至可以表示未知數(shù),但「關(guān)閉」這兩個(gè)字表示的就是關(guān)閉。

其次,人類作為視覺(jué)化動(dòng)物,對(duì)圖形比對(duì)文字敏感。

綜合起來(lái),圖標(biāo)+文字的形式是意義指向最準(zhǔn)確的形式,也是讓用戶用戶最快理解標(biāo)簽含義(功能)的形式。

 

4)標(biāo)簽順序通常按功能優(yōu)先級(jí)從左至右排列,第1個(gè)標(biāo)簽顯示產(chǎn)品主頁(yè)面。

為什么?因?yàn)榉灿信帕?,在視覺(jué)上必有順序。有順序,必有優(yōu)先級(jí)。因此第1個(gè)標(biāo)簽通常顯示產(chǎn)品主頁(yè)面,或者說(shuō)放置最核心的功能。

 

5)如果標(biāo)簽數(shù)多于5個(gè),但依然要使用底部標(biāo)簽導(dǎo)航,可以把最右側(cè)標(biāo)簽設(shè)計(jì)為「更多」,然后點(diǎn)擊「更多」會(huì)顯示更多功能。

這就像產(chǎn)品調(diào)研的問(wèn)卷設(shè)計(jì)中我們?cè)O(shè)置選項(xiàng)一樣,有時(shí)候我們需要讓選項(xiàng)互斥,但選項(xiàng)數(shù)量又很多,這個(gè)時(shí)候我們可以把重要性低的幾個(gè)選項(xiàng)合并成一個(gè)選項(xiàng)叫「其它」。

 

6)標(biāo)簽對(duì)應(yīng)功能模塊間通常有高頻次切換需求,且功能層級(jí)相當(dāng)。

 

7)通常用戶所在頁(yè)的標(biāo)簽需要突出顯示(正常是通過(guò)顏色差異和標(biāo)簽圖形變化來(lái)突出)。

為什么?因?yàn)橐層脩粼贏PP中不「迷路」,一個(gè)至關(guān)重要的點(diǎn)就是讓他知道自己現(xiàn)在在哪。

 

8)底部標(biāo)簽在特定情況下可以做成沉浸式的。

為了增加頁(yè)面的展示空間,讓用戶能更專注(沉浸)于頁(yè)面內(nèi)容,比如說(shuō)內(nèi)容閱讀類產(chǎn)品,底部導(dǎo)航可以設(shè)計(jì)成上滑時(shí)隱藏、下滑時(shí)顯示的形式。但這種設(shè)計(jì)可能會(huì)導(dǎo)致使底部標(biāo)簽導(dǎo)航失去其原本在標(biāo)簽切換中的便捷性,使用時(shí)需要慎重考慮。

 

9)考慮到大屏手機(jī)的單手操作,底部導(dǎo)航標(biāo)簽有時(shí)會(huì)采用左滑右滑切換標(biāo)簽的交互。


3.優(yōu)缺點(diǎn)

1)優(yōu)點(diǎn)

可以直觀展現(xiàn)APP的核心功能頁(yè)面及入口。

用戶可以在不同的功能模塊間進(jìn)行快速切換。

2)缺點(diǎn)

作為頁(yè)面固定顯示的內(nèi)容,會(huì)擠壓頁(yè)面其它內(nèi)容的顯示區(qū)域,進(jìn)而降低頁(yè)面的信息承載量。


4.原型設(shè)計(jì)實(shí)現(xiàn)案例

底部導(dǎo)航

點(diǎn)此查看原型實(shí)例

 

 

二、舵式導(dǎo)航

1.簡(jiǎn)介

舵式導(dǎo)航本質(zhì)是底部標(biāo)簽導(dǎo)航的變式。那么舵式導(dǎo)航為什么要叫舵式導(dǎo)航呢?首先是形似,其次是因?yàn)槎媸綄?dǎo)航中最重要的導(dǎo)航就像舵在船的航行中一樣重要。即一個(gè)底部標(biāo)簽導(dǎo)航中,有一個(gè)功能標(biāo)簽相比其它功能標(biāo)簽來(lái)說(shuō)更重要、突出,更需要強(qiáng)調(diào)。


2.設(shè)計(jì)特征

1)有一個(gè)核心功能比其它功能更重要,更需要強(qiáng)調(diào)。常見(jiàn)于UGC產(chǎn)品,比如微博、閑魚、抖音以及原型案例中的小紅書。

2)算上需要強(qiáng)調(diào)的標(biāo)簽,標(biāo)簽數(shù)量通常為3個(gè)或者5個(gè)。

為什么?和船的控制室的對(duì)稱式設(shè)計(jì)一樣,當(dāng)有標(biāo)簽需要突出的話,兩邊的標(biāo)簽在視覺(jué)上則要設(shè)計(jì)成對(duì)稱的。

3)舵這個(gè)概念在標(biāo)簽上的呈現(xiàn),也就是突出的形式。既可以真的有舵的形,也可以只給標(biāo)簽做簡(jiǎn)單的差異化設(shè)計(jì)。

前者的例子:閑魚。

后者的例子:微博、抖音、小紅書。


3.優(yōu)缺點(diǎn)

1)優(yōu)點(diǎn)

可以直觀展現(xiàn)APP的核心功能頁(yè)面及入口。

用戶可以在不同的功能模塊間進(jìn)行快速切換。

可以凸顯核心、頻繁使用的功能,引導(dǎo)用戶使用該功能(比如產(chǎn)出內(nèi)容)。

2)缺點(diǎn)

作為頁(yè)面固定顯示的內(nèi)容,會(huì)擠壓頁(yè)面其它內(nèi)容的顯示區(qū)域,進(jìn)而降低頁(yè)面的信息承載量。

凸顯最重要的功能的同時(shí),一定程度上會(huì)弱化其它核心功能的使用。


4.原型設(shè)計(jì)實(shí)現(xiàn)案例

底部導(dǎo)航

點(diǎn)此查看原型實(shí)例

 

三、頂部標(biāo)簽導(dǎo)航

 

1.簡(jiǎn)介

頂部標(biāo)簽導(dǎo)航通常作為次級(jí)導(dǎo)航,配合底部標(biāo)簽導(dǎo)航或舵式導(dǎo)航一起使用。


2.設(shè)計(jì)特征

1)相對(duì)底部標(biāo)簽導(dǎo)航而言,標(biāo)簽數(shù)量更靈活。

作為二級(jí)導(dǎo)航時(shí),通??梢允?-3個(gè)標(biāo)簽。當(dāng)二級(jí)導(dǎo)航的分類數(shù)較多時(shí),也可以超過(guò)5個(gè)標(biāo)簽。

2)標(biāo)簽通常是文字形式的。

為什么不像底部標(biāo)簽一樣設(shè)置成圖標(biāo)+文字的形式?因?yàn)閳D標(biāo)+文字相比純文字而言會(huì)占據(jù)更多的頁(yè)面面積。如果采用這種形式,再加上底部導(dǎo)航,將極大擠壓頁(yè)面其它內(nèi)容的顯示區(qū)域。

3)當(dāng)標(biāo)簽分類數(shù)量過(guò)多時(shí),通常可以設(shè)計(jì)成左滑滾動(dòng)標(biāo)簽的形式。

但需要注意的是,滾動(dòng)標(biāo)簽意味著在不滾動(dòng)狀態(tài)下,頁(yè)面默認(rèn)狀態(tài)下顯示的標(biāo)簽數(shù)是有限的,這時(shí)我們讓默認(rèn)狀態(tài)下可見(jiàn)的最后一個(gè)標(biāo)簽露出一半,以提示用戶它可以左滑滾動(dòng),一定程度上減少用戶的發(fā)現(xiàn)成本。

在電商產(chǎn)品中,通常還會(huì)有一種類似于頂部滾動(dòng)標(biāo)簽導(dǎo)航的側(cè)邊分類滾動(dòng)導(dǎo)航。


3.優(yōu)缺點(diǎn)

1)優(yōu)點(diǎn)

用戶可以在不同的次級(jí)功能模塊間進(jìn)行快速切換。

2)缺點(diǎn)

作為頁(yè)面固定顯示的內(nèi)容,在和底部導(dǎo)航配合使用時(shí),會(huì)擠壓頁(yè)面其它內(nèi)容的顯示區(qū)域,進(jìn)而降低頁(yè)面的信息承載量。


4.原型設(shè)計(jì)實(shí)現(xiàn)案例

1)頂部導(dǎo)航

點(diǎn)此查看原型實(shí)例

2)頂部分類滾動(dòng)導(dǎo)航

點(diǎn)此查看原型實(shí)例

3)側(cè)邊分類滾動(dòng)導(dǎo)航

點(diǎn)此查看原型實(shí)例

 

四、抽屜導(dǎo)航

 


1.簡(jiǎn)介


抽屜導(dǎo)航也叫漢堡菜單,是將一個(gè)導(dǎo)航頁(yè)(菜單)隱藏在當(dāng)前頁(yè)面,點(diǎn)擊漢堡按鈕,導(dǎo)航頁(yè)會(huì)像抽屜一樣從頁(yè)面左側(cè)或右側(cè)拉出。我們可以通過(guò)現(xiàn)實(shí)意義的抽屜來(lái)理解這種導(dǎo)航:

1)抽屜作為收納物品的容器,通??梢源娣哦鄠€(gè)物品(抽屜導(dǎo)航可以放置多個(gè)次級(jí)功能入口)

2)抽屜通常是關(guān)起來(lái)的,需要時(shí)才打開(kāi),因此抽屜內(nèi)的物品通常不可見(jiàn)(抽屜導(dǎo)航只有點(diǎn)擊后才能看到次級(jí)功能入口)


2.設(shè)計(jì)特征

 

1)通常用于放置非常用、非核心、低頻但必要的功能。如對(duì)設(shè)置、個(gè)人信息等。

為什么要放置低頻、非核心功能?因?yàn)槌閷蠈?dǎo)航具有隱藏的特性,而根據(jù)前面的介紹,越是核心、高頻的功能,就越應(yīng)該放在用戶容易看到、觸及的地方地方。

2)使用抽屜導(dǎo)航,通常意味著產(chǎn)品的主要功能集中在主頁(yè)面當(dāng)中。比如摩拜。


3.優(yōu)缺點(diǎn)

 

1)優(yōu)點(diǎn)

占用頁(yè)面空間較少,使得主頁(yè)面能承載更多的信息,頁(yè)面更簡(jiǎn)潔,用戶可以更專注于使用產(chǎn)品的核心功能。

具有較強(qiáng)的次級(jí)功能擴(kuò)展性,可以在抽屜導(dǎo)航頁(yè)放置較多的功能入口。

2)缺點(diǎn)

隱藏式設(shè)計(jì),可發(fā)現(xiàn)性較差,增加了用戶的發(fā)現(xiàn)成本。


4.原型設(shè)計(jì)實(shí)現(xiàn)案例

 

抽屜導(dǎo)航

點(diǎn)此查看原型實(shí)例

 


五、宮格導(dǎo)航

 

1.簡(jiǎn)介

說(shuō)到宮格,很多人第一時(shí)間想到的會(huì)是九宮格。實(shí)際上宮格導(dǎo)航不只是九宮格,也可以是其它數(shù)量的宮格。宮格導(dǎo)航會(huì)以分格、平鋪的形式來(lái)展示功能,通常作為次級(jí)導(dǎo)航使用。

 

2.設(shè)計(jì)特征

 

1)宮格對(duì)應(yīng)的功能數(shù)量較多。通常用戶提供服務(wù)較多或者類目較多的APP,如支付寶和微信。

為什么?因?yàn)橐M成宮格,宮格數(shù)通常是6、9、12或者8、16甚至更多。

 

2)通常功能之間層級(jí)相同,使用頻率相近、彼此獨(dú)立且切換頻率低。

為什么?因?yàn)榉指衿戒伒男问娇梢宰層脩粢荒苛巳坏乜吹剿泄δ?,彼此之間沒(méi)有顯著的優(yōu)先級(jí)差異。另外因?yàn)閷m格導(dǎo)航只顯示功能入口,不顯示實(shí)際的功能頁(yè)面,因此要切換功能時(shí)需要退回宮格導(dǎo)航頁(yè)面才能切換其它功能,不適合作為彼此有關(guān)聯(lián)、切換頻繁的功能的導(dǎo)航。

 

3)功能間如果具備一定的關(guān)聯(lián)性,可以分類處理。

為什么要分類處理?因?yàn)楫?dāng)宮格數(shù)量過(guò)多時(shí),依據(jù)功能的關(guān)聯(lián)性做分類,可以便于用戶更快地找到自己想要的功能,減少用戶的尋找成本。


3.優(yōu)缺點(diǎn)

 

1)優(yōu)點(diǎn)

可擴(kuò)展性強(qiáng),可以根據(jù)需要向下擴(kuò)展功能入口。

可以讓用戶一目了然地知道產(chǎn)品所提供的功能,快速找到自己想要的功能。

2)缺點(diǎn)

不展示功能對(duì)應(yīng)頁(yè)面的內(nèi),無(wú)法直接執(zhí)行功能操作。

功能間切換不方便,要切換功能時(shí)需要退回宮格導(dǎo)航頁(yè)面才能切換其它功能。

容易形成較深功能層級(jí)和功能路徑,增加用戶的操作成本。


4.原型設(shè)計(jì)實(shí)現(xiàn)案例

 

因設(shè)計(jì)較簡(jiǎn)單,未附案例

 


六、列表導(dǎo)航

 

1.簡(jiǎn)介

以列表的形式呈現(xiàn)功能,適用于大量的功能的展現(xiàn),通常作為次級(jí)導(dǎo)航,如網(wǎng)易云音樂(lè)的賬號(hào)頁(yè)。


2.設(shè)計(jì)特征

1)通常功能之間層級(jí)相同。

2)通常在列的右側(cè)顯示箭頭表示有二級(jí)內(nèi)容。

3)當(dāng)列表功能較多時(shí),可以通過(guò)調(diào)整間距的方式對(duì)功能進(jìn)行分類。如無(wú)合適分類名稱,也可以選擇不加分類名稱。


3.優(yōu)缺點(diǎn)

1)優(yōu)點(diǎn)

可擴(kuò)展性強(qiáng),可以根據(jù)需要向下擴(kuò)展功能入口。

2)缺點(diǎn)

下方的功能可能會(huì)被忽略。雖說(shuō)列表導(dǎo)航的功能間層級(jí)相同,但如果列表功能過(guò)多,用戶需要向下滾動(dòng)頁(yè)面才能看到下方的功能,因此這一部分功能容易被忽略。


4.原型設(shè)計(jì)實(shí)現(xiàn)案例

因設(shè)計(jì)較簡(jiǎn)單,未附案例

 

七、總結(jié)

 

1.用戶使用產(chǎn)品是為了滿足某種需求(達(dá)到某種目的),因此導(dǎo)航最主要的功能在于讓用戶清楚地知道自己所在頁(yè)面(所處位置),并幫助用戶更快地到達(dá)目的頁(yè)(目的地)。

2.導(dǎo)航設(shè)計(jì)的形式服從設(shè)計(jì)的于目的。每種形式的導(dǎo)航雖然都有常用的使用場(chǎng)景,但這不意味著設(shè)計(jì)導(dǎo)航時(shí)需要嚴(yán)格遵循這些使用場(chǎng)景。在實(shí)際的設(shè)計(jì)當(dāng)中,還需要根據(jù)產(chǎn)品側(cè)及用戶側(cè)的需求具體分析。

3.一款產(chǎn)品通常不會(huì)只使用一種導(dǎo)航,而是會(huì)根據(jù)信息架構(gòu)以及功能的需求,混合使用多種導(dǎo)航。

 

以上原型案例現(xiàn)在都可以在墨刀模版區(qū)找到并且免費(fèi)使用哦!刀友們隨時(shí)可以按需編輯模版或者直接復(fù)用!

如何查看模版項(xiàng)目: 登陸墨刀modao.cc,進(jìn)入工作區(qū),點(diǎn)擊“新建項(xiàng)目” 就能在下方看到。

選擇一個(gè)模版,點(diǎn)擊“使用模版”。

進(jìn)入項(xiàng)目編輯區(qū),可以隨意改動(dòng)各種元素。

此外,如果點(diǎn)擊“預(yù)覽模版”,也可以一鍵查看該原型模版的教程哦!

“紅色”批注區(qū)域即為文字教程。

 

 


29
評(píng)論區(qū)(0)
正在加載評(píng)論...