Guideline #1 颜色

Yuki 顾雪Yuki 顾雪
这个项目所在国家阳光普照,不像我大魔都天天下雨,当地测试人员表示界面太淡看不清,所以我花了一周时间把界面的对比度调高了一些。在调色的过程中让我对颜色有了些新的体会,分享下。

我觉得做UI最重要的两件事就是字体,颜色和间距,能把握好这三样的作品基本就会很有样儿,一些设计大神们对字体,颜色和间距的推敲和斟酌真让人挺想跪的,这个东西有些人把它叫天赋,叫审美,好比大师随便挥一笔就有感觉,颜色随便一调就特别好看,位置随便一放就是黄金比例,反正他们好像轻轻松松的就做出一个牛逼的作品。

我自己不属于这种天才,我都是很努力的在不停得调调调呢!!

不扯了,还是说我的学习体会吧。

下图是按照原来的Guideline做的,对比度很低,很平,很淡,很灰。

右边是之前使用的色板。左边是新做的,可以感受下区别。

在做右边色板的时候,我只有第三行是自己调的,剩下的颜色都是用透明度处理的,比如第一行是20% 第二行是70% 第四行叠了20%黑。

在调色相的时候,我原来只用左边高亮的区域,后来我发现右边高亮的区域更重要。

以前我并不知道Sketch有这个功能,当鼠标划到R/G/B/A的时候,左右滑动是可以编辑色值的。(左图)

这个编辑非常的灵敏和微妙,可以对颜色做特别细致的微调。如果想更加细致的一个字儿一个字儿的跑,就用右图区域按上下键一个一个数字调。

这个项目有很多表格层级非常的多,色板中的这些主色其实应用的很少,大部分都是在用不同级别的灰,灰色也是我调得最久的颜色,直接用什么#eee #ccc #666 #222 根本不能看,我都是在RGB那3栏里一个数字一个数字改的。

我不知道如何去形容这种灰,美术高考的时候老师把这叫高级灰,就是给灰一个颜色属性,偏红的灰,偏绿的灰,偏蓝的灰。当时老师给我讲的例子是:

我给你三块布,都是灰色的,你怎么用颜色去表示他们都是灰色的但他们是三块不同的灰布?

这张图中上面的纯灰色是215 215 215,下面是我分别加上10个红,10个绿,10个蓝的效果,看上去他们有了颜色属性,有了区别,但她们仍然是灰色。

在调新色板的灰色部分的时候,我避免自己使用纯灰色,因为这种对比在视觉上是很平很单一很枯燥的。

这是原来的一些稿子,当时我并没有在颜色的选择上画很多心思。

之后我做出了很多调整,先说下灰色用于背景的问题

这个页面是一个树形列表,统计洲/区/镇的数据,镇之下的地区有两种分割方法,互相包含,有重叠区域,所以我们在展开列表时用Tab形式来切换

部落和村庄的数据有需要编辑的部分,所以在可展开列表层的基础上又加了第二层可展开的编辑区域

列表依次展开的示意图如下,可以看到,这里需要3种灰色背景,用来区分不同的功能。第一个是树形列表背景,第二个是TAb分页次级列表背景,第三个是次级列表编辑区域的背景。

色板的选择

除了背景2,其余的灰色都是偏紫色调的暖灰,背景2的灰色是偏蓝的,因为背景2的视觉层级是最高级,明度高,选择范围十分有限,如果仍然用暖灰,对比度会非常弱。所以我的这个灰色色板并不是线性变化,也并不平均。


*先睡觉,明天起来改。*

文章被以下专栏收录
14 条评论
推荐阅读