色盲在左,设计在右

2018-08-06 13:05:07 浏览数 (1)

每次人们发现我是色盲后,总会问我同样的问题:“所以,这个是什么颜色?”95%的时候我都回答正确,紧跟而来的是,“等等,如果你能分辨这是{插入颜色},那么你怎么可能是色盲?你都看到什么了?”解释色盲的原理的乐趣就来自这里,同时也对我的职业道路产生了很大影响。

作为设计师,我们不断担心着易读性,内容是否吸引人,期望的目标是否足够大,或者用户是否能够正确完成一次使用流程。但我们经常忘记一点,十个人中就有一个是色盲。很多次我下载了一款应用或者游戏,使用的过程却带来了巨大的痛苦。我总是无法区分两个对象,或者辨别出是否有标签。

如果每10个用户中有1个发现你的app很难或者根本无法使用,你的评分和评论将大幅度下降。所以,我们应该如何做测试?我们要怎样修复这些问题?并且,我们怎样才能阻止这些问题再次出现?

我们在何处‘看到’问题

色盲并不意味着我看不到任何颜色。我的生活并不缺乏色彩;通过我的眼睛看到的世界并不是黑白电影。

我不会错过任何颜色——所有的我都能看到。我只是很难标记出他们或者区分开来。当树叶在秋天变了颜色,我并不是总能看到红色、橘色和黄色。我可能只看到橙色,或者有时候,我几乎注意不到颜色的变化,直接就从绿色看到棕色。这就是说,在设计应用app时,我们不应该仅仅注意到个别的颜色,观察它们是否‘可见’,而是应该将颜色分组,观看每组颜色之间是否有区别。即便如此,我们可能需要更多的视觉效果,以确保用户不会将两种颜色弄错。

成功的应用软件

一些应用和程序已经开始针对性得为忍受色盲的人们做优化,并且效果不错。Trello,一款基于web的任务管理类应用程序,就做出的非常棒,它能让用户激活色盲模式。这一小小的功能让用户,比如我自己,能够快速得区分不同的标签。Trello

Trello让色盲用户区分标签的解决方案

另一款app,Two Dots,一款以连接同样颜色的两点为核心的游戏,也有色盲模式。当我第一次开始玩游戏,我的进度十分缓慢,几乎无法战胜任意难度的关卡。因为我无法轻易识别不同的彩色圆点,所以我很难创建组合。后来我发现了色盲模式,通过符号在圆点上增加额外一层分类,游戏变得容易多了。不必依赖严格的色彩区分,我可以通过连接符号来玩游戏。Two Dots

Two Dots的色盲模式

防止错误

所以,你已经完成了所有的设计、选择布局、图标、字体。你只需要你的色彩选择让色盲患者能正常使用产品就可以了。但是,除了明显的‘问你的色盲朋友、同事、未婚夫、侄子等等’,你还可以怎么做?好吧,还有一些选项。这是SimDaltonism,一款让用户能够预览屏幕的手机应用,用户能够像色盲人群一样浏览。如果你通过这款应用预览后,发现很难区分设计上的差别,大多数时候,我也是如此。现在有很多色盲模拟应用,这款只是看起来更匹配我所看到的。Michel Fortin

另一个非常重要的测试是观察你的设计的单色效果如何。你在设计的时候应该定期执行测试,但是这可以让我这样的色盲用户不必麻烦地使用你的应用。单色设计可以让你了解哪些色调靠的太近。如果两个同种色温的颜色(蓝色和紫色、红色和绿色、橙色和红色灯)有着类似的色调,它们就极难分辨。谷歌地图,除了使用红色和绿色来区分拥堵和顺畅,还使用多种不同的色调,让我能更好的区分差别。

还有一种简单的单色设计测试方法,就是进入你的手机“设置”,然后打开辅助功能的灰度。这么做后,按三次你的home键,可以触发辅助功能的打开和关闭。Use Accessibility features in iOS

谷歌地图显示交通拥堵的方式

“但是看不到颜色的话,你怎么能成为设计师呢?”

问的好,我也不知道。我只是假装知道我在做什么,然后希望我的老板不会注意到。

但事实上,它让我的生活变得容易一点(至少在设计方面)。在初学设计的时候,我很少会去担心‘我应该用那种蓝色阴影’或者‘橘色和这种颜色搭吗?’。相反,我把重点转到布局是否良好,能否适用于黑色和白色。我通常不需要去找另一个色盲朋友帮助我验证颜色选择。当我向客户解释颜色选择时,我不太专注于颜色的名称上,更多的是关于色温或者颜色值,这些颜色是否能促进或说明我想要的感觉。红色并不一定意味着着‘不’或‘错误’,而是特定的温度和自然饱和度起到这一效果。我从来不会判断错清凉、放松的颜色。

Nothing about a cool, relaxed color screams error to me.

即使挑选合适使用的颜色也会变得更容易。我会坐在这里混合涂料,直到我找到一个完美的蓝色阴影吗?不会。我会期望那些正常视觉的人做到这一点吗?不会。事实上,我倾向于借用预制的调色板。现在,我不会寻找应用并原封不动的复制它们的颜色,相反我会寻找那些有着不错调色板的构图,并从中抽样。例如,Miley Cyrus为‘We Can't Stop'做的MV,在我看来,就有许多很棒的图像和颜色。我会从那偷东西。Gorillaz的‘Stylo’也是这样。

Frames from ‘We Can’t Stop’ by Miley Cyrus

颜色选取

Frames from ‘Stylo’ by the Gorillaz

颜色选取

我会找到有非常棒的色彩搭配的照片、家具、绘画。这些既定和验证过的作品是颜色影响的重要来源。LikeSip这款应用允许你从屏幕抓取像素级别得到颜色模板,然后在你的设计中使用。Qolor可以让你在现实世界用iPhone的摄像头拍摄照片,也能获得颜色模板。Mac App StoreQolor

所以,为什么我要读这个?

你没别的事可做了吗?你忘记你的家庭作业了吗?我不知道。但我希望,这是因为你想要确保你的应用处于最佳水平,供所有人使用。即使只有一小部分人是色盲,我们就要在设计的时候考虑进去。而且,如果我们将这类人群放在心里,当我们选择颜色的时候,我们就知道最终的设计将适合每个人,从而带来更好的应用和用户体验。

原文作者:Aaron Tenbuuren Designer, Illustrator & Cat Owner

0 人点赞