首页 新闻资讯 建站经验

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

您是否知道用户只需90秒就可以判断数字产品?有趣的是,对于我们作为设计师来说,大多数判断都是基于颜色的。

即将发布,我将提供一些有关如何找到可以协同工作的颜色,如何测试它们以及最后一些方便工具的技巧。

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

我将使用我最近设计的应用程序作为示例来演示我采取的不同步骤及其原因。它是Android的医疗应用程序,用户可以预订视频通话并安排与医生预约。

第一步

通常情况下,我首先想出一些描述产品的形容词以及我想要描绘的品牌价值。这些从未真正直接参与颜色选择,但可作为指导。

对于这个应用程序,我想出了:

可靠

稳定

专业的

新鲜

现代

要生成自己的列表,请问自己:产品是否需要被视为友好?强大的?专业的?前沿?未来派?或者更加脚踏实地?如果您遇到困难,请考虑产品的设计对象以及您在使用完成版本时想要或说出的内容。

我的第二步是提出一种原色- 其他一切都将基于此。

与许多设计资源所说的(以及我长期以来的想法)相反,大多数颜色都不能唤起超特定的情感。相反,个人品味,生活经历,文化因素以及许多其他因素会影响个体对颜色的感知。说“红色意味着激情”,或任何颜色转化为特定的情感(更不用说这种陈述几乎没有任何科学证据支持它)几乎毫无意义。

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

你不应该使用太多的颜色- 坚持一般人一眼就能看到的少数颜色。我倾向于使用非常有限的调色板 - 一种或两种原色可以很好地协同工作,也许还有一种颜色用于重音,然后是一系列更微妙的灰色调。

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

颜色饱和度

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

左侧的屏幕使用一种饱和色,因为只有一种功能(预约),而右侧的屏幕是专为需要能够查看患者过敏和访问病史的医生设计的,这就是我使用的原因大多数是不饱和的颜色。

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

对于它,我选择了明亮饱和的对比黄色,为应用带来更友好的感觉。我选择的其他颜色是原色蓝色的不饱和变化,一种生成匹配颜色的简单方法,并赋予产品强烈的色调一致性。

创建一个调色板

有许多传统方法可以找到一起工作的颜色,但总是最适合我的颜色是:

相邻(选择基色并选择旁边的颜色)

三合一(在色轮上画一个等边三角形)

阴影(选择基色和具有不同饱和度的多个版本)

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

与在不同声音系统上测试音乐的音乐家类似,在各种设备和屏幕上尝试您的设计,以查看颜色是否适用于所有设备,尤其是在不同的操作系统上。您可能会发现,在不同的显示器或具有不同颜色校准的计算机上,在一台设备上看起来最佳的颜色看起来不那么好。

工具

不幸的是,我还没有找到完美的色彩选择器。我最喜欢的是Photoshop中的旧Kuler选择器。现在有一个网络版,但它缺少旧插件的易用性。

该 材料的设计指导方针是,将彩色电视对接口有很大的参考,虽然很多是常识。您可以使用其他工具获取Android应用程序的基本材质样式调色板。

上一条:为您的平面设计组合带来一些奇思妙想! 下一条:什么是SEO以及为什么贵公司需要它?初学者指南
快速联系

You can contact us by email, phone number and address

请您拨打本凡一对一咨询电话:

0551-65651281 / 66686892
18326678023

您也可以咨询我们的在线客服

客服咨询 客服咨询 客服咨询