APP设计中关键的灰色调

  • A+

这个系列的第二篇文章,旨在讲如何优化灰色的使用。

高级灰

在绘画领域有一个名词叫“高级灰”,高级灰的存在让画面跟丰富,层次感更强。

其实在APP的设计中也存在很多高级灰,这些高级灰可以美化我们的画面,还可以让信息的表达更加清晰。

 

假设我们现在要做一个首页,布局很清晰了。

你会很快得到下面这样一个页面:

APP设计中关键的灰色调

下一步什么?

放图片,设计ICON

然后一个页面就完成了。

 

但在我看来 这个页面灰度关系很糟糕。

因为总共只用了3个颜色来区别明暗关系。

APP设计中关键的灰色调

文字黑色

背景灰色(在我看来这个灰色有点深)

前景白色

 

所以我选择简单调一下这个页面:

APP设计中关键的灰色调

我们可以看见右边的颜色明显多了,对于不同重要的信息用不同颜色去表达。

我把背景的颜色调的比较淡,这样可以减少整个画面的割裂感。

对于很重点的信息我用了加粗,并用最深的颜色。

右边的颜色:

APP设计中关键的灰色调

我没用黑色用了一个深灰当黑色,

普通的标题也就是每一个图片底下的TITLE

正文首页没有显示,但是我为他预留了一个颜色,

SHOW用的是#999999

MORE 用的是#BFBFBF

线也没有用到但预留是#EEEEEE

背景的底色是#F1F1F1

 

记这些数值没有太大意义,关键是对比的变化,

我们要让不重要的信息尽量弱化,让重要的信息凸显。

说出这些数值只是想告诉你们颜色数值化的概念,

我们需要找一些干净的颜色,我们要保持颜色的统一,而不是每一次都去挑一个自己认为合适的灰色,但其实这些灰色并不统一。

 

做到这里了干脆在把它做完整一点:

APP设计中关键的灰色调

增加了图片和颜色,

还有做调整,背景色是一个淡蓝色,

这个颜色是图标中的蓝色透明度5%

自然底部标签栏的浅红色是

图标其中的红色透明度20%

 

配图的颜色调整了的,一个完整的视觉稿其实也是在诠释你自己的想法,

所以不要去忽略这些展示图片,它可以更完整的表达你的想法。

 

再做一个案例来继续说明一下

命题:

电影票预订页面(没选择影院)

 

第一步:快速确定一个布局,确定里面的信息

APP设计中关键的灰色调

在这一步,要确认模块大小,数量

间距大小,以及模块内的信息。

 

 

第二步:调整灰色,信息之间的强弱

APP设计中关键的灰色调

这一步之后明显感觉到整体感会强很多,

整个页面层级明确,信息不杂乱。

 

第三步:上色上图,丰富细节

APP设计中关键的灰色调

确定主色调:暗云杉绿

优化标签和细节图标

尝试不去用卡片式将其分开,

目的为了减少画面割裂感。

 

这样一个电影购票页面就出来了,当然有很多细节在这一期没有讲到

(比如说确认板块大小,文字大小,标签,颜色及辅助色的选择,间距把控)

我会在后续更新里面讲到,这个系列的目的是为了让我们拥有一个规范高效的设计习惯。

 

一个作业:

做一个新闻内页

有标题、作者、时间、地点、标签、正文、签名等等…

发表评论

您必须登录才能发表评论!

目前评论:3   

    • avatar JAY捷 3

      这个世界上正确的方法有很多种,希望可以引发思考。

      • avatar 曾二 6

        暗云杉绿,原来是这个颜色啊。这个颜色很魔性,我自己一直对这种绿色和蓝色不是很敏感。

        • avatar 曾二 6

          重新看,依然有收获。