Week 3 Accessibility
Unviersal Access
Universal Access is import for all kind of people, Designing for people with a wide range of abilites
Why accessibility is important ?
- 指确保所有人都能顺利使用界面和系统，包括有视觉、听觉、行动或认知障碍的人。
- 是实现 “Universal Access（普适可用性）” 的关键部分。
For impairments people
Creating more access for users of different disabilities:
- –Visual impairments
- –Auditory impairments
- –Motor impairments
- –Cognitive or mental disabilities
Assistive Technologies（辅助技术）
- Screen readers
- 屏幕阅读 Voiceover
- Screen magnification software
- 浏览器的中屏幕阅读，或者iOS的旁白功能
- Braille displays
- 盲文显示 特定的机器
- Voice input/voice recognition software
- 语音助手 或者用speech to text 用语音代替打字，smart speadkers
- Variety of keyboard/mouse options
- 不同的键盘为动作障碍的人来设计
- Head pointers
- 用头部移动控制指针
- Brain computer interface （BCI）
- 脑机接口（很未来）用 EEG 读取大脑信号 ➝ 控制外部设备 应用于游戏、义肢控制、脑波打字等
- Special gamepads
- 为Accessibility 特意设计的游戏控制手柄，比如PlayStation的Access controller
Visual impairments 视觉障碍相关的：
前端的HTML<img> tag中的Alt属性是reader中一个重要属性，图标消失就是可以通过alt的描述来做Alt is a HTML tag attribute that provides alternative text when images and videos cannot be displayed.
色彩对比（Color Contrast）
- 文字和背景之间的对比比值应 ≥ 4.5:1（普通文本）或 3:1（大文本）
- 最佳对比色：黑白（21:1）
| Technologies | Function |
|---|---|
| Screen Reader | 屏幕阅读器将界面内容转化为语音或盲文（如 VoiceOver、NVDA） |
| Screen Magnifier | 放大屏幕局部区域 Range from 100% – 1000% magnification is available |
| Braille Display 盲文显示 | 动态盲文设备，物理地浮出点阵 |
| High Contrast Modes | 增强前/背景对比度，提高可读性 |
| Color Contrast | Higher contrast ratios make text and graphics easier to perceive and read |
| Voice input/voice recognition software | Speech or voice recognition is used by normal |
Auditory impairments 听觉障碍相关的：
- 字幕、手语支持、可视化提醒
- 视频同步字幕（closed captioning）
Cognitive or mental disabilities认知障碍相关
- 简化语言、结构清晰、视觉干净
- 图标 + 文字搭配
Motor impairments 动作障碍相关
| 技术 | 描述 |
|---|---|
| Keyboard/mouse options | Alternate keyboards or switches are hardware |
| Eye gaze keyboards: | 用眼睛控制打字或点击 |
| Sip-and-Puff | 吹气/吸气切换输入 |
| Head Pointers | 用头部移动控制指针 |
| On-screen Keyboards | 屏幕键盘 + 点击辅助 |
| Brain computer interface (BCI) | 脑机接口 |
| Special gamepads | 特殊的游戏控制器 |
如何优化网站/软件以支持 Accessibility？
最基本也是最容易被忽略的事情
| 操作 | 原因 |
|---|---|
加上 alt 属性 | 让图片对屏幕阅读器可解释 |
| 明确链接目标（避免 “点击这里”） | 方便盲人用户理解跳转目的 |
| 避免闪烁文字 | 防止引起癫痫等问题 |
| 提供键盘快捷键 | 便于无法使用鼠标的人 |
| 正确使用表格结构 | <th> 标注行列头，便于结构识别 |
| 字段加说明（placeholder不足） | 让填写表单不出错 |
Evaluation techniques 检查与评估
有三种方法 :
自动工具验证（Auto tools）
- WAVE,https://wave.webaim.org/
- OzArt, https://www.accessibilityoz.com/products/ozart/
- Achecker, https://achecks.org/checker/index.php
- TPGI(colour contrast analyzer) https://www.tpgi.com/
- 用这些网站来帮助评估web的Accessibility
专家评审（Human Expert Review）
- 检查真实使用逻辑与多种辅助技术兼容性
残障用户可用性测试（Usability Testing with Disabled Users）
- 最具真实性 & 可用性价值的测试方式
Mobile Design
有些小屏幕的interface设计会将所有的功能加入进来，一个智能手表满足一个手机的功能，有些人确实有这样的需求，但这不能代表这个interface是好用的，不能满足Usability Goals。
Adapting Interfaces
What different’s of Desktop vs Mobile Design？
| Desktop | Mobile |
|---|---|
| 屏幕大，可展示更多信息 | 空间有限，只能保留最重要的信息 |
| 鼠标精确操作 | 手指操作，目标需要足够大 |
| 支持复杂交互、多任务 | 用户只关注单一任务，流程需简单明了 |
| 信息布局灵活 | 必须考虑屏幕尺寸、方向、手势、上下文 |
移动端≠桌面端缩小版，而是要重新思考和重构功能与界面！
Adapting Small Screen Principles 小屏幕的适配原则
Screen Size:
- 使用 Responsive / Adaptive Layout
- 推荐工具：Bootstrap 12-grid
- 设计应具备良好的可缩放性与组件自适应
Screen Orientation:
- 94%用户使用 竖屏vertical orientation 6%用使用 横屏 horizontal orientation
- 游戏、视频编辑适合横屏；社交、信息浏览更适合竖屏
- Video Streaming Apps Productivity Apps Mapping and Navigation Apps Photo and Video Editing Apps 要设计竖屏和横屏两种的设计是更好的
- 有 4 类方向适配设计模式：
| 设计类型 | 行为描述 |
|---|---|
| FLUID | 仅布局调整 change layout 竖向变横/横向变竖 |
| EXTENDED | 添加/删减组件，比如添加Menu button |
| COMPLEMENTARY | 旋转后展示辅助信息， Apple的计算机 横过后有更多功能 |
| CONTINUOUS | 旋转后切换为另一个界面, 重新设计的页面 |
Touch Design
交互动作支持：
- 滑动、轻点、长按、双击、下拉刷新等
- 鼓励模仿现实世界的行为（如拨动、拉开）
手指可触区（Thumb Zone）：
- 最重要按钮应放在 拇指易达区域
- 推荐点击区域 ≥ 48px
Tips：别把按钮放太上或太下！用户最难触达的区域。
Simplicity & Visibility（简洁与可见）
- 大多数用户只使用 app 的 20% 功能
- 明确 app 的“最重要任务”，并设计一键完成
- 示例：Shazam —— 打开即自动识别音乐，极简而高效 Navigation:
Navigation（导航与菜单设计）
- 按钮要大，图标间距不能太小，避免误触
- “汉堡菜单”不是万能方案：
- 如果用户不了解它，建议加“Menu”文字或边框
- 可采用显式标签导航 + 分级菜单
Onboarding & 指引设计
- 第一次进入 app 要引导！
- 教会用户“怎么用”，并个性化内容推荐
- 可以使用“分步引导”、“页面提示动画”、“新手奖励”等方式提升留存率
Input & Context Design
- 不要要求用户填太多内容 只用让用户输入必要的内容就行
- 提供 适当键盘类型（如：数字键盘、邮箱键盘） 当需要输入密码类型时，只用提供的数字键盘就行
- 高对比配色 ➝ 适应阳光下阅读
- 上下文适配：开车、运动、睡前等状态下的交互要简化
Mobile Website design suggestion
| Design aims | Solution |
|---|---|
| Minimize Content 降低视觉负担 | 减少文字数量、用图标代替文字、保留白空间 |
| Simplify Navigation 简化导航 | 一页一操作、使用步骤式流程（如注册分屏展示） |
| Restrict User Inputs 限制输入 | 预填、记住登录、语音输入等 |
增强交互体验的方法
| Methods | Example |
|---|---|
| 渐变图形(Gradient Graphics) | Instagram Logo、Spotify 背景等 |
| 视差滚动 (Parallax) | 背景比前景慢滑动，增加动感（例如 OnCorps.ai） |
| 游戏化 (Gamification) | Duolingo 积分、徽章、等级 |
| 炫酷图标与动效(colorful icon) | 图标即品牌，用色大胆，形象明确 |
Hardware Integration 硬件整合
结合手机的硬件功能提升用户体验
| 组件 | Example |
|---|---|
| 加速计 Accelerometer | 旋转屏幕、倾斜控制游戏、睡眠监测 |
| 摄像头 Camera | AR 测量工具、AR 家具摆放、实时运动捕捉 |
| GPS | 定位签到、导航、附近功能推荐 |
| 麦克风 Microphone | 语音输入、环境感知、识别语音命令 |
| 指纹/面部识别 Touch sensor | 安全登录 |
发表回复
要发表评论，您必须先登录。