莫b

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

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

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

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

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

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

图一:左(正常视力看到的界面)右(红绿色盲看到的界面)

 

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

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

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

图二:左(正常视力看到的界面)右(红绿色盲看到的界面)

 

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

图三:左(正常视力看到的界面)右(红绿色盲看到的界面)

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

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

图四:左(正常视力看到的界面)右(红绿色盲看到的界面)

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

 

原文地址:呆呆U理(公众号)

作者:呆呆本人

转载请注明:学UI网 » 用户体验一直在提升着人们的生活质量

登录收藏
 
你可能喜欢的:
设计进阶 | 一文带你了解最全数据指标设计进阶 | 一文带你了解最全数据指标
如何通过A/B Test,捍卫自己的设计方案?如何通过A/B Test,捍卫自己的设计方案?
从微信公号的改版聊聊内容创作从微信公号的改版聊聊内容创作
【蓝湖大咖访谈】华为UCD中心体验设计总监刘冰:体验与商业不矛盾【蓝湖大咖访谈】华为UCD中心体验设计总监刘冰:体验与商业不矛盾
产品使用体验如何量化与管理?— 阿里云 UES 全面揭秘产品使用体验如何量化与管理?— 阿里云 UES 全面揭秘
Sketch or Figma谁才是UI设计软件的未来?Sketch or Figma谁才是UI设计软件的未来?
你知道吗?产品也是有「生命周期」的你知道吗?产品也是有「生命周期」的
为什么团队的执行力差?为什么团队的执行力差?
拍一拍?抖一抖?聊一聊功能开发的意义拍一拍?抖一抖?聊一聊功能开发的意义
微信公众号改版意味着什么?微信公众号改版意味着什么?