美文网首页
如何在UX设计中使用颜色

如何在UX设计中使用颜色

作者: 集模小笔记 | 来源:发表于2020-08-04 19:40 被阅读0次

颜色比眼睛更具说服力。作为视觉语言的组成部分,颜色突出显示,引导注意力并统一元素。在UX中,颜色增强了产品的功能和美学品质。

颜色戴很多帽子。品牌将色彩视为心情和知觉。在SASS和LESS功能方面,开发看到了颜色。UX设计将色彩视为跨平台的一致系统。总体而言,色彩是传达不同类型信息的通用工具。

为了改善颜色决策,让我们介绍如何:选择调色板,确定颜色优先级,考虑数据可视化以及测试可访问性。

使用颜色理论选择调色板

了解一些颜色元素将帮助你为调色板选择正确的颜色。色轮是牛顿的光实验的衍生产品,将为你提供帮助。


色相饱和度

色相是色轮上的特定颜色或等级。

饱和度是指颜色的强度。在100%饱和度下,色彩是最纯净的。


色调,色调和阴影

将纯色与中性色混合会产生较浅和较深的变化。

淡色 —颜色与白色混合

色调 -与灰色混合的颜色

阴影 -颜色与黑色混合


和谐的调色板

“所有颜色都是邻居的朋友和对立的情人。” —马克·夏加尔

这些调色板基于色轮,由和谐地协同工作的颜色组成。

我们将介绍单色,相似,互补,分裂互补和三重调色板。

单色由色调,色调和一种色调的阴影组成。

用彼此相邻的三种颜色创建类似的调色板。

互补色包含两种相反的颜色,可产生高对比度。

分补互补色由三种颜色组成,

其中两种颜色相邻于另一种颜色。

    甲三元调色板具有三个色调围绕车轮等距隔开


获得灵感

这是你开始使用自己的调色板的几种方法。

创建渐变:从和谐调色板创建渐变。


优先处理主要和次要

在设计系统中确定颜色的优先级并进行定义。就像直观的库一样,有组织的颜色可以帮助你的内部团队找到他们想要的东西。它们还可以帮助你的团队为用户创建视觉一致性。力求精确的原色,足够的辅助色和清晰的名称


主要

界面中经常使用原色。它们包括商标,交互元素,布局和文本中的颜色。添加一个简单名称及其十六进制数字:violet:#8322DD

次要

次要颜色偶尔使用,由基于原色的重音组成。通过手工挑选,CSS函数(变暗,HSL%变亮)或同时通过两者创建(Curtis,2016年)。辅助颜色可用于表示系统反馈,例如任务成功,错误或警告。

色调叠

色调堆栈提供了灵活的选择。尝试赋予你的团队足够的选择权(3–4个步骤),但选择的范围不太多,以至于损害了一致性。

你可以使用HSL百分比创建堆栈,以轻松使用CSS函数实现。包括颜色名称,HSL亮度(0 -100)和十六进制编号:violet-lighter-20:#B47AEA。

动手吧

EVA颜色此AI工具可帮助你基于原色查找通知的辅助颜色。

着色叠层的冷却器从一种颜色开始,并以递增的方式更改HSL亮度。

考虑数据可视化

对于数据可视化,使用颜色强调数据的故事性。根据数据的复杂程度,你可能需要6–12种颜色才能涵盖所有用例。创建具有广泛色相和亮度范围的灵活色调堆栈。

数据类型和推荐的调色板:


分类

分类由非数字类别(国家,性别,姓名)组成。对于不同的类别,色相在色轮中间隔开的调色板效果最佳。


顺序

顺序数据具有数字或有序值。为了指示数字步长,颜色应逐渐改变色调和亮度。就像类似的调色板一样,使用彼此相邻的色相。较低的值应开始变亮,较高的值将变暗。


发散

差异数据还包含数值。基本上是两个相继的调色板在一个中心点相遇。发散可以具有负值到正值,或者在频谱上相反。保持中心点较亮,并允许颜色从中心进一步变暗。


可视化

让我们看一些工具,这些工具将使你更轻松地选择调色板以进行数据可视化。

ColorBrewer浏览调色板(顺序,发散,分类),并在地图上可视化它们。

Viz Palette此工具可让你在不同的数据可视化图表上查看调色板。

测试可访问性

测试你的调色板的可访问性,以确保具有不同视觉能力的用户可以看到每种颜色。对可访问性进行测试是迈向更加实用和易读的产品的一步,可增强其体验。尽早检查并经常检查颜色是否符合万维网联盟(W3C)准则。

对比

寻找背景上文本的足够颜色对比度,以及在数据可视化中一起使用的颜色之间的对比度。在低对比度的情况下,文本将变得更难以阅读,并且数据也难以区分。W3C建议使用以下对比度:

  • 文字4.5:1

  • 大型文字为3:1(粗体为14pt,常规为18pt)

  • 3:1的图标

视觉提示

除了传达重要状态的色彩外,还尝试使用多种视觉提示。色盲用户可能无法单独使用颜色来传达信息。例如,你可以为系统通知添加图标以及颜色和文本。

无障碍范围

在背景上创建不同文本颜色的对比对。然后根据中性色调的进展显示可访问范围。这可以帮助你的团队准确地了解无法访问的位置。

结论

以下是我们学到的内容的快速回顾:

  • 用色彩理论挑选一个和谐的调色板

  • 将颜色分为主要和次要

  • 考虑数据可视化及其数据类型

  • 尽早测试色彩可及性

我们将色彩与它的通用光谱结合使用,以试图表达我们人类体验的深度。我希望这篇文章对你有所帮助,并且希望你从UX的角度出发对颜色有了另一种看法。

相关文章

  • 如何在UX设计中使用颜色

    颜色比眼睛更具说服力。作为视觉语言的组成部分,颜色突出显示,引导注意力并统一元素。在UX中,颜色增强了产品的功能和...

  • Microcopy: 短句对UX的巨大影响

    在想设计出色的用户体验之时, 很容易就会想到很多包含的元素. 字体, 颜色, 操作流程, 内容显示. 但UX设计中...

  • UX体验设计之旅(三)_CX、UX、UI三者的异同点解析_201

    UX设计中的几个关键词:CX、UX、UI CX_Customer Experience :顾客体验设计;UX_Us...

  • Sketch 基础学习(2)

    了解了关于颜色的基本概念之后,这一节我们来看如何在App的布局设计中使用颜色。通常,在一个UI中,我们应该使用两类...

  • UX设计师就业前景分析

    2016年,UX设计师的职位可谓是炙手可热。据观察,UX设计师岗位的需求仍处于持续增长中,以至于UX设计现如今成为...

  • 创建调色板11个的技巧

    无论你是新手还是老手,如何在最有争议和难以捉摸的设计中使用颜色。 颜色具有多种文化,社会和情感的意义,设计师的选择...

  • Failure Mapping in UX--UX设计中的失误地

    UX设计中的失误地图 在过去几年中,“用户体验(UX)”、“用户旅程”、“视觉样式指南”和“交互式设计模式”-针对...

  • 这才是用户体验设计

    前言 UX(User Experience)通常指用户体验设计。 UX包含六个要素:1)设计师;2)体验(UX设计...

  • 如何在UI设计中使用颜色

    颜色就像其他所有东西一样,最好是适度的去使用它。如果你在配色方案中坚持使用最多三种原色,你将会获得更好的效果。在设...

  • UX设计师面试前,先准备好回答这些问题

    UX设计师的职责范围因不同的公司有不同,国内大公司对执行的UX设计师会着重考察设计技能,如腾讯特别会抠细节,作品集...

网友评论

      本文标题:如何在UX设计中使用颜色

      本文链接:https://www.haomeiwen.com/subject/isxgrktx.html