百科狗-知识改变命运!
--

如何创建更好用的UI调色板?

小肉包1年前 (2023-12-19)阅读数 8#综合百科
文章标签颜色饱和度

色彩无处不在。 因此对于设计师来说,选择和使用合理的颜色来实现业务目标是一项挑战。

颜色的选择会影响产品的视觉样式,也会影响用户对产品的感觉。下面是创建一套UI配色方案的实用技巧,一起来看看吧~

首先要定义基本色。理想情况下应该有1-3个基本色与产品相关联。

另外需要注意的是 不要使用纯白或纯黑色。 白色(#FFFFFF)的颜色亮度为100%,黑色(#000000)的亮度为0%,这种强烈的对比在阅读或操作时会使眼睛疲劳。

最好的办法是 确定灰度色,灰度色适用于大多数界面设计。 由于灰色度的H值和S值没有变化,所以只要改变B的数值就能形成一套色板。

语义色是用来向用户传达成功、错误和警告信息的颜色 。以下场景中可以考虑使用:

突出显示重要的界面状态或信息;

验证文本字段或控件,如切换、复选框;

提供快速的视觉反馈,如新的应用消息。

60%+30%+10%规则之所以有效是因为它带来了平衡感,引导用户的视线从一个CTA区域平滑移动到另一个区域。

配色规则非常简单,如下所示:

60%的空间用于主色调;

30%是空间辅助/次要颜色;

10%是强调色或指导色。

为了可视化表现,来看一个“60-30-10”示例:

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

如何创建更好用的UI调色板?

好的用户体验的关键是理解受众。 颜色在这里起着重要的作用,因为颜色的选择会影响用户与产品交互时的感受和情绪。

因此选择颜色时,必须要问自己以下问题:

谁是你的目标受众?

他们的年龄?

产品的专业化是什么?

你想让产品唤起什么样的情感?

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

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

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

Coolors.co/image-picker (Web app)

Alembic (Sketch插件)

Image-Palette (Figma插件)

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

对比度帮助用户区分各种文本和非文本元素。 更高的对比度使图像看起来更舒服,通过对比检查可以有效地评估颜色的搭配。

这里教大家一个快速检查颜色饱和度是否统一的方法:

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

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

六、简单的命名方式

在系统中使用颜色时,请始终为每种颜色提供确切的名称。保证团队中的每个成员都能理解该名称,很容易就能引用特定的颜色。

最好使用功能性词语来描述UI中的颜色,例如积极、警告、主动等。

关于UI颜色的内容可以总结为三个原则:

一致: 在整个UI界面中颜色的应用应该一致,并与它所代表的品牌兼容;

对比: 颜色应该在元素之间产生区别,有足够的对比;

意识: 色彩的运用应该有目的,以多种方式传达意义。

最后为大家整理了常用的渐变色工具,后台回复:? 渐变色? 即可获取!

精彩推荐:

1、聊聊卡片式设计的运用

2、案例分析:栅格系统的布局设计

3、如何设计深色模式?这3点因素需要考虑

4、深度解析:服务蓝图的应用逻辑

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)