[#2] 以人为本,人人受益:包容性设计实践指南 - 考量

[#2] 以人为本,人人受益:包容性设计实践指南 - 考量

这个系列文章讲解的是我正在谷歌内部推行的「包容性设计流程」,是一份以最简单明了的方式帮助设计师系统性地上手操作的指南。

前情提要:

[#1] 介绍与理解zhuanlan.zhihu.com图标


目录

0. 介绍:包容性设计是什么?我为什么应该关心?
1. 开始设计前:理解
2. 设计过程中:考量
3. 设计结束后:验证与记录

这篇文章是三部曲中的第二部,讲的是第2章(设计过程中:考量),也是这个系列里最值得设计师在工作中反复参考的一部资料。


--- 2 设计过程中:考量 ---

2a 采用包容性使用场景

在刚开始构思你的产品的时候,相信你一定会在脑海中规划它的一些使用场景和流程。比如说,如果你在设计一个相机app,你会考虑用户自拍的时候怎么拍、旅行的时候拍风景要怎么拍、选择滤镜怎么选,等等。

我建议设计师在这个阶段也要考虑到一些更加多元化的使用场景。这样不只是会让残障用户能够使用你的产品,也能让健全用户在更多场景下使用起来更加方便。

包容性使用场景图例

常见的一些包容性使用场景有:

  • 开车的时候试图用手机:视觉受限、肢体行动受限、注意力受限
  • 坐颠簸的公交/地铁:手指灵敏度受限、容易误触
  • 在嘈杂的餐馆里:听觉受限
  • 大太阳天:手机亮度不够并且反光、视觉受限
  • 出国旅游语言不通:口头沟通受限
  • 买东西时拎着大包小包:手部行动受限

---

案例1: 相机 + 肢体障碍
包容性使用场景:用户骑自行车的时候想录第一视角的风景视频
对应残障:手臂截肢的用户想录像
解决方案:语音操控,大喊“开始录像”或“停止录像”来操作相机(大疆灵眸运动相机的语音操控功能)


案例2: 相机 + 视觉障碍
包容性使用场景:用户想自拍一张闭眼低头的文艺照片
对应障碍:盲人用户想拍照
解决方案:当用户的脸移出画面的时候,用声音(叮—)或语音提示用户“画面里没有人物”


使用这种包容性场景的构思方法,会让你的产品对各种用户都更加实用。

---

以下是我做的一套完整包容性场景参考图表,其中包括在构思解决方案的时候,对应每种障碍类型可以采用的对策设计。

这个障碍对照框架来自我的同事Melissa Barnhart,安卓无障碍用户研究员。

在文章最后可以找到为读屏软件提供的纯文字版

2b 确保设计符合无障碍规范

网上可以找到不少无障碍规范的资料,比如Google Material Design的无障碍板块,或者Apple Human Interface Guidelines的无障碍板块,当然还有最权威的WCAG web内容无障碍指南

但是,现有的中文资料比较少,大多过于长篇大论不好操作,而且很多内容是为了工程师写的,设计师看了只会一头雾水。

在这里,我列出了我认为最重要、也是在设计过程中最容易做到的7项无障碍必备设计规范:

  1. 所有文字和图标清晰可读
  2. 可点击区域足够大、之间距离足够远
  3. 排版可以应对大号字体设定
  4. 不依赖颜色来区分信息
  5. 提供有描述性的链接
  6. 如果有需要精准操作的手势,确保有其他方法可以做到同样功能
  7. 提供暗黑模式的设计

这7条,其实在设计阶段都是很容易就可以做好的。但是,如果等到产品开发完毕、QA再来报无障碍bug的时候,往往就已经很难再修好了,所以一定要在开始做设计的时候就考虑好。


01 - 所有文字和图标清晰可读

为什么要做到?

对于有 视觉障碍阅读障碍、或者 学习障碍 的用户来讲,清晰度能够直接决定他们是不是能用你的产品。

我要做什么?

清晰度可以细分为以下3项:


a) 尺寸:越大越清晰

  • 尽量避免使用14号以下的文字。
  • 确保图标清晰可读(不同复杂度的图标,尺寸标准会不一样,请自行斟酌)
本图片按照手机浏览尺寸制作。正确答案:字号合理,按钮可见尺寸足够大;错误答案:字号太小,按钮图标太小


b) 粗细度:越粗越清晰(尺寸不会太小的情况下)

  • 避免使用细/极细的字形,除非字号足够大(~24号以上)
  • 避免使用极细描边的按钮和图标
  • 避免在12号以下的字使用粗体,因为太小的字号下粗体会不容易读(中文字形复杂更是如此 ,中文避免在14号以下使用粗体)
  • 非必须情况,尽量不要使用斜体、下划线、与全大写,因为这些字形处理也会降低清晰度
正确答案:使用普通或粗体字形,使用粗细合理的描边;错误答案:不必要地使用细字形、斜体、下划线、全大写、细描边的图标和按钮


c) 色彩对比度:对比越高越清晰

使用WebAIM色彩对比度检查器(或类似产品)来检测你的文字和重要图标的对比度。

色彩对比度测量的是前景颜色和背景颜色之间的明度差。最低为1:1(黑字放在黑色背景上)、最高为21:1(黑字放在白色背景上)。

请使用色彩对比度在4.5:1或以上的的配色设计。
这个标准来自WCAG AA规范,代表轻微视力下降者可看清(80岁老人的平均视力)。

字号足够大(>18号,或粗体>14号)时,对比度标准降低到3:1

另外还需要注意:

  • 避免在图片上叠加文字,除非你能保证图片背景颜色单一且对比度足够高
  • 纯装饰性的内容(比如产品logo)以及不可用状态下的内容,不需要达到对比度标准。
正确答案:使用高对比度颜色;错误答案:颜色对比度过低


色彩对比度这一项,设计师非常容易触雷

很多我们认为“看得清”的设计,其实只是“一个视力良好的年轻人、坐在环境良好的办公室里、使用高质量的显示器的时候看得清”的设计而已。

答应我,不要理所当然地使用配色,一定要先用色彩对比度检查器确认一下,好不好?


02 - 可点击区域足够大、之间距离足够远

为什么要做到?

对于有 视觉障碍 或者 行动障碍 的人来讲,精准地点击一个按钮是比较困难的。又小、距离又近的按钮非常容易误触。


我要做什么?

  • 确保所有按钮的可点击尺寸在平台标准的最低尺寸以上(电脑:44x44px,安卓:48x48dp,iOS:44x44pt)
  • 如果按钮尺寸不是非常大(100x100以下),确保不同按钮之间至少有12px/dp/pt的空隙
红色边框表示可点击区域。正确答案:按钮尺寸足够大、距离足够远;错误答案:太小太紧凑的按钮

要记得,按钮的可点击尺寸是可以大过视觉尺寸的(参考上图的帮助图标)


03 - 排版可以应对大号字体设定

为什么要做到?

有视觉障碍的用户可能会把手机或者电脑的字号调得很大。你需要保证你的设计在大字号的情况下不会崩坏。

我要做什么?

做设计的时候,使用1.5倍大的字体测试你的设计(1.5倍只是个笼统的建议,实际用户可能会用更大或者更小的字)。如果有需要的话,调整你的页面排版,让它可以应对大号字体。

正确答案:字体放大后,排版仍然可读了;错误答案:排版太紧凑,导致大号字体时页面不可读

04 - 不依赖颜色来区分信息

为什么要做到?

色盲用户可能无法区别不同的颜色。

我要做什么?

  • 在使用颜色区分信息时候,尽可能添加文字或图标标签
  • 无法添加标签的时候,在同一版面内提供带有图案的色盲友善模式(不要把它丢到产品设定里,没有人找得到)
正确答案:使用颜色区分时添加图标标签、
提供色盲友善模式;错误答案:仅用颜色来区分不同信息

注:不同明度颜色的区分是可以使用的,比如 黑色vs浅黄色,即便色盲导致无法区分色相,也仍然可以看得出明度的差别。


05 - 提供有描述性的链接

为什么要做到?

使用读屏软件的用户会直接跳到不同链接,这时他们是读不到链接前后的文字的。如果链接本身没有描述性,他们会不知道这个链接是干什么的。

我要做什么?

写出可以被独立理解的链接文字。

正确答案:可以独立理解的链接文字;错误答案:没有描述性、无法独立理解的链接文字

06 - 如果有需要精准操作的手势,确保有其他方法可以做到同样功能

为什么要做到?

对于有 肢体障碍 或者 视觉障碍 的用户来讲,精准的手势是很难做到的(比如在手机主页面拖拽图标来重新排列图标、使用验证码的时候滑动一个滑块等)。需要给他们提供别的方式来做到同一件事。

我要做什么?

在你的app的另一个地方(比如某个菜单里),提供可以直接点击来操作的使用方法。

Gmail用例图示:除了滑动归档一封email之外,也有一个菜单按钮可以归档它

07 - 提供暗黑模式的设计

为什么要做到?

苹果(iOS + Mac OS)、安卓、Windows、Chrome OS等主流操作系统都已经全面推出暗黑模式的支持。除了主流用户喜欢在黑暗的地方使用起来眼睛不吃力之外,这也是一个对无障碍非常友善的功能。

很多低视力用户会出现眼睛容易疲乏、或畏惧强光的现象,暗黑模式会让他们使用电子设备的时候眼睛更加舒服。

我要做什么?

提供明亮模式和暗黑模式两份设计图。记得大部分插图也要特别提供暗黑模式版本。关于把明亮模式的设计转换为暗黑模式具体怎么做,可以参考这篇文章:

Z Yuhan:暗黑模式的8个设计要点zhuanlan.zhihu.com图标
Google Drive用例图示:暗黑模式的完美适配:除了文字和UI组件的颜色调整之外,插图也做了暗黑处理


除了以上7点之外,还有很多别的规范需要注意,但是那些情况发生得比较少,解释起来也比较麻烦,我改日再细谈。

这些规范包括:

  • 用户操作产生的视觉反馈需要离操作的地方很近
  • 如果有只通过声音来传达的信息,需要提供字幕或文字描述
  • 如果有语音输入,需要提供替代的键盘输入
  • 语音输入入口需要容易发现
  • 延时自动消失的信息需要提供可以增加延时的方式
  • 动画需要符合无障碍动画标准

这些解释起来比较费口舌,这里就不详细说明了,如果你感觉你的设计和这些规范有关,欢迎来问我。


2c 使用无障碍设计相关工具

市面上有很多设计工具,可以在你进行设计的时候,帮助你更好更方便地做出无障碍友善的设计。


01 - WebAIM色彩对比度检测工具

webaim.org/resources/co

WebAIM色彩对比度检测工具截图

输入你的设计的前景色(文字或图标的颜色)和背景色,可以检查你的色彩对比度是否符合无障碍设计规范。

WCAG AA是最低无障碍规范标准(相当于80岁老年人的平均视力可以看清),WCAG AAA是更加严格的无障碍规范标注(相当于戴了眼镜后还是有200度近视程度的视力的人可以看清)。

个人推荐,所有产品的所有内容至少要达到WCAG AA。当颜色不会对你的设计造成实质性影响的时候,尽量达到WCAG AAA标准(比如,白底黑字阅读一篇文章,一定比白底浅灰字要更清晰)。



02 - Color Oracle 色盲模拟工具

colororacle.org/

Color Oracle截图

免费app,支持Mac, Windows, Linux。

在本地运行的色盲模拟器,方便设计时选取对色盲更加友善的颜色。



03 - Stark

getstark.co/

Stark色彩对比度工具截图

免费Sketch插件(有付费升级版)

推荐给用Sketch做设计的同学,有内置的色彩对比度检测工具(选中两个Sketch图层即可检测)、有色盲模拟器,不久后还要添加颜色推荐工具。



04 - Funkify 障碍模拟工具

chrome.google.com/webst

用Funkify模拟手抖症状

Chrome浏览器插件。

可以模拟各种类型的障碍,包括视觉障碍(模糊、大太阳天、部分视觉丧失等),手抖症,失读症,色盲,注意力不足多动症等,还有一个自动扫描网页寻找无障碍问题的工具,非常棒。


05 - ColorBox

colorbox.io/

ColorBox截图

自动生成色盲友善的配色方案,来自Lyft设计团队。



06 - Accessibility Scanner

play.google.com/store/a

Accessibility Scanner截图

免费Android app。

扫描你的Android app,检测不符合无障碍规范的地方、提供改进无障碍的建议,来自Google无障碍团队。


这次就讲到这里,下次我们会讨论设计完成后,如何进行包容性的用户研究,以及如何给工程师提供无障碍设计标注文档(spec)。

欢迎持续关注专栏「无障碍,是每个人都被世界善待
所有文章也会同步到公众号「无障碍设计研究小组」

标题图来自icons8.com

下一篇

[#3] 验证与记录zhuanlan.zhihu.com图标

更多专栏文章

从无障碍设计中学习如何成为一个更好的设计师zhuanlan.zhihu.com图标盘点那些让人眼前一亮的无障碍黑科技zhuanlan.zhihu.com图标谷歌发布「安卓盲文输入法」,帮助视障朋友简单方便地打字zhuanlan.zhihu.com图标

附录:

完整版包容性使用场景参考图的纯文字版:

---

视觉障碍 - 无视觉
永久性障碍:眼盲
情境性障碍:手机放在口袋/包里使用
临时性障碍:近视矫正手术后

视觉障碍 - 少量视觉
永久性障碍:视力低下
(可由各种疾病导致)
情境性障碍:大太阳天,很暗的房间,开车,没戴眼镜,屏幕摔碎
临时性障碍:散瞳检查后,治疗白内障中,药物导致的畏光症状

视觉障碍对策设计:语音交互、实体按钮等触觉交互

---

肢体障碍 - 无触摸
永久性障碍:截肢,截瘫
情境性障碍:自拍,双手拿着东西(婴儿,包裹,购物袋),开车,骑自行车/摩托车,做饭/吃饭,带手套,遛两只狗
临时性障碍:拄拐,关节疼痛

肢体障碍 - 单手
永久性障碍:截肢
情境性障碍:单手拿着东西,开车,骑自行车/摩托车,遛一只狗
临时性障碍:单手打着石膏,使用臂悬带

肢体障碍 - 不可控动作
永久性障碍:原发性颤抖症,帕金森症
情境性障碍:颠簸的公交/地铁,非惯用手操作
临时性障碍:紧张/焦虑,喝太多咖啡,低血糖,戒酒期

肢体障碍对策设计: 语音交互、使用摄像头的控制方式(如手势操控、眼神操控)

---

听觉/言语障碍 - 无听觉
永久性障碍:耳聋
情境性障碍:非常嘈杂的环境(演唱会),戴着耳机/耳罩

听觉/言语障碍 - 少量听觉
永久性障碍:重听
情境性障碍:略微嘈杂的环境(餐馆,派对,咖啡厅),戴着耳机/耳罩
临时性障碍:中耳炎,鼻窦炎,坐飞机耳朵堵塞

听觉/言语障碍 - 无言语
永久性障碍:失语症,聋哑,严重自闭症
情境性障碍:语言不通,安静的环境(图书馆、电影院、厕所、宗教场所),非常嘈杂的环境
临时性障碍:咽喉炎

听觉/言语障碍 - 少量言语
永久性障碍:呐语症,口吃,发音障碍,自闭症
情境性障碍:外语不流利,安静的环境,略微嘈杂的环境
临时性障碍:感冒,声带麻痹

听觉/言语障碍对策设计: 字幕、键盘输入(用来替代语音输入)

---

认知障碍(非完善) - 注意力/记忆力
永久性障碍:多动症,阿兹海默症,忧郁症
情境性障碍:睡眠不足/很累,开车,看电视,在和别人说话

认知障碍(非完善) - 学习能力/判断力
永久性障碍:失读症,自闭症,唐氏综合征
情境性障碍:同上(与注意力/记忆力的情境性残障相似)

认知障碍对策设计:自动提示、语音交互、无干扰模式、图示(避免阅读)

编辑于 08-06

文章被以下专栏收录