全部
文章
上传比赛
vip
选择产品颜色的设计师指南
选择产品颜色的设计师指南

人机交互是高度基于图形的UI元素,而颜色在其中起着至关重要的作用。

设计新产品时,由于可能的颜色组合数量众多,通常很难决定颜色方案。在本文中,我们将介绍八个基本规则,这些规则可以帮助您选择正确的调色板。

1.限制颜色数量

将色彩应用于设计项目与平衡性息息相关。您使用的颜色越多,实现这种平衡就越难。如果您在配色方案中坚持最多使用3种原色,则将获得更好的结果。根据多伦多大学关于人们如何使用Adobe Color CC的研究,大多数人表示,他们更喜欢仅依赖于两种或三种颜色的简单颜色组合。

如果您需要调色板中定义的颜色以外的其他颜色,请使用阴影和色调。

如何制定计划

那么,如何选择这两种或三种颜色?色轮可以提供帮助。



12色轮是创建配色方案的重要工具



12色轮是创建配色方案的重要工具

有许多预定义的配色方案标准可以使创建新方案更加容易,特别是对于初学者而言:

  • 单色的单色方案是最简单的方案,因为它们都是取自相同的颜色,但是包括色调,阴影和色调的变化。单色搭配得很好,产生舒缓效果。



单色方案在眼睛上非常容易(尤其是蓝色或绿色)。
正如您在此Facebook示例中看到的那样,该方案看起来干净而优雅。



单色方案在眼睛上非常容易(尤其是蓝色或绿色)。
正如您在此Facebook示例中看到的那样,该方案看起来干净而优雅。

  • 类似的。从相关颜色创建相似的配色方案。一种颜色用作主色,而另一种颜色用于丰富该方案。尽管这相对容易实现,但诀窍在于确定所用颜色的鲜艳度,因为整个方案会因此而被夸大。例如,手势驱动的待办应用程序Clear(Clear)使用醒目的类似颜色在视觉上对当前任务集进行优先排序。虽然平静,冥想的应用程序,使用类似的颜色蓝色和绿色,以帮助用户感到轻松和平静。



通过在12辐色轮上使用彼此相邻的三种颜色来创建类似方案。Clear是一种手势驱动的待办应用程序,它使用醒目的类似能量的颜色在视觉上对当前任务集进行优先排序。



通过在12辐色轮上使用彼此相邻的三种颜色来创建类似方案。
Clear是一种手势驱动的待办应用程序,它使用醒目的类似能量的颜色在视觉上对当前任务集进行优先排序。



冷静使用类似的颜色来建立整体情绪。



冷静使用类似的颜色来建立整体情绪。

  • 补充。在最基本的形式上,这些方案仅包含两种强烈对比的颜色。该方案用于吸引观看者的注意力。当使用互补方案时,重要的是选择一种主色并将其互补色用作重点。例如,当人眼看到一个充满各种绿色的物体时,一点红色将非常明显。



使用互补色是使某些产品脱颖而出的最简单方法。



使用互补色是使某些产品脱颖而出的最简单方法。

  • 自定义 创建自定义配色方案并不像许多人想象的那么复杂。您可以使用一个简单的技巧来创建出色的调色板:只需将明亮的强调色添加到否则为中性的调色板中即可(例如,传统的单色方案)。新创建的方案将在视觉上非常引人注目。



在灰度设计中添加一种颜色可以轻松有效地吸引眼球。在Dropbox配色方案中,白色和灰色组合的布局与蓝色的点缀相得益彰。



在灰度设计中添加一种颜色可以轻松有效地吸引眼球。
在Dropbox配色方案中,白色和灰色组合的布局与蓝色的点缀相得益彰。

2.受到自然的启发

最好的色彩组合来自自然。为什么?因为这些方案在您看来自然而然。为了获得启发,我们只需要环顾四周。如果您在日常生活中看到一种特别美丽或醒目的色彩,请尝试围绕它创建一个方案。只需拍下美丽时刻的照片,然后根据它创建您的配色方案。



最好的色彩组合来自自然。您可以根据镜头创建配色方案。



最好的色彩组合来自自然。
您可以根据镜头创建配色方案。


3.尝试遵循60–30–10规则

60–30–10是一条简单的规则,可帮助您创建均衡的调色板。这个想法是一种颜色(通常是中性色)占调色板的60%。另一种互补色占调色板的30%。第三种颜色用作配音,其余的占10%。这个公式之所以有效,是因为它创造了一种平衡感。



60%是您的主要色相,30%是第二色,10%是强调色。这种技术可使眼睛舒适地从一个焦点移动到另一焦点。



60%是您的主要色相,30%是第二色,10%是强调色。
这种技术可使眼睛舒适地从一个焦点移动到另一焦点。


4.避免使用黑色

在现实生活中,纯黑色几乎不存在。我们周围的所有“黑色”物体都有一定数量的反射光,这意味着它们并不是真正的黑色,而是深灰色。道路不是黑色的。阴影不是黑色的。



这头狼的颜色是深灰色,而不是黑色。



这头狼的颜色是深灰色,而不是黑色。


当您在一组精心挑选的颜色旁边放置纯黑色时,黑色将压倒其他一切。之所以脱颖而出,是因为它不自然。我们每天使用的许多应用程序中的黑色并不是真正的黑色,而是深灰色。

5.使用颜色对比度设置重要性

Сolor是可以帮助引导眼睛的工具。您越想让某件产品脱颖而出,就越应该依靠对比色。通常,高对比度是重要内容或关键元素的最佳选择。如果您希望用户看到或单击某些内容,请使其突出!



对比度使该区域看起来与屏幕的其余部分不同。您越想让某件产品脱颖而出,就越应该依靠对比色。



对比度使该区域看起来与屏幕的其余部分不同。
您越想让某件产品脱颖而出,就越应该依靠对比色。


6.使用色彩来影响用户的情绪

一个众所周知的事实是,颜色具有内在的含义并且可以激起情感。这些含义将直接影响您的用户对您的产品的看法。

“色彩可以创造,增强,改变,揭示和建立画作的氛围。” —基夫·荷兰

在为应用程序/网站选择调色板时,您不仅可以考虑事物的外观,还必须考虑它们的感觉。您选择的颜色可以工作品牌形象你想创建。为帮助您入门,我编写了一份快速参考指南,其中涵盖了每种颜色(在西方世界中)的基本关联。

红色,橙色,黄色

  • 红色(热情,有力,危险,重要):红色是一种极具刺激性的颜色。它给人以速度和力量的印象。它被称为能量的颜色。它具有增加血液循环和促进新陈代谢的生理作用。这就是为什么当人们看到红色时,他们读起来越来越快。使用红色是一种吸引用户注意力或突出显示需要关注的元素的方法。

  • 橙色(俏皮,充满活力,有吸引力,便宜):橙色是一种温暖而充满活力的颜色。它具有活力十足的氛围,能够为您的用户营造出温馨的氛围。一些研究人员发现橙色代表便宜。

  • 黄色(快乐,友善,刺激,注意力集中):黄色是一种非常通用的颜色,具体取决于您选择的阴影。淡黄色与太阳有关,因此传达了正能量和温暖感。黄色的深色阴影(如金色)给人以古代和古老的印象。这些较深的阴影通常与永恒和智慧有关。





绿色,蓝色,紫色

  • 绿色(自然,安全,新鲜):绿色反映出一种环保意识和对自然的亲近感。它还标志着增长,这就是为什么它经常与业务相关联。绿色表示对与错。

  • 蓝色(镇定,负责,可信赖,可靠):蓝色通常与沉着和放松的情绪有关。它还与强度和可靠性相关联,给人以信任和专业感。蓝色散发出内在的安全感。这就是为什么您可能会看到银行和技术业务使用该颜色的原因。社交媒体巨头,例如Facebook,Twitter和LinkedIn,都在其网络上使用了蓝色。

  • 紫色(豪华,神秘,浪漫,灵性):从历史上讲,紫色与皇室息息相关,暗示着产品是高端产品。





粉色,黑色,白色,灰色

  • 粉红(女性,天真,青年):粉红以其与女性气质的关联而闻名。

  • 黑色(功能强大,复杂,神秘,前卫):黑色比其他颜色(包括红色)吸引注意力的速度更快。这就是为什么它最常仅用于文本和重音符号的原因。

  • 白色(纯度,健康,清洁度,纯真度):白色为周围的其他颜色增色,使其成为第二颜色的流行选择。

  • 灰色(中性,形式,复杂性,无菌性):灰色代表中性,可以呈现黑色或白色的特征。当用作原色时,它给人以形式感。






值得一提的是,颜色的含义可能会因文化和环境而异。有关更多信息,请查看文章“颜色的象征意义和世界各地的颜色含义”。

7.使设计无障碍

使用颜色进行设计时,可访问性是一个关键考虑因素。当今的产品必须使所有人都能使用-无论个人能力如何。

避免使用单独的颜色作为指标

大约8%的男性和0.5%的女性会受到某种形式的色盲的影响。那是十二分之一的男性和一百分之二的女性。虽然有多种形式的病症,但最常见的是红色/绿色色盲。患有这种色盲形式的人通常很难看到红色和绿色的变化。



视力正常时所见的颜色,与红绿颜色不足时所见的颜色相同(十目和复视)。



视力正常时所见的颜色,与红绿颜色不足时所见的颜色相同(十目和复视)。


由于色盲采取不同的形式(包括红绿色,蓝黄色和单色),因此使用多种视觉提示传达产品中的重要状态非常重要。除颜色外,还使用笔触,指示器,图案,纹理或文本等元素来描述动作和内容。



避免单独使用红色和绿色来传达信息,因为对于看不见红色字符的人来说,这可能是非常令人沮丧的体验。



避免单独使用红色和绿色来传达信息,因为对于看不见红色字符的人来说,这可能是非常令人沮丧的体验。


避免文本对比度低

颜色对比是颜色理论对设计可用性至关重要的一个领域。当您在文本中使用颜色时,请注意将两种低对比度的颜色并排放置会使您的副本很难阅读。



低对比度文本可能会破坏许多应用程序的可用性。



低对比度文本可能会破坏许多应用程序的可用性。


检查对比度,以确保背景色和前景色与色盲人或视力低下的人有足够的对比度。其实并不难,您要做的就是检查对比度。对比度表示一种颜色与另一种颜色的区别(通常写为1:1或21:1)。比率中两个数字之间的差异越大,颜色之间的相对亮度差异就越大。的W3C推荐正文文本和图像的文字下面对比度:

  • 小文本与背景的对比度应至少为4.5:1。

  • 大文本(14 pt粗体/ 18 pt常规字体及以上)与背景的对比度应至少为3:1。

好消息,您不必手动检查。使用工具“ 颜色对比度检查器”,您只需单击几下即可检查颜色组合。


Webaim色彩对比检查器


Webaim色彩对比检查器


奖励:UX设计器的必备工具

为了使事情变得更容易,我还将提供一些用于选择调色板的最佳工具。

Adobe彩色CC

Adobe Color CC(以前称为Kuler)是查找,修改和创建配色方案的出色工具。只需单击几下,调色板上的每种颜色都可以单独修改,或选择为基础颜色。调色板可以保存并添加到库中,并且社区提供了许多出色的配色方案:


<img loading="lazy" width="654" height="654" src="https://www.mobangwang.com/wp-content/uploads/2020/07/image-103.png" alt="Adobe Color CC是一个很棒的工具,可以加快探索各种配色方案选项的速度。" class="wp-image-342" style="margin: 0px auto; padding: 0px; list-style: none; box-sizing: border-box; word-break: break-all;

版权所有:该文章仅供学习与交流,如有侵犯您的版权,请及时联系我们,我们将尽快处理。
文 章 编 号

6

浏 览 次 数

47

上 传 时 间

2022-05-13

版 权 所 有

仅供学习交流,禁止商业使用

分享:

致力打造一个属于设计师的素材共享平台,主打PSD素材,高清图片,矢量素材等资源的分享服务,优质设计资源并坚持每天更新 学习、共享、免费、实用和创新。


关注公众号
· Copyright © 2019-2022 **** | 桂ICP备2021001764号 |

账号注册 找回密码

仅限字母/数字和_、不允许中文或纯数字、字符(5~16)
仅支持网易邮箱和QQ邮箱
密码必须包含字母和数字、字符:(6~18)输入密码注意区分大小写
仅支持网易邮箱和QQ邮箱
密码必须包含字母和数字、字符:(6~18)输入密码注意区分大小写

没有账号? 立即注册

QQ注册

注册即表明同意 使用条款和隐私策略