產品之術:解析「底部導航」交互布局

2 評論 11767 瀏覽 97 收藏 7 分鐘

文章對底部導航進行相應的剖析,希望對你有所幫助。

引·底部導航是產品的框架所在

底部導航是一個APP最直觀的框架表現。從某乎的多次改版、到導航動效的多樣化,每次改版大家都會對底部導航傾注很大的熱情。

在做功能模塊時也一樣,很多時候我們也需要為模塊加一個底部導航。但是在需求評審的時候,你也一定聽領導說過這句話:“這不就是APP套APP嗎?”。

其實不然,底部導航的運用和意義仔細琢磨整理之后,是體現了功能模塊的需求和布局思路的,下面筆者整理四種場景的導航情況,進行梳理分析。

理·四種常見底部導航模式

一、全局底部導航

第一種,是最常見的全局底部導航。這種導航微信是用的最普遍且層級最高的。全局導航在切換時互不影響,在首頁進行滾動查看后換回來依然還在原處,這種導航有四大特點:

  1. 四大導航內部界面互不影響
  2. 切換后不會重新刷新界面
  3. 四大功能同等級別
  4. 隨時切換,扁平關系

那么這種導航的應用場景需要具有幾大特點:

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

二、H5底部導航

第二種,稱之為H5底部導航。這種導航多見于H5功能模塊中,也較常見。類似于第一種,但功能切換上是關鍵區分點。這種導航在切換模塊時,每一次進入都是一次刷新,是沒有緩存的,都是從0開始,這也就意味著并不適用于高頻次切換場景。

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

三、跳轉底部導航

第三種我們稱之為跳轉底部導航,這種就僅僅是形式上的底部導航了。因為除了主頁之外的功能,跟首頁導航是上下級的關系。這也就意味著,剩下的幾個導航基本完完全全相當于按鈕,只不過是導航樣式的按鈕擺放。特點如下:

  1. 點擊后是跳轉刷新,新界面導航不復存在
  2. 不可切換,是前進后退的關系

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

四、駝式底部導航

第四種,是特殊版的底部導航,因為常見于一個加號形狀的駝峰,故叫駝式底部導航。這種導航的關鍵在于駝峰,駝峰是處于略高于其他功能點的層級。這種導航的使用常見于社區型APP,具有多格式發布需求的情況下,會選擇采用駝式導航來突出功能點。

聯·四種模式的橫向比較分析

功能結構分析

如圖所示,我們假設ABCD為四大功能。根據上文的分析研究,我們可以得到以下結論:

  1. 全局和H5的差別幾乎只在于切換時的真獨立切換還是需要刷新。
  2. 跳轉式的底部導航功能結構是分兩個層級的。
  3. 駝式導航的駝峰要略高于其他幾個層級。
  4. 對于功能模塊想應用底部導航的情況,要根據功能結構需求而定。

應用場景分析

四種導航除了應用在不同場景之外,我們需要對應不同的交互和視覺方案,考慮以下幾點:

  1. 是否需要滑動切換還是僅僅允許點擊切換?
  2. 跳轉動畫及動效適合哪種?
  3. 命名規則和劃分是否互不干擾完全獨立?
  4. 刷新場景的數據量大小,是否適合高頻切換刷新?需要如何做本地緩存配合?

充分考慮布局及交互后,我們才能拿出一個完整的導航設計方案。

結·從導航開始

底部導航的應用目前演變形式多樣化,交互動效也比較豐富。我們要謹記這個設計的初心即“導航”二字,底部的導航是視覺習慣的終點,也意味著當我們這個界面操作結束的時候,想換界面的時候,目光是停留在界面下方的。所以底部導航要做的就是在用戶猶豫的間隙,給出指引和導航。這是底部導航之余TAB頁的區別,TAB頁體現的是一種角度視角的劃分,類似于一種篩選,而底部導航則代表著門和通道。

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

 

作者:花生醬先生,微博:Mr花生醬先生;公眾號:產品之術

本文由 @花生醬先生?原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. tab頁和底部導航如何拿來對比?底部導航就是用tab形式的啊。。

    來自上海 回復
    1. 我們這邊習慣把底部導航叫導航,頂部導航叫TAB,一種誤用吧,謝謝指出!

      來自廣東 回復