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