无障碍设计:为色盲用户多走一步

无障碍设计:为色盲用户多走一步

有这么一个人群,他们不是用户的大多数,却也有不小的占比,这个人群就是视觉辨认障碍人群,即我们常说的“色盲(Color Blindness)”。据数据统计,世界上大约有8%~10%的男性以及0.5%的女性患有不同程度的色盲。也就是说,大约每10个用户中可能就有1个是色盲用户。

什么是色盲?

提到色盲,从字面上看,我们常有一个误解,认为色盲看不到颜色。事实上,色盲并不是色觉的完全丧失,而是无法正常感知和分辨某些颜色(其中以红绿色盲占大多数)。相反,色盲可以分辩出很多的颜色,且在特定情形下,色盲者甚至要比正常辨色力者更有优势。

不少研究证明,色盲拥有极强的夜视能力,并且更擅长识别特定颜色的伪装。因为颜色信号总是容易吸引注意力,使人专注于色彩而忽略了图形。而色盲者没有“颜色过载”这个负担,他们往往能避过色彩的“噪音”发现隐藏的图形。据说第二次世界大战期间,军方就雇佣色盲者识破用迷彩伪装的敌方部署来确定轰炸目标。

如下图,你找到图中的隐藏目标蛇了吗?相信你的色盲朋友会比你更快找到。

目前色盲主要分为三种类型:

红绿色盲:难以辨认红、绿色调。包括红色盲、绿色盲、红色弱、绿色弱,且男性多于女性,因为红绿色盲是X染色体隐性遗传病。红绿色盲占色盲中的大多数。

蓝黄色盲:难以辨认蓝色和黄色,容易将蓝色与绿色、黄色与紫色混淆。包括蓝色盲、蓝色弱。蓝黄色盲占色盲中的很小一部分。

全色盲:只可见灰度的色阶分布,其眼睛对亮度非常敏感,在白天的室外需戴上深色的太阳镜保护眼睛。世界上只有极少数的人是全色盲。

TA们眼中的样子

也许了解了背景但仍然无法感同身受,日常中的所见在TA们眼中究竟是什么样子?TA们又有着怎样的困扰?

我们看看常用的APP图标在不同色盲用户眼中的呈现。

从上图可以看出常用的APP图标在不同的色盲视图中均不同程度的丢失了颜色,红色和绿色、绿色和蓝色、黄色和绿色等变得难以区分,颜色的辨认变得困难。

我们以淘宝日活为6000万用户来计算,就有大概600万的用户看到的是如下的界面呈现。

在商品详情页面中,颜色的选项呈现对于色盲用户来说要快速而准确的分辨好像并不是那么容易的一件事。

淘票票的选择座位界面,座位状态使用红绿配色对于红绿色盲及全色盲来说基本无法区分。所以除了颜色上的区分,还需要使用图形或文字等辅助形式来帮助TA们从另一个维度来识别状态。

众所周知,股票软件一般都使用红绿配色,在色盲用户眼中呈现的是下图的样子。在这样的使用场景中,无障碍设计是非常必要的。

无障碍设计案例

接下来我们需要思考的是:在设计工作中如何保证所有用户在视觉上的良好体验,消除色盲人群在色彩感知上的偏差,保障产品的可用性和易用性,无障碍设计应该如何着手?我们先来看几个案例。

高德地图,在正常模式之外,支持色盲模式。其原理是将基准色进行换色,避开色盲或色弱的不敏感区,换成其较容易感知的配色方案,来保证这部分用户同样能准确的了解路况。

UNO 卡牌,号称只用颜色和数字就能和全世界的人一起玩。然而有人提出了质疑,因为色盲用户无法准确的区分颜色。所以美泰公司今年重新设计并推出了UNO色盲特别版,采用ColorADD 标准(一个用图像去识别颜色的设计系统),每个颜色的卡牌上都加上了被设定好的特定形状,帮助色盲辨认颜色。

简单介绍一下ColorADD标准,这是由葡萄牙的一个非公益组织创立,其对颜色设定了各自的代表图形,帮助色盲辨认颜色,且能直观的说明其色彩生成的逻辑。比如三原色红、黄、蓝分别由上三角形、斜线、下三角形来标识,红+蓝=紫,即上三角形+下三角形=上下三角形;红+黄=橙,即上三角形+斜线=斜线上三角形,依此类推。

Two Dots,一款颜色消消乐游戏,同样支持色盲模式。通过在颜色上叠加图形标识,使色盲人群无须依赖于颜色,而是通过识别图形无障碍的玩游戏。

无障碍设计思路

结合案例,在设计实施过程中如何进行实际操作,可以遵循以下几个思路来寻找解决方案:

1、使用安全色谱。

“色彩理论实际上涵盖了很多东西,但其本质是通过颜色的互补、对比和活力体现在设计中的相互作用。”--Thomas Cannon

好的配色除了美观以外必须具备其实用性,而对于色盲用户来说,那些丢失的颜色将让他们迷茫不已,所以安全色谱对于色盲和非色盲人群都是易辨识的,它有着较高对比度,颜色名称容易定义,且屏显与印刷差别小。

例如,红色由朱红色代替;避免黄绿之间的颜色,因为和黄色、橙色无法区分;绿色由蓝绿色代替,避免与红色、棕色混淆……

除此之外,还可以参考以下建议:

使用单色;

冷暖色交替使用;

当使用两种或以上冷色或暖色时,需要在亮度及饱和度上有明显区别;

避免使用低饱和度和低明度的配色;

使用尽量少的颜色搭配;

在配色时,避免使用红&绿、绿&棕、蓝&紫、蓝&绿等对于色盲用户来说难以区分的配色组合。

2、颜色与图形结合

在设计中应尽量避免单独使用颜色来表示特定的意义,尝试在颜色基础上叠加形状或纹理的形式。例如前面提到的UNO和Two Dots,例如下图中图表的应用。

在股票软件中,除了用红色和绿色表示涨和跌,对于色盲用户来说,则是通过不同的柱状图形来区分,空心柱表示涨,实心术表示跌。

更好的思路是以图形为主颜色为辅,颜色与图形搭配,为用户提供多维度的识别性和记忆点。

通常图形的识别更利于用户记忆,例如AE APP首页的快速入口区,AE web首页的分类导航,通过图标与颜色的结合,将记忆点更多转移至图形记忆而非颜色记忆,能很好的解决此类问题。

3、 颜色与文字结合

使用文字予以辅助说明,当无法正确分辨颜色时通过文字说明帮助色盲用户能顺利完成操作。淘宝的商品详情页面中,为了让这类用户可以正常挑选商品,鼠标在选项上移动会显示对应SKU选项的文字说明,移动端则直接显示文字选项。

AliExpress的商品详情页支持鼠标移动显示对应SKU选项的文字注释,移动端则根据用户的选择同步显示其对应的文字。

4、提供色盲模式

为用户提供多种模式,在正常设计方案之外支持色盲模式,甚至是自定义模式。这样我们在设计中可以恣意尽情的发挥而不用局限在安全色的范围里畏手畏脚,又能通过色盲模式来保障这小部分群体同样可以无障碍的使用我们的产品,保证TA们的体验。

Trello,一款协同管理应用,支持设置色盲模式,通过在色块上叠加不同的纹理使色盲用户能快速区分不同的标签。

5、利用工具检验

“工欲善其事,必先利其器。”合理的利用工具,检验设计方案可行性,可以达到事半功备的效果。

Coblis — Color Blindness Simulator

在线色盲模拟器,上传效果图后可以很方便的切换正常、三色视觉(色弱)、二色视觉(色盲)及单色视觉(全色盲)模式,模拟出不同色盲用户眼中呈现的视图。

Photoshop也支持通过校样设置来切换色彩模式,主要支持红色盲和绿色盲模式。

Colorblind Web Page Filter

输入网址快速检验线上页面在不同色盲用户眼中的呈现。

利用移动设备检验

我们在设计移动端产品中,往往需要实时查看设计呈现在设备上的仿真效果,在这个过程中,利用移动设备自身的设置来查看色盲模式的视图,能非常直观的知道是否存在色盲用户的色彩盲区,并灵活的调整设计方案。

具体操作方法如下:

iPhone设备,进入“设置-通用-辅助功能-显示调节-色彩滤镜”,打开色彩滤镜开关,即可切换灰度、红色盲、绿色盲、蓝色盲等模式。

Android设备,进入“设置-无障碍-色彩校正”,打开色彩校正开关,即可以选择绿色弱视、红色弱视、蓝色弱视模式。

最后,无障碍设计(barrierfreedesign)是联合国组织在1974年提出的设计新主张,其强调在科学技术高度发展的现代社会,一切有关人类衣食住行的公共空间环境以及各类建筑设施、设备的规划设计,都必须充分考虑具有不同程度生理伤残缺陷者和正常活动能力衰退者(如残疾人、老年人)的使用需求。

无障碍设计首先在城市建筑、交通、公共环境设施设备以及指示系统中得以体现,进而扩展到工作、生活和娱乐。

而互联网产品的目标一直围绕以用户为中心,强调可用性、易用性以及情感化设计。作为设计师的我们,应该更好的发挥设计的价值推动商业化设计的发展与进步,为特殊人群多走一步,让设计更感人。


参考文献:

wikipedia

Color Universal Design (CUD)- How to make figures and presentations that are friendly to Colorblind people -

ColorADD

Designing For (and With) Color Blindness

A quick introduction to colorblindness

风靡 40 多年的纸牌游戏 UNO,推出了特别色盲版

An Introduction to Color Theory for Web Designers


--------- 招聘分割线 ---------

国际 UED 是阿里唯一一支国际化设计团队, 为集团的国际及国内业务提供设计支持。我们在杭州、深圳、北京、香港、美国、俄罗斯都有 Office,如果你对我们的工作感兴趣欢迎加入我们。

目前团队开放职位:

资深前端开发工程师

资深交互设计师

用户研究专家

资深视觉设计师

Content Manager

简历投递邮箱:mengya.xdh@taobao.com

如果你是无线开发工程师,我们这里也同样非常欢迎。来邮件吧!

编辑于 2017-11-16