掌握了這個導航控件,你可以設計80%的應用導航 - 優設網 - UISDC

掌握了這個導航控件,你可以設計80%的應用導航

2019/05/29 17986評論 9

底部導航欄可以說是現在最流行的導航控件了,微信、支付寶、淘寶、網易云音樂等等,各種類型的 APP 都有應用。

如何使用這種極普遍的導航控件呢?先來看看在 Material Design 規范和 iOS 規范下的基本交互特性。

Material Design規范

當用戶選擇點擊某個選項時,則應該直接展現相應的頁面,或者刷新當前的頁面;注意不要在點擊后展示菜單或者彈出框(pop-up)。另外,如果點擊系統返回鍵,不會切換到底部導航欄上一次點擊的頁面。

另外,有以下三點需要注意:

  • 點擊當前選項的圖標,則頁面返回頂部。即如果當前在第一個 tab,點擊第一個 tab,頁面回到頂部。
  • 點擊底部導航欄中的選項后,應該返回該頁面頂部并刷新該選項的頁面(這一點筆者認為也不是必要,需要根據應用自身的場景來判斷)。
  • 當點擊底部導航欄中的不同選項時,避免頁面發生橫向切換。

蘋果iOS設計規范

蘋果的設計規范,主要講了以下三點:

  • 如果底部導航欄中的某個選項暫時不可用,不要把該選項置灰。在不可用而又點擊了的情況下,頁面只要展示這個頁面為什么沒有內容就可以了。
  • 避免使用過多的選項。當然,如果選項過少也會有問題。一般在 iPhone 上,3 到 5 個選項比較合適。在 iPad 上可以適量增加。
  • 可以使用肩標來提示信息數量,如下圖所示。

以上是底部 tab 導航欄的基本交互特性。底部 tab 導航,一般用于組織起應用的最頂層內容,其中每個 tab 承載了應用的一個維度的功能。例如微信,每個 tab 都承載了一個維度的功能。

基于這個特點,對于底部 tab 導航欄,最常用的做法是它只出現在一級頁面。當用戶從一級頁面進入到二級頁面,那么底部導航欄會消失。

我也一直認為,底部導航欄就該如此使用:從一級頁進入二級頁,它,必須消失。

然而,事情就怕有例外,而且還是大佬級別的例外。

有一次使用蘋果系統自帶的相冊應用,當我進入二級頁,底部導航欄還存在著。

這不是挑事嗎?無獨有偶,蘋果 App Store 也是如此。

我瀏覽了手機上的快 300 個應用,發現網易云音樂、蝦米音樂也是采用二級頁保留底部導航欄的邏輯。

雖然使用這種邏輯的應用數量較少,但這不能不引起我的質疑:

  • 底部導航欄難道不應該就在二級頁消失嗎?
  • 用戶已經到了二級頁,還可以切換到別的 tab 嗎?
  • 如果二級頁可以保留,那么什么情況下保留?

底部導航欄二級頁存在感研究

我首先從設計規范出發,看一下這樣做是否是符合規范的。

在找遍了 iOS 設計規范和谷歌的 Material Design 設計規范之后,我發現規范里并沒有相關規定。

既然如此,那么從用戶使用的角度,這么做是合理的嗎?

于是我研究了在二級頁保留底部導航的應用,發現這些應用的底部導航欄里的 tab 有一個共同點:每個 tab 的重要性差不多,且應用更偏重于讓用戶發現、探索新內容,而不是沉浸在某個模塊里。

以蘋果自帶的照片應用為例:「照片」tab 以時間為維度組織用戶的照片,「為你推薦」tab 以智能算法為維度,「相簿」以相簿和照片類型為維度,搜索以用戶主動搜索為維度,每種維度都提供了讓用戶搜尋、管理照片的可能。

比如用戶如果需要找某一張特定的照片,他可能先通過相簿來找,當他進入到某個相簿(此時為二級頁),找了一會沒找到,就切換到照片 tab,通過回憶拍照片的大概時間段來尋找了。

其實這種隨時能切換 tab 的方式,跟 PC 網站上,常駐在頁面頂部的導航條很相似。

頂部的導航條,保證了用戶在任何頁面,都可以迅速到達特定的幾個核心頁面。

下面再來研究一下二級頁沒有保留底部導航欄的應用。

上面的三個應用,每個 tab 的重要程度也差不多,但每個模塊提供的功能都相對更沉浸。比如淘寶,第一個 tab「首頁」主要讓用戶瀏覽商品,第二個 tab 則是讓用戶瀏覽各種內容。這兩個 tab 之間,是不需要用戶頻繁切換的。

并且,在進入二級頁后,頁面底部會較為頻繁地出現新的操作欄。

如果二級頁依然保留底部導航欄,那么和底部的操作欄會堆在一起,顯然是不可以的。

切換后是否保留之前狀態

在 iOS 規范里,沒有找到與此相關的說明,但在谷歌的 Material Design 規范里,我找到了間接關聯的一段說明:

  • 在 Android 上:點擊某個 tab 后,展示該 tab 的最高一級的頁面內容。重置任何先前的用戶交互和臨時屏幕狀態,例如滾動位置,選項卡選擇和搜索行為。
  • 在 iOS 上:點擊某個 tab 后,展示該 tab 里用戶之前的交互結果。如果用戶先前訪問過該 tab,則點擊該 tab 后,展示用戶操作的最后一個屏幕(如果可能,保留其先前狀態)。如果用戶以前沒有訪問過該 tab,則展示該 tab 的最高一級的頁面內容。

上述的說明中,Material Design 規范主要在說明切換 tab 后,是否保留用戶之前的操作結果。總結一下,就是在 Android上,切換后不保留操作結果,在 iOS 上需要保留。

總結

希望用戶更沉浸,則底部導航欄只在一級頁出現;希望用戶更隨意切換,則在二級頁也保留。

當二級頁經常有操作欄時,不建議保留底部導航欄。

如果底部導航欄中的某個選項暫時不可用,不要把該選項置灰。在不可用而又點擊了的情況下,頁面只要展示這個頁面為什么沒有內容就可以了。

避免使用過多的選項。當然,如果選項過少也會有問題。一般在 iPhone 上,3 到 5 個選項比較合適。在 iPad 上可以適量增加。

可以使用肩標來提示信息數量。

歡迎關注作者的微信公眾號:「沐風與體驗設計」

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.wydhjd.tw/bottom-navigation-bar-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 職場 設計師干貨 優設專訪 優設大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 AI教程 設計流程 設計理論 神器下載 字體下載 設計師專訪 psd下載 設計規范 用戶體驗設計 海報設計 設計趨勢 平面設計 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

94期香港马会三肖中特