面向色盲的设计

本文是翻译,版权归原作者所有



每次有人发现我是色盲时,我常常产生同样的疑问:「这是什么颜色」?95%的情况下,我能够正确地回答,随之而来的是,「等等,如果你能辨认出{某颜色},那么你怎么会是色盲?你看到了什么?」。这就是解释色盲运作原理以及对我产生影响的乐趣所在。

做为设计师,我们总是担心易读性、内容质量、目标效果是否足够大、或者用户是否能够走通整套工作流。但是我们经常容易忽视,每十个人当中就有一个人是色盲。有太多次,我下载了某个 app 或游戏时,才意识到用起来十分痛楚。我经常无法区分某个对象、或无法确定某些地方该怎样打标签。

如果十分之一的用户觉得你的 app 体验不好、甚至根本不能使用,那么你的评分和评论将显著下降。我们又该如何针对这个问题做测试呢?我们怎样修复这些问题呢?我们该从哪里着手才能阻止这种问题发生呢?

我们「看待」问题的方式

色盲不代表我看不到任何颜色。我的生活不缺乏色调;透过我的双眼看世界,毕竟不同于观看希区柯克的电影。

我没有错失任何颜色——我都能看到它们。我只是在标注或区分它们上有困难。当树叶在秋天改变颜色时,我常常看不到红色和橙色、黄色。我或许只看到了橙色、或有时候,我难以觉察到变化,而认为树叶直接从绿色变成了褐色。也就是说,在设计 app 时,我们应该不要局限于单个颜色是否「可见」,而是放眼于一组颜色,看看它们是否可区分清楚。甚至我们可以需要更多的视觉辅助,以确保用户不会把一种颜色误解为另一种颜色。

成功的 app

某些 app 和程序为了照顾色盲群体,做了大量卓越的工作。Trello,基于 web 的应用程序,帮助用户组织任务,投入了巨大精力,让用户可以激活色盲模式。这些小功能让我这样的用户快速区分标签。

[caption id=”attachment_2210” align=”alignnone” width=”600”]Trello 针对色盲用户来区分标签的解决方案 Trello 针对色盲用户来区分标签的解决方案[/caption]

另一个 app 是 Two Dots,它是一款游戏,要求把颜色相同的点连接起来,它也有色盲模式。当我刚开始玩这款游戏时,我玩得非常缓慢,对于分配的任务,难以在任何级别胜出,因为我无法轻松地辨认有着不同颜色的点,不能创建组合。然而,色盲模式在每个点上增加了额外的一层分类,在发现该模式之后,游戏可用性就强多了。我不必再完全依赖颜色,而是通过连接符号来玩游戏。

Two Dots 的色盲模式

[caption id=”attachment_2212” align=”alignnone” width=”600”]Two Dots 的色盲模式 Two Dots 的色盲模式[/caption]

预防错误

好了,你已经做好设计、选了布局、icon、字体,还有其它方面。你只需要确定,你的色彩选择对色盲群体也起作用。但是,相较于之前的「问问你的色盲朋友、同事、未婚夫、侄子等」,你该怎么做?嗯,还有一些选择。Sim Daltonism 是一款 app,用户可以像色盲看东西一样预览他们的屏幕。如果你在预览时,遇到了辨别设计的困难,很可能我将来也会遇到。还有很多模拟色盲的 app,这只是其中一款,貌似我在强调它是我认为的、最好的 app。

另一项非常重要的测试,就是你的设计作品在单色模式下表现如何。在改善设计上,这应该是一项常规测试,但是对于将来避免我这样的人在使用你的 app 上遇到障碍,却有极大帮助。把一项设计引入单色模式,你就能看到哪些色调过于接近。如果相同色温的两种颜色(蓝和紫、红和绿、橙和红,等等)有着过于相似的色调,它们就非常难以辨认。Google 地图,使用红和绿分别代表交通拥堵和畅通,有着极大不同色调的颜色,使我能够非常明显地看到区别。

在单色模式下测试你的设计,有一种真正简单的方式(比如在 iPhone),就是进入设置,开启对灰度【注1】的可访问性。然后,连按三下你的 home 键,将触发可访问功能的开启和关闭。

[caption id=”attachment_2215” align=”alignnone” width=”600”]Google 地图显示交通拥堵的方式 Google 地图显示交通拥堵的方式[/caption]

「如果你看不到颜色,那么你怎么当设计师?」

问得好,我不知该怎么回答。我只是装作我知道我在做什么,希望我的老板不会注意到。

实际上,这稍稍简化了我的生活(至少在设计方面,不用找那么多工具了)。在设计初始阶段,我很少担心「我应该使用哪种蓝色系?」或「这种橙色好吗?」。我注重做好布局,让它在黑白色里表现良好。我通常不需要找到别的有色盲的人来检验我的色彩选择。当我对客户解释色彩选择时,我很少关注颜色名字,而是更多地放在色温或色值上面,不必再乎它们所要表达的感觉或描述,这也是我想让它们表达的。红色不一定就意味着「停止」或「错误」,但是某个特定的色温和饱和度就有这个涵义。根本就没有一种冷酷的、轻松的颜色,会对我大喊着错误。

甚至在挑选颜色方面,多少变得更容易了。在我找到一种极好的蓝色系之前,还坐在那儿混合颜料吗?没有。我期望不是色盲的那些人来做吗?没有。事实上,我倾向于偷或借走预先弄好的调色板。现在,我没有在找 app,并一个接一个地拷贝它们颜色的 Hex 值,而是找到我觉得真正不错的调色板,以找到组合并从中取样。比如,Miley Cyrus 的 MV We Can’t Stop,在我看来,有一些非常好的意境和色彩,我将偷出来。同样,还有街头霸王 (虚拟乐队)的「Stylo」【注2】。

[caption id=”attachment_2217” align=”alignnone” width=”600”]Frames from ‘We Can’t Stop’ by Miley Cyrus Frames from ‘We Can’t Stop’ by Miley Cyrus[/caption]

[caption id=”attachment_2218” align=”alignnone” width=”600”]色彩选择 色彩选择[/caption]

[caption id=”attachment_2213” align=”alignnone” width=”600”]Frames from ‘Stylo’ by the Gorillaz Frames from ‘Stylo’ by the Gorillaz[/caption]

[caption id=”attachment_2211” align=”alignnone” width=”600”]色彩选择 色彩选择[/caption]

我将找到那些有着优秀配色的照片、家具、绘画等等。它们已经创建并验证过了,它们是色彩影响力的源泉。像 Sip 之类的 app 支持你从屏幕抓取像素级的颜色样本,并应用到你的设计中。Qolor 支持你在真实环境中使用 iPhone 的相机这样做。

我为什么要阅读本文?

你没有其它要做的事情了?你正在拖延你的家庭作业?我不知道。但是如果顺利的话,这是因为你想确保你的 app 处于一种理想水平,所有人都能使用。即使只有相对较小的一部分群体是色盲,还是有必要记住设计时要照顾到他们,我们明白,最后的设计将适用于每个人,将关系到一个更加优秀的 app 和用户体验。

还有问题吗?想和我联系吗?随时给我发 tweet 以及/或查看我自己和同事的作品,我们正在 Intrepid Pursuits 上面创作。


译文:面向色盲的设计 》| 腊八粥