设计和用户体验

想一想您最喜欢的网站或应用，是什么让它成为您的最爱？现在想一想您不喜欢的网站或应用的哪些方面 您不喜欢哪些方面？用户与您的设计互动的方式以及他们在您的网站和应用中的体验可能各不相同。

这种体验可能会因白天时段、所用设备的类型、前一天晚上睡眠充足、是否身体不适、是否正在使用辅助技术等因素而发生变化。全球有近 80 亿用户，人们使用和体验您的设计的可能性是无限的。

包容性设计

如何才能同时满足所有潜在用户需求？不妨采用包容性设计。包容性设计采用以人为本的方法，将包容性、易用性和无障碍功能集于一身。

与通用设计不同，通用设计侧重于可供尽可能多的人使用的单一设计，而包容性设计原则则侧重于针对特定个人或用例进行设计，然后将该设计扩展到其他人。

有七条以无障碍为中心的包容性设计原则：

1. 提供类似的体验：确保您的界面为所有用户提供相同的体验，以便用户能够以符合自身需求的方式完成任务，而不会影响内容的质量。
2. 考虑具体情况：确保无论用户处于何种环境，你的界面都能为其提供有价值的体验。
3. 保持一致：使用熟悉的惯例并以合乎逻辑的方式应用它们。
4. 授予控制权限：确保用户能够以首选方式访问内容并与之互动。
5. 提供选择空间：考虑为用户提供不同的方式来完成任务，尤其是那些复杂或非标准的任务。
6. 划分内容优先级：在内容和布局中按首选顺序排列这些元素，帮助用户专注于核心任务、功能和信息。
7. 增加价值：考虑功能的用途和重要性，以及这些功能如何改善不同用户的体验。

角色

在开发新设计或新功能时，许多团队会依赖用户角色来引导他们完成该流程。角色是使用您的数字商品的虚构角色，通常基于定量和定性用户研究。

角色还提供了一种快速且实惠的方法，让您能够在整个设计和开发过程中测试这些功能并确定它们的优先级。 它们通过在对话中增加一个真实的考虑因素，来帮助调整策略并制定针对特定用户群组的目标，从而有助于集中于网站组件方面的决策。

添加残障人士

Microsoft 的包容性 101 工具包中的角色谱。

“人是各不相同的。我只能根据我的经验来谈话。当你遇到一个聋人时，你也遇到了一个聋人，而不是我们所有人。”

来自 ID24 的 Meryl Evans 演讲 Deaf Tech: Travel Through Time from Past to Future。

当您将残障人士融入角色中时，角色可以用作具有包容性的设计工具。您可以采用多种不同的方法。您可以创建特定于残障的角色，向现有用户角色添加残障，甚至创建一个角色范围来反映情境式、暂时性和永久性残障的动态现实。

无论您以何种方式将残障人士融入您的角色，都不应基于真实的人或成见。职能角色永远不能替代用户测试。

角色：Jane Bennet

查看支持特定用例的角色示例。

• 姓名：Jane Bennet
• 年龄：57 岁
• 地点：英国埃塞克斯市
• 职业：用户体验工程师
• 残障：因儿童帕金森氏病 (YOPD) 引起的手部颤抖
• 目标：使用语音转文字输入功能更轻松地添加代码建议；在线查找骑行设备，尽量减少按键操作。
• 令人失望的因素：网站不支持仅支持键盘；应用设计的触摸互动区域较小。

Jane 是一名用户体验工程师，负责设计和制作一些对公司网站保持相关性至关重要的网页。她每天为许多团队成员提供支持。 她是能够救出技术火灾的女王，当任何意外发生故障时，她是部门中的每一个人。

由于身患震颤而丧失精巧的运动技能，她使用鼠标的难度越来越大。她越来越多地使用键盘浏览网页。Jane 一直致力于健身。她喜欢公路赛和小轮车赛。 这在她去年被诊断出患有小孩性帕金森氏症时，这为她带来了巨大的影响。

残障模拟游戏

使用残障模拟器模拟或补充角色时，请务必谨慎。

残障模拟器是一把双刃剑，可以建立同理心或同理心，具体取决于个人、使用模拟器的背景以及许多其他无法控制的因素。许多无障碍功能倡导者反对使用残障人士模拟器工具，并建议寻找由残障人士创作的电影、演示、教程和其他内容，并亲身了解他们的体验。

“我认为我们需要完全坦诚地说，任何模拟活动都不会影响我们想让视障人士在内心和大脑中知道的一些最重要的理解。我们的定义并不是盲人，对盲人的误解和低期望是我们最大的阻碍。

这些误解会造成人为的障碍，阻碍我们充分参与，而虚假的限制也会成为阻碍我们发展的因素。”

Mark Riccobono，全美盲人联合会主席

无障碍功能启发式算法

在构建角色和设计时，请考虑在工作流中添加heuristics。启发法是互动设计的简单规则，由 Jakob Nielsen 和 Rolf Molich 在 1990 年引入。 这 10 条原则基于我们在易用性工程领域多年的丰富经验，并一直应用于设计和人机互动程序。

时光飞逝，2019 年，Deque 的设计团队打造并分享了一系列关于数字无障碍的新启发词语。 根据他们的研究，如果网站或应用的无障碍功能错误成为设计流程的一部分，在网站或应用的所有无障碍功能 bug 中，有多达 67% 可以避免。在编写任何代码之前，就能产生巨大的影响。

与原来的一组启发法类似，在规划设计时，有十种无障碍功能启发法需要考虑。

1. 互动方法和模式：用户可以使用自己选择的输入法（例如鼠标、键盘、触摸等）与系统进行高效的互动。
2. 导航和寻路：用户随时可以在系统中轻松导航、查找内容以及确定自己所处的位置。
3. 结构和语义：用户可以理解每个页面上内容的结构，并了解在系统中的操作方式。
4. 错误预防和状态：交互式控件具有持续性且有意义的说明，可帮助防止错误，并向用户提供明确的错误状态，以便在返回错误时指出问题所在及其解决方法。
5. 对比度和易读性：用户可以轻松区分和阅读文本和其他有意义的信息。
6. 语言和可读性：用户可以轻松地阅读和理解内容。
7. 可预测性和一致性：用户可以预测每个元素的用途。每个元素与系统整体之间的关系也很清晰。
8. 时间和保存：用户有足够的时间来完成任务，并且即使时间（即会话）用尽，也不会丢失信息。
9. 移动和闪烁：用户可以停止网页上会移动、闪烁或为动画的元素。用户不应被这些元素分散注意力或以其他方式伤害。
10. 视觉和听觉替代方案：对于任何传达信息的视觉或听觉内容，用户可使用基于文字的替代方案。

对这些无障碍功能启发式方法有基本的了解后，您可以使用无障碍功能启发法工作表并按照所提供的说明将其应用于角色或设计。如果您能收集多种视角，此练习将更有启发性。

下面是一个针对导航和寻路检查点的无障碍功能启发式审核示例：

导航和路线指引的检查点	优秀（+2 分）	通过（+1 分）	失败（-1 分）	不适用（0 分）
是否在所有活跃元素获得焦点时，都在其上设置了清晰可见的指示符？	✅
网页是否包含有意义的标题文字，并优先显示网页的相关信息？			✅
网页标题元素与 H1 相同或相似吗？		✅
每个主要部分是否有有意义的标题？		✅
链接的用途是否来自链接文字本身或链接的直接上下文？				✅
是否在页面顶部提供跳过链接，并在焦点上显示这些链接？			✅
导航元素的组织是否方便了寻路？	✅

在团队中的每个人都查看网页或组件并进行无障碍功能启发式审核后，系统会针对每个检查点统计总值。此时，您可以决定如何纠正发现的所有问题或纠正对支持数字无障碍至关重要的任何遗漏。

无障碍注释

在将设计移交给开发团队之前，您应考虑添加无障碍功能注释。一般来说，注释用于说明广告素材选择和描述设计的不同方面。无障碍功能注释侧重于开发者可以在设计团队或无障碍功能专家的指导下，做出更便于访问的程序化选择的区域。

无障碍功能注解可以在设计过程的任何阶段（从线框到高保真度模型）应用。它们可以包括用户流、条件状态和功能。他们通常利用符号和标签来简化流程，并将设计作为主要重点。

以下设计插图示例来自 Indeed.com 的 Figma 无障碍注释套件。

操作按钮设计因状态而异：默认、焦点、悬停、有效和已停用。

有三个图标突出显示了替代文本。“保存招聘信息”和“不感兴趣”的图标用作按钮，因此替代文本对于理解操作至关重要。“申请使用您的 Indeed 简历”旁边的图标纯粹是装饰性的，因此不需要替代文本。

每个输入可以关联多个输入标签，以帮助用户了解上下文。

根据您的设计计划，您应该有多个无障碍功能注释入门套件可供选择。或者，您也可以创建自己的广告系列组。无论是哪种情况，您都应决定需要将哪些信息传达给移交团队，以及哪种格式最适合。

对于无障碍功能注解，需要考虑的一些方面包括：

• 颜色：添加调色板中所有不同颜色组合的对比度。
• 按钮和链接：标识默认、悬停、活动、聚焦和停用状态。
• 跳过链接：突出显示隐藏/可见的设计元素以及它们链接到网页中的位置。
• 图片和图标：针对重要的图片/图标添加推荐的替代文字。
• 音频和视频：突出显示字幕、转写内容和语音描述的区域/链接。
• 标题：添加程序化级别，并添加类似标题的所有内容。
• 地标：使用 HTML 或 ARIA 突出显示设计的不同部分。
• 互动组件：识别可点击的元素、悬停效果和聚焦区域。
• 键盘：确定焦点应起始位置（alpha 停止位置）以及以下 Tab 键顺序。
• 表单：添加字段标签、帮助文本、错误消息和成功消息。
• 无障碍名称：指明辅助技术应如何识别相应元素。