想想你最喜欢的网站或应用。是什么让它成为你的最爱?现在,想想一个你不喜欢的网站或应用。你为什么不喜欢它?用户与你的设计的互动方式以及他们在你的网站和应用上的体验可能会有所不同。
这种体验可能会因一天中的时间、使用的设备类型、前一天晚上是否睡足、是否身体不适、是否正在使用辅助技术等等而发生变化。全球有近 80 亿人口,人们使用和体验你的设计的可能性是无限的。
包容性设计
我们如何才能一次性满足所有潜在的用户需求?这就是包容性设计。包容性设计采用以人为本的方法,将包容性、可用性和无障碍性融为一体。
与通用设计不同,通用设计侧重于尽可能多的人可以使用的单一设计,而包容性设计原则侧重于为特定个人或用例进行设计,然后将该设计扩展到其他人。
有七项以无障碍性为中心的包容性设计原则
- 提供可比较的体验:确保你的界面为所有人提供平等的体验,以便人们能够以适合其需求的方式完成任务,而不会降低内容质量。
- 考虑情境:确保你的界面为人们提供有价值的体验,无论他们身处何种环境。
- 保持一致:使用熟悉的约定并以逻辑方式应用它们。
- 赋予控制权:确保人们能够以他们喜欢的方式访问内容并与之互动。
- 提供选择:考虑为人们提供完成任务的不同方式,尤其是那些复杂或非标准的任务。
- 优先考虑内容:通过在内容和布局中的首选顺序排列核心任务、功能和信息,帮助用户专注于这些元素。
- 增加价值:考虑功能的目的和意义,以及它们如何改善不同用户的体验。
用户角色
在开发新设计或功能时,许多团队依靠用户角色来指导他们完成整个过程。用户角色是使用你的数字产品的虚构人物,通常基于定量和定性的用户研究。
用户角色还提供了一种快速且经济高效的方式,可以在整个设计和开发过程中测试这些功能并确定其优先级。它们通过在对话中添加对现实世界考虑因素的层面,帮助专注于围绕站点组件的决策,从而帮助协调战略并创建专注于特定用户群体的目标。
纳入残障人士

“每个人都不同。我只能从我的经验出发。当你遇到一个聋人时,你只遇到一个聋人——而不是我们所有人。”
Meryl Evans 在 ID24 演讲 Deaf Tech: Travel Through Time from Past to Future 中说道。
当你在用户角色中纳入残障人士时,用户角色可以用作包容性设计工具。有很多不同的方法可以做到这一点。你可以创建特定于残障的用户角色,将残障添加到现有的用户角色中,甚至创建用户角色谱来反映情境性、暂时性和永久性残障的动态现实。
无论你如何将残障人士纳入你的用户角色,它们都不应该基于真实人物或刻板印象。用户角色永远不能替代用户测试。

- 姓名:简·班内特
- 年龄:57 岁
- 地点:英国埃塞克斯
- 职业:用户体验工程师
- 残障:早发性帕金森病 (YOPD) 引起的手部震颤
- 目标:使用语音转文本输入来更轻松地添加代码建议;以最少的击键次数在线查找自行车装备。
- 痛点:网站缺乏仅键盘支持;用于设计应用程序的触摸交互区域太小。
作为一名用户体验工程师,简设计和构建对保持公司网站相关性至关重要的页面。她整天都在为许多团队成员提供支持。她是解决技术难题的女王,并且是部门中每个人在发生任何意外情况时的首选。
因震颤而失去精细运动技能使她越来越难以使用鼠标。她一直在稳步更多地依赖键盘来浏览网络。简一直致力于她的身体健康。她喜欢公路赛和 BMX。当她去年被诊断出患有早发性帕金森病时,这更是一个打击。
残障模拟器
使用残障模拟器来模拟或补充你的用户角色时,请务必格外小心。
残障模拟器是一把双刃剑,因为它们可以建立同情心或共情心——这可能取决于个人、使用模拟器的环境以及许多其他不可控因素。许多无障碍倡导者反对使用残障模拟器工具,并建议寻找残障人士制作的电影、演示、教程和其他内容,并首先了解他们的第一手经验。
“我认为我们需要完全坦诚,任何模拟活动都不会影响我们希望视力正常的人在内心和头脑中了解的一些最重要的事情。失明不是定义我们的特征,对失明的误解和低期望是我们最大的障碍。
这些误解制造了人为的障碍,阻止我们充分参与,而这些虚假的限制逐渐累积成阻碍我们前进的东西。”
Mark Riccobono,美国盲人联合会主席。
无障碍性启发法
在构建用户角色和设计时,请考虑将启发法添加到你的工作流程中。启发法是交互设计规则,由 Jakob Nielsen 和 Rolf Molich 于 1990 年提出。这十项原则是根据在可用性工程领域多年的经验而制定的,并且自那时以来一直用于设计和人机交互程序中。
快进到 2019 年,Deque 的设计团队创建并分享了一套新的专注于数字无障碍性的启发法。根据他们的研究,当无障碍性成为设计过程的一部分时,可以避免网站或应用中高达 67% 的无障碍性错误。这是一个巨大的影响,甚至可以在编写一行代码之前就产生。
与最初的启发法集类似,在规划你的设计时,有十个无障碍性启发法需要考虑。
- 交互方法和模式:用户可以使用他们选择的输入方法(例如鼠标、键盘、触摸等)有效地与系统交互。
- 导航和寻路:用户可以随时在系统中导航、查找内容并确定他们所在的位置。
- 结构和语义:用户可以理解每个页面上内容的结构,并了解如何在系统内操作。
- 错误预防和状态:交互式控件具有持久且有意义的说明,以帮助防止错误,并为用户提供清晰的错误状态,指示问题是什么以及如何在返回错误时修复它们。
- 对比度和易读性:用户可以轻松区分和阅读文本和其他有意义的信息。
- 语言和可读性:用户可以轻松阅读和理解内容。
- 可预测性和一致性:用户可以预测每个元素的用途。每个元素与整个系统的关系都很明确。
- 时间和保留:用户有足够的时间完成他们的任务,并且不会在他们的时间(即会话)用完时丢失信息。
- 移动和闪烁:用户可以停止页面上移动、闪烁或动画的元素。用户不应受到这些元素的干扰或以其他方式受到伤害。
- 视觉和听觉替代方案:用户可以访问任何传达信息的视觉或听觉内容的基于文本的替代方案。
一旦你对这些无障碍性启发法有了基本的了解,你就可以使用无障碍性启发法工作表并按照提供的说明将其应用于用户角色或设计。当你收集多个视角时,此练习更具启发意义。
导航和寻路检查点的无障碍性启发法审查示例可能如下所示
导航和寻路检查点 | 优秀 (+2 分) | 通过 (+1 分) | 失败 (-1 分) | 不适用 (0 分) |
---|---|---|---|---|
当活动元素获得焦点时,是否在其上设置了清晰可见的指示器? | ||||
页面是否具有有意义的标题文本,并首先包含特定于页面的信息? | ||||
页面标题元素和 H1 是否相同或相似? | ||||
每个主要部分是否有有意义的标题? | ||||
链接的目的是否从链接文本本身或其直接上下文中定义? | ||||
页面顶部是否提供了跳过链接,并且在焦点上是否显示该链接? | ||||
导航元素的组织是否有助于寻路? |
在团队中的每个人查看页面或组件并进行他们的无障碍性启发法审查后,将每个检查点的总数进行统计。此时,你可以决定如何补救发现的任何问题或纠正对支持数字无障碍性至关重要的任何遗漏。
无障碍性注释
在你将设计移交给开发团队之前,你应该考虑添加无障碍性注释。
一般来说,注释用于解释创意选择并描述设计的不同方面。无障碍性注释侧重于开发人员可以在设计团队或以无障碍性为重点的专家的指导下做出更易于访问的程序化选择的领域。
无障碍性注释可以应用于设计过程的任何阶段,从线框图到高保真模型。它们可以包括用户流程、条件状态和功能。它们通常使用符号和标签来简化流程并将设计作为主要焦点。
以下设计图示示例来自 Indeed.com 的 Figma 无障碍性注释工具包。



根据你的设计程序,你应该有多个无障碍性注释入门工具包可供选择。或者,如果你愿意,你可以创建自己的工具包。在任何一种情况下,你都应该决定哪些信息需要传达给移交团队,以及哪种格式效果最佳。
无障碍性注释的一些考虑领域包括
- 颜色:包括调色板中所有不同颜色组合的对比度。
- 按钮和链接:识别默认、悬停、激活、焦点和禁用状态。
- 跳过链接:突出显示隐藏和可见的设计方面以及它们在页面上的链接位置。
- 图像和图标:为重要图像和图标添加替代文本建议。
- 音频和视频:突出显示字幕、文字稿和音频描述的区域和链接。
- 标题:添加程序化级别并包括所有看起来像标题的内容。
- 地标:使用 HTML 或 ARIA 突出显示设计的不同部分。
- 交互式组件:识别可点击元素、悬停效果、焦点区域。
- 键盘:确定焦点应从哪里开始(alpha 停止)以及后续的制表符顺序。
- 表单:添加字段标签、帮助文本、错误消息和成功消息。
- 辅助功能名称:确定辅助技术应如何识别元素。