首页  /  文章  /  经验分享  /  正文

经验分享

UI设计师对于视觉当中的配色可行性一定要重视

时间:2018-10-14  来源:互联网转载

作为 Handsome 的产品设计师,我最近和以为客户合作创建了一组强可访问性的色彩系统。相比于平时我们用到的配色,这套系统相对更加复杂,要求更高,而我也因此对于色彩的可访问性有了更加深入的了解。

可访问性为何如此重要

数字产品的可访问性对于所有人(包括在视觉、听觉、语言、肢体和认知上有障碍的用户)而言都很重要,而身为设计师和开发人员,应该将让数字产品具备足够良好的包容性,让所有人都能够从中获得好处。

可访问性良好的产品是优雅而友好的,我们理应对所有人都友好。

数字产品的可访问性落实到产品维度上,存在于许多不同的方面。而色彩是其中和设计连接最紧密的部分。对于有视力障碍的用户而言,色彩的可访问性和他们的体验息息相关。这其中,色弱和色盲用户占据了相当大的比例。根据世界卫生组织2017 年的调研,全世界有2.17亿人,患有中度乃至重度的视力障碍。仅凭这一统计数据,就足以说明数字产品可访问性的重要性。

让数字产品具备可访问性,不仅仅涉及到基本的道德,而且也存在潜在的法律问题和影响。2017年在美国境内,总共发生了814起针对无法访问或者可访问性较差网站的联邦诉讼,其中甚至包括一部分集体诉讼。各个组织都曾经试图建立可访问性设计的标准,其中最著名的是美国联邦可访问性委员会(第508条)和W3C,以下是相关标准的概述:

第508条:这指的是最早创立于 1973年的康复法案中的第508条,你可以点击这里查看详细内容。总的来说,无论是直属于联邦的网站,还是相关机构或者承包商所创建的网站,都需要有良好的可访问性。

W3C:万维网联盟(W3C)是一个自发的国际组织,成立于 1994年,旨在制定开放的网络标准。W3C 在 WCAG 2.1中概述了他们的Web 可访问性的详细标准和指南,这本质上是如今 Web 可访问性最佳实践的黄金准则。

确保产品的色彩可访问性

在整个产品研发的生命周期中,尽早考虑可访问性设计,是最好的——这样可以减少产品后期来回追溯相关设计所花费的时间和金钱。选择前期确定产品配色的时候,就需要考虑产品配色的可访问性。

以下是一些比较有用的提示,确保你的产品具备良好的可访问性:

1、确保对比度足够

为了满足W3C最低 AA 等级,你所选取的背景和文本的对比度至少要达到 4.5 : 1,因此在设计按钮、卡片和导航元素的时候,请务必确保色彩组合的对比度。

有很多工具能够帮你测试色彩组合的可访问性,不过我发现最有用的始终还是 Colorable 和 Colorsafe。我个人更加倾向于 Colorable,因为它可以使用滑块实时调整色相、饱和度和亮度,你可以直接选取特定的配色,并且确定它们的可访问性的等级。

2、不要过分依赖色彩

你还需要确保很多信息不依赖色彩来进行传递,尤其是一些关键的系统信息,它们的可访问性也是需要考量的。对于诸如错误状态、成功状态、系统警告和提示,都务必让文本信息和图标搭配起来,清楚地告知用户(尤其是视觉障碍用户)正在发生的事情。

对于图表信息,应该添加纹理或者图案,这样即使是色盲用户都可以轻松分辨它们,而不用担心色彩会影响他们对于数据的感知。Trello 的Colorblind 友好模式就做的很不错。

3、控制焦点状态对比度

虽然如今绝大多数的用户浏览网页会使用鼠标或者直接屏幕点击,但是依然会有一些运动障碍的用户,会使用键盘来进行导航。所谓焦点状态,指的是是用户使用使用键盘的「Tab」键来点击切换网页页面中不同链接的时候,每个链接周围会呈现出的描边外发光的视觉效果。

所有的浏览器对于焦点状态,都有默认的显示色彩,如果你想在后续产品中对它的显示进行调整,那么需要尽量确保它的对比度足够明显,这对于有视觉缺陷的用户而言,也能带来足够显著的效果。

4、文档和社交色彩系统

最后,创建可访问性良好的色彩系统,最重要的方面,是要让你的团队能够在需要的时候,能直接拿来使用,并且每个人都能够用在对的地方。系统化地设计配色系统,不仅能够减少混乱,还能够在整个团队范围内确保可访问性的一致。根据我的经验,在UI Kit 和设计系统中直接标识出固定的组合,以及相应的可访问性等级,这样是最有效的。此外,使用 InVision Craft 或者 InVision DSM 等工具作为团队协同,是非常有帮助的。下面是如何记录各种配色组合以及配色可访问性评级的示例。

结语

今天所谈到的,其实更多是关于可访问性这个事情的一些大概技巧。但是,如果你考虑这个问题,那么最值得参考的,就是 W3C 中的 WCAG 2.1 ,其中包含了最专业而详尽的说明。虽然这些指导方针看起来有点令人生畏,但是它们能够帮你更加深入的了解可用性设计。

在上文中所提到的一些设计资源在此:

Colorbox: Lyft 最新的配色工具,旨在创造可用性良好、可扩展的配色系统。

Designing Systematic Colors by Jeeyoung Jung: 提供一种非常有深度的方法供你创建可用性良好的配色系统,如果你正在为多产品设计配色,那么它将非常有用。

Colorable: 这是一款非常实用的、用来评估配色可访问性的工具。

Colorsafe: 高可访问性配色生成工具。

Color Oracle: 色盲模拟器,适用于 Windows、Mac 和 Linux。

特别说明:本站所收集的素材版权归原作者所有,在此仅供学习参考,请勿用于任何商业用途!

扫一扫加公众号(uibaba)