在APP中,Tab Bar 是固定好還是不固定好?

UX
12 評論 26057 瀏覽 87 收藏 5 分鐘
🔗 产品经理的不可取代的价值是能够准确发现和满足用户需求,把需求转化为产品,并协调资源推动产品落地,创造商业价值。

本文作者將來著重談談APP中的Tab Bar 是固定好還是不固定好,你覺得呢?

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

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

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

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

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

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

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

舉個例子:通過微信兩種進入個人主頁的方式來分析如果tab bar固定會出現(xiàn)怎么樣的情況?

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

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

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

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

結(jié)合圖1和圖2,可以看出兩個tab下都跑到同一個頁面了。產(chǎn)生這種情況的根本原因是操作路徑和頁面層級的路徑產(chǎn)生了沖突。所以對于界面層級復雜的APP同時又有同一個界面 ,就會出現(xiàn)上述情況。

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

綜上所述:APP中的Tab Bar 是固定在下面好還是不固定的好?

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

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

 

作者:UX,華為ITUX交互組組長 ?微信公眾號:UEDC

本文由 @UX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 樓主寫的沒毛病啊,不知道為嘛會有誤解的。。。

    來自北京 回復
  2. 知乎就是個反面例子

    來自廣東 回復
  3. appstore中通過精品課程進入一個京東的詳情頁,和搜索京東進入詳情頁。這就出現(xiàn)作者所說的路徑?jīng)_突了。如果按照用戶的使用角度來看,用戶使用是單線程的,并不會對此產(chǎn)生很大的疑惑。同時從pc網(wǎng)頁的設計來開(nav基本固定在每個頁面),可以從web頁面和app界面設計的區(qū)別去分析導航固不固定。

    來自廣東 回復
  4. ??

    來自廣東 回復
  5. 用固定Tab Bar的多是層級復雜的APP

    回復
    1. 沒有相反啊,結(jié)論和論述一致啊。層級簡單而且沒有底部工具欄,優(yōu)先固定tabbar,層級復雜則使用不固定tabbar

      來自江西 回復
  6. tab bar是蘋果的叫法。蘋果也說了,一般在一級頁面放上,二三級頁面按照需求放(且一般不放),實際上我們都是按照頁面重功能還是重內(nèi)容,重內(nèi)容是絕對不能出現(xiàn)的。

    來自四川 回復
  7. 掰開揉碎的講了一個腦筋急轉(zhuǎn)彎的事情

    來自廣東 回復
  8. 文末所給到的結(jié)論恰恰相反,對其路徑簡單者采用 不固定tarbar ,其復雜者 反而應固定

    來自廣東 回復
    1. 貌似還真是

      來自上海 回復
    2. 沒有相反啊,結(jié)論和論述一致啊。層級簡單而且沒有底部工具欄,優(yōu)先固定tabbar,層級復雜則使用不固定tabbar

      來自江西 回復
    3. 嚇我一跳,我明明寫的層級簡單的,同時不存在固定工具欄,采用tab bar 固定方案。

      回復
专题
16893人已学习12篇文章
每年一到年底,各家APP平台就会陆续推出年度报告。本专题的文章分享了年度报告的设计思路。
专题
13312人已学习12篇文章
知识管理是什么?通常来看,想理解知识管理,可以从业务、管理、实施等视角切入。本专题的文章分享了如何做知识管理。
专题
16226人已学习16篇文章
企业服务(2B)公司的创业有8个阶段,所有SaaS公司或2B公司不可能跳过这些阶段,每个阶段都有明确的任务。本专题的文章分享了SaaS创业路线图。
专题
13488人已学习12篇文章
一款产品,若想做到极致满足用户的需求,产品功能会变得越发臃肿。但在产品设计中,也可以做做减法,去除一些不必要或不重要的功能和元素。本专题的文章分享了如何给产品做减法。
专题
45064人已学习22篇文章
可用又易用,产品逻辑和情感化体验两手抓,用户才会爱上你的产品。