在APP中,Tab Bar是固定好照舊不固定好?
Echo :國內(nèi)的近況是絕大部分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是固定的例子:
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的切換,網(wǎng)頁呈現(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)入小我主頁的體例來分析假如Tab Bar固定會(huì)出現(xiàn)怎么樣的情況?
1. 通過新聞列表進(jìn)入小我相冊
假如Tab Bar固定,那么用戶進(jìn)入聊天小我詳情,Tab Bar高亮和上一界面維持不變(不然也沒有更好的規(guī)則定義)。按照Tab Bar維持不變的邏輯。那么點(diǎn)擊圖像進(jìn)入小我細(xì)致資料,也應(yīng)該維持不變。那么題目就來了。細(xì)致資料按照界面層級(jí)的結(jié)構(gòu)說應(yīng)該是屬于通信錄的二級(jí)界面。
下圖第二個(gè)界面,Tab Bar和輸入框疊在一路 這是多么別扭的事情,同時(shí)會(huì)出現(xiàn)誤觸其他的Tab Bar產(chǎn)生跳轉(zhuǎn)。
2. 通過通信錄列表進(jìn)入小我相冊
結(jié)合上圖,可以看出兩個(gè)Tab下都跑到統(tǒng)一個(gè)網(wǎng)頁了。產(chǎn)生這種情況的根本緣故原由是操作路徑和網(wǎng)頁層級(jí)的路徑產(chǎn)生了沖突。所以對(duì)于界面層級(jí)復(fù)雜的App同時(shí)又有統(tǒng)一個(gè)界面 ,就會(huì)出現(xiàn)上述情況。
那么為什么Instagram 、App Store 、Twitter、網(wǎng)易云的Tab Bar固定呢?緣故原由是他們的界面層級(jí)簡單,操作路徑和網(wǎng)頁層級(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」
本文地址:http://pkvc.cn/tutorial/di3918.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏