03、色彩在APP中的分级应用
写到这我的内心是崩溃的，这个坑挖的太大了，居然来分析APP的色彩运用，简直就是作啊……
第二次崩溃下载了一个看起来漂亮的韩国应用CongKong，然后……用不了，于是我只好用国内一小撮文艺青年和一大部分伪文艺青年聚集的豆瓣来叨叨叨了！
当我自己看完了豆瓣的设计后，还是恨赞叹的，心想我啥时候能做的这么好啊（又一波马屁拍的真棒）！他们的APP当中色彩确实也很有系统分级性了，甚至是在版本迭代后的闪屏图都保留了整体的色彩传承，此处给予掌声 啪啪啪……啊！
写在此处，整个A部分大家看不看都行（都是废话），因为大部分APP都是走这种主色系统形式
A、主页面的色彩分析
从首次安装时的启动闪屏、启动页、节日闪屏，豆瓣已经把主色系展现
1、主色系（明度饱和度）用手写方式展现
2、辅助色黄色同时并行出现
3、无论Hello、还是小插画都把清新风表现出来和豆瓣的主色系形成呼应
下面的6张为APP主页面，截图色调的不同，我只能说也许是因为小米手机
首页为两张，第1张常态（↓）、第2张向上翻阅内容的浏览形式（↓）。
1、在Tabbar、内容提示标签、Button中都应用了LOGO的主色（作为第一级提示常态）
2、APP中的具体产品刚好都用到了辅助色橙黄色，产品星标和优秀内容提示标签（重点提示），这个用法是不是和那个Banner图的最后一部分有点像的感觉（小面积高反差的点睛作用）
3、在个人中心页面的Icon与Tabbar上面Icon的绿色基本保持了同级的明暗度和饱和度，这些都是较为常用的操作项，所以色彩层级也都用了同一级
加个小重点：在豆瓣的Titlebar上面，进入小组后有一个关注的Icon选项，当点击选中后你会发现那个关注的小心型依然是绿色的哎！不得不说这个和个人中心的小反差他们做的确实很大胆，系统性很牛逼！
B、第二层级色彩
现在重点来了，在点击进入list page后，很明显的第二层级色彩
1、第1张图在栏目内的标签由于大都是非常用图标，所以使用了填色图形形式，明度较高饱和度较低（说人话就是淡色），这样更好的突出了小组文字标题，这里的视觉层级就是 1、栏目标题 2、图标 3、内容概略。
2、第2张图在进入详细内容列表页面后，右侧的大色块图标用了相对较深的颜色，因为在这一处图标的目的是和内容图片相等（图片、图标会并行出现），因为每屏只能展示三个标签，如果偏淡会让整个页面内容视觉感偏空，且弱于同层级图片。
3、第3张图这里面，小组的快捷使用图标虽然色彩并没有减淡，但由于用的线性图标空间留白较大，整体视觉感弱化，同样重要的下面小组推荐话题Banner图，视觉感在整个画面中第一层级。当然你可以说随便做个图在这个位置和大小占比上都第一层级啊（再次提醒这里我说的层级是视觉展现性，而非交互层面或用户操作习惯），但他们在色调饱和度以及画面形式上也用了非常相近的统一样式，并没有过深或过浅。
咳咳：在这里我还补充一下，豆瓣君你的小组推荐话题Banner左右滑动的时候经常失灵啊！
C、第三层级色彩
下面的这几张图算是产品详情和话题内容页了，在这几个页面中很明显的大量使用第三层级色彩
再次补充请原谅我截图的偏色……
1、在这些内容页当中，话题（无评论 有评论 热门）和讨论、搜索图标都使用了更加偏浅的色系，再加上图标本身又较小，很明显的形成了第三层级
2、值得深思的是豆瓣在Title的设计，无论是色彩还是状态并没有做色彩统一，而是整体分成了白色和APP同级色系两种样式。在首屏常态和产品详情（向下浏览时会呈现)时会呈现LOGO的绿色主色系，同时在进入小组子级的各个小组首页会随机分成明度同级但饱和度偏低一点的多色彩。其它主页面和子页面Title则均为为白色，有兴趣的同学可以去研究一下，到时候欢迎追加评论！
写在最后，其实多数的移动端设计，产品方（项目组）已经把整个产品项目进行了规划，并且把梳理后的原型图给到了UI和视觉设计师（小公司就全做咯），这时候产品信息和交互架构的层级已经分割非常明确，更需要我们把属于视觉方向的色彩、图标甚至是分割线设计规划出同样有层级的系统形式！
