前置知识: 计算机基础

人机交互

00:00
5 min Intermediate 2026/6/14

人机交互:交互设计原则、可用性评估、用户研究方法与界面设计模式

1. 人机交互概述

1.1 定义

人机交互(HCI)是研究人与计算系统之间交互的学科,目标是使系统可用、高效、愉悦。

1.2 交互设计原则

Nielsen 十大可用性原则

  1. 系统状态可见性
  2. 系统与现实世界的匹配
  3. 用户控制与自由
  4. 一致性与标准
  5. 错误预防
  6. 识别而非回忆
  7. 灵活性与效率
  8. 美学与极简设计
  9. 帮助用户识别和恢复错误
  10. 帮助与文档

1.3 Norman 的设计原则

  • 可见性:功能应可见
  • 反馈:操作结果应即时反馈
  • 约束:限制可能的操作
  • 映射:控制与效果之间的关系
  • 一致性:相似操作有相似方式
  • 启示(Affordance):物品外观暗示使用方式

2. 用户研究

2.1 定性研究方法

方法优点缺点
用户访谈深入了解主观偏差
焦点小组多角度群体思维
情境调查真实场景耗时
日记研究长期行为参与度低

2.2 定量研究方法

方法优点缺点
问卷调查覆盖面广深度不足
A/B 测试因果推断需要大量流量
眼动追踪客观行为数据设备昂贵
点击热图使用模式缺乏意图

2.3 用户画像

基于研究数据创建典型用户角色:

姓名:张明
年龄:28岁
职业:前端开发工程师
技术水平:高级
目标:快速完成开发任务
痛点:文档查找困难

3. 交互设计

3.1 任务分析

层次任务分析(HTA)

任务:在线购物
├── 1. 搜索商品
│   ├── 1.1 输入关键词
│   ├── 1.2 筛选结果
│   └── 1.3 查看详情
├── 2. 添加到购物车
├── 3. 结算
│   ├── 3.1 填写地址
│   ├── 3.2 选择支付方式
│   └── 3.3 确认订单
└── 4. 查看物流

3.2 用户旅程地图

阶段:发现 → 评估 → 购买 → 使用 → 忠诚
行为:搜索 → 对比 → 下单 → 开箱 → 推荐
情绪: →  →  →  →
痛点:信息过载 → 选择困难 → 支付复杂 → 设置困难 → 无
机会:智能推荐 → 对比工具 → 一键支付 → 引导设置 → 社区

3.3 信息架构

组织方案

类型示例适用
按字母字典、通讯录已知目标
按时间新闻、博客时间敏感
按主题电商分类探索浏览
按任务软件菜单任务导向

导航设计

  • 全局导航:始终可见
  • 局部导航:当前区域
  • 面包屑:路径追踪
  • 相关导航:关联内容

4. 界面设计模式

4.1 输入模式

模式适用场景示例
表单结构化数据输入注册表单
拖放空间操作文件上传
内联编辑快速修改点击编辑
语音输入免手操作语音助手

4.2 数据展示模式

模式适用场景示例
列表同类数据搜索结果
表格结构化数据数据报表
卡片多属性数据商品卡片
仪表盘指标监控管理后台

4.3 反馈模式

模式严重程度示例
Toast保存成功
通知新消息
对话框删除确认
行内提示密码强度

5. 可用性评估

5.1 评估方法

方法类型阶段成本
启发式评估专家评审任何
认知走查专家评审设计
可用性测试用户测试设计/开发
A/B 测试在线实验上线

5.2 启发式评估

3~5 名专家独立评估,按 Nielsen 十大原则逐项检查。

发现的问题数量:

其中 为单个评估者发现问题的概率(约 30%~50%), 为评估者数量。

5 名评估者可发现约 75%~85% 的可用性问题。

5.3 可用性测试

任务设计

场景:你想购买一本关于机器学习的书
任务:在网站上找到评分最高的机器学习书籍并加入购物车
成功标准:3分钟内完成,不超过2次错误

指标

指标测量方法
任务完成成功完成任务的比例
任务时间完成任务所需时间
错误操作错误次数
满意SUS 问评分
学习曲线首次 vs 后续任务时间

5.4 SUS 问卷

系统可用性量(System Usability Scale),10 个问题,5 分制:

SUS 分数解读:

分数等级
> 90A(最佳)
80~90B(优秀)
70~80C(良好)
60~70D(及
< 60F(差)

6. 无障碍设计

6.1 WCAG 原则

  • 可感知信息可被感知
  • 操作:界可被操作
  • 可理解信息可被理解
  • 健壮性内容可被各种技术解析

6.2 关键要求

要求说明
文本替代图片有 alt 文本
键盘操作所有功能可用键盘
足够文本对比 ≥ 4.5:1
可调整文本支持放大至200%
错误建议提供错误修正建议

6.3 辅助技术

  • 屏幕阅读器:JAWS、NVDA、VoiceOver
  • 屏幕放大器:ZoomText
  • 语音控制:Dragon NaturallySpeaking
  • 开关设备开关输入

知识检测

学习进度

-- 已学文档
--% 知识覆盖率

学习推荐

专注模式