分享此网站可得100G教程,联系小洁领取点击这里给我发消息

色的使用技巧和工具

经验理念 学UI设计 865次浏览 0个评论

最近喜欢上了一个国际上非常知名的设计网站,名字我就不说了,在上面我经常看到一些很漂亮的颜色作品,时常感叹尼玛好赞的颜色啊,我得赶紧学一下,那么问题来了,要做出同样层级的作品,靠简单模仿是不行的,但是又不想从色彩的最基本原理学起,这真是个矛盾的不行的现象。

色的使用技巧和工具

当然也不是安全没办法,通过一次次惨不忍睹、血肉模糊、鸡飞狗跳、惨绝人寰的尝试摸索试验,总结了几个实用技巧和工具,一本正经的干货来了。

颜色的意义

几个世纪以来,科学家一直在研究特定颜色能够产生的生理效应。除了美学,颜色同样是情绪的创造者。说到这里你是不是以为我要讲那些:色彩是指不同波长的光信息作用于人的视觉器官……这些枯燥的理论了?

当然不会,那些请自行百科,就总结一句:色彩的感觉决定于你第一眼看到而产生的联想。

另外颜色的意义会根据文化环境的不同而不同。这就是为什么当你走进以黑白为主色调的时装店时,他们会给你一种优雅和崇高的感觉。

色的使用技巧和工具

Asos采用纯黑白配色搭配绿色按钮设计,这种配色是有根据的,例如: 红色代表 激情、爱情、危险,黑色代表神秘、优雅、邪恶等等,这些理论是符合绝大部分的情况,个别的情况是有所区别这个是可以理解和接受的,你硬要说看到黑色会联想到太阳,我只能对你呵呵了。

配色的实用技巧

颜色和其任何他事情都一样,适度即可。在UI设计中,当配色方案至多不超过三种基色,一般来说效果更好。一个项目中,颜色设计的工作其实并不简单,并且使用的颜色种类越多,实现颜色协调的难度就会越大。

如果需要使用调色板中定义的颜色以外的其他颜色,可以使用明度和色调进行调整,以调出不同的颜色基调与之配合。

1. 60-30-10规则

60-30-10规则即: 60%是主色调,30%是副色,10%是强调色。这种比例意在创造一种颜色的平衡感,按照这个比例简单地将不同的颜色放在一起,在视觉效果上可以使一个焦点到下一个焦点之间的过渡非常舒服。

色的使用技巧和工具

墙面漆(60%)家具(30%)配饰(10%)

2. 首先考虑单色设计

在项目设计初期,我们通常倾向于尝试不同的颜色进行调整,但这种做法其实并不好。因为往往你一抬头,会发现你已经花了三个小时去调整颜色了,时间都TM去哪了?很蓝受,所以我们应该学会避免这种低效率的做法。

相反,让自己专注于空间和元素布局会是更高效的做法,这种方式非常有效,会节省你很多时间,并且不会让页面看起来无趣。

色的使用技巧和工具

简约单色处理,专注于元素之间的使用

3. 避免使用纯色

我学到的最重要的颜色技巧之一是避免使用灰色等不饱和色彩。现实中几乎不存在纯灰色或者纯黑色的东西。所以记得要给你的颜色添加一点饱和度,让它看起来更自然。

色的使用技巧和工具

照片里最暗的像素不是 #000,而是 #0A0A10

4. 相信自然

最好的颜色组合往往来自于自然界。它们看起来总是很舒服,寻找配色的解决方案,最好的办法是你的调色板总是发生变化,什么意思?就是当你想要找寻灵感时,你就环顾一下四周。

色的使用技巧和工具

5. 保持对比

有时候一些颜色可以相互融合,而其他颜色一起使用会发生冲突。什么原因?这里有一个明确的规则,想要了解不同颜色之间如何融合,最好的办法是观察一个色轮。

色的使用技巧和工具

色环颜色对比图

6. 获取灵感

当我们找UI参考时,dribbble是最佳选择。它还具有通过颜色搜索的工具,所以当你想对其他设计师使用的特定颜色进行视觉研究时,可以去这里:dribbble.com/colors

色的使用技巧和工具

另外,视频,平面广告设计,室内设计,时装……这些都可供收集。如果说根本就没有配色参考,那一定是懒惰的原因,把那些调色板保存下来,在日常中培养自己对色彩的敏感度,看到任何美的画面,或者是产生感情变化的画面,马上分析一下它是由怎样的色彩构成,只要把这种习惯养成,你会变成色彩专家的。

配色工具推荐

工欲善其事,必先利其器,这些工具会大大地提升工作效率。

1. Coolors.co

这个绝对是我最喜欢的取色工具。 你只需锁定所选颜色并按空格即可生成调色板, Coolors还可让你上传图像并从中调出调色板。 很酷的事情是,你不仅仅得到一个结果,而是一个选择器,允许你修改参考点。

色的使用技巧和工具

网址链接:https://coolors.co/(请使用科学上网工具打开)

2. Kuler

Adobe 出品的工具,它可在浏览器或桌面上使用,如果使用的是桌面版本,还可以将颜色导入到 Photoshop 中。

色的使用技巧和工具

3. Paletton

和 Kuler 类似,但它可选择的颜色更多。但不同的是,不仅限于5个色调,当你拥有原色并希望使用其他色调时,可以使用这款很棒的工具。

色的使用技巧和工具

网址链接:http://paletton.com/ (请使用科学上网工具打开)

 

4. Designspiration.net

想象一下你脑海中有一个很棒的配色方案,但是你没有具体的参考。Designispiration是一个很好的工具。你可以选择5种颜色匹配你想要的效果。这款工具不仅有寻找图像的具体面板,也可以让你的设计实现出来。

https://v.qq.com/x/page/m0387wwuifa.html

网址链接:http://designspiration.net/ (请使用科学上网工具打开)

5. Shutterstock Lab Spectrum

如果想根据颜色搜索照片该怎么办?或许可以试试Shutterstock,里有个叫 Spectrum 的工具,它就能根据特定的色调去搜索照片。你都不用注册,即使这些带有水印的预览图像,也足够生成你需要的调色板了。

色的使用技巧和工具

网址链接:https://www.shutterstock.com/labs/spectrum/ (请使用科学上网工具打开)

6. Tineye Multicolr

如果你想搜索照片中的颜色混合,甚至指定每个颜色的数量,那么Tineye会很好用。 这个网站使用了来自Flickr千万张共享图像的数据库。

https://v.qq.com/x/page/m0387wwuifa.html

网址链接:http://labs.tineye.com/

最后

在数字时代,颜色其实并不好掌握。上面的一些小方法应该能让你更便捷地找到你需要的颜色。但你想创造出令人惊叹的配色方案,最好的方法还是上面说的,不要懒,勤加练习。

 

 


推荐:查看最受欢迎的设计导航网站 → http://www.xueuisheji.com

交流:结交更多有才华的设计师?请加入UI设计QQ群 ,与设计师交流设计。

喜欢 (1)
[关注:设计军团]
分享 (0)
关于作者:
学UI设计网专业的UI设计师交流、学习与展示的平台。我们将打造中国最专业的UI设计交流平台,为UI设计师做最好的职业生涯一站式服务,提高UI设计乃至互联网设计的行业价值!