如何创建更好的 UI 调色板

色彩无处不在。因此对于设计师来说,选择和使用合理的颜色来实现业务目标是一项挑战。颜色的选择会影响产品的视觉样式,也会影响用户对产品的感觉。下面是创建一套UI配色方案的实用技巧,一起来看看吧~

定义基本的颜色

首先要定义基本色。理想情况下应该有1-3个基本色与产品相关联。
另外需要注意的是不要使用纯白或纯黑色。白色(#FFFFFF)的颜色亮度为100%,黑色(#000000)的亮度为0%,这种强烈的对比在阅读或操作时会使眼睛疲劳。
最好的办法是确定灰度色,灰度色适用于大多数界面设计。由于灰色度的H值和S值没有变化,所以只要改变B的数值就能形成一套色板。

框架设计系统的灰度调色板。

使用相同的颜色。

一致性是关键。在链接和按钮上使用相同的颜色。通过这样做,您将帮助用户发现交互式元素并无缝执行操作。

使用语义颜色突出显示重要信息。

语义颜色 - 是用于向用户发出成功、错误、警告信息信号的颜色。如果您需要,请使用语义颜色:

  • 要突出重要的 UI 状态、正面或警报信息;
  • 验证文本字段或控件(如切换、复选框);
  • 提供快速的视觉反馈,如新的应用内消息。

2. 60-30-10 规则60-30-10 规则

这项技术来自现实世界的设计,但它非常适合数字产品。60% × 30% × 10% 的规则有效,因为它带来了平衡感,并帮助眼睛从一个 CTA 区域平稳地移动到另一个区域,引导用户通过界面。

规则非常简单,是这样的:

  • 60%的空间用于主/区域颜色;
  • 30%是你的次要/支持颜色;
  • 10%是你的口音和指导颜色。

您可以使用这些比例在匹配和组合颜色时找到正确的平衡点,而无需将 UI 变成五颜六色的混搭。

据认为,这些比例是赏心悦目的人眼,因为他们允许一个人感知室内设计和你的屏幕整体组成容易。

为了更好地可视化,让我们快速举例介绍"60-30]10"的操作:

来自石膏设计系统的屏幕布局。

当然也可以按其他顺序搭配,它仍然有效。

了解受众

好的用户体验的关键是理解受众。颜色在这里起着重要的作用,因为颜色的选择会影响用户与产品交互时的感受和情绪。
因此选择颜色时,必须要问自己以下问题:
  • 谁是你的目标受众?
  • 他们的年龄?
  • 产品的专业化是什么?
  • 你想让产品唤起什么样的情感?

这些问题应该会影响到颜色的选择,所以在选择UI调色板或与团队讨论选择时,请始终关注这些问题。

 

使用配色工具

有时候可能会苦于没有灵感,一个很棒的技巧是利用自然或建筑来激发独特的配色方案。

网络上有很多工具可以将图像生成调色板。以下是一些实用的工具:

Coolors.co/image-picker(Web app)

Alembic(Sketch插件)

Image-Palette(Figma插件)

对比

根据您的目标使用对比度

如果你想将用户的注意力集中在特定的动作上,最好使用高对比度颜色来帮助他找到焦点。

蓝色、绿色和红色等颜色甚至在用户阅读按钮文本之前就会快速告诉上下文。

对比有助于用户区分各种文本和非文本元素。较高的对比度使图像更舒适地看到,而减少对比度可以给图像一个更平坦的色调。

但是,在处理 UI 设计时,如果不谨慎地应用,高对比度水平也可能有害。如果您的文本与背景有太大的对比,则您的 UI 将更难扫描。

这就是为什么它总是一个好主意,进行对比检查与饱和度,评估对比的成功,或只是测试你的设计在不同的屏幕上。

这里教大家一个快速检查颜色饱和度是否统一的方法:
画一个颜色为纯黑(#000000)的矩形,填充模式选择“饱和度”,覆盖在色板上,色板上的颜色会出现饱和度的变化,以此来检查配色的饱和度是否相同。

通过这种小技巧检查颜色的饱和度,能看到别人看不见的东西。

 

简单的命名方式

在系统中使用颜色时,请始终为每种颜色提供确切的名称。保证团队中的每个成员都能理解该名称,很容易就能引用特定的颜色。
最好使用功能性词语来描述UI中的颜色,例如积极、警告、主动等。

总结

关于UI颜色的内容可以总结为三个原则:
  • 一致:在整个UI界面中颜色的应用应该一致,并与它所代表的品牌兼容;
  • 对比:颜色应该在元素之间产生区别,有足够的对比;
  • 意识:色彩的运用应该有目的,以多种方式传达意义。

 

作者:Buninux

本页面最后更新于 2021年08月31日 11:07