一直以來25學(xué)堂受到大家的批評和建議。希望25學(xué)堂繼續(xù)多分享一些有實際APP操作案例分析的設(shè)計干貨。

于是乎，學(xué)堂看到了微信公眾號：呆呆U理（UDai-bl）的一篇文章《標(biāo)簽式導(dǎo)航的設(shè)計要點》，覺得作者分析的非常有道理，剛好給大家詳細(xì)了解一下如何來設(shè)計好APP導(dǎo)航，而且是APP導(dǎo)航里面一種，標(biāo)簽式導(dǎo)航。

關(guān)于APP導(dǎo)航設(shè)計的博文，25學(xué)堂之前分享了很多，比如：

1、8種移動APP導(dǎo)航設(shè)計模式大對比

2、APP設(shè)計專題:6個超實用的APP導(dǎo)航設(shè)計方案

3、4種常見的APP導(dǎo)航設(shè)計方式，讓我們的APP高大上

4、3種常見的APP導(dǎo)航設(shè)計方案優(yōu)劣勢分析

5、APP底部導(dǎo)航設(shè)計，是最好的手機(jī)APP導(dǎo)航設(shè)計方式

從今天開始，25學(xué)堂小編就來跟大家一一詳細(xì)講解每一個導(dǎo)航設(shè)計的優(yōu)缺點。

今天分享的是第一個APP導(dǎo)航：標(biāo)簽式導(dǎo)航，也是我們最常見的最常用的導(dǎo)航。

第一個案例就是麗人麗妝APP的首頁：

上面的標(biāo)簽、和底部的五個標(biāo)簽以及中間五個圖標(biāo)的導(dǎo)航，其實都是屬于APP標(biāo)簽式導(dǎo)航范疇。

到今天為止，很多App都是用這類標(biāo)簽式導(dǎo)航來引導(dǎo)用戶切換功能。當(dāng)然，25學(xué)堂也在APP底部導(dǎo)航設(shè)計，是最好的手機(jī)APP導(dǎo)航設(shè)計方式詳細(xì)的分析過了。

在這里，我們在回顧一下標(biāo)簽式導(dǎo)航設(shè)計的優(yōu)缺點：

APP標(biāo)簽式導(dǎo)航的優(yōu)點

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

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

2、更好的用戶體驗

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

3、快速了解App主要功能

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

APP標(biāo)簽式導(dǎo)航的缺點：

1、功能不能過多

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

2、占用一定屏幕尺寸

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

再回到麗人麗妝APP首頁的那個案例，在搜索框下面，還有五個次級的標(biāo)簽式導(dǎo)航，而且交互方式通過滑動來實現(xiàn)切換的。這類交互特效在APP設(shè)計當(dāng)中也變得很常見?？焖偾袚Q找到用戶想要的需求點。

作為一名APP設(shè)計師也好，還是APP產(chǎn)品經(jīng)理，在開始設(shè)計APP的時候，一定要定好整個產(chǎn)品的框架，把最核心的功能放在第一層頁面，再根據(jù)產(chǎn)品的深度來設(shè)計導(dǎo)航的模式。

上面，我們已經(jīng)從麗人麗妝APP首頁看到了標(biāo)簽式導(dǎo)航的一些常見用法。

如果當(dāng)?shù)撞繉?dǎo)航超過了五個，怎么辦呢？

第一：換別的導(dǎo)航方式，比如馱式導(dǎo)航或者抽屜導(dǎo)航。

第二：重新歸類。衡量一下產(chǎn)品的層級，把某些相關(guān)的放在 “更多” 或者 “發(fā)現(xiàn)”?里面。

如下圖：很早時期的微信界面，這樣的導(dǎo)航設(shè)計不受歡迎。

知乎APP里面，也采用了這樣的的導(dǎo)航，在最后一個菜單那里是更多。

第三：標(biāo)簽導(dǎo)航可以用你創(chuàng)新的方式表現(xiàn)出來。只要符合用戶體驗操作習(xí)慣就行。

比如類似下圖當(dāng)中紅色框框里面的導(dǎo)航：

這些也算是標(biāo)簽式導(dǎo)航的變形，另外一種設(shè)計方式。

第二個創(chuàng)新的底部標(biāo)簽式導(dǎo)航設(shè)計案例：

這樣的底部標(biāo)簽式導(dǎo)航設(shè)計會降低APP的PV和UV，提高了用戶使用成本。如何折中處理這樣的設(shè)計案例。

在數(shù)據(jù)統(tǒng)計方面來看：

點擊的置底的導(dǎo)航欄和滑動的頂部導(dǎo)航欄是差不多的，在大屏手機(jī)上更方便用戶滑動去切換頁面界面。

不過25學(xué)堂的小編還是建議把底部標(biāo)簽式導(dǎo)航固定在下面更符合用戶習(xí)慣。

還有很多類似的APP導(dǎo)航設(shè)計，標(biāo)簽導(dǎo)航能解決不少問題，但是前面說過，一定要注意規(guī)劃，理清產(chǎn)品框架，不要一上來就隨便定個導(dǎo)航形式。

希望以上這些觀點可以讓你對APP標(biāo)簽式導(dǎo)航有一定的了解和掌握。

以后知道怎么去應(yīng)用這些APP導(dǎo)航知識。