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

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

這篇文章我來著重談?wù)凙pp中的Tab Bar 是固定好還是不固定好。

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

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

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

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

當(dāng)用戶進(jìn)入較深的層級(jí)界面，那么用戶想快速進(jìn)去其他Tab Bar的界面可快速切換進(jìn)入而不需要一步步返回，然后再點(diǎn)擊tab bar進(jìn)入。

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

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

舉個(gè)例子：通過微信兩種進(jìn)入個(gè)人主頁的方式來分析如果Tab Bar固定會(huì)出現(xiàn)怎么樣的情況？

1. 通過消息列表進(jìn)入個(gè)人相冊

如果Tab Bar固定，那么用戶進(jìn)入聊天個(gè)人詳情，Tab Bar高亮和上一界面維持不變（不然也沒有更好的規(guī)則定義）。按照Tab Bar維持不變的邏輯。那么點(diǎn)擊圖像進(jìn)入個(gè)人詳細(xì)資料，也應(yīng)該維持不變。那么問題就來了。詳細(xì)資料按照界面層級(jí)的結(jié)構(gòu)說應(yīng)該是屬于通訊錄的二級(jí)界面。

下圖第二個(gè)界面，Tab Bar和輸入框疊在一起 這是多么別扭的事情，同時(shí)會(huì)出現(xiàn)誤觸其他的Tab Bar產(chǎn)生跳轉(zhuǎn)。

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

2. 通過通訊錄列表進(jìn)入個(gè)人相冊

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

結(jié)合上圖，可以看出兩個(gè)Tab下都跑到同一個(gè)頁面了。產(chǎn)生這種情況的根本原因是操作路徑和頁面層級(jí)的路徑產(chǎn)生了沖突。所以對(duì)于界面層級(jí)復(fù)雜的App同時(shí)又有同一個(gè)界面 ，就會(huì)出現(xiàn)上述情況。

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

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

這個(gè)問題要分情況來說明：

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

歡迎關(guān)注作者的微信公眾號(hào)：「UEDC」

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

「小Tab大學(xué)問」


【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com

程遠(yuǎn)鐵粉

文章 6813 人氣 32576.2w

優(yōu)設(shè) 內(nèi)容總監(jiān)
收藏 5
點(diǎn)贊 1

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場，未經(jīng)允許不得轉(zhuǎn)載。

繼續(xù)閱讀本文相關(guān)話題

文章目錄