公司新闻 您现在的位置: 官网首页 > 新闻资讯 > 公司新闻 >

以人为本,为颜色障碍用户打造人性化设计

发布者:admin 发布时间:2019-12-10

为色彩妨碍者规划,其实便是遵从以人为本的规划准则。色彩妨碍者是一群特别的集体,他们对某一种或多种色彩有视觉妨碍,但许多规划中却没有考虑到色彩妨碍者的需求和困难。通过阅览这篇文章,了解规划应怎么考虑色彩妨碍用户体会。

咱们调查色彩的办法是相同的吗?

请看上面这张图,假如你看到了数字21,或许没看到任何数字,那么你或许有某种色彩辨认妨碍。

以人为本,为色彩妨碍用户规划

色盲色弱测企图

据估计,每 12 名男性中有 1 名患有某种方式的色盲,而女人每 200 名中只要 1 名。在英国,这意味着有大约 270 万人受影响,这是相当大的一部分人口,但咱们在规划网站和用户界面时常常忘记他们。

在咱们团队所做的项目中,咱们会考虑每个项目的用户体会和可拜访性。

咱们运用各种东西和技巧来协助咱们了解视觉妨碍,并运用这些常识让咱们的网站愈加有用,而且考虑色盲用户的感触使其不会懊丧。

色彩辨认妨碍的类型许多,严峻程度各不相同。

群众遍及误以为色彩辨认妨碍的人只能看见黑色和白色。即便这或许是真的,单色性是十分稀有的,预估每 3.3 万人人中有1名受影响。这种严峻的视觉妨碍使人们看东西都呈灰色彩。

要记住一个重要的要素,关于大多数色彩辨认妨碍患者来说,区别不同色彩并不困难,真实会导致问题的是分辨出类似色彩的明暗程度之间的差异。

以人为本,为色彩妨碍用户规划

正常视力与单色盲、赤色盲、绿色盲

而更常见的状况是红绿色辨认妨碍,分为两组。

长期以来,色彩辨认妨碍所带来的困难不只在网站规划中被疏忽,而且在电视、电影,特别是电子游戏中也常常被疏忽了。有许多用户无法玩游戏,或许因为患有色彩辨认妨碍的人无法辨认重要的UI元素而导致游戏难以持续。

以游戏《巫师3》为例:

以人为本,为色彩妨碍用户规划

当切换成红绿色盲视角的时分,地面上的赤色符号简直看不见了

这款游戏的特色,是能够运用增强感官的功用来追寻气味、追寻足迹和寻觅头绪。但是,游戏开发者挑选深赤色作为符号,所以有许多用户诉苦他们看不清楚这些符号。

简略的色彩更改或更改色彩的选项,或许会让游戏变得愈加简略上手。

因为视觉妨碍人口份额很高,色彩辨认妨碍用户是一个需求认真对待的问题。假如您的网页或运用程序没有通过特别的优化,您或许会失掉许多用户。

例如,假如用户因为色彩抵触和缺少比照而不能区别一系列的图标,用户就会感到懊丧并找其他网页或运用服务来替代您的网页。假如这成为每一个患色彩辨认妨碍的潜在客户的阅历,您将会失掉 8% 的潜在销售额——关于具有1千万英镑收入的公司而言,该公司会丢失 80 万英镑的巨额销售额。

即便色彩辨认妨碍会给运用者构成很大的困扰,但其实很简略战胜。假如你认识到了这个问题,那么你就成功了一半。

以人为本,为色彩妨碍用户规划

比照色的运用

即便是患有单色辨认妨碍的人依然具有比照感——明暗之间的份额差异。

为保证您的网站使有视觉妨碍的人更有可读性的,您有必要保证您的内容和布景构成鲜明比照。例如,白色布景上的黑色文本具有较高的比照度和可读性,而白色布景上的黄色文本则比照度较低,即便是对有全彩视力的人来说也相同简直不可读。

以人为本,为色彩妨碍用户规划

同一色彩不同明度的运用

单色配色计划运用一种色彩的不同明度作用,好过运用多种不同色彩。这将有效地削减用户与色相相关的挫折感,也是在规划中表现色彩比照的好办法。

单色配色计划纷歧定是黑色和白色,而是运用不同明度的蓝色,咱们在完结可读性的前提下,也完结了视觉上的愉悦感。

以人为本,为色彩妨碍用户规划

运用规划软件切换不同类型的色盲形式

Adobe Photoshop 中的色盲模仿

许多免费东西能够模仿色盲的所在环境,让您了解色彩辨认妨碍的人将怎么看待外部环境,以保证您的用户界面按您的预期作业。Photoshop 有自己的校验设置功用,只需进入查看 校验设置,而且您能够挑选赤色盲和绿色盲两种状况。完结测验后,只需求切换回监测 RGB 即可。

Sketch 中的色彩辨认妨碍者模仿

不幸的是,Sketch 色彩测验没有原生支撑,但各种插件能也能让您进行色彩校验。

咱们引荐 Color Oracle,这是一个免费插件,能够实时显现具有常见色觉妨碍的人看到的事物。

以人为本,为色彩妨碍用户规划

Color Oracle,图片来历:http://colororacle.org/index.html

浏览器中的色盲模仿

咱们用谷歌浏览器增加一个被称为“I want to see like the colour blind”形式)的插件,这会让您在实时网站或测验环境下模仿色盲。这关于色彩和比照度测验是一个便当的东西,因为它供给包含完好的多视觉形式,包含单色彩辨认妨碍者等。

不幸的是,作为规划师,咱们在规划中运用的色彩并不总由咱们自己决议,有时分咱们遭到品牌标准的约束。但在或许的状况下,正确的做法是在树立品牌之前挑选和测验你的主色和次色。

下面的图表列出了您应该防止运用的色彩组合。

以人为本,为色彩妨碍用户规划

防止运用色彩组合图

假如有疑问,请防止运用这些配色,去挑选简略的黑色/白色,强色彩比照的配色计划。

在规划图形和图表等内容时,能够考虑运用纹路或视觉图画来协助区别两种色彩。

例如,下面的饼状图。

赤色盲用户很或许因为色彩类似而难以区别不同区域。但是,假如咱们增加一些简略的纹路或图画,图表的可阅览性会进步 100%。

以人为本,为色彩妨碍用户规划

增加纹路和图画,可进步图表阅览性

在规划表单和杂乱界面等元素时,不该仅运用色彩作为提示。

以下面的图表为例,左面的图表仅运用色彩作为提示导致过错操作。全彩视力的人能看到邮箱字段已变成赤色,表明存在某种过错。而关于绿色辨认妨碍者来说,正确字段的绿色和过错字段的赤色就无法区别。

处理此问题的最好的办法是运用某种图标、符号或标签去提示过错,就如同下图所示。

以人为本,为色彩妨碍用户规划

是否运用符号作为提示标志

在这学到的最重要的一堂课是:除非你保证色彩辨认妨碍者能够区别你所挑选的色彩,不然你不该运用独自的色彩提示表明重要的东西。假如能够,运用图标、文本、形状、纹路或许其他视觉提示以及强比照色来向用户传递信息。

有许多办法能够测验可拜访性,但是这些东西并不总是彻底精确、终究看规划是否合适的最佳办法,是履行真实的用户体会测验。

你或许知道或人是色彩辨认妨碍者,为什么不让他们来查看你的规划呢?

 

原文作者:Jack Innes

原文地址:https://sidigital.co/blog/designing-for-colour-blindness

本文由 @三分设 翻译发布于人人都是产品司理,未经许可,制止转载。

题图来自 Unsplash,根据 CC0 协议