小莫

颜色和其他东西一样,只有在适度使用的时候才能达到最好的效果。如果你能坚持配色方案中使用的颜色不超过3种,你会得到更好的效果。颜色运用和平衡息息相关。使用的颜色越多,实现平衡就越困难。

本文将分为两个部分:

  • 一、法则篇
  • 二、工具篇

 

法则篇

60-30-10法则

这是一个室内设计领域中永不过时的装饰技巧,它可以轻松地帮助你完成一个配色方案。60%+30%+10%的比例分配是为了平衡颜色。这个公式妙在它营造了一种平衡感,使眼睛可以舒适地从一个焦点移动到另一个焦点。同时,它也运用起来非常简单。

60%是主色调,30%是辅助色,10%是强调色。

1

 

关注颜色的含义

几个世纪以来,科学家一直在研究颜色的情感效应。除了创造美学,颜色也是情感和联想的创造者。颜色的含义会根据文化和情况而有所不同。这就是为什么你会看到黑白色的时装店。因为他们想要表现得优雅和高级。

2

Asos电商网站使用黑白配,加上绿色的行为召唤按钮是有自己的考虑的

  • 红色:激情、爱、危险
  • 蓝色:冷静、负责、安全
  • 黑色:神秘、优雅、邪恶
  • 白色:纯洁、安静、干净
  • 绿色:新鲜、清新、自然

下图为颜色在不同的文化下含义不同。

3

 

灰度优先

我们习惯在设计阶段的早期就开始调整颜色和色调。但是,当你意识到自己花了3个小时来调整主色调的时候,你发现这种行为毫无帮助。虽然把玩颜色很有吸引力,但是你应该避免在设计初期进行这种行为。

相反地,你应该强迫自己专注调整间距和布局元素。这种布局的约束是非常有效的,它会为你节省很多时间。调整间距和布局元素并不是那么无聊。如果你想表达不一样的东西,尝试使用不同的色调即可。

4

 

远离纯灰色和纯黑色

多年来,我学到的一个最重要的颜色技巧之一就是避免使用不带色调的灰色。在现实生活中,纯灰色几乎是不存在的。黑色也是同样的道理。(没错,事实上就是要五彩斑斓的黑)

5

在这张图片中最深的颜色不纯黑,而是#0A0A10

记得给你的颜色添加一些色调。用户会下意识地觉得这类颜色更加自然和熟悉。

6

 

相信自然

最佳的色彩组合来自于大自然。它们总是看起来非常天然。根据自然环境来寻找设计方案的好处是可以拥有无数的色板,因为大自然的颜色总是在变化 。

7
我们只需要看看周围,就能获取灵感。

 

保持对比度

有的颜色和某些颜色搭配协调,和另一些颜色则会产生冲突。通过色轮,可以很好地观察到颜色相互作用的规则。你应该清楚地了解这个方法,但是不一样要亲手去做。

8

 

获得灵感

当我们谈到UI参考的时候,Dribbble是一个很好的选择。Dribbble也有颜色搜索工具。所以,如果你想要针对某个特定的颜色进行视觉研究,可以前往以下网址:dribbble.com/colors

9

视频、印刷设计、室内设计、时尚……有很多的启发灵感的事物。要对各种形式的色板保持灵敏的感觉,并且把看起来有趣的所有东西存下来。

10

11

12

我会从韩流的视频短片中获取颜色灵感

 

工具篇

为了节省大家时间,下面整理了一些2017年非常好用的色板工具。它们会为你节省大量的时间。

Coolors.co

我最喜欢的颜色选择工具。你可以简单地锁定颜色,并按住空格键生成色板。Coolors.co还支持上传图片,从图片中提取色板。Coolors.co酷在,你不仅仅有一个结果,相反地,你可以通过选择器,调整你的颜色,获得很多配色方案。

13

链接(无需翻墙):https://coolors.co/

 

Kuler

这款来自Adobe的工具已经陪伴我们很长时间了。它可以在浏览器或桌面应用中使用。如果你使用的是桌面应用程序,那你可以将配色方案导出到Photoshop中。

14

链接(无需翻墙):https://color.adobe.com/zh/create/color-wheel/

 

Paletton

它和前面一款工具Kuler相似。不同之处是,它不限于5种色调。当你已经确定主色调,想要调整辅助色的时候,这是一款很棒的工具。

15

链接(需翻墙):http://paletton.com/

 

Shutterstock Lab Spectrum

你可能会问:如果我想用我选择的颜色搜索图片呢?那么,Shutterstock旗下有款叫作Spectrum的工具可以满足你的需求,你可以通过特定的色调搜索图片。你甚至不需要称为会员,因为即使是带水印的小预览图片已经足以生成色板。

16

链接(需翻墙):https://www.shutterstock.com/labs/spectrum/

 

Tineye Multicolor

如果你想搜索照片上的色彩组合,甚至确定各个颜色的比例,那么Tineye可以帮助你。这个网站使用的数据库,包含了1000万张来自Flickr的Creative Commons(知识共享,一个非营利组织)图像。

17

链接(无需翻墙):https://labs.tineye.com/multicolr/

 

最后的想法

色彩是一个非常难以掌握的概念,特别是在数字时代。上面提到的方法和工具可以帮助你找到合适的颜色。创造令人惊叹的配色方案的最好的办法是练习。所以开始把玩颜色吧。

 

原文地址:Medium

译文地址:紫豆子设计站(公众号)

译者:紫豆子

201712191513717070

转载请注明:学UI网 » 如何在UI设计中运用颜色

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
时尚风格如何体现?(质感篇)时尚风格如何体现?(质感篇)
色彩解读之紫色篇色彩解读之紫色篇
2019年流行色:活力珊瑚橘色2019年流行色:活力珊瑚橘色
色彩解读之色调篇色彩解读之色调篇
好色之徒升级版之创建配色体系好色之徒升级版之创建配色体系
方法 | AI时代眼动研究的变与不变方法 | AI时代眼动研究的变与不变
如何设计好消费向app产品如何设计好消费向app产品
色彩解读之黑白灰色彩解读之黑白灰
【译】UI设计中使用插图的十大理由【译】UI设计中使用插图的十大理由
六个步骤细说电商banner图设计之色彩的奥秘六个步骤细说电商banner图设计之色彩的奥秘