最近在網(wǎng)盤里找到幾篇舊文，可能有些圖片已經(jīng)是舊版的了览绿，分析也比較淺顯只冻。但是不重要，重要的是對(duì)我的啟發(fā)蝙寨，同時(shí)也督促自己養(yǎng)成研究和總結(jié)的習(xí)慣~
選擇理由：號(hào)稱21天打造的MD(Material Design)風(fēng)格,與其他Material Design風(fēng)格的應(yīng)用相比晒衩，BiliBili利用得還是比較充分的嗤瞎，對(duì)其特色的覆蓋面更廣。例如搜索框的動(dòng)效听系、用側(cè)邊欄代替底部導(dǎo)航欄等贝奇。所以它不一定是做得最好的，但是卻是比較典型的一款應(yīng)用靠胜。
使用平臺(tái)：三星Note2（Android5.0.2）
1.安卓特色的頁面框架
1.1.導(dǎo)航方式
下圖是BiliBili的ios(左)和安卓版(右)的結(jié)構(gòu)圖掉瞳，紅色的模塊在安卓版里整合到了首頁。所以可以看到ios版的首頁和底部導(dǎo)航除“我的”以外的三個(gè)tab都被整合到了側(cè)邊欄的“首頁”里浪漠。而側(cè)邊欄剩余的部分就是“我的”陕习。
安卓沒有了底部導(dǎo)航，而tab比ios的多了很多郑藏。因?yàn)榘裪os里置于底部導(dǎo)航欄的標(biāo)簽(除“我的”以外)都放到了標(biāo)簽欄衡查，所以這里安卓版采用了滾動(dòng)式標(biāo)簽導(dǎo)航瘩欺。而頁面左上角的用戶頭像左邊有一個(gè)漢堡圖標(biāo)（三條杠）必盖，點(diǎn)開會(huì)從頁面上方（Z軸）浮出一個(gè)側(cè)邊欄菜單，ios里的“我的”里面的大部分功能就在這里面俱饿。右上角有三個(gè)快捷方式歌粥，一個(gè)是原來在ios個(gè)人中心里的“游戲中心”，還有兩個(gè)分別是緩存和搜索拍埠。安卓這種特有的布局方式一個(gè)明顯的缺點(diǎn)就顯露出來了失驶，就是頭部很重，特別是BiliBili的頭部是粉紅色的枣购，粉色的面積過大嬉探，太搶眼了。頁面上滑后滾動(dòng)式導(dǎo)航會(huì)置頂棉圈，方便用戶隨時(shí)切換涩堤。
1.2.側(cè)邊欄
如上面所說的，點(diǎn)擊左上角的用戶頭像旁的三條杠圖標(biāo)分瘾，就會(huì)從頁面上方胎围，也就是Z軸的上方位置，浮出一個(gè)側(cè)邊欄德召，這個(gè)側(cè)邊欄最上面是個(gè)人資料白魂，讓用戶一下子進(jìn)入了第一人稱視角，一目了然這個(gè)側(cè)邊欄的操作都是與“我”有關(guān)上岗。右上角是“消息中心”和“夜間模式開關(guān)”福荸。方便用戶便捷地切換界面模式以及查看消息。往下是菜單列表肴掷，根據(jù)功能類型分成了三組敬锐。第一個(gè)就是“首頁”辞嗡，讓用戶明確了自己所處的位置是首頁。這種模式最大的缺點(diǎn)就是側(cè)邊欄的點(diǎn)擊率會(huì)比較低滞造。因?yàn)椴刂目偸潜确旁谕饷嬉环奖悴僮餍摇５莃ilibili在這一塊的設(shè)計(jì)還是很方便的。因?yàn)樗_實(shí)把重要的tab都放在首頁的滾動(dòng)式標(biāo)簽上了谒养。而這里放置的都是原來個(gè)人中心的東西挺狰，本來就不常使用。而就在首頁的時(shí)候而言买窟，安卓版訪問類似“我的收藏”這樣的功能可能會(huì)更便捷丰泊。因?yàn)椴僮鞑襟E數(shù)量是一樣的，但用戶頭像和用戶名在首頁左上角占的位置較大始绍，又是瀏覽順序上來講最容易關(guān)注到的地方瞳购；ios版則在右下角最不容易發(fā)現(xiàn)的地方。
1.3.搜索
如下圖所示是BiliBili首頁的搜索方式亏推。點(diǎn)擊搜索圖標(biāo)学赛，從圖標(biāo)處向左展開一個(gè)搜索框，并滑出鍵盤吞杭。左側(cè)有個(gè)返回按鈕盏浇，這也是安卓特色搜索，可以在系統(tǒng)應(yīng)用里看到芽狗。在這里又多做了一個(gè)掃碼的功能绢掰。除輸入框外的其他區(qū)域都進(jìn)行了蒙層，讓用戶專注于目標(biāo)童擎，更高效地搜索滴劲。
1.4.標(biāo)準(zhǔn)型導(dǎo)航欄
在一些子頁面（比如二級(jí)分類）及臨時(shí)打開的頁面（比如設(shè)置）左上角的按鈕就是下圖（左圖）所示的返回按鈕，這個(gè)返回按鈕和右邊的“更多”（豎著的三個(gè)點(diǎn)）都是非常有安卓系統(tǒng)特色的圖標(biāo)顾复。之前說到微博（下圖右圖）的時(shí)候提到過這三個(gè)點(diǎn)是橫著的班挖，“返回”和“更多”兩個(gè)圖標(biāo)的區(qū)別是兩個(gè)系統(tǒng)的第一大區(qū)別。第二大區(qū)別是標(biāo)題捕透，安卓系統(tǒng)的標(biāo)題并不在正中央聪姿，而是在左邊的，當(dāng)左邊有圖標(biāo)時(shí)挨在圖標(biāo)后面乙嘀，隔開一些距離末购。而ios系統(tǒng)的標(biāo)題是在正中央的，返回圖標(biāo)右邊可以沒有標(biāo)題虎谢，也可以緊挨著上一頁標(biāo)題盟榴。
1.5.其他頁面的tab式導(dǎo)航
在“管理緩存”、“我的收藏”婴噩、“我的關(guān)注”擎场、“B幣錢包”等頁面也用了tab式導(dǎo)航(如下圖左圖)羽德。右圖是ios版同一個(gè)頁面的導(dǎo)航設(shè)計(jì)，用的是tab導(dǎo)航樣式的分段式導(dǎo)航迅办，把兩個(gè)tab插進(jìn)了導(dǎo)航欄內(nèi)宅静。但因?yàn)檫@個(gè)是ios的標(biāo)準(zhǔn)控件，所以在安卓端沒有采用這種方式站欺。安卓這種方式優(yōu)點(diǎn)是頂部有更多的空間可以放置一些常用按鈕姨夹，例如下圖所示的緩存和搜索。缺點(diǎn)也同樣是頭部太重矾策，配上粉紅色的底色磷账，比較搶眼。
1.6.下拉菜單式導(dǎo)航與滾動(dòng)式導(dǎo)航的結(jié)合
首頁tab“分區(qū)”下的類目子頁面贾虽，用到了下拉菜單式導(dǎo)航和滾動(dòng)式導(dǎo)航的一個(gè)結(jié)合體：
用戶可以通過簡(jiǎn)單的滾動(dòng)來切換標(biāo)簽逃糟，如果要查看全部標(biāo)簽，可以點(diǎn)開下拉小箭頭蓬豁，看到全部標(biāo)簽绰咽，底下是5個(gè)排序方式，可以進(jìn)行設(shè)置庆尘。這種方式的優(yōu)點(diǎn)在于把眾多的標(biāo)簽和設(shè)置收納起來剃诅，用一種比較省空間的方式來呈現(xiàn)巷送，如果要看全部驶忌，也有一個(gè)快捷的方式展開。缺點(diǎn)是排序的選項(xiàng)放在下拉框里笑跛，操作路徑有點(diǎn)深付魔，不夠便捷。
1.7.下拉框
右上角的“更多”也是典型的按鈕風(fēng)格飞蹂。下圖（左圖）是播放頁面的下拉框几苍，右圖是安卓系統(tǒng)內(nèi)的樣式。都是小弧度圓角矩形陈哑，無隔斷的樣式妻坝。與安卓系統(tǒng)明顯不同的是沒有小三角，以及展示的位置覆蓋了導(dǎo)航欄惊窖。這種樣式的優(yōu)點(diǎn)是刽宪，讓用戶專注于當(dāng)下的操作。缺點(diǎn)就是對(duì)頁面內(nèi)容有遮擋界酒。在播放界面的話基本擋住了大半個(gè)播放界面圣拄。而且，BiliBili雖然嚴(yán)格遵照安卓系統(tǒng)的風(fēng)格把標(biāo)題放在標(biāo)題欄的左側(cè)毁欣，但是當(dāng)頁面上滑到視頻區(qū)消失后庇谆，頂部會(huì)出現(xiàn)一個(gè)“立即播放”的快捷按鈕岳掐，它的位置是居中的。所以當(dāng)下拉菜單出現(xiàn)后饭耳，這個(gè)按鈕就會(huì)被擋状觥（像下圖左圖），直到用戶取消下拉菜單的顯示后才能看到寞肖。
1.8.設(shè)置列表
BiliBili的設(shè)置頁面采用的是垂直列表剖煌，與安卓的系統(tǒng)設(shè)置一樣，沒有跳轉(zhuǎn)箭頭逝淹。這種模式的優(yōu)點(diǎn)是簡(jiǎn)潔清晰耕姊，冷靜理性。但是安卓版的沒有跳轉(zhuǎn)箭頭栅葡，所以有個(gè)明顯的缺點(diǎn)茉兰，就是沒有點(diǎn)擊感，與純文本列表難以區(qū)分欣簇。
還有一點(diǎn)规脸，BiliBili的設(shè)置列表，沒有采用系統(tǒng)的開關(guān)控件熊咽，而是采用了radiobox和checkbox莫鸭。radiobox就是圓形的，通常網(wǎng)頁上的單選框横殴，在這里用作選擇某一選項(xiàng)被因。而checkbox就是傳統(tǒng)意義上的復(fù)選框，也就是下圖方形的控件衫仑，但在這里它的意義更接近于某一功能的開關(guān)梨与。這種形式與標(biāo)準(zhǔn)的安卓系統(tǒng)的開關(guān)控件相比，在頁面上顯得比較單調(diào)文狱，不夠生動(dòng)粥鞋。但是優(yōu)點(diǎn)是操作統(tǒng)一，簡(jiǎn)單清晰瞄崇。
2.內(nèi)容布局模式
1）輪播banner
BiliBili的首頁和傳統(tǒng)的視頻網(wǎng)站的一個(gè)區(qū)別就是輪播不是視頻呻粹，而是特輯，所以高度比較矮苏研。作為視頻網(wǎng)站等浊，非視頻的特輯和活動(dòng)banner就不需要像其他視頻網(wǎng)站的banner那么大那么明顯，更多的想達(dá)到的目的是在有限的空間里呈現(xiàn)更多的廣告楣富。這個(gè)高度在做推廣的同時(shí)也盡可能多的留給用戶瀏覽其他視頻列表的空間凿掂。
2）一行2列視頻列表
下圖是“直播”和“推薦”tab下的列表模式。與其他視頻網(wǎng)站一樣，是一行兩列的列表模式庄萎。用扁平化的布局在有限的空間里羅列盡可能多的內(nèi)容踪少。大圖的形式讓用戶對(duì)視頻內(nèi)容一目了然。對(duì)于特別推薦糠涛、熱門或者要推廣的話題等援奢，則用占用一整行的橫向大圖來展示。更能吸引眼球忍捡，從而達(dá)到推廣效果集漾。往往一個(gè)頁面上不會(huì)只有橫圖或者只有一行2列的列表，通常是分類目展示砸脊，第一張是橫向大圖具篇，下面是2-3行的一行2列列表。整體看起來凌埂，主次分明驱显。頁面節(jié)奏感強(qiáng)，模塊清晰瞳抓。
3）一行三列列表
這種模式在其他視頻類APP里也很常見埃疫，比如搜狐視頻的“會(huì)員”。這里呈現(xiàn)的主要是完整的劇集孩哑，而不是單個(gè)視頻卒落，所以相比一行兩列的列表而言胰锌，要體現(xiàn)的內(nèi)容少一些帮孔，主要是追番人數(shù)烫堤、標(biāo)題和最新的劇集倒槐。所以就采用了一行三列恒傻，可以通過扁平化的布局在有限的屏幕空間內(nèi)呈現(xiàn)更多的節(jié)目余素。與一行兩列的列表一樣蒙兰，這里也用了橫向的大圖來做一些推薦。這個(gè)模式的缺點(diǎn)就在于因?yàn)閳D片比較大茵乱，如果一行三列排列很多行的話，感覺頁面內(nèi)容太多太擁擠孟岛，尤其是圖片很花的情況下瓶竭。BiliBili的布局是“一行三列+一個(gè)橫向大圖”，所以模塊感還是比較強(qiáng)的渠羞，看起來不是特別擁擠斤贰。
4）網(wǎng)格列表
下圖（左圖）是上面提到的一行三列列表的圖標(biāo)版，也就是網(wǎng)格列表的形式次询。不會(huì)像用圖片的情況那樣看起來擁擠荧恍，反而是一目了然，簡(jiǎn)潔清晰。因?yàn)檫@種視圖比較扁平化送巡，沒有什么視覺焦點(diǎn)摹菠，所以對(duì)每個(gè)類目還是比較公平的。用戶也能同時(shí)接受較多的信息骗爆。缺點(diǎn)是不能承載太多層級(jí)關(guān)系次氨，每一項(xiàng)之間的關(guān)系是平行的，最多能承載2個(gè)層級(jí)摘投，如：給同一組的圖標(biāo)入口再增加一個(gè)標(biāo)題煮寡。但圖標(biāo)入口也不宜太多，否則作為一個(gè)類目列表而言犀呼，用戶還要頻繁的滾屏才能看到全部類目就太麻煩幸撕。
5）卡片式列表
上圖（右圖）是“關(guān)注”tab下的動(dòng)態(tài)列表外臂。這個(gè)列表是卡片式的杈帐，體現(xiàn)了material design提出的Z軸的概念，就好像灰色的背景是桌子专钉，而這一行行單元格是一張紙卡片放在上面挑童。用戶看自己關(guān)注的動(dòng)態(tài)肯定是想要看到“動(dòng)”的部分，所以這里在原本一個(gè)視頻的基本信息（截圖跃须、標(biāo)題站叼、播放數(shù)、評(píng)論數(shù)）基礎(chǔ)上菇民，把更新的時(shí)間和第幾話在顏色上做了強(qiáng)調(diào)尽楔，用戶對(duì)番劇的更新一目了然。這種模式的優(yōu)點(diǎn)是清晰明了第练。缺點(diǎn)是沒有一般的垂直列表界面來得緊湊阔馋，所以相對(duì)而言一頁上能呈現(xiàn)的條目就少了。
