文章對底部導(dǎo)航進(jìn)行相應(yīng)的剖析，希望對你有所幫助。

引·底部導(dǎo)航是產(chǎn)品的框架所在

底部導(dǎo)航是一個(gè)APP最直觀的框架表現(xiàn)。從某乎的多次改版、到導(dǎo)航動(dòng)效的多樣化，每次改版大家都會(huì)對底部導(dǎo)航傾注很大的熱情。

在做功能模塊時(shí)也一樣，很多時(shí)候我們也需要為模塊加一個(gè)底部導(dǎo)航。但是在需求評審的時(shí)候，你也一定聽領(lǐng)導(dǎo)說過這句話：“這不就是APP套APP嗎？”。

其實(shí)不然，底部導(dǎo)航的運(yùn)用和意義仔細(xì)琢磨整理之后，是體現(xiàn)了功能模塊的需求和布局思路的，下面筆者整理四種場景的導(dǎo)航情況，進(jìn)行梳理分析。

理·四種常見底部導(dǎo)航模式

一、全局底部導(dǎo)航

第一種，是最常見的全局底部導(dǎo)航。這種導(dǎo)航微信是用的最普遍且層級最高的。全局導(dǎo)航在切換時(shí)互不影響，在首頁進(jìn)行滾動(dòng)查看后換回來依然還在原處，這種導(dǎo)航有四大特點(diǎn)：

1. 四大導(dǎo)航內(nèi)部界面互不影響
2. 切換后不會(huì)重新刷新界面
3. 四大功能同等級別
4. 隨時(shí)切換，扁平關(guān)系

那么這種導(dǎo)航的應(yīng)用場景需要具有幾大特點(diǎn)：

1. 高頻次切換模塊的需求，多見于社交場景
2. 幾大功能模塊優(yōu)先級較高且平等，多見于APP首頁的全局

二、H5底部導(dǎo)航

第二種，稱之為H5底部導(dǎo)航。這種導(dǎo)航多見于H5功能模塊中，也較常見。類似于第一種，但功能切換上是關(guān)鍵區(qū)分點(diǎn)。這種導(dǎo)航在切換模塊時(shí)，每一次進(jìn)入都是一次刷新，是沒有緩存的，都是從0開始，這也就意味著并不適用于高頻次切換場景。

故我們稱之為偽底部導(dǎo)航，在不涉及到切換保留、瀏覽保留等情況下，基本等同于第一種。

三、跳轉(zhuǎn)底部導(dǎo)航

第三種我們稱之為跳轉(zhuǎn)底部導(dǎo)航，這種就僅僅是形式上的底部導(dǎo)航了。因?yàn)槌酥黜撝獾墓δ?，跟首頁?dǎo)航是上下級的關(guān)系。這也就意味著，剩下的幾個(gè)導(dǎo)航基本完完全全相當(dāng)于按鈕，只不過是導(dǎo)航樣式的按鈕擺放。特點(diǎn)如下：

1. 點(diǎn)擊后是跳轉(zhuǎn)刷新，新界面導(dǎo)航不復(fù)存在
2. 不可切換，是前進(jìn)后退的關(guān)系

這種導(dǎo)航在我們希望突出某種功能的情況下可以使用，且前提是多個(gè)導(dǎo)航功能之間沒有切換的需求。

四、駝式底部導(dǎo)航

第四種，是特殊版的底部導(dǎo)航，因?yàn)槌Ｒ娪谝粋€(gè)加號形狀的駝峰，故叫駝式底部導(dǎo)航。這種導(dǎo)航的關(guān)鍵在于駝峰，駝峰是處于略高于其他功能點(diǎn)的層級。這種導(dǎo)航的使用常見于社區(qū)型APP，具有多格式發(fā)布需求的情況下，會(huì)選擇采用駝式導(dǎo)航來突出功能點(diǎn)。

聯(lián)·四種模式的橫向比較分析

功能結(jié)構(gòu)分析

如圖所示，我們假設(shè)ABCD為四大功能。根據(jù)上文的分析研究，我們可以得到以下結(jié)論：

1. 全局和H5的差別幾乎只在于切換時(shí)的真獨(dú)立切換還是需要刷新。
2. 跳轉(zhuǎn)式的底部導(dǎo)航功能結(jié)構(gòu)是分兩個(gè)層級的。
3. 駝式導(dǎo)航的駝峰要略高于其他幾個(gè)層級。
4. 對于功能模塊想應(yīng)用底部導(dǎo)航的情況，要根據(jù)功能結(jié)構(gòu)需求而定。

應(yīng)用場景分析

四種導(dǎo)航除了應(yīng)用在不同場景之外，我們需要對應(yīng)不同的交互和視覺方案，考慮以下幾點(diǎn)：

1. 是否需要滑動(dòng)切換還是僅僅允許點(diǎn)擊切換？
2. 跳轉(zhuǎn)動(dòng)畫及動(dòng)效適合哪種？
3. 命名規(guī)則和劃分是否互不干擾完全獨(dú)立?
4. 刷新場景的數(shù)據(jù)量大小，是否適合高頻切換刷新？需要如何做本地緩存配合？

充分考慮布局及交互后，我們才能拿出一個(gè)完整的導(dǎo)航設(shè)計(jì)方案。

結(jié)·從導(dǎo)航開始

底部導(dǎo)航的應(yīng)用目前演變形式多樣化，交互動(dòng)效也比較豐富。我們要謹(jǐn)記這個(gè)設(shè)計(jì)的初心即“導(dǎo)航”二字，底部的導(dǎo)航是視覺習(xí)慣的終點(diǎn)，也意味著當(dāng)我們這個(gè)界面操作結(jié)束的時(shí)候，想換界面的時(shí)候，目光是停留在界面下方的。所以底部導(dǎo)航要做的就是在用戶猶豫的間隙，給出指引和導(dǎo)航。這是底部導(dǎo)航之余TAB頁的區(qū)別，TAB頁體現(xiàn)的是一種角度視角的劃分，類似于一種篩選，而底部導(dǎo)航則代表著門和通道。

至于這個(gè)門和通道怎么設(shè)置，你給用戶的是四個(gè)互通的門，還是四條平行的路，亦或是其它關(guān)系層級，是需要我們在做布局和分析時(shí)考慮的永恒話題。

作者：花生醬先生，微博：Mr花生醬先生；公眾號：產(chǎn)品之術(shù)

本文由 @花生醬先生?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議