上一篇教程反響超處我的預(yù)期，毀譽參半，所以這次話說在前頭盒飯君不是什么大神，就是站在當(dāng)初我如何入門的角度和大家一起學(xué)習(xí)，一起分享交流。喜歡我就來捧個熱鬧，發(fā)了沒有人看盒飯君就不寫了，寫教程的經(jīng)驗不多，還請大家輕噴。盒飯君的教程以后就分兩段寫，先給新手分析界面細數(shù)界面背后的故事，再把界面難點拆分成小白能明白的語言。這期我們講講sidebar！
界面分析
這套安卓界面，典型的安卓風(fēng)格界面，采用的是側(cè)邊導(dǎo)航中的“浮層導(dǎo)航”。這種形式的導(dǎo)航多用于安卓，以內(nèi)容為第一層，出現(xiàn)的導(dǎo)航選項為第二層覆蓋在上的。抽屜導(dǎo)航也有很多類型的，浮層導(dǎo)航只是側(cè)邊導(dǎo)航其中的一種形式而已。等下我就把我知道的目前存在的形式，一一列出分析。
側(cè)邊導(dǎo)航1
以“一刻”做實例，說說第一種側(cè)邊導(dǎo)航。這種側(cè)邊導(dǎo)航是內(nèi)容（如圖1）在上，導(dǎo)航選項（如圖2）在下的一種形式，這種形式最早的時候是出現(xiàn)在Youtube上的，還有facbook也很早用過學(xué)名叫sidebar中文有翻譯成抽屜導(dǎo)航，或者側(cè)開導(dǎo)航。隨著安卓4.4規(guī)范的出現(xiàn)，這種開始在安卓盛行了。IOS7以后，國內(nèi)的很多大廠的APP也采用這種形式，比如網(wǎng)易新聞。事實上，這種sidebar設(shè)計只是被安卓寫進了自己的原生規(guī)范，蘋果并沒有鳥這種風(fēng)格，盡管iOS應(yīng)用里面這種導(dǎo)航非常見，但是原生app 和規(guī)范種都沒有出現(xiàn)sidebar 的身影，所以其實嚴格意義來說sidebar是屬于安卓的。
安卓官方設(shè)計規(guī)范：https://developer.android.com/design/index.html
側(cè)邊導(dǎo)航2
這種側(cè)邊導(dǎo)航形式，目前很少見到。實例也是我以前收藏的，突然找不到了。目前只找到最美壁紙、App Flow、知乎日報有這種類型的側(cè)邊形式（可能是盒飯君的視野還不夠開闊吧）。這種側(cè)邊是內(nèi)容（如圖1）和導(dǎo)航選項（如圖2）是一個層級的，內(nèi)容和選項是相連的，只是把導(dǎo)航選項拉出來了。
側(cè)邊導(dǎo)航3
這例以iOS版Twitterrific做實例從右側(cè)分解結(jié)構(gòu)圖可以看到，這種抽屜導(dǎo)航是內(nèi)容（如圖1）在下面，導(dǎo)航選項（如圖2）在上覆蓋在內(nèi)容上，并會弱化內(nèi)容的一種抽屜形式。類似的app有Tidy、Gosobot、好奇心日報。唯一不同的是安卓的導(dǎo)航欄固定不變，導(dǎo)航欄的選項會發(fā)生改變，側(cè)邊導(dǎo)航選項層級也一直低于導(dǎo)航欄層級，高于內(nèi)容層級。順便一說，這種設(shè)計風(fēng)格是谷歌4.4-5.0最常見的設(shè)計方法，國內(nèi)很多用不了的原生安卓應(yīng)用都用的這種風(fēng)格，盒飯君認為是最安卓的布局。但是國內(nèi)都不怎么鳥安卓的設(shè)計規(guī)范。
知乎就是導(dǎo)航欄處于高層級壓著導(dǎo)航選項，導(dǎo)航選項層級高于內(nèi)容層級，并弱化內(nèi)容。導(dǎo)航欄會在側(cè)邊導(dǎo)航出現(xiàn)后發(fā)生變化，如上圖側(cè)邊選項出現(xiàn)后，消息通知按鈕消失了。對比Twitterrific和知乎的浮層側(cè)邊導(dǎo)航，會發(fā)現(xiàn)它們都會以黑色透明覆蓋在內(nèi)容上來弱化內(nèi)容，突出側(cè)邊導(dǎo)航選項。
側(cè)邊導(dǎo)航4
這種側(cè)邊導(dǎo)航相信大家都知道，這種導(dǎo)航和抽屜是一種形式，只是內(nèi)容進行縮小了，過渡動畫比較有意思，還有的是扭曲縮小形式，例如下面兩圖的的形式，一席、口碑旅行就是扭曲縮小的形式。
側(cè)邊導(dǎo)航5
Taasky這種側(cè)邊導(dǎo)航是盒飯君目前看到的最少的一種側(cè)邊導(dǎo)航形式，和第2種側(cè)邊導(dǎo)航很相似都是導(dǎo)航選項和內(nèi)容層級平級，拉出導(dǎo)航選項。這種形式不占內(nèi)容面積，多用于醫(yī)療和效率工具類的app，在國內(nèi)很少見。這種設(shè)計一般概念稿很多，真正上線的卻很少。
側(cè)邊導(dǎo)航其實是一般雙刃劍，有優(yōu)點和缺點。
優(yōu)點：兼容模式很多，能突出核心功能，將其他的功能隱藏弱化掉。
缺點：隱藏的入口不易被發(fā)現(xiàn)，給用戶導(dǎo)航性差，隱藏功能使用效率低。（這也為什么Facebook后來把它去掉的原因）
側(cè)邊導(dǎo)航主要用于功能和內(nèi)容都在一個頁面里面，把一些用戶設(shè)置和選項需要顯示在其他頁面里。讓主頁面看上去干凈美觀，這樣可以用側(cè)邊導(dǎo)航把一些輔助功能放在側(cè)邊欄里。比如QQ 就是這樣做的。
盒飯君平時有空的時間也會去做一些AE\Axure高保真原型Demo玩玩，比如第5種側(cè)邊導(dǎo)航的形式，最近就有打算做一個高保真的響應(yīng)式的Demo，等后期我和大家一起分享吧！要是你們心急的話盒飯君推薦幾個類似的優(yōu)酷學(xué)習(xí)視頻給大家。
AE視頻：http://v.youku.com/v_show/id_XODAwNDYzODMy.html?from=s1.8-1-1.2
Axure視頻：http://v.youku.com/v_show/id_XODAwNDU4OTI4.html?from=s1.8-1-1.2
界面難點分析
這套界面沒有太大的難點，還是和上次的一樣涉及到一些蒙版，只是這次要用到更深一點的蒙版知識。看頭像的背景，很自然的從圖案漸變到純色。這次就講這個難點。
首先找到一張自己喜歡或者類似的原圖（如圖1所示），經(jīng)過色相、飽和度、明度的處理（如圖2所示）得到如圖3所示。
如圖4所示，選中圖片圖層，點擊“添加圖層蒙版”（如圖4.1所示）給圖層添加蒙版，就能得到如圖5所示，圖層旁邊的小鏈子就是添加了圖層蒙版的意思。
選擇“漸變工具”設(shè)置兩頭都是純黑色，選擇一頭節(jié)點（如圖6.1所示）將“不透明度”設(shè)置為“0”（如圖6.2所示）。
選中圖片圖層蒙版（如圖5.1所示），用“漸變工具”從下往上刷（如圖8所示），漸變工具線拉得越長，圖片與純色過渡越均勻，最終能得到如圖9所示的效果了。
有些不夠清晰或者不夠理解的可以單聊盒飯君或者在群里求答。
