如何做UI设计的配色

好的用户界面设计是字体、颜色、版式、平面元素在视觉效果上达到有机统一,同时也考虑到数据流和用户体验的平衡关系。现在公司主要用Drupal,所以今天主要说说我对于Drupal网站UI设计在色彩界面这一部分的小小心得。

 

下面先来科普一下关于色彩的基本概念:

 

基色、间色、复色

配色的第一步是选择一个主色,我建议从选择一个明亮,柔和的基色或间色作为开始。这样的选择往往是相对安全的,关键看你接下去如何使用它以及选择合适的色彩去搭配它。

 

1.png

 

下面的颜色是app中最经常使用的颜色。这些颜色用在按钮,图标和菜单等视觉元素上都有着非常好的效果。且记不要过度使用色彩,仅在需要引导用户进行操作的地方才使用色彩。

 

2.png

 


单色

单色是指通过对同一颜色,加上10-90%白色或黑色的透明度层后获得的一组颜色。由于他们的色相相同,而又能产生和谐的对比效果,因此单色的应用在设计中非常重要。

 

3.png

 

通过调整黑色或白色层的透明度,可以得到不同的单色,他们互相之间都能很好地调和。

当你对于颜色拾取器掌握得更加熟练后,你可以通过不改变色相,而调整明度和饱和度的方法来获取一个新的单色。简单点说就是PS拾色器当中B的值作调整,其它不动。

 


邻近色

邻近色是指在色相环中相邻的色彩。很显然这样的配色方案不会产生高对比度。当你觉得自己的设计在色彩上太过单一时,可以使用邻近色来增加色彩上的变化,从而使你的设计更有层次和活力。

比如红色是橙色的邻近色,而橙色又是黄色的邻近色。

 

4.png

 

将色相值(PS拾色器当中H的值)增减 30-50,就能得到一个新的邻近色。

 


互补色

互补色是指色相环中,相对(互为180度角)的两个颜色。互补色让人产生强烈地对比效果。例如,紫色按钮在黄色背景上非常的突出。当然,这还取决于每一种颜色的饱和度。互补色经常用在需要突出显示的按钮、警告等地方,但使用不当也有可能使你的设计显得非常突兀,通过实践来理解是最好的,请记住: 对立对比 。

 

5.png

 

将色相值增加整个色相条宽度的一半(也就是色轮中相对的颜色)可以得到当前颜色对应的互补色。

 


中性色

中性色是指由黑色、白色及由黑白调和的各种深浅不同的灰色系列,中性色不属于冷色调也不属于暖色调,它可以起到中和剂的作用。过多的使用色彩会使整个设计缺乏可用性,而中性色却可以帮助将用户的注意力拉回到内容本身。

 

6.png

 

在使用中性色时,应尽可能避免使它与主色产生冲突,因此建议总是将中性色的饱和度设为接近0的值。


上面就是一些色彩的基本概念,下面就来说说色彩在UI设计中的运用。

 

在设计中主色往往是比较容易确定的,但背景和文字颜色有时却很难把握。它们的搭配很微妙,需要设计师有足够的经验将它们进行组合并调整到最佳。现在我来说一下UI设计中对色板的运用。

 

蓝色色板

蓝色是所有网站或App UI中使用最多的,它给人安静,宽广,值得信任的感觉,像Twitter,Facebook,IBM,LinkedIn等商业巨头都采用了蓝色作为它们的主色。而且蓝色也更容易与其他颜色搭配使用。

 

7.png

 

灰色色板

我们应该始终避免在UI中使用纯黑(#000)。纯黑色和其他颜色搭配时,产生的对比过于明显。

 

8.png

 

如果你要使用灰色,请使用明度值低于30%或者高于70%的灰色。平均明度的灰色显得单点而且不能与其他颜色很好的搭配。

 

自定义色板

除了上面推荐的蓝色和灰色色板,也可以使用任何颜色来定制自己的色板,不过这需要你来对色板的颜色进行互相搭配。

那么如何来定制色板呢?

首先滑动色相(H)滑块来选择一个主色,然后选择与主色相关的其他单色,邻近色和互补色。最后通过调节这些颜色的饱和度(S)和明度(B)来增加色彩对比和活力。

 

9.png

 

上面就是试着调节的色板,你也动手试一下吧,很简单的。

 

刚才说色板的时候有提到对比,色彩对比在实际运用中也是很重要的一项。通过有效地使用对比可以使你的内容更加清晰从而让阅读变得轻松。

好的对比,一般会采用色彩的两极,如白与黑,淡蓝与深蓝,高亮与低亮。那么多颜色我就不一一举例啦,感兴趣的朋友可以自己去动个手,会有不一样的体验哦。

 

10.png

 

在一些情况下,你还需要根据品牌或可用性来权衡UI的明暗。比如iBook的应用中,当外界环境变得昏暗时,它会自动切换到暗色的阅读模式。这会让你在阅读的时候更加舒适。

 

11.png

 

明亮UI的配色原则(如上图最左)

  1. 内容应该比背景明亮。通过亮度的对比,可以使你想突出的内容轮廓更加清晰易读
  2. 不要过度使用颜色。颜色总是可以抓住人们的视线,但过度使用却会往往会人们忽视主体内容,因此,仅在需要进行突出提示的地方,如重要的按钮以及需要突出的状态时,使用颜色。

 

暗色UI的配色原则(如上图中、右)

  1. 不要使用纯黑,那样很难看到细节,另外与白色的对比会显得过高。
  2. 如果你必须使用黑色,那么请选择使用暗灰作为替代,这样可以消除过高的对比度。
  3. 当使用其他颜色时避免同时使用灰色。例如:深蓝与蓝色更相配。

 

在界面中设计按钮时,你要注意颜色的含义。没错,不同的颜色代表的含义也是不同的,比如:

  • 红色:热烈 喜庆 激情 避邪 危险、热情、浪漫、火焰、暴力、侵略
  • 橙色:温暖 食物 友好 财富 警告
  • 黄色:艳丽 单纯 光明 温和 活泼、明亮、光辉、疾病、懦弱
  • 绿色:生命 安全 年轻 和平 新鲜、自然、稳定、成长、忌妒
  • 青色:信任 朝气 脱俗 真诚 清丽
  • 蓝色:整洁 沉静 冷峻 稳定 精确、忠诚、安全、保守、宁静、冷漠、悲伤
  • 紫色:浪漫 优雅 神秘 高贵 妖艳、创造、谜、忠诚、稀有
  • 白色:纯洁 神圣 干净 高雅 单调、天真、洁净、真理、和平、冷淡、贫乏
  • 灰色:平凡 随意 宽容 苍老 冷漠
  • 黑色:正统 严肃 死亡 沉重 恐怖、能力、精致、现代感、死亡、病态、邪恶

 

应该合理地使用色彩来分别表示不建议的操作,肯定的操作,链接以及未激活的状态。避免使你的用户在使用这些按钮或功能时感到疑惑。比如,不要使用绿色按钮来作删除操作,绿色一般都是代表肯定正确。一般会用红色按钮来作删除操作,表示不建议或者危险。蓝色代表平和稳定,一般用来作中性操作,如:取消、编辑等。这些是运用最普遍的。当然并不是说不能使用其他颜色,只要颜色的含义与操作不冲突,都是可以的,毕竟好看的颜色那么多,不用就太可惜了。

 

当然如果你拿不定主意,不知道该怎么选色,那么你可以留意观察周围的一切。当你看到一张美丽的图片,一件东西或一副数字作品时,作为设计师你第一个注意到的可能就是那美丽和谐的色彩。这时你可以拍一张照或做一个屏幕截图,然后将色彩提取出来。这样,你就可以通过这些提取出来的色彩,生成一个新的色板。

 

12.png

 

主色一般与整个品牌的颜色一致,在图标,按钮,菜单中都会有所使用。次色可以选择与主色色调一致的同色系色彩,也可以使用如对比色,邻近色等与主色存在反差的色彩。次色使用得比较少,仅用在需要引起用户注意的地方,如消息提醒,折扣推销等需要醒目标识的地方。对于背景色,它们用来衬托内容,也可以起到调和整个应用色调的做用。这也是为什么,我们会同时看到明亮主题的UI和暗色主题的UI。

 

下面来给大家分享一些色板案例(图片来自《DESIGN FOR SCREEN》 ).由于图片是手机拍摄后调整的,会与色板存在色差,色板和色值是我做的,所以是可以用的。大家可以试着搭配看看,同一色板不同的主色调会有不同效果哦。

 

EX2.png

 

EX1.png

 

EX3.png

 

EX4.png

 

EX5.png