在APP中，Tab Bar是固定好還是不固定好？

Echo ：國內的現狀是絕大部分App的Tab Bar不固定，即進入二級界面后Tab Bar消失。難道Tab Bar 是不固定的好？但是我們也可以看到一些行業具有代表性的App的Tab Bar是固定的（進入二級界面不消失）。

這篇文章我來著重談談App中的Tab Bar 是固定好還是不固定好。

先來看看行業具有代表性的App的Tab Bar是固定的例子：

Tab Bar固定帶用戶帶來的好處

當用戶進入較深的層級界面，那么用戶想快速進去其他Tab Bar的界面可快速切換進入而不需要一步步返回，然后再點擊tab bar進入。

Tab Bar常駐固定帶用戶帶來的壞處

• 如果底部的Tab一直存在的話，用戶對整個App的層級結構會混亂掉，同時用戶來回不同Tab Bar的切換，頁面呈現的邏輯也會相互沖突。Tab Bar固定讓用戶難以聚焦當前主要任務流，難以提供沉浸感，容易破壞用戶完成任務的閉環。
• 如果有的二級，三級界面有底部固定工具欄，那么Tab Bar如何處理，疊為兩層，太過于尷尬。只能去掉Tab Bar的固定。
• Tab Bar的固定會導致當前界面信息量展示變少。

舉個例子：通過微信兩種進入個人主頁的方式來分析如果Tab Bar固定會出現怎么樣的情況？

1. 通過消息列表進入個人相冊

如果Tab Bar固定，那么用戶進入聊天個人詳情，Tab Bar高亮和上一界面維持不變（不然也沒有更好的規則定義）。按照Tab Bar維持不變的邏輯。那么點擊圖像進入個人詳細資料，也應該維持不變。那么問題就來了。詳細資料按照界面層級的結構說應該是屬于通訊錄的二級界面。

下圖第二個界面，Tab Bar和輸入框疊在一起 這是多么別扭的事情，同時會出現誤觸其他的Tab Bar產生跳轉。

2. 通過通訊錄列表進入個人相冊

結合上圖，可以看出兩個Tab下都跑到同一個頁面了。產生這種情況的根本原因是操作路徑和頁面層級的路徑產生了沖突。所以對于界面層級復雜的App同時又有同一個界面 ，就會出現上述情況。

那么為什么Instagram 、App Store 、Twitter、網易云的Tab Bar固定呢？原因是他們的界面層級簡單，操作路徑和頁面層級的路徑幾乎不會發生沖突，同時就算發生沖突也會定其他的規則避免掉。

綜上所述：App中的Tab Bar是固定在下面好還是不固定的好？

這個問題要分情況來說明：

• 如果設計的App界面層級簡單，不存在操作路徑和界面層級的路徑的沖突，同時下級界面不存在底部固定工具欄，那么推薦使用Tab Bar 是固定的方案。
• 如果設計的App界面信息層級復雜，那么推薦使用Tab Bar 不固定的方案。

歡迎關注作者的微信公眾號：「UEDC」

「小Tab大學問」

• 《超實用！聊聊標簽式導航的設計思路（附設計師做筆記方法）》
• 《進階高級！幫你做能落地的界面之Tab的小短線》
• 《搞定Tab bar交互！為設計師量身打造的XCODE教程》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com