現(xiàn)在文章基本上都不深入，只是點(diǎn)到某個(gè)知識(shí)，跟大家說(shuō)個(gè)理論的東西，然后羅列出所有導(dǎo)航的形式。讀者看了之后跟沒(méi)看是一樣的，遇到問(wèn)題還是沒(méi)法解決，只知道有這類(lèi)導(dǎo)航存在而已。今天這篇詳細(xì)地講了關(guān)于標(biāo)簽類(lèi)導(dǎo)航的幾個(gè)知識(shí)點(diǎn)，希望可以幫助大家在工作中更好的運(yùn)用。

有人說(shuō)導(dǎo)航僅僅就是方便用戶(hù)操作的小東西而已，沒(méi)那么神奇。是的，對(duì)于小眾的產(chǎn)品來(lái)說(shuō)，確實(shí)沒(méi)那么神，因?yàn)樯衲阋部床怀鰜?lái)。去看看Facebook為什么把抽屜式導(dǎo)航改成標(biāo)簽導(dǎo)航，就知道導(dǎo)航對(duì)一個(gè)App的影響有多大了。

導(dǎo)航分很多類(lèi)別，如標(biāo)簽導(dǎo)航、抽屜式導(dǎo)航、九宮格導(dǎo)航、混合組合導(dǎo)航、列表式導(dǎo)航、Tab導(dǎo)航、平鋪導(dǎo)航等等。之前在我的讀書(shū)筆記中也有提到過(guò)三類(lèi)導(dǎo)航：平鋪類(lèi)、標(biāo)簽類(lèi)、列表類(lèi)。

現(xiàn)在用到更多的導(dǎo)航其實(shí)是標(biāo)簽導(dǎo)航，它隨處可見(jiàn)，相信目前大部分的App用的導(dǎo)航都是標(biāo)簽形式的。所以，是不是知道今天要說(shuō)啥了？嗯，就是標(biāo)簽導(dǎo)航。

理清產(chǎn)品框架

相信很多設(shè)計(jì)師在設(shè)計(jì)導(dǎo)航時(shí)，一上來(lái)就開(kāi)始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)航要考慮的問(wèn)題其實(shí)非常多，還要考慮產(chǎn)品后期發(fā)展的延展性。必須定好整個(gè)產(chǎn)品的框架，把最核心的功能放在第一層頁(yè)面，再根據(jù)產(chǎn)品的深度來(lái)設(shè)計(jì)導(dǎo)航的模式。

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

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

先來(lái)看個(gè)圖：

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

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

1. 簡(jiǎn)單高效，操作方便

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

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

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

3. 快速了解App主要功能

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

然后再來(lái)看看劣勢(shì)：

1. 功能不能過(guò)多

有些產(chǎn)品功能過(guò)多，但是卻又都是必要的，不能做刪減。而一旦超過(guò)五個(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)航，比如閱讀類(lèi)的App。先不說(shuō)一屏內(nèi)少了很多字展示，就說(shuō)在滑動(dòng)的時(shí)候不小心點(diǎn)到了其他功能是不是很煩？

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

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

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

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

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

小結(jié)

今天詳細(xì)的講了關(guān)于標(biāo)簽類(lèi)導(dǎo)航的幾個(gè)知識(shí)點(diǎn)，希望可以幫助大家在工作中更好的運(yùn)用。最近出的文章大多是偏向交互、產(chǎn)品的?？赡苡行┤顺跞脒@個(gè)行業(yè)， 平時(shí)還涉及不到這類(lèi)工作，所以下周我會(huì)出一篇文章，教大家如何學(xué)習(xí)（可能誰(shuí)都會(huì)），就說(shuō)說(shuō)我自己是怎么走到現(xiàn)在的吧，雖然現(xiàn)在也就這樣。嗯，來(lái)一篇不是雞 湯的雞湯文。

這是本期內(nèi)容，謝謝大家的支持！

附加福利：教你做一個(gè)設(shè)計(jì)類(lèi)筆記+制定目標(biāo)

最近發(fā)現(xiàn)自己成長(zhǎng)太慢，而且太忙，白天要上班，晚上要學(xué)習(xí)到兩點(diǎn)左右才睡覺(jué)，所以今天抽出一點(diǎn)時(shí)間來(lái)解答一下最近很多人問(wèn)我的問(wèn)題。

“怎么去做一個(gè)設(shè)計(jì)類(lèi)的筆記以及制定自己的目標(biāo)”

而我今天要說(shuō)的內(nèi)容，適用于任何工作當(dāng)中。怎么理解，就看你自己了。

今天我就從我自己一直以來(lái)的一個(gè)習(xí)慣，告訴大家我是怎么做筆記以及制定任務(wù)的。

做筆記我一般使用一個(gè)軟件，叫做“印象筆記”，相信大家都知道這個(gè)軟件，當(dāng)然你也可以選擇其他軟件，像有道云筆記等都是差不多的。

無(wú)論是工作內(nèi)容、書(shū)本學(xué)習(xí)筆記，或者是偶爾看到好的文章，我都會(huì)用到它。

1. 先給大家介紹怎么做一個(gè)學(xué)系列的筆記

首先，我先給大家看一下我一部分筆記的界面：

我的每一個(gè)筆記本都是由小的筆記本相互疊加形成一個(gè)大的筆記本（有點(diǎn)繞口，不過(guò)你自己用了就知道了）。

當(dāng)你在網(wǎng)上，或者是在買(mǎi)來(lái)的書(shū)籍中，看到想要摘錄的內(nèi)容時(shí)，你可以這樣做：

記錄下內(nèi)容，還要用自己的話做一次總結(jié)，然后去思考核心的部分。

我這個(gè)筆記的內(nèi)容是直接摘錄了這個(gè)案例的原話，然后用自己的話再一次進(jìn)行了總結(jié)。這樣也可以更好的回憶當(dāng)初為什么會(huì)有這樣的總結(jié)。

工作筆記也是一樣，因?yàn)槲业墓ぷ鲀?nèi)容不便于公布，所以這邊就不放圖片了。

其實(shí)原理也是一樣。

你可以選擇按照月份或者星期來(lái)記錄你的工作內(nèi)容，如這周你需要設(shè)計(jì)一個(gè)界面或者一套原型，你需要用到的文案，以及你是怎么構(gòu)思的，還有就是設(shè)計(jì)時(shí)用到的元素截圖，設(shè)計(jì)完的終稿截圖。形成一篇關(guān)于你這一個(gè)需求的工作內(nèi)容筆記。

如果是原型，就可以記錄交互的問(wèn)題，哪些地方可以更好地優(yōu)化，還能形成項(xiàng)目的進(jìn)程管理，方便日后查看。

2. 下面我來(lái)告訴你怎么制定目標(biāo)

還是先看一下我的界面，我將這個(gè)筆記本稱(chēng)為短期任務(wù)。

這是我五月三十號(hào)開(kāi)始到六月九號(hào)的任務(wù)目標(biāo)

當(dāng)你制定完這些目標(biāo)，就要每天安排時(shí)間去完成，爭(zhēng)取在這個(gè)周期內(nèi)完成你的任務(wù)。

然后在任務(wù)全部打完勾的情況下（也就是完成），寫(xiě)一篇總結(jié)，記錄在你的任務(wù)下面就行，告訴自己這周學(xué)到什么，學(xué)會(huì)回顧。

當(dāng)然，這是工作之外的，你還要記錄你工作中要完成的目標(biāo)。

比如，公司要求這周你要拿出一張海報(bào)或界面，當(dāng)中遇到了一個(gè)你沒(méi)有接觸過(guò)的內(nèi)容，此刻你沒(méi)有思路，這時(shí)候你就要去搜集這方面的資料，所有搜集到的信息都進(jìn)行整合，然后整進(jìn)筆記，到最后你完成這個(gè)海報(bào)時(shí)，你就知道你完成它的過(guò)程中，又學(xué)到了哪些知識(shí)。

當(dāng)你晚上躺下時(shí)，可以打開(kāi)手機(jī)端看看，回顧下最近的筆記，對(duì)你的成長(zhǎng)會(huì)很有幫助。

這是我多年來(lái)養(yǎng)成的一個(gè)習(xí)慣，從大二開(kāi)始，一直堅(jiān)持到現(xiàn)在。以前用的比較少，現(xiàn)在工作了反而用的多了。

很多東西我都是靠自學(xué)完成的，想要在自學(xué)中成長(zhǎng)更快，做筆記是少不了的。

可能還有一些我說(shuō)的不太清楚，相信每個(gè)人都有自己的想法，希望我的這篇文章能幫助到你。

作者：呆呆，微信公眾號(hào)：udai-bl，交互設(shè)計(jì)師一枚，喜歡關(guān)注互聯(lián)網(wǎng)各類(lèi)產(chǎn)品，超愛(ài)閱讀各類(lèi)書(shū)籍，有好書(shū)一定要推薦我哦~