无障碍设计：与你同行，才能无障碍（解释无障碍设计）

无障碍设计：与你同行，才能无障碍（解释无障碍设计）

我先给大家讲个自己的真事，上周连着熬夜两天抱着电脑赶汇报稿，到第三天眼结膜充血、见光刺痛，到医院一瞧：急性结膜炎。医生切切叮嘱72小时里多闭目养神不能目视任何自光源体，“尤其是电脑和手机！” 医生大大语气克制特地关照了一句。

好不容易挪回家，想起一整天未能好好进食，手机不能看，但还好可以用iOS系统自带旁白功能来读屏（设置-通用-辅助功能-“旁白”）。结果一进“饿了么”就被大波优惠券浮层淹没，只听得一叠声的“优惠券 优惠券…”但不知是何优惠，还找不着“关闭”。划拉半天，首页也没能进得去。十分担心自己饿死都没点上吃的，打算直接***求助社区管家来解决，结果花了整一小时在学习如何搜索找到管家。待到饭送上门，午饭变晚餐。

▲饿了么的优惠券弹层

无障碍设计是互联网的“基建”

─

我们的生活越来越依赖互联网：出门不带钱包；打电话用***-因为方便不花钱；要打车首先想到滴滴，在街口扬招的司机师傅都不带瞅一眼的…信息集中流通的同时也限制了多样化的信息传达渠道。而现有的互联网的信息传达80%依赖视觉化语言，当我们失去视觉，缺乏“基础设施”的互联网都会成为正常生活的黑洞。

在中国约有2亿的障碍人群，其中视障人群约有1400万，包括500万视盲人群以及大部分的后天视力受损人群。在老龄化趋势日益显现的大城市中每年有约50万老年人成为视力障碍者。而在视力正常人群(20~40岁)的日常生活中，患上损伤视力的眼科疾病的几率约为4-5%，也就是说在20-40岁间即使你先天视力完好，也可能遭遇1次这样的“黑洞”。

▲国内视障群体状况分布

在0905阿里公益周的这个档口，我们应当来聊聊“无障碍设计”，这不仅是为有障碍者做的设计，更是为每个普通人的日常或未来所做的设计，是万物互联生活的保障性基础建设。

「网购」是视障人群的硬需求

─

▲网购视障用户特征模型

视障人群，无论是暂时还是长期的视觉能力的缺失，在身体机能和认知能力的其他各方面都和常人无异。在2018年中国视障协会发布的报告里网络购物在上网的视障人群中需求占比78%。视障用户由于生理以及国内公共场所的无障碍设施不完备等原因，出行自由度受限，而网上购物可以提供更多自由选择的空间和时间容忍度，更应该成为解决视障者核心诉求的渠道。

视障用户和普通人一样会“心情不好就逛淘宝”，一样也有对“刷刷刷+买买买”爽快剁手体验的期待，想要拥有一样的选择自由度，一样的多快好省。视障用户网购体验对标正常用户仍处在基线水准以下：普通视障者独立完成网购仍是件艰难的事，更妄论网购的多快好省，享受逛买信息浏览愉悦度等体验。体验可提升的空间巨大。

视障者的网购行为模型

─

▲网购视障用户认知模型

那么视障用户网络购物和普通人的线上购物的方式区别在哪儿呢，我们以淘宝页面为例：视力障碍意味着一定程度上丧失视觉能力，操作手机界面时，需要依靠系统提供的读屏能力，来读取的信息包括：屏幕上有什么？可以做什么？要怎么做？以及是否做成功了。

在这个过程中普通人搜集信息的方式是多维度同步收集，而视障用户通过语音读屏获得信息的方式是线性的、单程且有一定顺序的。首先这样的方式会降低信息传递效率；其次，信息模块间的读取有较大的随机性，很有可能漏读或者重复读取。这意味着信息被读取后，用户需要根据内容本身来筛选和重组信息之间的关系。如果信息内容间没有提供足够的、有效的关联度，视障用户得到的信息就是碎片化的，很难在各组信息间建立联系。

网购无碍化问题分析

─

▲网购视障用户认知需求分析

基于上面的模型，把基本的网购链路中视障用户遇到的问题拆解为以下4个问题：

A. 页面上都有哪些信息？

A是界面层“what”的问题，也是最为显性的已有网购app的基础规范缺失的问题，具体表现为：1.信息模块丧失语音识别焦点；2.焦点区域定位不准；3.有焦点没有信息标签；4.读取的信息与真实内容不符合。

这些问题的出现，主要是因为开发或者相关业务同学没有给页面做相关无碍化标签的配置，或者没有按照iOS/android的系统无碍化规范做配置。解决这些问题，需要在开发层面上真正把无碍化规范落实到每个业务和版本迭代的开发和测试中。A的解决是接下来解决认知层面问题B、C、D的基础。

▲ 网购平台无碍化问题分析_淘宝案例

B. 页面上的信息是什么关系？

这里说的是界面上已有信息字段的成组和关联性解读。普通用户可以通过颜色、间距、线框区隔等视觉元素的引导来自然地解读信息建关系，但这些元素对视障用户是失效、不存在的，这种状态下，我们需要在语音世界里给视障用户创造新的基础信息关联的表达方式。

C. 这些信息组我可以怎么操作？

视障用户关于信息的操作方式也十分有限：单击是读取焦点信息，双击是确认进入，另有下滑、翻页、长按语音等操作，但一来全部依赖手势学习成本大，二来适配的交互方式也十分有限。对于大部分视障用户来说，能熟练并操作成功率在90%以上的就2-3个基础手势，大大限制了视障用户和信息的交互，像“点、刷、切红包”等游戏类交互就很难完成。

D. 怎么算是成功了？不成功该怎么办？

信息反馈以及纠错机制在大部分网购app是被忽略了的但却是最为影响视障用户体验的部分。所谓的“黑洞”体验，就是跌进去但不知道如何爬出来的无助感。这也是提升视障人群体验的最重要抓手之一。

淘宝的无障碍设计规范和解决方案

─

▲ 手机淘宝无障碍设计准则

手机淘宝从2017年开展全链路无碍化设计迭代以来，经历了多个版本多种类型的无碍化尝试，包括基础链路无碍化、双11双12会场设计无碍化以及智能小助手的淘内无碍化产品孵化。总结了以下五点对网络购物最为基础的设计准则，和大家分享：

1.用户记忆认知负担最小化

视障用户依赖记忆以及对大量手势的掌握来与手机或触屏产品交互，这本身就占用了大量的认知资源。设计师应该努力帮助读屏软件的用户来降低他们的对工具本身和界面的认知负担。

2.结构性导航体验的一致性

一致的结构性导航能够帮助视障用户快速建立对各类新进入页面的熟悉度和寻找信息的方式，从而降低学习成本和搜索有用信息的认知以及效率成本，并建立任务信心。

3.避免同一点多方向和维度的信息分布

按照我们之前讨论的视障用户的认知模型，多维度的信息关联方式对于视障用户存在巨大的学习成本并且通常伴随信息理解的不确定性和不安全感，尤其是无法在脑中建立方位地图的先天视盲者。

4.页面内容结构的一致性

这是指页面内信息表达方式和顺序的一致性，这是对用户浏览信息舒适度、阅读连贯性和操作信心的保障。

5.辅助机制的一致性

指的是帮助用户操作、阅读以及完成页面的互动方式的一致性，例如：通过唤起菜单来提醒用户选择服饰的尺码，那么在各类物品详情页都最好使用类似表达的辅助菜单，来提升用户确认操作的可靠性。

在上述基本准则的基础上，淘宝的设计师也给出了手淘框架下每个可复用的功能性控件的无碍化设计规范-从点到面、以点带面地来持续推动和优化基础链路的无碍化。

▲ 手机淘宝无障碍设计_基础控件设计样本

另外，链路断点要重视

另外要格外提醒下对链路断点的重视，在上面的认知问题分析中也有提到：首先，单线程任务中单点信息的缺失足以让整个任务链断裂，因为开辟新链路的学习成本巨大。其次，视障同学的任务中纠错的认知成本相对较高。另外任务断点会影响视障同学完成任务的信心，能力的缺失使视障人群或者处在视障状态下的用户更为敏感以及产生无助的情绪。更充分的提示信息不仅能帮助用户解决当下问题，也能快速提升产品的整体使用满意度。

最后，解决方案要能沉淀

无论是基本准则还是控件规范，无障碍设计作为一种解决方案，需要系统性地和开发链路中的各方配合，包括产品、开发、测试以及数据的支持。解决方案要能沉淀为整个产品开发链路的系统性的标准，才能真正持续一致地为视障人群提供服务。否则就如大浪淘沙，每次升级版本，种种无碍化的努力都要再来一遍，教育以及升级成本巨大。这是每个产品在做无碍化设计和升级之前都需要考虑的。

▲ 设计规范的沉淀 需要开发链路中各方的支持

写在最后：「与你同行 才能无障碍」

─

写到这里，还有很多话想说，很多“饼”想画-仅占中国障碍人群的十分之一的视障人群已有如此多和强烈的体验诉求，我很想说些什么“市场空间大”“信息民主化前景”之类的豪言壮语…但作为设计师的我们，最需要做、能做的就是把所有的用户都作为最重要的产品使用者来尊重，来认真对待，根据他们能力不同、场景和需求的不同，给他们设计和建造应当有的体验和服务。

“人生百年，试想谁能一生无障碍？”无障碍设计不是为了某个业务的KPI，不是为了一鸣惊人吸粉百万，无障碍设计只是为身边的普通的他们，也为未来某个时刻的自己，在这个信息化世界搭建最最基本的有安全感的生活。期待这篇不成熟的短文能帮助感兴趣的同学找到走近「无障碍设计」的正确姿势，提供更多想象空间和新体验的可能性。期待与你同行，一起「无障碍」。

//////END//////

隐钰淘宝设计