阿贾克斯对热刺 www.utsvcz.com.cn

底部導航欄可以說是現在最流行的導航控件了,微信、支付寶、淘寶、網易云音樂等等,各種類型的 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 上可以適量增加。

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

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

點贊
收藏 85
繼續閱讀相關文章

發表評論 已發布 9

還可以輸入 800 個字
 
 
載入中....
9 收藏