最近力圖數(shù)字科技小編出的文章大多是偏向交互、產(chǎn)品的。今天詳細(xì)講述關(guān)于標(biāo)簽類導(dǎo)航的幾個(gè)知識(shí)點(diǎn)，希望可以幫助大家在工作中更好的運(yùn)用。有人說導(dǎo)航僅僅就是方便用戶操作的小東西而已，沒那么神奇。是的，對(duì)于小眾的產(chǎn)品來說，確實(shí)沒那么神，因?yàn)樯衲阋部床怀鰜怼Ｈタ纯碏acebook為什么把抽屜式導(dǎo)航改成標(biāo)簽導(dǎo)航，就知道導(dǎo)航對(duì)一個(gè)App的影響有多大了。

導(dǎo)航分很多類別，如標(biāo)簽導(dǎo)航、抽屜式導(dǎo)航、九宮格導(dǎo)航、混合組合導(dǎo)航、列表式導(dǎo)航、Tab導(dǎo)航、平鋪導(dǎo)航等等。

現(xiàn)在用到更多的導(dǎo)航其實(shí)是標(biāo)簽導(dǎo)航，它隨處可見，相信目前大部分的App用的導(dǎo)航都是標(biāo)簽形式的。

理清產(chǎn)品框架

相信很多設(shè)計(jì)師在設(shè)計(jì)導(dǎo)航時(shí)，一上來就開始YY自己的導(dǎo)航要放什么，因?yàn)檫@個(gè)時(shí)候他已經(jīng)被標(biāo)簽形式的導(dǎo)航洗腦了，認(rèn)為自己的App就應(yīng)該用標(biāo)簽導(dǎo)航。然后繼續(xù)YY產(chǎn)品的功能，自己理出個(gè)最適合的，放上去就好了。

其實(shí)不然。做好一個(gè)導(dǎo)航要考慮的問題其實(shí)非常多，還要考慮產(chǎn)品后期發(fā)展的延展性。必須定好整個(gè)產(chǎn)品的框架，把最核心的功能放在第一層頁面，再根據(jù)產(chǎn)品的深度來設(shè)計(jì)導(dǎo)航的模式。

我們作為交互設(shè)計(jì)師，需要把握產(chǎn)品的整體架構(gòu)，這不僅僅是產(chǎn)品經(jīng)理的工作。所以在前期我們要付出很多努力，才能把一個(gè)產(chǎn)品的線框圖畫好。

標(biāo)簽導(dǎo)航的優(yōu)劣勢

先來看個(gè)圖:

微信

不要看上面的列表，就看下面的標(biāo)簽。是不是特別熟悉？很多App都是用這類標(biāo)簽式導(dǎo)航來引導(dǎo)用戶切換功能。

那它的優(yōu)勢是什么呢？

1.簡單高效，操作方便。

下面的四個(gè)功能可以快速切換，用戶在使用的過程中不會(huì)迷失方向，且簡單清晰，層級(jí)明確。

2.更好的用戶體驗(yàn)

試想一下，一般在使用App時(shí)，用戶更多的會(huì)怎么使用手機(jī)？雙手還是單手呢？肯定都有。所以單手使用手機(jī)的用戶碰到的App是標(biāo)簽導(dǎo)航時(shí)，可以更方便的操作，不需要一定得使用另一只手。而某些導(dǎo)航如果不用兩只手是沒辦法操作的。

3.快速了解App主要功能

一般來說，用戶第一次使用產(chǎn)品，會(huì)關(guān)注這個(gè)App有什么功能，它能幫助自己完成什么任務(wù)。所以標(biāo)簽導(dǎo)航可以很好地幫助用戶了解產(chǎn)品的主要功能，讓用戶看到的第一眼就知道自己能做什么。

然后再來看看劣勢

1.功能不能過多

有些產(chǎn)品功能過多，但是卻又都是必要的，不能做刪減。而一旦超過五個(gè)，就不適合用標(biāo)簽導(dǎo)航。因?yàn)闃?biāo)簽導(dǎo)航不適合做滑動(dòng)，所以功能多了可點(diǎn)擊區(qū)域(熱區(qū))就變小了，操作上會(huì)有一定影響。

2.占用一定屏幕尺寸

標(biāo)簽導(dǎo)航占用了屏幕下方不少的位置，所以有些App就不適合用標(biāo)簽導(dǎo)航，比如閱讀類的App。先不說一屏內(nèi)少了很多字展示，就說在滑動(dòng)的時(shí)候不小心點(diǎn)到了其他功能是不是很煩？

標(biāo)簽導(dǎo)航的延展

有的人會(huì)問，如果我的產(chǎn)品很想用標(biāo)簽導(dǎo)航，但是又超過了5個(gè)功能，那有辦法解決么？看個(gè)圖:

知乎

當(dāng)你的主功能超過5個(gè)又一定要使用標(biāo)簽導(dǎo)航的話，那知乎的這個(gè)解決方案很適合你(最右邊的功能是“更多”)。

還有一類情況是:主功能是標(biāo)簽導(dǎo)航，次要功能也是標(biāo)簽導(dǎo)航。有沒有聽著很亂？繼續(xù)看圖:

騰訊新聞

主功能是“新聞”，次要功能是頂部的“要聞”、“NBA”等等，如果在某個(gè)主功能中，你的次要功能很多，就可以使用這類方式來解決這個(gè)問題。還有很多類似的，標(biāo)簽導(dǎo)航能解決不少問題，但是前面說過，一定要注意規(guī)劃，理清產(chǎn)品框架，不要一上來就隨便定個(gè)導(dǎo)航形式。