最近在網盤里找到幾篇舊文，可能有些圖片已經是舊版的了，分析也比較淺顯。但是不重要，重要的是對我的啟發，同時也督促自己養成研究和總結的習慣~
選擇理由：號稱21天打造的MD(Material Design)風格,與其他Material Design風格的應用相比，BiliBili利用得還是比較充分的，對其特色的覆蓋面更廣。例如搜索框的動效、用側邊欄代替底部導航欄等。所以它不一定是做得最好的，但是卻是比較典型的一款應用。
使用平臺：三星Note2（Android5.0.2）
1.安卓特色的頁面框架
1.1.導航方式
下圖是BiliBili的ios(左)和安卓版(右)的結構圖，紅色的模塊在安卓版里整合到了首頁。所以可以看到ios版的首頁和底部導航除“我的”以外的三個tab都被整合到了側邊欄的“首頁”里。而側邊欄剩余的部分就是“我的”。
安卓沒有了底部導航，而tab比ios的多了很多。因為把ios里置于底部導航欄的標簽(除“我的”以外)都放到了標簽欄，所以這里安卓版采用了滾動式標簽導航。而頁面左上角的用戶頭像左邊有一個漢堡圖標（三條杠），點開會從頁面上方（Z軸）浮出一個側邊欄菜單，ios里的“我的”里面的大部分功能就在這里面。右上角有三個快捷方式，一個是原來在ios個人中心里的“游戲中心”，還有兩個分別是緩存和搜索。安卓這種特有的布局方式一個明顯的缺點就顯露出來了，就是頭部很重，特別是BiliBili的頭部是粉紅色的，粉色的面積過大，太搶眼了。頁面上滑后滾動式導航會置頂，方便用戶隨時切換。
1.2.側邊欄
如上面所說的，點擊左上角的用戶頭像旁的三條杠圖標，就會從頁面上方，也就是Z軸的上方位置，浮出一個側邊欄，這個側邊欄最上面是個人資料，讓用戶一下子進入了第一人稱視角，一目了然這個側邊欄的操作都是與“我”有關。右上角是“消息中心”和“夜間模式開關”。方便用戶便捷地切換界面模式以及查看消息。往下是菜單列表，根據功能類型分成了三組。第一個就是“首頁”，讓用戶明確了自己所處的位置是首頁。這種模式最大的缺點就是側邊欄的點擊率會比較低。因為藏著的總是比放在外面要不方便操作。但是bilibili在這一塊的設計還是很方便的。因為他確實把重要的tab都放在首頁的滾動式標簽上了。而這里放置的都是原來個人中心的東西，本來就不常使用。而就在首頁的時候而言，安卓版訪問類似“我的收藏”這樣的功能可能會更便捷。因為操作步驟數量是一樣的，但用戶頭像和用戶名在首頁左上角占的位置較大，又是瀏覽順序上來講最容易關注到的地方；ios版則在右下角最不容易發現的地方。
1.3.搜索
如下圖所示是BiliBili首頁的搜索方式。點擊搜索圖標，從圖標處向左展開一個搜索框，并滑出鍵盤。左側有個返回按鈕，這也是安卓特色搜索，可以在系統應用里看到。在這里又多做了一個掃碼的功能。除輸入框外的其他區域都進行了蒙層，讓用戶專注于目標，更高效地搜索。
1.4.標準型導航欄
在一些子頁面（比如二級分類）及臨時打開的頁面（比如設置）左上角的按鈕就是下圖（左圖）所示的返回按鈕，這個返回按鈕和右邊的“更多”（豎著的三個點）都是非常有安卓系統特色的圖標。之前說到微博（下圖右圖）的時候提到過這三個點是橫著的，“返回”和“更多”兩個圖標的區別是兩個系統的第一大區別。第二大區別是標題，安卓系統的標題并不在正中央，而是在左邊的，當左邊有圖標時挨在圖標后面，隔開一些距離。而ios系統的標題是在正中央的，返回圖標右邊可以沒有標題，也可以緊挨著上一頁標題。
1.5.其他頁面的tab式導航
在“管理緩存”、“我的收藏”、“我的關注”、“B幣錢包”等頁面也用了tab式導航(如下圖左圖)。右圖是ios版同一個頁面的導航設計，用的是tab導航樣式的分段式導航，把兩個tab插進了導航欄內。但因為這個是ios的標準控件，所以在安卓端沒有采用這種方式。安卓這種方式優點是頂部有更多的空間可以放置一些常用按鈕，例如下圖所示的緩存和搜索。缺點也同樣是頭部太重，配上粉紅色的底色，比較搶眼。
1.6.下拉菜單式導航與滾動式導航的結合
首頁tab“分區”下的類目子頁面，用到了下拉菜單式導航和滾動式導航的一個結合體：
用戶可以通過簡單的滾動來切換標簽，如果要查看全部標簽，可以點開下拉小箭頭，看到全部標簽，底下是5個排序方式，可以進行設置。這種方式的優點在于把眾多的標簽和設置收納起來，用一種比較省空間的方式來呈現，如果要看全部，也有一個快捷的方式展開。缺點是排序的選項放在下拉框里，操作路徑有點深，不夠便捷。
1.7.下拉框
右上角的“更多”也是典型的按鈕風格。下圖（左圖）是播放頁面的下拉框，右圖是安卓系統內的樣式。都是小弧度圓角矩形，無隔斷的樣式。與安卓系統明顯不同的是沒有小三角，以及展示的位置覆蓋了導航欄。這種樣式的優點是，讓用戶專注于當下的操作。缺點就是對頁面內容有遮擋。在播放界面的話基本擋住了大半個播放界面。而且，BiliBili雖然嚴格遵照安卓系統的風格把標題放在標題欄的左側，但是當頁面上滑到視頻區消失后，頂部會出現一個“立即播放”的快捷按鈕，它的位置是居中的。所以當下拉菜單出現后，這個按鈕就會被擋住（像下圖左圖），直到用戶取消下拉菜單的顯示后才能看到。
1.8.設置列表
BiliBili的設置頁面采用的是垂直列表，與安卓的系統設置一樣，沒有跳轉箭頭。這種模式的優點是簡潔清晰，冷靜理性。但是安卓版的沒有跳轉箭頭，所以有個明顯的缺點，就是沒有點擊感，與純文本列表難以區分。
還有一點，BiliBili的設置列表，沒有采用系統的開關控件，而是采用了radiobox和checkbox。radiobox就是圓形的，通常網頁上的單選框，在這里用作選擇某一選項。而checkbox就是傳統意義上的復選框，也就是下圖方形的控件，但在這里它的意義更接近于某一功能的開關。這種形式與標準的安卓系統的開關控件相比，在頁面上顯得比較單調，不夠生動。但是優點是操作統一，簡單清晰。
2.內容布局模式
1）輪播banner
BiliBili的首頁和傳統的視頻網站的一個區別就是輪播不是視頻，而是特輯，所以高度比較矮。作為視頻網站，非視頻的特輯和活動banner就不需要像其他視頻網站的banner那么大那么明顯，更多的想達到的目的是在有限的空間里呈現更多的廣告。這個高度在做推廣的同時也盡可能多的留給用戶瀏覽其他視頻列表的空間。
2）一行2列視頻列表
下圖是“直播”和“推薦”tab下的列表模式。與其他視頻網站一樣，是一行兩列的列表模式。用扁平化的布局在有限的空間里羅列盡可能多的內容。大圖的形式讓用戶對視頻內容一目了然。對于特別推薦、熱門或者要推廣的話題等，則用占用一整行的橫向大圖來展示。更能吸引眼球，從而達到推廣效果。往往一個頁面上不會只有橫圖或者只有一行2列的列表，通常是分類目展示，第一張是橫向大圖，下面是2-3行的一行2列列表。整體看起來，主次分明。頁面節奏感強，模塊清晰。
3）一行三列列表
這種模式在其他視頻類APP里也很常見，比如搜狐視頻的“會員”。這里呈現的主要是完整的劇集，而不是單個視頻，所以相比一行兩列的列表而言，要體現的內容少一些，主要是追番人數、標題和最新的劇集。所以就采用了一行三列，可以通過扁平化的布局在有限的屏幕空間內呈現更多的節目。與一行兩列的列表一樣，這里也用了橫向的大圖來做一些推薦。這個模式的缺點就在于因為圖片比較大，如果一行三列排列很多行的話，感覺頁面內容太多太擁擠，尤其是圖片很花的情況下。BiliBili的布局是“一行三列+一個橫向大圖”，所以模塊感還是比較強的，看起來不是特別擁擠。
4）網格列表
下圖（左圖）是上面提到的一行三列列表的圖標版，也就是網格列表的形式。不會像用圖片的情況那樣看起來擁擠，反而是一目了然，簡潔清晰。因為這種視圖比較扁平化，沒有什么視覺焦點，所以對每個類目還是比較公平的。用戶也能同時接受較多的信息。缺點是不能承載太多層級關系，每一項之間的關系是平行的，最多能承載2個層級，如：給同一組的圖標入口再增加一個標題。但圖標入口也不宜太多，否則作為一個類目列表而言，用戶還要頻繁的滾屏才能看到全部類目就太麻煩。
5）卡片式列表
上圖（右圖）是“關注”tab下的動態列表。這個列表是卡片式的，體現了material design提出的Z軸的概念，就好像灰色的背景是桌子，而這一行行單元格是一張紙卡片放在上面。用戶看自己關注的動態肯定是想要看到“動”的部分，所以這里在原本一個視頻的基本信息（截圖、標題、播放數、評論數）基礎上，把更新的時間和第幾話在顏色上做了強調，用戶對番劇的更新一目了然。這種模式的優點是清晰明了。缺點是沒有一般的垂直列表界面來得緊湊，所以相對而言一頁上能呈現的條目就少了。
