前言
嗶哩嗶哩動(dòng)畫是中國大陸的一家彈幕視頻網(wǎng)站僚楞，在中國二次元用戶中頗受歡迎娶眷。
嗶哩嗶哩動(dòng)畫之前推出過采用 Android Design 的 Android 客戶端似嗤，雖然有使用了部分過時(shí)控件（例如 Scrollable Tabs）之類的問題，但整體素質(zhì)依舊較高届宠，受到 Android 用戶的廣泛好評(píng)烁落。而在 6 月初的 3.9 及 4.0 更新后，嗶哩嗶哩拋棄了過去的 Android Design 轉(zhuǎn)而使用了 iOS 風(fēng)格的設(shè)計(jì)豌注，如圖所示：
此次更新在用戶中的爭議頗大，部分用戶反對(duì)此次改版轧铁，認(rèn)為新版嗶哩嗶哩動(dòng)畫客戶端失去了原有的 Android 風(fēng)格每聪，令人失望。
個(gè)人認(rèn)為嗶哩嗶哩的情況比較特殊：原來進(jìn)行過 Redesign 的應(yīng)用有一開始就是 iOS 風(fēng)格的齿风，也有采用 Android Design 風(fēng)格药薯，但并不完美的。對(duì)嗶哩嗶哩這種原來是 Android Design 風(fēng)格救斑，但后期轉(zhuǎn)換為 iOS 風(fēng)格的 App 進(jìn)行 Redesign 是一件很有挑戰(zhàn)性的事情童本。于是在對(duì)新版進(jìn)行了一段時(shí)間的體驗(yàn)之后，我開始利用新版的特性和部分交互邏輯對(duì)嗶哩嗶哩動(dòng)畫進(jìn)行基于 Material Design 的 Redesign 嘗試脸候。
在微博上發(fā)布了幾張預(yù)告效果圖之后穷娱，我意外地收到了認(rèn)證資料為“bilibili副總裁”的微博用戶 @光頭哥光頭哥 的私信绑蔫。因?yàn)樵谒叫爬镞@位微博用戶對(duì)一些問題進(jìn)行了詢問，加上設(shè)計(jì)師在知乎上對(duì)于這次設(shè)計(jì)風(fēng)格改變的解釋泵额，我認(rèn)為嗶哩嗶哩本身是想采用 Material Design 的配深，然而對(duì)于 Material Design 本身并不是十分了解，因此才會(huì)采用 iOS 的設(shè)計(jì)風(fēng)格嫁盲。
我個(gè)人對(duì)嗶哩嗶哩的態(tài)度感到很欣慰篓叶，希望能在以后拿出更好的設(shè)計(jì)。
我也希望我的這篇文章能夠起到一些幫助亡资。
對(duì)底部 Tab Bar 說 No
在文章開始之前澜共，我想先回答之前 @光頭哥光頭哥 在私信中提出的一個(gè)問題：為什么安卓用戶對(duì)底部 toolsbar 這么介意？
首先要糾正一個(gè)用詞錯(cuò)誤：用于切換不同頁面的 Bar 叫 Tab Bar锥腻，而不是 Tools Bar.這點(diǎn)在 Apple 官方的 iOS 7 UI Transition Guide 中也有提到嗦董。
那么糾正完用詞錯(cuò)誤，接下來就要回答這個(gè)問題了：為何 Android 上最好不要出現(xiàn)底部 Tab Bar 呢瘦黑？
首先京革，Android 提供了更多樣的交互方式，例如 Drawer幸斥，F(xiàn)loating Action Button 等匹摇。活用這些交互方式可以靈活地將用戶引導(dǎo)至其他視圖上甲葬。
其次廊勃，即使要使用 Tab Bar ，Google 官方也已經(jīng)提供了解決方案——各式各樣的頂部 Tab Bars.而且经窖，頂部 Tab Bar 均可以滑動(dòng)切換坡垫，這樣就無需擔(dān)心單手操作性了。
另外對(duì)于虛擬鍵用戶來說画侣，使用底部 Tab Bar 也會(huì)帶來“雙底欄”的問題冰悠，影響美觀性。
所以配乱，在 Android 上使用底部 Tab Bar 是一種毫無必要的行為溉卓，不僅不會(huì)對(duì)單手操作帶來任何便利，反而會(huì)造成更多的麻煩搬泥。
Google 很早就談到了這一點(diǎn)：Pure Android 頁面中列出了很多“不該做”的事情桑寨，其中之一就是“不要使用底部 Tab Bars”。
之前 @光頭哥光頭哥 和我提到過忿檩，因?yàn)閱袅▎袅ǖ膬?nèi)容架構(gòu)極其豐富西疤，于是想把內(nèi)容的分類篩選在頁眉留給用戶。即使是這樣休溶，采用雙 Tab Bars 也沒有多大必要代赁，可以參考第一點(diǎn)，使用其他方式實(shí)現(xiàn)原來底部 Tab Bar 的功能兽掰，我會(huì)在下面提到我是如何去實(shí)現(xiàn)這一點(diǎn)的芭碍。
1.首頁
對(duì)首頁的改進(jìn)是整個(gè) Redesign 中最重要的一環(huán)之一，畢竟這次設(shè)計(jì)爭議最大的就是采用底部 Tab Bar 的設(shè)計(jì)孽尽。
我對(duì)首頁的改進(jìn)有：
去掉底部 Tab Bar窖壕，保留頂部 Tab Bar
加入標(biāo)準(zhǔn) App Bar，顏色取自 v3.3.0 的 Action Bar
個(gè)人信息放入 Drawer
“關(guān)注”杉女、“發(fā)現(xiàn)”和“游戲”整合入“發(fā)現(xiàn)” Floating Action Button
下載瞻讽、消息（目前似乎客戶端未加入消息系統(tǒng)）等按鈕單獨(dú)作為 Action 放置于 App Bar 上
首頁項(xiàng)目和 Banner 采用 Cards 設(shè)計(jì)
如上文所述，我使用了將選項(xiàng)分散的思路熏挎，將原先底部 Tab Bar 的選項(xiàng)分散到其他模塊速勇。下文我會(huì)一一講解。
當(dāng)用戶向上滾動(dòng)首頁列表的時(shí)候坎拐，App Bar 將會(huì)自動(dòng)隱藏烦磁，只留下 Tab Bar 。
一個(gè)小細(xì)節(jié)：我試著使用了類似 Google Play Store 的滾動(dòng) Cards 布局展示“番劇更新”項(xiàng)哼勇，在最右側(cè)露出 Card 的一端來提醒用戶這一排可以進(jìn)行滾動(dòng)都伪。
同時(shí)我保留了 Tab Bar 的下拉菜單的設(shè)計(jì)，點(diǎn)擊最右邊的箭頭就可以調(diào)出菜單积担，能直接點(diǎn)擊進(jìn)入 Tab 項(xiàng)陨晶，也能對(duì) Tab 項(xiàng)進(jìn)行重排。
2.個(gè)人信息
之前的 v3.3.0 及更早的版本將個(gè)人信息放在最左邊的 Tab 帝璧，而最新的 v4.0.0 將個(gè)人信息放在“我的” Tab先誉。個(gè)人認(rèn)為這個(gè)區(qū)域完全可以用 Drawer 替代。
這里的修改不多聋溜，主要是以下幾點(diǎn)：
個(gè)人信息區(qū)域加入頭圖谆膳，硬幣改為和網(wǎng)頁版一致的“B”圖標(biāo)
去掉“離線任務(wù)選項(xiàng)”，相應(yīng)的項(xiàng)目已移動(dòng)至 App Bar
“設(shè)置”“幫助與反饋”放置在單獨(dú)區(qū)域
之前的各個(gè)版本撮躁，各個(gè)平臺(tái)的客戶端均未加入頭圖項(xiàng)漱病，所以我在做這個(gè)設(shè)計(jì)的時(shí)候也思考了一下要不要加入頭圖，后面對(duì)比了幾個(gè)版本的解決方案把曼，還是決定加入頭圖杨帽。
3.“發(fā)現(xiàn)” FAB
v4.0.0 加入了“關(guān)注”、“發(fā)現(xiàn)”和“游戲”三個(gè) Tab 項(xiàng)目嗤军。按道理來說注盈，一個(gè)放在 App Bar 上的搜索即可解決問題，但是考慮到“游戲”等項(xiàng)目的特殊屬性需要足夠的曝光度等叙赚，最終決定將這三項(xiàng)合并為一個(gè) “發(fā)現(xiàn)” Floating Action Button.
如圖所示老客，“發(fā)現(xiàn)” FAB 處于屏幕右下方僚饭，若用戶點(diǎn)擊，F(xiàn)AB 中的其他項(xiàng)目會(huì)自動(dòng)展開：
為了讓“游戲”“排行”等項(xiàng)在日常使用時(shí)能擁有更高的曝光率胧砰，我將常用的“搜索”等項(xiàng)放入了此 FAB 鳍鸵。
4.播放頁面
第一步
首先當(dāng)然是采用了“正常”的 App Bar——原來播放界面的 App Bar 高度并不標(biāo)準(zhǔn)尉间。其次在這個(gè)界面我使用了不同的配色方案——以標(biāo)志性的粉色作為底色偿乖，字體和圖標(biāo)以白色呈現(xiàn)。同時(shí)將“點(diǎn)擊播放”按鈕去掉哲嘲，變成點(diǎn)擊封面圖即可播放贪薪，封面圖也進(jìn)行了適當(dāng)?shù)胤糯蟆Ｗ詈髮⒃仍谝曨l信息下的 Tab 轉(zhuǎn)移到上面眠副，所以一共做的改動(dòng)有：
更換為正常高高度的 App Bar
將 Tab Bar 提上画切，與 App Bar 整合
使用與首頁不同的配色方案
去掉“點(diǎn)擊播放”按鈕，和封面圖整合
下載侦啸、收藏和分享等項(xiàng)集合至 App Bar
添加“評(píng)論” FAB
第二步
做完第一步之后我發(fā)現(xiàn)槽唾，似乎把那些選項(xiàng)都放在 App Bar 上并不是很好的選擇。于是我試圖對(duì)著 FAB 下手光涂，做成了類似首頁“發(fā)現(xiàn)”的擴(kuò)展 FAB庞萍，如圖所示：
于是這一步的改進(jìn)就是：
下載、收藏和分享等項(xiàng)集合至一個(gè) FAB忘闻，點(diǎn)擊展開
第三步
然而在思考了一會(huì)之后钝计，又覺得放一個(gè) FAB 在這似乎有些多余。在 v3.3.0 中齐佳，這些選項(xiàng)放置在 Split Action Bar 上私恬，然而 Material Design 中已經(jīng)去掉了 SAB 。
于是我試圖使用 Quick Return 模式來放置這些選項(xiàng)炼吴，結(jié)果個(gè)人還是很滿意的：
最后對(duì)原來居中的視頻標(biāo)題重新調(diào)節(jié)成偏上本鸣，最終成品如下：
最后一步做的調(diào)整有：
改用 Quick Return 模式在底端放置選項(xiàng)
將視頻標(biāo)題由居中修改為偏上
5.引導(dǎo)頁面
每個(gè) App 在進(jìn)行設(shè)計(jì)和交互大改的時(shí)候都應(yīng)該對(duì)用戶進(jìn)行引導(dǎo)和提示。微信在 5.2 上啟用 Android Design 時(shí)就吃了這個(gè)虧硅蹦，直接升級(jí)的用戶并不知道這個(gè)版本會(huì)對(duì)設(shè)計(jì)大改荣德，結(jié)果改完就崩潰了——這個(gè)新界面到底該怎么用？童芹？涮瞻？
所以如果嗶哩嗶哩需要啟用 Material Design 設(shè)計(jì)，一定要做一個(gè)引導(dǎo)流程讓用戶知悉新版的變化假褪。
首先是首次啟動(dòng)的引導(dǎo)頁署咽，通過強(qiáng)調(diào)“新版”來提示用戶。
之后是一個(gè)提示界面生音，用圈點(diǎn)的形式提示用戶原來的功能都去了哪里宁否。同時(shí)對(duì)于 Drawer 給予適當(dāng)提示窒升，讓用戶知道調(diào)出 Drawer 除了點(diǎn)擊漢堡包圖標(biāo)還能向右滑動(dòng)調(diào)出。
以上只是隨便制作的家淤，非常粗糙的引導(dǎo)頁异剥。相信嗶哩嗶哩的設(shè)計(jì)師們能想出更好的主意。
后記
制作這次的 Redesign 是一次充滿挑戰(zhàn)的歷程絮重，我希望這次的 Redesign 能給予各位一些啟發(fā)。
嗶哩嗶哩官方已經(jīng)放話了歹苦，正在研究 Material Design青伤。那么就讓我們期待一個(gè)更好的嗶哩嗶哩客戶端吧~
( ゜- ゜)つロ 乾杯~
