界面原创：by ALEX BENDER for My World Design Team
上一篇教程反响超处我的预期，毁誉参半，所以这次话说在前头盒饭君不是什么大神，就是站在当初我如何入门的角度和大家一起学习，一起分享交流。喜欢我就来捧个热闹，发了没有人看盒饭君就不写了，写教程的经验不多，还请大家轻喷。盒饭君的教程以后就分两段写，先给新手分析界面细数界面背后的故事，再把界面难点拆分成小白能明白的语言。这期我们讲讲sidebar！
界面分析
这套安卓界面，典型的安卓风格界面，采用的是侧边导航中的“浮层导航”。这种形式的导航多用于安卓，以内容为第一层，出现的导航选项为第二层覆盖在上的。抽屉导航也有很多类型的，浮层导航只是侧边导航其中的一种形式而已。等下我就把我知道的目前存在的形式，一一列出分析。
侧边导航1
以“一刻”做实例，说说第一种侧边导航。这种侧边导航是内容（如图1）在上，导航选项（如图2）在下的一种形式，这种形式最早的时候是出现在Youtube上的，还有facbook也很早用过学名叫sidebar中文有翻译成抽屉导航，或者侧开导航。随着安卓4.4规范的出现，这种开始在安卓盛行了。IOS7以后，国内的很多大厂的APP也采用这种形式，比如网易新闻。事实上，这种sidebar设计只是被安卓写进了自己的原生规范，苹果并没有鸟这种风格，尽管iOS应用里面这种导航非常见，但是原生app 和规范种都没有出现sidebar 的身影，所以其实严格意义来说sidebar是属于安卓的。
安卓官方设计规范：https://developer.android.com/design/index.html
侧边导航2
这种侧边导航形式，目前很少见到。实例也是我以前收藏的，突然找不到了。目前只找到最美壁纸、App Flow、知乎日报有这种类型的侧边形式（可能是盒饭君的视野还不够开阔吧）。这种侧边是内容（如图1）和导航选项（如图2）是一个层级的，内容和选项是相连的，只是把导航选项拉出来了。
侧边导航3
这例以iOS版Twitterrific做实例从右侧分解结构图可以看到，这种抽屉导航是内容（如图1）在下面，导航选项（如图2）在上覆盖在内容上，并会弱化内容的一种抽屉形式。类似的app有Tidy、Gosobot、好奇心日报。唯一不同的是安卓的导航栏固定不变，导航栏的选项会发生改变，侧边导航选项层级也一直低于导航栏层级，高于内容层级。顺便一说，这种设计风格是谷歌4.4-5.0最常见的设计方法，国内很多用不了的原生安卓应用都用的这种风格，盒饭君认为是最安卓的布局。但是国内都不怎么鸟安卓的设计规范。
知乎就是导航栏处于高层级压着导航选项，导航选项层级高于内容层级，并弱化内容。导航栏会在侧边导航出现后发生变化，如上图侧边选项出现后，消息通知按钮消失了。对比Twitterrific和知乎的浮层侧边导航，会发现它们都会以黑色透明覆盖在内容上来弱化内容，突出侧边导航选项。
侧边导航4
这种侧边导航相信大家都知道，这种导航和抽屉是一种形式，只是内容进行缩小了，过渡动画比较有意思，还有的是扭曲缩小形式，例如下面两图的的形式，一席、口碑旅行就是扭曲缩小的形式。
侧边导航5
Taasky这种侧边导航是盒饭君目前看到的最少的一种侧边导航形式，和第2种侧边导航很相似都是导航选项和内容层级平级，拉出导航选项。这种形式不占内容面积，多用于医疗和效率工具类的app，在国内很少见。这种设计一般概念稿很多，真正上线的却很少。
侧边导航其实是一般双刃剑，有优点和缺点。
优点：兼容模式很多，能突出核心功能，将其他的功能隐藏弱化掉。
缺点：隐藏的入口不易被发现，给用户导航性差，隐藏功能使用效率低。（这也为什么Facebook后来把它去掉的原因）
侧边导航主要用于功能和内容都在一个页面里面，把一些用户设置和选项需要显示在其他页面里。让主页面看上去干净美观，这样可以用侧边导航把一些辅助功能放在侧边栏里。比如QQ 就是这样做的。
盒饭君平时有空的时间也会去做一些AE\Axure高保真原型Demo玩玩，比如第5种侧边导航的形式，最近就有打算做一个高保真的响应式的Demo，等后期我和大家一起分享吧！要是你们心急的话盒饭君推荐几个类似的优酷学习视频给大家。
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所示），经过色相、饱和度、明度的处理（如图2所示）得到如图3所示。
如图4所示，选中图片图层，点击“添加图层蒙版”（如图4.1所示）给图层添加蒙版，就能得到如图5所示，图层旁边的小链子就是添加了图层蒙版的意思。
选择“渐变工具”设置两头都是纯黑色，选择一头节点（如图6.1所示）将“不透明度”设置为“0”（如图6.2所示）。
选中图片图层蒙版（如图5.1所示），用“渐变工具”从下往上刷（如图8所示），渐变工具线拉得越长，图片与纯色过渡越均匀，最终能得到如图9所示的效果了。
有些不够清晰或者不够理解的可以单聊盒饭君或者在群里求答。
网友评论