火星网校
怎样创建UI调色板更好用？
今天为大家带来的文章是「调色板」。颜色的搭配和选择影响着产品最后呈现出来的视觉效果，合理的颜色配比能加深用户对品牌的印象。
色彩无处不在。因此对于设计师来说，选择和使用合理的颜色来实现业务目标是一项挑战。
颜色的选择会影响产品的视觉样式，也会影响用户对产品的感觉。下面是创建一套UI配色方案的实用技巧，一起来看看吧～
一、定义基本的颜色
首先要定义基本色。理想情况下应该有1-3个基本色与产品相关联。
另外需要注意的是不要使用纯白或纯黑色。白色(#FFFFFF)的颜色亮度为100%，黑色(#000000)的亮度为0%，这种强烈的对比在阅读或操作时会使眼睛疲劳。
最好的办法是确定灰度色，灰度色适用于大多数界面设计。由于灰色度的H值和S值没有变化，所以只要改变B的数值就能形成一套色板。
语义色是用来向用户传达成功、错误和警告信息的颜色。以下场景中可以考虑使用：
突出显示重要的界面状态或信息；
验证文本字段或控件，如切换、复选框；
提供快速的视觉反馈，如新的应用消息。
二、60-30-10配色规则
60%+30%+10%规则之所以有效是因为它带来了平衡感，引导用户的视线从一个CTA区域平滑移动到另一个区域。
配色规则非常简单，如下所示：
60%的空间用于主色调；
30%是空间辅助/次要颜色；
10%是强调色或指导色。
为了可视化表现，来看一个“60-30-10”示例：
当然也可以按其他顺序搭配，它仍然有效。
三、了解受众
好的用户体验的关键是理解受众。颜色在这里起着重要的作用，因为颜色的选择会影响用户与产品交互时的感受和情绪。
因此选择颜色时，必须要问自己以下问题：
谁是你的目标受众？
他们的年龄？
产品的专业化是什么？
你想让产品唤起什么样的情感？
这些问题应该会影响到颜色的选择，所以在选择UI调色板或与团队讨论选择时，请始终关注这些问题。
四、使用配色工具
有时候可能会苦于没有灵感，一个很棒的技巧是利用自然或建筑来激发独特的配色方案。
网络上有很多工具可以将图像生成调色板。以下是一些实用的工具：
Coolors.co/image-picker（Web app）
Alembic(Sketch插件)
Image-Palette(Figma插件)
五、使用对比
如果你想把用户的注意力集中在特定的操作上，最好使用强对比度的颜色来帮助用户找到焦点。
对比度帮助用户区分各种文本和非文本元素。更高的对比度使图像看起来更舒服，通过对比检查可以有效地评估颜色的搭配。
这里教大家一个快速检查颜色饱和度是否统一的方法：
画一个颜色为纯黑(#000000)的矩形,填充模式选择“饱和度”，覆盖在色板上，色板上的颜色会出现饱和度的变化，以此来检查配色的饱和度是否相同。
通过这种小技巧检查颜色的饱和度，能看到别人看不见的东西。
六、简单的命名方式
在系统中使用颜色时，请始终为每种颜色提供确切的名称。保证团队中的每个成员都能理解该名称，很容易就能引用特定的颜色。
最好使用功能性词语来描述UI中的颜色，例如积极、警告、主动等。
总结
关于UI颜色的内容可以总结为三个原则：
一致：在整个UI界面中颜色的应用应该一致，并与它所代表的品牌兼容；
对比：颜色应该在元素之间产生区别，有足够的对比；
意识：色彩的运用应该有目的，以多种方式传达意义。
（本文作者Buninu，译者Clippp，文章来源于微信公众号@Clip设计夹）
上一篇 如何快速搞定极简设计风格？
下一篇 UI设计中标题太长怎样合理处理？
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
本文主要介绍和对比了几所知名的交互设计师培训机构，专业、全面、详细的解析帮助你选择更适合自己的培训路径。
-
在这篇文章中，我们为你介绍一些优质的UI设计培训机构，让你从众多选择中找出一条适合自己的学习道路。
-
深入探讨UE5可视化的学习路径，分享如何掌握关键技能和策略，帮助你领略UE5可视化制作的魅力。
-
探索UE5智慧城市师培训课程为设计师和开发者描绘智慧城市的技术引擎，利用UE5技术创造更加智能高效的城市
-
本文介绍了UE5模拟仿真师的培训课程，为零基础的学员详解UE5的使用方法和实战技巧，助力学员蜕变成为专业的模拟仿真师。
-
本文详细介绍了UE5设计入门培训班的相关内容，帮助你更好地理解和认识UE5设计，并为你解锁游戏设计的新视觉。
