如何为产品的UI创建最佳的调色板

用户头像
成都/产品设计师/6年前/278浏览
如何为产品的UI创建最佳的调色板

你知道吗,用户只需90秒就能对数字产品做出判断?有趣的是,作为设计师,这个判断是基于颜色的。.

你知道吗,用户只需90秒就能对数字产品做出判断?有趣的是,作为设计师, 这个判断是基于颜色的。 .

接下来我会给你一些建议 如何找到一起工作的颜色, 你怎么能 测试他们 ,最后一些 方便工具.

为应用程序选择调色板可以被认为是应用程序视觉设计中最重要的部分,它强烈地影响了用户对产品质量的感知。但是,选择它并不需要过于复杂。当我设计一个新的界面时,调色板的主要考虑事项是:用户统计、产品的使用地点和方式,以及任何公司品牌指南。

我要用我最近设计的应用, 多克托罗 ,作为一个例子来演示我采取的不同步骤以及原因。Doctoroo是一个用于Android的医疗应用程序,它允许用户预订视频通话,并安排与医生的预约。

第一步

通常,我首先想出一些形容词来描述产品和 品牌价值 我想把它描绘出来。这些从来没有真正发挥的颜色选择,但作为指导。

对于Doctoroo,我想出了:

  • 可靠
  • 稳定
  • 专业人士
  • 鲜食
  • 现代

要产生你自己的清单,问问自己:产品需要被认为是友好的吗?强壮?专业的?尖端?未来派?或者更脚踏实地?如果你被困住了,想想产品是为谁而设计的,当他们使用成品时,你想让他们想什么或者说什么。

我的第二步是想出一个主要的颜色-其他一切都将基于这一点。

与许多设计资源的说法(以及我很长一段时间以来的想法)相反,大多数颜色并不会引发超特定的情绪。相反,个人品味、生活经历、文化因素以及其他因素都会影响个人对颜色的感知。说“红色意味着激情”几乎是毫无意义的,或者说任何颜色都能转化成一种特定的情感(更不用说这种说法几乎没有任何科学证据支持它)。

在选择原色时,考虑观众对颜色选择的反应比颜色本身更重要。我为Doctoroo选择了蓝色,主要是因为这是用户对医疗应用程序的期望。

你不应该使用太多的颜色-坚持一个小的数字,一般人可以接受一个一目了然。 我倾向于使用非常有限的调色板 -一个或两个原色很好地结合在一起,也许更多的颜色为口音,然后是一系列更微妙的灰色阴影。

记住,该产品将使用一系列方法来传达信息和层次结构(大小、布局/位置、字体、邻近度等),其中颜色仅为一种。

颜色饱和

颜色越饱和(强烈),就越吸引人的注意。当我希望用户专注于复杂或思想密集型的任务时,我倾向于使用不太饱和的颜色;当用户有一个主要功能要完成时,我倾向于使用更强的颜色。


左边的屏幕使用一种饱和的颜色,因为只有一个功能(预约),而右边的屏幕是为医生设计的,他们需要能够查看病人的过敏情况并查看病史,这就是为什么我使用的大多是不饱和的颜色。

这个图表解释了颜色的一般感觉取决于它们的饱和度和亮度:


我从来不使用两种高度饱和在一起的颜色-这常常会让人们的眼睛感到疲倦。话虽如此,我总是尝试在我的灰色中加入少量的饱和度-纯灰阶颜色在自然界中并不存在,而且对用户来说似乎是不自然的(尽管如果这是你想要的,那就不是问题了)。

对于Doctoroo,我选择了一种明亮而饱和的对比黄色,借此给应用程序一种更友好的感觉。我选择的其他颜色是原始蓝色的去饱和变体,这是一种很容易生成匹配颜色并赋予产品强烈的色调一致性的方法。

创建调色板

寻找颜色的传统方法有很多,但最适合我的方法是:

  • 相邻(选择基色并选择其旁边的颜色)
  • 三位一体(在彩色车轮上画一个等边三角形)
  • 色调(选择一个基色和几个不同饱和度的版本)

我通常会发现我需要稍微调整一下颜色,因为在数学上完美匹配的颜色看起来非常糟糕。

就像音乐家在不同的声音系统上测试他们的音乐一样,在不同的设备和屏幕上尝试你的设计,看看颜色是否适用于所有的设备和屏幕,特别是在不同的操作系统上。您可能会发现,在不同的显示器或具有不同颜色校准的计算机上,在一个设备上看起来最好的颜色并不是很好。

工具

不幸的是,我还没有找到完美的调色板选择。我最喜欢的是Photoshop中的老Kuler选择器。有一个 Web版本 现在,它错过了旧插件的易用性。您可能需要考虑一些工具,例如 帕莱顿 ,但我不喜欢这个界面,我自己也不使用它。

这个 材料设计指南 虽然有很多是常识,但对于将颜色应用到界面上来说,这是一个很好的参考。你可以用 Matalpalette.com 用于Android应用程序的基本材料风格调色板。

Colourlovers.com 是一个我已经使用了12年的网站。它有大量用户生成的颜色和调色板,其中一些实际上相当不错。 库尔 也似乎产生了良好的调色板,但我不确定他们的颜色选择算法如何工作。

可染颜色 也是很好的灵感-只要选择一个一般的颜色,并找到调色板的工作。


1
Report
|
1
Share
相关推荐
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
大家都在看
Log in