中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

嗶哩嗶哩動(dòng)畫是中國(guó)大陸的一家彈幕視頻網(wǎng)站，在中國(guó)二次元用戶中頗受歡迎。

嗶哩嗶哩動(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ì)，如圖所示：

左為 v3.3.0，右為v4.0.0

此次更新在用戶中的爭(zhēng)議頗大，部分用戶反對(duì)此次改版，認(rèn)為新版嗶哩嗶哩動(dòng)畫客戶端失去了原有的 Android 風(fēng)格，令人失望。

個(gè)人認(rèn)為嗶哩嗶哩的情況比較特殊：

原來(lái)進(jìn)行過 Redesign 的應(yīng)用有一開始就是 iOS 風(fēng)格的，也有采用 Android Design 風(fēng)格，但并不完美的。對(duì)嗶哩嗶哩這種原來(lái)是 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ì)。

我也希望我的這篇文章能夠起到一些幫助。在文章開始之前，我想先回答之前 @光頭哥光頭哥 在私信中提出的一個(gè)問題：為什么安卓用戶對(duì)底部 toolsbar 這么介意？

首先要糾正一個(gè)用詞錯(cuò)誤：用于切換不同頁(yè)面的 Bar 叫 Tab Bar，而不是 Tools Bar.這點(diǎn)在 Apple 官方的 iOS 7 UI Transition Guide 中也有提到。

那么糾正完用詞錯(cuò)誤，接下來(lái)就要回答這個(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)切換，這樣就無(wú)需擔(dān)心單手操作性了。

另外對(duì)于虛擬鍵用戶來(lái)說，使用底部 Tab Bar 也會(huì)帶來(lái)“雙底欄”的問題，影響美觀性。

所以，在 Android 上使用底部 Tab Bar 是一種毫無(wú)必要的行為，不僅不會(huì)對(duì)單手操作帶來(lái)任何便利，反而會(huì)造成更多的麻煩。

Google 很早就談到了這一點(diǎn)：Pure Android 頁(yè)面中列出了很多“不該做”的事情，其中之一就是“不要使用底部 Tab Bars”。

之前 @光頭哥光頭哥 和我提到過，因?yàn)閱袅▎袅ǖ膬?nèi)容架構(gòu)極其豐富，于是想把內(nèi)容的分類篩選在頁(yè)眉留給用戶。即使是這樣，采用雙 Tab Bars 也沒有多大必要，可以參考第一點(diǎn)，使用其他方式實(shí)現(xiàn)原來(lái)底部 Tab Bar 的功能，我會(huì)在下面提到我是如何去實(shí)現(xiàn)這一點(diǎn)的。

首頁(yè)

對(duì)首頁(yè)的改進(jìn)是整個(gè) Redesign 中最重要的一環(huán)之一，畢竟這次設(shè)計(jì)爭(zhēng)議最大的就是采用底部 Tab Bar 的設(shè)計(jì)。

我對(duì)首頁(yè)的改進(jìn)有：

1. 去掉底部 Tab Bar，保留頂部 Tab Bar；
2. 加入標(biāo)準(zhǔn) App Bar，顏色取自 v3.3.0 的 Action Bar；
3. 個(gè)人信息放入 Drawer；
4. “關(guān)注”、“發(fā)現(xiàn)”和“游戲”整合入“發(fā)現(xiàn)” Floating Action Button；
5. 下載、消息（目前似乎客戶端未加入消息系統(tǒng)）等按鈕單獨(dú)作為 Action 放置于 App Bar 上；
6. 首頁(yè)項(xiàng)目和 Banner 采用 Cards 設(shè)計(jì)；

如上文所述，我使用了將選項(xiàng)分散的思路，將原先底部 Tab Bar 的選項(xiàng)分散到其他模塊。下文我會(huì)一一講解。

當(dāng)用戶向上滾動(dòng)首頁(yè)列表的時(shí)候，App Bar 將會(huì)自動(dòng)隱藏，只留下 Tab Bar 。

一個(gè)小細(xì)節(jié)：我試著使用了類似 Google Play Store 的滾動(dòng) Cards 布局展示“番劇更新”項(xiàng)，在最右側(cè)露出 Card 的一端來(lái)提醒用戶這一排可以進(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)行重排。

個(gè)人信息

之前的 v3.3.0 及更早的版本將個(gè)人信息放在最左邊的 Tab ，而最新的 v4.0.0 將個(gè)人信息放在“我的” Tab。個(gè)人認(rèn)為這個(gè)區(qū)域完全可以用 Drawer 替代。

這里的修改不多，主要是以下幾點(diǎn)：

1. 個(gè)人信息區(qū)域加入頭圖，硬幣改為和網(wǎng)頁(yè)版一致的“B”圖標(biāo)；
2. 去掉“離線任務(wù)選項(xiàng)”，相應(yīng)的項(xiàng)目已移動(dòng)至 App Bar；
3. “設(shè)置”“幫助與反饋”放置在單獨(dú)區(qū)域；
4. 之前的各個(gè)版本，各個(gè)平臺(tái)的客戶端均未加入頭圖項(xiàng)，所以我在做這個(gè)設(shè)計(jì)的時(shí)候也思考了一下要不要加入頭圖，后面對(duì)比了幾個(gè)版本的解決方案，還是決定加入頭圖；

“發(fā)現(xiàn)” FAB

v4.0.0 加入了“關(guān)注”、“發(fā)現(xiàn)”和“游戲”三個(gè) Tab 項(xiàng)目。按道理來(lái)說，一個(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 。

播放頁(yè)面

第一步

首先當(dāng)然是采用了“正?！钡?App Bar——原來(lái)播放界面的 App Bar 高度并不標(biāo)準(zhǔn)。其次在這個(gè)界面我使用了不同的配色方案——以標(biāo)志性的粉色作為底色，字體和圖標(biāo)以白色呈現(xiàn)。同時(shí)將“點(diǎn)擊播放”按鈕去掉，變成點(diǎn)擊封面圖即可播放，封面圖也進(jìn)行了適當(dāng)?shù)胤糯?。最后將原先在視頻信息下的 Tab 轉(zhuǎn)移到上面，所以一共做的改動(dòng)有：

1. 更換為正常高高度的 App Bar；
2. 將 Tab Bar 提上，與 App Bar 整合；
3. 使用與首頁(yè)不同的配色方案；
4. 去掉“點(diǎn)擊播放”按鈕，和封面圖整合；
5. 下載、收藏和分享等項(xiàng)集合至 App Bar；
6. 添加“評(píng)論” FAB；

第二步

做完第一步之后我發(fā)現(xiàn)，似乎把那些選項(xiàng)都放在 App Bar 上并不是很好的選擇。于是我試圖對(duì)著 FAB 下手，做成了類似首頁(yè)“發(fā)現(xiàn)”的擴(kuò)展 FAB，如圖所示：

于是這一步的改進(jìn)就是：

1. 下載、收藏和分享等項(xiàng)集合至一個(gè) FAB，點(diǎn)擊展開；

第三步

然而在思考了一會(huì)之后，又覺得放一個(gè) FAB 在這似乎有些多余。在 v3.3.0 中，這些選項(xiàng)放置在 Split Action Bar 上，然而 Material Design 中已經(jīng)去掉了 SAB 。

于是我試圖使用 Quick Return 模式來(lái)放置這些選項(xiàng)，結(jié)果個(gè)人還是很滿意的：

最后對(duì)原來(lái)居中的視頻標(biāo)題重新調(diào)節(jié)成偏上，最終成品如下：

第四步

最后一步做的調(diào)整有：

1. 改用 Quick Return 模式在底端放置選項(xiàng)；
2. 將視頻標(biāo)題由居中修改為偏上；

5.引導(dǎo)頁(yè)面

每個(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)頁(yè)，通過強(qiáng)調(diào)“新版”來(lái)提示用戶。

之后是一個(gè)提示界面，用圈點(diǎn)的形式提示用戶原來(lái)的功能都去了哪里。同時(shí)對(duì)于 Drawer 給予適當(dāng)提示，讓用戶知道調(diào)出 Drawer 除了點(diǎn)擊漢堡包圖標(biāo)還能向右滑動(dòng)調(diào)出。

以上只是隨便制作的，非常粗糙的引導(dǎo)頁(yè)。相信嗶哩嗶哩的設(shè)計(jì)師們能想出更好的主意。

后記

制作這次的 Redesign 是一次充滿挑戰(zhàn)的歷程，我希望這次的 Redesign 能給予各位一些啟發(fā)。

作者：Micromacer

來(lái)源：簡(jiǎn)書

原文地址：http://www.jianshu.com/p/d1458e550b8e