用户体验一直在提升着人们的生活质量

Sponsor

WCAG 提出：颜色不应作为传达信息、指示操作、提示响应或区分视觉元素的唯一手段。

注解：Web内容无障碍指南（WCAG），涵盖范围广泛，涉及了一些建议，这些建议可使网站内容更容易访问。遵循这些原则，Web内容更易为广大残疾人士所接受，这些包括盲人和低视患者、聋人和重听人、学习障碍、认知障碍、行动不便、言语残疾、光过敏患者和这些病症的复合患者。遵循这些原则也可让普通用户更容易访问您的网站。

——

最近在做一个项目，内容涉及到颜色与色盲用户群体的关系，同时，让我更深刻理解了这句话的意义。

WCAG 中提到，大约每 20 个人中就有 1 个人存在某种视觉缺陷。

对于这些人来说，世界看起来与众不同，他们常常很难区分红色和绿色，或其它情况。这通常意味着他们有时看不到「普通人」可以看到的东西。

而我在做的项目的品牌色是红色，企业给到的数据显示，用户群体中存在不少红绿色盲用户。通过模拟红绿色盲插件发现红绿色盲看到的界面，和我们正常视力看到的界面确实差异挺大。

图一：左（正常视力看到的界面）右（红绿色盲看到的界面）

WCAG 提出：颜色不应作为传达信息、指示操作、提示响应或区分视觉元素的唯一视觉手段。

这个标准的目的是让设计师通过各种手段，确保所有用户都可以理解各类信息所传达的意思，但如果信息只是通过图像中的色差区分传递，视力存在缺陷的用户可能看不到该颜色。在这种情况下，通过另一种手段提供被传达的信息，可以确保看不见色彩的用户仍能感知到该信息。

为了强化有视力障碍的人群所看到的按钮操作状态，在做页面改版的时候，我除了对按钮选中状态做了颜色区分之外，还加了图形来表示被选中的状态。

图二：左（正常视力看到的界面）右（红绿色盲看到的界面）

通过红绿色盲模拟器，可以看到，红绿色盲用户对按钮选中状态的图形感知，看起来并没有很强。于是又有了图三的方案。强化按钮选中状态的颜色。

图三：左（正常视力看到的界面）右（红绿色盲看到的界面）

图三的按钮选中状态，可以看到，不管是正常视力还是红绿色盲视力看到的页面，按钮的颜色对比都很强烈。

不过如果产品的受众中，有视力障碍的人占比高的话，还可以把两种方法结合起来。即：通过色彩变化结合其他方式，来强化产品想要传达的信息。

图四：左（正常视力看到的界面）右（红绿色盲看到的界面）

这里除了颜色变化，还加了 icon 的状态变化，以便于让用户更易察觉按钮的变化。类似于一些红绿灯，除了颜色，还有图形。

——

虽然只是一个按钮选择的变化，但里面的含义很多。

之前住的公寓，它的电梯很有意思。公寓楼层一共 11 层，电梯在没人的时候总是会自动将两个电梯分别停在 1 楼和 6 楼，几乎每次我要坐电梯，都能看到这样的现象。

有一次在电梯里碰到物业，就随口问了句，这电梯是自动停在 6 层的么？他说是的，专门负责电梯运维的公司说是有相关数据，这样能最大化提升用户坐电梯的效率。

我想的是，为什么不是分别停在 3 楼和 8 楼效率更高呢？无从得知，可能人家有可以验证这个结论的数据吧。

不知道是现在的电梯都是这样还是如何。看到这样的事情，感受到生活中各类事物的体验都在不断提升。挺好。

——

类似的还包括前阵子看到的一个视频。

视频中的男主叫琼斯，与该校的校长一样，患有严重的色盲症，之后校长把自己的特殊眼镜给琼斯带上，当 12 岁的琼斯第一次看到了带有各种色彩的世界，这位大男孩在课堂上流下了泪水。

视频很短，只有十几秒，但是看完后很感动。

我们都知道科技改变了人们的生活，而恰恰是设计师，利用设计的手段发挥了部分技术的作用，让它们得以服务于人。想到我们作为互联网的从业者，能够通过产品功能的设计来解决人们的难题，这常常能让我收获一点浅薄的成就感（虽然对于社会的发展来说不值一提）。

前田约翰在 2009 年的一次 TED 演讲中谈到：当前的问题不是如何让世界更加科技化，而是如何使世界重新变得更加人性化。

作为设计师，我们不能仅满足于表象，还应该学会在生活中去体察设计的语言，思考这些产品、功能、界面背后的逻辑。

按钮的颜色变化？图形的选择？电梯自动停靠的楼层？红绿灯为什么要有图形？等等。

埃默·托尔斯问过读者一个问题：

坐火车出行的时候，你有没有看着一路的风景从窗外接连不断地掠过呢？你有没有和同行的旅客交谈，有没有在车轮的滚动声中昏昏入睡呢？

接着，你有没有，哪怕很短的时间，想过那些煤是怎么到火车的内燃机里去的？当火车穿过森林，或者是爬上陡坡的时候，你有没有想过那里的铁轨是从何而来的呢？

希望读完这篇文章，能让你有所收获。

谢谢阅读：）

WCAG 资料：https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

作者：呆呆U理，微信号：UDai-bl

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。