TOPIC:
COLOR &
USER EXPERIENCE
UI Design UX Design
Article:2022/04/08
Hi~,欢迎来到「交互设计新视觉系」技法专栏的第二期!
颜色是设计师工具包中最强大的工具之一:它不仅可以起到装饰作用,还可以优化用户体验。在本文中,我们将介绍五种可以帮助设计师提升用户体验的色彩技巧&UX/UI设计中的色彩指南。
文末还为大家准备了Wolvus Technology团队分享的调色板使用及来源示例&37款精选Color Lab分享的超美灵感配色福利礼包哦~
提升用户体验的色彩技巧
1.表达内容或元素的层次结构
颜色可以帮助设计师将注意力吸引到特定元素上,并在页面/屏幕上创建元素层次结构。当一个元素的颜色与其周围环境形成对比时,该元素就会脱颖而出并立即吸引用户的注意力。
如果要将一个元素放置于另一个元素之上,则应在元素之间使用更强的颜色对比。这种方法适用于单个元素,例如对动作按钮和界面的调用:
颜色还可以帮助您提供视觉连续性。当有意使用颜色时,它可以为用户提供几个焦点,以便用户的视线自然地从一个元素移动到另一个元素。在下面的示例中,用户的注意力将集中在动作按钮“Analytics(分析)”上,然后向下移动到标签栏中 AI 助手的图表和圆圈元素。
要创建可靠的视觉层次结构,建议限制 UI 中使用的颜色总数。通常,您在 UI 中使用的颜色越少,对比元素就会受到越多的关注。
2.指示交互元素的当前状态
当用户问“这个按钮是启用还是禁用?” 这个问题时,这意味着设计者未能指示元素状态。设计师可以通过使用颜色和空白来指示交互性。当用户看到一个明亮的、对比鲜明的方形元素时,他们会立即认为这是一个处于活动状态的按钮。
理想情况下,您应该选择一种特定的颜色来指示整个应用程序的交互性。如果您需要显示一些具有不同优先级的按钮(例如,主要 CTA 和一些次要 CTA),您可以使用交互式颜色的色调并为次要按钮创建此颜色的变体,就像在下面的示例中一样。
3.强化状态变化
颜色可以为用户提供反馈以响应操作。通过结合使用形状和颜色,可以增强认同感。例如,一旦用户点击号召性动作按钮,按钮的颜色和形状就会发生变化,以指示操作成功。
4.强调品牌形象
在产品中使用品牌颜色是一种相当典型的设计策略,可以充分利用这种技巧。例如,可以在特定时刻使用品牌颜色,比如支付确认屏幕上的号召性动作按钮的颜色。通过这样做,您将为用户创建将这些颜色与特定操作和信息相关联的条件。
这里有几点注意事项:
尽量避免在加载等状态下使用品牌颜色,尤其是在加载时间超过几秒钟的情况下。当您使用主要品牌颜色为进度指示器着色时,您的用户会下意识地将这种颜色与缓慢加载联系起来。
小心红色和绿色。红色和绿色通常与失败和成功相关联,因此当您的品牌调色板有绿色或红色时,您应避免使用完全相同的颜色来传达错误状态或成功状态。
5.传达含义
人们会将颜色与特定事物联系起来是一个众所周知的事实,虽然其含义可能取决于上下文和文化,但仍然可以为颜色找到一些普遍的含义。例如,当涉及到城市交通时,红色通常与“停止”相关联,而绿色与“走”相关联。如果您设计导航应用程序,您可以使用这种方法并将繁忙的道路着色为红色。
同时,不要仅仅依靠颜色来传达重要信息。使用文本标签或图标等其他元素来帮助视觉传达给用户以理解信息。
UX/UI设计中的色彩指南
颜色可以用不同的方式记录下来,最常见的可能是 Pantone、CMYK、HEX 和 RGB。我们仅在界面设计中使用 HEX 和 RGB,但了解它们的区别仍然很重要。
Pantone → 用于打印
您无法在家用打印机上打印 Pantone,但您可以查看官方的 Pantone 色彩书作为参考。专业打印机会为您获取特定的 Pantone,并将其添加到他们的机器中进行打印。因此,打印 Pantone 颜色通常更昂贵,这就是为什么它主要用于需要在不同媒体上匹配的徽标或品牌元素,其余的保留在 CMYK。
CMYK → 用于打印
混合青色、品红色、黄色和黑色四种颜色是所有其他打印颜色的基础。这些也是您的家用打印机和专业印刷厂中的四种颜色。
RGB → 用于 UI 设计
RGB 代表红色、绿色和蓝色。显示器发出这些颜色,因此它们是由光而不是墨水制成的。光的色谱比印刷品大。由于系统不同,印刷和屏幕颜色永远不会100%匹配。
在UI设计中给出RGB值时,它的范围是 0-255,例如R=255,G=255,B=255或 RBG=255,255,255 为白色,而 RGB= 0, 0, 0 为黑色。
RGBA → 用于 UI 设计
与RGB相同,A代表附加的Alpha通道。Alpha 将透明度从 0.0(完全透明)和 1.0(完全不透明)调节。
因此,例如 RGBA = 255, 255, 255, 0.5 将是具有 50% 透明度的白色。
HEX→ 用于 UI 设计
RGB 非常好,但记下来有点冗长,所以 HEX 只是它的一种简短形式,它总是显示与 RBG 对应的颜色完全相同的颜色。由于其字符串格式,它更易于处理、复制、粘贴和共享。
十六进制由 6 位数字组成,前面有一个#(hash)。前两位代表 R,第二位代表 G,第三位代表 B。这就是 RGB 和 HEX 相同的原因。
注意:印刷和屏幕设计中的颜色永远不会完美对齐,因为它们是通过不同的方式创建的:印刷是通过混合墨水,屏幕是通过组合光。重要的是使每个调色板在其内部和谐。
在打印和屏幕之间转换颜色
但是,有时您可能会得到打印颜色,需为您的 UI 设计进行转换。
我们可以使用 Pantone 色桥的官方 Pantone 转换器。
在这里您可以选择输入 HEX、RGB 或 CMYK,会推荐匹配的 Pantone。单击它,您将被告知所有相关的颜色值。
最后为大家准备了Wolvus Technology团队分享的调色板使用及来源示例&37款精选Color Lab分享的超美灵感配色福利礼包~
Wolvus Technology团队提供了一系列很棒的色彩组合,还分享了调色板的使用及来源示例;
优秀设计师从美学吸引力、可用性和设计趋势方面考虑,从Color Lab精选了这些漂亮的调色板,颜色来源于自然、建筑和城市景观等的美丽图像...
您可以将这些颜色用于Logo设计、界面、海报、插图、动态图形以及几乎任何东西。文末领取~
下一篇文章,我们将介绍如何在UI设计中正确地进行颜色选择与配比。
资料参考:Nick Babich / Christine Vallaure
(部分图文来自网络,若有侵权,请联系删除。)
福利时刻
扫码添加小助手微信
领取文末精选配色~
帮助大家做出更好的设计~
加入社群,解锁更多惊喜!
往期推荐 | READ MORE
技法干货:渐变这样做才更美!(文末领取绝美矢量渐变礼包~)
一篇文章搞懂用户体验设计中的竞品分析!(文末领取竞品分析实用工具哦)
视觉设计在用户体验设计中的作用? (文末领取艺术周边展示样机~)
文字丨CMU设计学姐
编辑丨Jelly
如果觉得我们做的还不错点个赞和在看吧!:)