产品案例

您的位置:主页 > 产品案例 >

作为设计师如何弄懂配色可访问性设计?

时间:2018-11-07编辑: admin 点击率:

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

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

  数字产品的可访问性落实到产品维度上,存在于许多不同的方面,而色彩是其中和设计连接最紧密的部分。对于有视力障碍的用户而言,色彩的可访问性和他们的体验息息相关。这其中,色弱和色盲用户占据了相当大的比例。

  根据世界卫生组织2017 年的调研:全世界有2.17亿人,患有中度乃至重度的视力障碍。仅凭这一统计数据,就足以说明数字产品可访问性的重要性。

  让数字产品具备可访问性,不仅仅涉及到基本的道德,而且也存在潜在的法律问题和影响。2017年在美国境内,总共发生了814起针对无法访问或者可访问性较差网站的联邦诉讼,凯时娱乐下载,其中甚至包括一部分集体诉讼。

  各个组织都曾经试图建立可访问性设计的标准,其中最著名的是美国联邦可访问性委员会(第508条)和W3C,以下是相关标准的概述:

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

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

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

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

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

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

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

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

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

  最后,创建可访问性良好的色彩系统,最重要的方面,是要让你的团队能够在需要的时候,能直接拿来使用,并且每个人都能够用在对的地方。系统化地设计配色系统,不仅能够减少混乱,还能够在整个团队范围内确保可访问性的一致。

  根据我的经验,在UI Kit 和设计系统中直接标识出固定的组合,以及相应的可访问性等级,这样是最有效的。此外,使用 InVision Craft 或者 InVision DSM 等工具作为团队协同,是非常有帮助的。

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

联系我们

CONTACT US

网址:http://www.albohera.com

电话:0427-799930377

联系人:ag环亚娱乐平台总经理

地址:ag88环亚国际娱乐平台

Copyright © 2017 ag环亚娱乐平台_ag88环亚国际娱乐平台_环亚国际app_ag88.com All Rights Reserved 网站地图