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

UX
12 評(píng)論 25932 瀏覽 87 收藏 5 分鐘

本文作者將來(lái)著重談?wù)凙PP中的Tab Bar 是固定好還是不固定好,你覺(jué)得呢?

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

這篇文章我來(lái)著重談?wù)凙PP中的Tab Bar 是固定好還是不固定好?

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

Tab Bar固定帶用戶帶來(lái)的好處

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

Tab Bar常駐固定帶用戶帶來(lái)的壞處

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

舉個(gè)例子:通過(guò)微信兩種進(jìn)入個(gè)人主頁(yè)的方式來(lái)分析如果tab bar固定會(huì)出現(xiàn)怎么樣的情況?

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

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

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

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

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

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

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

這個(gè)問(wèn)題要分情況來(lái)說(shuō)明:

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

 

作者:UX,華為ITUX交互組組長(zhǎng) ?微信公眾號(hào):UEDC

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

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

    來(lái)自北京 回復(fù)
  2. 知乎就是個(gè)反面例子

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

    來(lái)自廣東 回復(fù)
  4. ??

    來(lái)自廣東 回復(fù)
  5. 用固定Tab Bar的多是層級(jí)復(fù)雜的APP

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

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

    來(lái)自四川 回復(fù)
  7. 掰開(kāi)揉碎的講了一個(gè)腦筋急轉(zhuǎn)彎的事情

    來(lái)自廣東 回復(fù)
  8. 文末所給到的結(jié)論恰恰相反,對(duì)其路徑簡(jiǎn)單者采用 不固定tarbar ,其復(fù)雜者 反而應(yīng)固定

    來(lái)自廣東 回復(fù)
    1. 貌似還真是

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

      來(lái)自江西 回復(fù)
    3. 嚇我一跳,我明明寫(xiě)的層級(jí)簡(jiǎn)單的,同時(shí)不存在固定工具欄,采用tab bar 固定方案。

      回復(fù)