Systematize Design 包容性设计指南

一、为何包容？ 

在这个多样化的世界上，并不是所有人都能毫无障碍地使用各种产品。 

优秀的包容性设计，不仅让残疾人用户正常地与产品交互，还会为普通人提供更好的使用体验。 

让我们设想一个场景：假设有一天，你的双眼暂时无法正常使用。这个时候，你如何保证和外界的交流？依靠手机？在你未学习如何使用无障碍功能前，你甚至不知道如何启动他们。就算你早有准备，或者你的亲友帮助你开启了这些功能，还是有许多应用的无障碍功能完全不可用，这些应用甚至可能是所谓的「国民级应用」，他们让你的互联网生活极大的受阻。 的确，你有恢复的时间，但盲人没有。 

让我们设想另一个场景：也许又有一天，你的双耳突然失聪。看着视频里张口闭口的人，看见现实里张口闭口的人，而你什么也听不见。你又如何去“听”他们在说什么呢？ 

听障人士的世界与普通人同样是截然不同的。他们只能看，而不能听。当有人随音乐而舞蹈时，他没法理解他们在干什么；当他在看视频的时候，他也无法理解视频里的人在说什么。 

在这种情况下，能够让盲人和听障人士甚至于部分感受器官无法使用的「正常人」与现代社会接轨的设计，就是包容性设计。 

二、怎样包容？ 

让我们先从视障人士的部分使用路径开始，了解他们是如何接触互联网的。 

 

1）普通人是怎么完成操作的？ 

输入信息：依靠视觉感知得来的信息做出操作。 

可以直接输入文本，观察到文案，颜色等反馈信息的变化，依照视觉做出操作： 

1.利用视觉查找到所要进行的操作； 

2.直接根据视觉指示做出操作； 

做出操作：依靠视觉感知得来的信息做出操作。 

可以直接输入文本，观察到文案，颜色等反馈信息的变化，依照视觉做出操作： 

1.利用视觉查找到所要进行的操作； 

2.直接根据视觉指示做出操作； 

2）视障人士是怎么完成操作的？ 

输入信息：依靠听觉感知得来的信息做出操作。 

需要使用屏幕阅读器与语音输入软件（通常伴随极大误差），且无法感知能被朗读出来的文本除读音外的变化。 

1.利用屏幕阅读器查找到所要进行的操作； 

2.根据屏幕阅读器所提供的信息利用其它工具做出操作； 

做出操作：依照听觉感知得来的信息做出操作。 

需要使用屏幕阅读器与语音输入软件（通常伴随极大误差），且无法感知能被朗读出来的文本除读音外的变化。 

1.利用屏幕阅读器查找到所要进行的操作 ；

2.根据屏幕阅读器所提供的信息做出操作； 

依此，我们可以得出一个结论： 在视障人士的操作过程中，可听的文本信息是十分重要的。向他们所提供的信息需要做到「简单」、「关键」、「清晰」。 

现在，让我们对比听障人士与普通人获取信息的方法，了解他们是如何接触互联网的。 

依此，我们可以得出一个结论： 在听障人士的操作过程中，可视的文本信息是十分重要的。向他们所提供的信息同样需要做到「简单」、「关键」、「清晰」。 

在逐步的总结中，我们可以得出下面的结论： 

最好不要做： 

1.将信息过度精炼，使其难以发现； 

2.痴迷于「悬浮」之类的交互方式； 

3.痴迷于用颜色和图标表达一切信息； 

4.让过多无用文本充斥于页面； 

你可以做到： 

1.将图标中的信息提炼为文本； 

2.将信息不仅仅用颜色表达出来； 

3.提供将多媒体内容转换为文本的工具； 

这是最基础的对于包容性设计的原则，接下来，让我们了解对于更多人也有效的包容性设计措施。 

三、深入了解 

1. 不仅仅是一部分 

让我们进入一个场景： 

如今许多深受视障者喜爱的应用软件，也曾制造过麻烦。郑锐清楚地记得，“微信红包”正式推出的那年春节，引起了抢红包的热潮，他能听到红包提示音此起彼伏地响起，但是打开拆红包的页面后，按钮没有被读出，红包无法被点开，“每一次打开红包都有一种失落感，就觉得被微信抛弃了，只能看着红包干着急。”他感觉自己被关进了小黑屋，屋子外面是别人的鞭炮声。 ——引用自 锌财经《科技平权：残障者在互联网世界里，换了种活法》 

以及另一个场景： 

你面对着一个「极为精简」的界面，却完全无法理解其中高度抽象的图标的含义，这使得你无法做出操作，更可怕的是，这些图标完全没有任何提示，你试图用做出各种操作：悬浮，滑动，寻找展开描述的按钮，然而都没有效果，你依旧无法了解这些图标的含义。现在，你就被困在一个页面上了，迷茫无助。 

当然，你可能没办法体验这种感受，但我们仔细一想，这种情况同样会影响到我们。 

在第一个场景里，我们会发现自己有时会因为操作不便（抱着婴儿或者手拿刀具）而无法打开红包，这同样是一种障碍。 

在第二个场景里，我们会发现即使自己「智力正常」，也会遇上对图标等操作元素的理解不完全的情况，同样会让你陷入困难的境地。 

从这，我们便可以发现：所有人都在某些时候是残疾人，无障碍的产品对所有用户都是更好用的产品。 

让我们看看谷歌安卓无障碍团队与他们的 Design Lead 做出了什么优秀的包容性设计： 

之前也提到了，每个人在某些时候都有残疾。在做无障碍工作的同时，我了解到了很多能够帮助到所有人的无障碍工具。 

●Live Transcribe （我负责的产品，用语音识别帮助聋人听写对话）：我在开会时会用它来记笔记，也会用来和英语不是那么流利的同事交流。 

●Sound Amplifier（另一个我负责的产品，帮助听障人士的语音扩大器）：我会配合蓝牙耳机使用，这样在另一个房间里也能听清电视的声音。 

●我帮助过视力下降的人（比如同事的老年家属）找到相关的视力设定，像是大号字体、大号图标，还有放大镜功能。 ●很多人喜欢黑暗模式，但是很多app还没有支持黑暗模式。其实在安卓的进阶无障碍设定里，可以强制所有app使用自动黑暗模式（这是帮助畏光症的功能），我帮助过很多人找到它。 

没错，这些都算是包含性设计，或者说无障碍设计。它不仅对部分人群有帮助，对我们大多人也有帮助。 

四、做出改变 

首先，让我们通过几个简单的要求让你的产品拥有更多的包容性： 

1）保证对比度 

这里的对比度不仅指的是「颜色对比度」，也指的是拥有不同含义的组件间的「对比度」，例如：代表含义一致的图标采用的设计方案不同，会让用户感到迷茫；又比如：表达不同含义的图标设计方案趋同，也会让用户感到迷茫。 

2）顺序即秩序 

文字和段落以不改变内容含义的次序呈现。——语出 WC3 WCAG（Web 内容无障碍指南）

2.1 

在完成设计时，一般会按照自上到下的顺序排列操作顺序，在需要时，可以按照内容重要性排列操作顺序，不过请务必记住：这是建立在人们能理解的顺序之上的。 

让我们寻找一些能帮助人们运用顺序的方法： 

让用户有能力跳过没有必要的内容。 

如果你希望利用键盘和屏幕阅读器来浏览网页，却发现你需要一个个手动跳过网页顶栏的按钮才能查看内容，这绝对不是一个好体验，试着为用户使用 Tab 导航时提供一个「跳转到主内容」的按钮。 

五、文字是表述的最佳方案 

图片，图标，视频内容都是视障人士无法触及的内容，抽象且需要一定时间了解。天津天迅达科技有限公司在拥有成熟的技术，能够开发出更具包容性的产品，满足您的一切需求。如果有能力的话，做到以下几点不仅可以帮助到视障人士，还可以让更多人轻松的使用你的产品： 

①状态与许多其他的反馈不应止步于颜色和图标。 

颜色并不是作为传达信息、表明动作、提示响应或区分视觉元素的唯一视觉手段。——语出 WC3 WCAG（Web 内容无障碍指南）2.1 

②为图标，图片，视频等内容提供文字描述，清晰易懂还包含重要信息是重要的关注点。 千万注意！可不要痴迷于提供过多的信息，你肯定不希望让屏幕阅读器播报一个图标的含义后，再阅读一遍这个图标旁边的描述文字吧？ 

六、即时反馈 

反馈用户的操作是十分重要的，现在试试看使用Tab键来选择组件，这些组件大多会有相应的反馈，无论是颜色变化还是边框加粗，都有助于你注意重点，你可以试试看注意以下几点： 

1.提供一些细微的反馈，声音，震动都是好办法，但不要把他们当作主要反馈方法。 

2.不要让颜色成为唯一的提示。的确，颜色是一种很好的提示方式，但如果只有颜色能提供反馈提示就太单一了。这对某些注意力涣散的人群和色盲人群并不友好，可以适当辅以其他的手段来做出反馈 。

七、易于接触与理解 

1.避免过小的字体，图标，组件，与没必要的装饰，他们会让理解和接触内容变得困难； 

2.如果有需要特定手势才能触发的操作，请确保有其他常见的交互方式来触发它； 

3.组件的可点击区域足够大、间距足够远，不要让它们变成「小巧玲珑」而无用的东西。

以上所有设计图和部分文字均来自网络，如有侵权，请call我删除，感谢~

天津天迅达科技有限公司经过多年来对APP、小程序、以及网站建设的探索，已经帮助每一个客户快速开发出属于自己的APP、小程序、网站，是万千企业之选。

标签：天迅达科技 天津APP开发 天津网站建设 网站建设