在APP中,Tab Bar 是固定好還是不固定好?
本文作者將來著重談談APP中的Tab Bar 是固定好還是不固定好,你覺得呢?
國內的現狀是絕大部分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. 通過通訊錄列表進入個人相冊
結合圖1和圖2,可以看出兩個tab下都跑到同一個頁面了。產生這種情況的根本原因是操作路徑和頁面層級的路徑產生了沖突。所以對于界面層級復雜的APP同時又有同一個界面 ,就會出現上述情況。
那么為什么instagram 、app store ?、Twitter、網易云的Tab Bar固定呢?原因是他們的界面層級簡單,操作路徑和頁面層級的路徑幾乎不會發生沖突,同時就算發生沖突也會定其他的規則避免掉。
綜上所述:APP中的Tab Bar 是固定在下面好還是不固定的好?
這個問題要分情況來說明:
- 如果設計的App界面層級簡單,不存在操作路徑和界面層級的路徑的沖突,同時下級界面不存在底部固定工具欄,那么推薦使用Tab Bar 是固定的方案。
- 如果設計的App界面信息層級復雜,那么推薦使用Tab Bar 是不固定的方案。
作者:UX,華為ITUX交互組組長 ?微信公眾號:UEDC
本文由 @UX 原創發布于人人都是產品經理。未經許可,禁止轉載。
樓主寫的沒毛病啊,不知道為嘛會有誤解的。。。
知乎就是個反面例子
appstore中通過精品課程進入一個京東的詳情頁,和搜索京東進入詳情頁。這就出現作者所說的路徑沖突了。如果按照用戶的使用角度來看,用戶使用是單線程的,并不會對此產生很大的疑惑。同時從pc網頁的設計來開(nav基本固定在每個頁面),可以從web頁面和app界面設計的區別去分析導航固不固定。
??
用固定Tab Bar的多是層級復雜的APP
沒有相反啊,結論和論述一致啊。層級簡單而且沒有底部工具欄,優先固定tabbar,層級復雜則使用不固定tabbar
tab bar是蘋果的叫法。蘋果也說了,一般在一級頁面放上,二三級頁面按照需求放(且一般不放),實際上我們都是按照頁面重功能還是重內容,重內容是絕對不能出現的。
掰開揉碎的講了一個腦筋急轉彎的事情
文末所給到的結論恰恰相反,對其路徑簡單者采用 不固定tarbar ,其復雜者 反而應固定
貌似還真是
沒有相反啊,結論和論述一致啊。層級簡單而且沒有底部工具欄,優先固定tabbar,層級復雜則使用不固定tabbar
嚇我一跳,我明明寫的層級簡單的,同時不存在固定工具欄,采用tab bar 固定方案。