这个系列的第二篇文章，旨在讲如何优化灰色的使用。
高级灰
在绘画领域有一个名词叫“高级灰”，高级灰的存在让画面跟丰富，层次感更强。
其实在APP的设计中也存在很多高级灰，这些高级灰可以美化我们的画面，还可以让信息的表达更加清晰。
假设我们现在要做一个首页，布局很清晰了。
你会很快得到下面这样一个页面：
下一步什么？
放图片，设计ICON
然后一个页面就完成了。
但在我看来 这个页面灰度关系很糟糕。
因为总共只用了3个颜色来区别明暗关系。
文字黑色
背景灰色（在我看来这个灰色有点深）
前景白色
所以我选择简单调一下这个页面：
我们可以看见右边的颜色明显多了，对于不同重要的信息用不同颜色去表达。
我把背景的颜色调的比较淡，这样可以减少整个画面的割裂感。
对于很重点的信息我用了加粗，并用最深的颜色。
右边的颜色：
我没用黑色用了一个深灰当黑色，
普通的标题也就是每一个图片底下的TITLE
正文首页没有显示，但是我为他预留了一个颜色，
SHOW用的是#999999
MORE 用的是#BFBFBF
线也没有用到但预留是#EEEEEE
背景的底色是#F1F1F1
记这些数值没有太大意义，关键是对比的变化，
我们要让不重要的信息尽量弱化，让重要的信息凸显。
说出这些数值只是想告诉你们颜色数值化的概念，
我们需要找一些干净的颜色，我们要保持颜色的统一，而不是每一次都去挑一个自己认为合适的灰色，但其实这些灰色并不统一。
做到这里了干脆在把它做完整一点：
增加了图片和颜色，
还有做调整，背景色是一个淡蓝色，
这个颜色是图标中的蓝色透明度5%
自然底部标签栏的浅红色是
图标其中的红色透明度20%
配图的颜色调整了的，一个完整的视觉稿其实也是在诠释你自己的想法，
所以不要去忽略这些展示图片，它可以更完整的表达你的想法。
再做一个案例来继续说明一下
命题：
电影票预订页面（没选择影院）
第一步：快速确定一个布局，确定里面的信息
在这一步，要确认模块大小，数量
间距大小，以及模块内的信息。
第二步：调整灰色，信息之间的强弱
这一步之后明显感觉到整体感会强很多，
整个页面层级明确，信息不杂乱。
第三步：上色上图，丰富细节
确定主色调：暗云杉绿
优化标签和细节图标
尝试不去用卡片式将其分开，
目的为了减少画面割裂感。
这样一个电影购票页面就出来了，当然有很多细节在这一期没有讲到
（比如说确认板块大小，文字大小，标签，颜色及辅助色的选择，间距把控）
我会在后续更新里面讲到，这个系列的目的是为了让我们拥有一个规范高效的设计习惯。
| 欢迎光临 AAA教育论坛 (https://bbs.aaa-cg.com.cn/) | X3.2 |