大学本科计算机科学与技术三年级《人机交互界面优化设计》教案

大学本科计算机科学与技术三年级《人机交互界面优化设计》教案

一、课程定位与目标体系

（一）课程性质与定位

本课程是计算机科学与技术专业三年级专业核心必修课【核心定位】，在完成“人机交互导论”“程序设计基础”等前序课程后开设，承担着从理论认知向工程实践转化的枢纽作用。课程以“优化”为轴心，将可用性工程、用户体验度量与界面实现技术深度融合，旨在培养具备用户洞察能力、交互诊断能力与迭代设计能力的复合型工程人才。

（二）教学目标全维解构

1.知识维度

[1]牢固掌握尼尔森十大可用性原则及其应用变式【基础】【高频考点】。

[2]系统阐释以用户为中心的设计（UCD）全流程阶段模型【核心】。

[3]精准区分低保真、中高保真原型的适用场景与工具特征【重要】。

[4]完整复述启发式评估与可用性测试的实施步骤与度量指标【高频考点】。

[5]理解A/B测试的统计学原理及在交互优化中的决策逻辑【进阶】【热点】。

2.能力维度

[1]能够运用启发式评估与认知走查法独立完成中小型界面的可用性审计【核心能力】。

[2]具备从用户访谈、问卷数据中萃取典型用户画像与体验地图的能力【重要】。

[3]熟练使用Figma或AxureRP构建可交互原型，并依据测试证据实施迭代修改【核心技能】。

[4]初步形成基于影响力-努力矩阵的优化优先级决策思维【难点突破】。

[5]能够设计简易A/B测试方案，并解读常见统计指标【热点应用】。

3.素养维度

[1]确立“用户≠自己”的移情意识，自觉规避自我参照性偏差【价值基础】。

[2]养成以证据而非直觉驱动设计决策的工程伦理【核心素养】。

[3]在小组协作中体验跨学科角色（如用户代表、开发顾问）的沟通范式【重要】。

二、教学重点与难点层析

（一）教学重点【应列尽罗】

1.尼尔森十大可用性原则的语境化应用【核心】【高频考点】。

2.以用户为中心的设计四阶段迭代闭环【基础】。

3.用户画像、场景剧本、用户体验地图的协同构建【重要】。

4.启发式评估的独立实施与严重性评级【高频考点】。

5.可用性测试的任务设计、数据采集与问题定位【核心技能】。

6.影响力-努力矩阵在优化排期中的决策应用【热点】。

（二）教学难点【应列尽罗】

1.可用性原则在多重约束（技术成本、业务目标）下的综合权衡【难点一】。

2.从用户言语化数据（访谈）与非言语行为（犹豫、跳过）中挖掘隐性需求【难点二】。

3.将模糊的用户挫败感转化为可操作的设计假设【难点三】。

4.量化优化前后指标变化并排除混杂变量干扰【进阶难点】【热点】。

三、教学环境与资源矩阵

（一）物理与数字环境

智慧交互教室，学生机预装Figma（团队版）、AxureRP10、BalsamiqWireframes；教师机连接眼动仪TobiiProNano及Morae录屏分析软件；分组白板区配置Miro在线协作看板；移动端投屏系统支持多终端同步演示。

（二）案例与素材库

1.正反案例镜像库：包含30组界面优化前后对照（涵盖电商、政务、教育、医疗领域），每例标注违反的具体原则及优化逻辑。

2.用户研究工具包：半结构化访谈提纲模板、SUS系统可用性量表、情绪板词云生成脚本。

3.视频微课资源：可用性测试现场实录（含被试出声思维音频）、专家启发式评估会议录像节选。

四、教学实施过程【核心主体·四课时螺旋递进】

（一）第一课时：交互优化基石——原则建构与诊断意识

1.触发认知冲突：劣构问题导入（8分钟）

教师展示同一金融App在2018年与2024年的转账界面迭代对比图。2018版采用密集表格、专业术语（“行号”“大额汇款”）、无反馈按钮；2024版以卡片聚合、自然语言（“给谁转？”“多久到账？”）、动态进度提示。设问：“哪一版更符合你当下的使用习惯？能否用三个关键词描述两版的核心差异？”学生以邻座二人组进行“快照讨论”，2分钟后随机抽取三人用一句话概括。教师将高频词（“复杂”“迷茫”“快速”“安心”）板书于智慧屏侧栏，并揭示本课核心命题：优化是移除用户认知摩擦的系统工程。【核心导入】

2.知识建构：交互优化三维度与十大原则精讲（20分钟）

[1]优化定义破拆【基础】。教师以“优化≠美化”破题，提出“人机交互优化设计”的操作性定义：在理解用户心智模型、任务场景与环境制约的基础上，通过调整界面信息架构、行为反馈与视觉呈现，系统性提升任务效率、降低操作错误率并积累正向情感体验的迭代过程。强调优化是动词、是过程，而非静态修饰。

[2]三维度量模型【高频考点】。教师以运动手环数据看板类比，阐释交互优化的三个可量化维度：效率（任务完成时间、点击步数）、效能（任务完成率、错误数）、满意度（SUS得分、净推荐值）。以线上报税流程为例，演示“上传附件”环节因格式提示不明导致反复失败——效能下降；增加实时格式校验与示例文件后，三项指标同步改善。此案例同时锚定“错误预防”原则。

[3]尼尔森十大可用性原则语境化解析【核心】。每项原则均按“定义-正例-反例-边界条件”四阶讲授。

1.系统状态可见性：进度条需展示相对位置与剩余量，反例：点击后无任何反馈直至5秒后跳转。【基础】

2.系统与现实匹配：使用用户领域词汇而非开发术语，如“借阅证号”而非“读者标识符”。反例：权限弹窗提示“需要访问存储空间”，用户不解。【重要】

3.用户控制与自由：为中断操作提供显性出口。正例：多步流程中每页均有“暂存并退出”。反例：仅有关闭按钮且无保存提示。【基础】

4.一致性与标准：同一功能同一命名，组件库统一调用。反例：同一定位功能，首页称“查找书店”，详情页称“附近门店”。【高频考点】

5.错误预防：通过约束与格式化输入规避错误。正例：手机号输入框自动分段并屏蔽字母。【难点】

6.识别而非回忆：关键选项可见。正例：常访问联系人头像列表，无需输入姓名检索。【基础】

7.灵活性与效率：为高频操作提供快捷键或手势。正例：邮件App左滑归档。【进阶】

8.美学与极简设计：仅保留与任务直接相关的信息。反例：首屏堆叠8个推广banner，核心搜索框被折叠。【热点】

9.帮助用户识别错误：报错文案须定位问题+引导解决。正例：“密码需包含大写字母，您当前未使用”。【重要】

10.帮助文档：搜索命中率高，步骤截图与当前版本同步。【基础】

讲授中穿插实时投票：教师展示四张界面局部截图，学生通过终端选择所违反的原则，即时生成全班的错误类型分布热图，教师针对争议项（如“一致性”与“用户控制”易混）进行辨析。

1.原则迁移训练：诊所式小组研讨（12分钟）

分组任务：每组领取一个具有典型可用性缺陷的垂直领域原型（医疗挂号、高铁抢票、宿舍报修等，共6种，组间不同）。要求：[1]每人在3分钟内独立检出至少2处问题并标注对应原则；[2]小组汇总至Miro看板，将问题拖拽至原则分类栏下，并协商评定每项严重等级（0=非问题，1=表面问题，2=次要问题，3=主要问题，4=灾难性问题）。【重要】教师巡组时重点引导：同一界面问题可能被多条原则解释，需判断最贴切的归因。例如按钮颜色过浅，既可归为“美学与极简设计”，也可归为“系统状态可见性”（状态不明），但后者更触及反馈缺失的本质。5分钟后，每组以“发现官”角色用1分钟陈述最具价值的一项发现。教师点评时提炼“原则不是标签，而是手术刀”的诊断意识。【难点破冰】

2.认知固化与延伸任务（5分钟）

教师以闭合式提问总结：“今天学到的十条原则，哪一条能最快帮你改善当前最常用App的体验？”学生用终端发送代码词，生成词云，最高频词成为课后观察锚点。作业：个人完成一份“可用性原则观察日志”，选取自己每日必用的一款应用，截取三个界面，分别指出符合与违背原则之处，图文对照，下次课随机抽评。【基础巩固】

（二）第二课时：流程引擎——以用户为中心的需求挖掘与表征

1.作业展评与原则再认（10分钟）

教师随机抽取四份作业投屏，由作者简述发现，全班以“原则快速接龙”形式响应（一人指出问题，下一人立即说出对应原则）。教师聚焦共性误区：将个人偏好等同于原则违背（如“我不喜欢红色”并非可用性问题），并重申原则诊断须基于用户目标受阻证据。【重要】

2.方法论全景：以用户为中心的设计（UCD）流程内核（15分钟）

[1]UCD哲学陈述【核心】。教师引用ISO9241-210定义，强调“用户参与贯穿始终”的实质：不是仅在开始访谈，而是在原型、测试直至上线后持续纳入反馈。以圆形循环图动态演示“分析情境-明确需求-设计方案-评估迭代”闭环，并指出传统瀑布模型与此的本质对立。

[2]用户情境分析工具链【高频考点】。

1.用户画像：从定性数据（访谈）与定量数据（问卷聚类）中提取行为模式与目标。教师展示反例画像（“张三，25岁，喜欢科技”），指出其无效性；正例画像必须包含“目标-行为-痛点”三角。以校园闲置交易小程序为例，现场从三段真实访谈纪要中摘取关键信息，演示如何合成典型画像“二手达人李萌”。【基础】

2.场景剧本：以叙述体描述用户在某情境下使用系统达成目标的完整故事。教师区分“必为场景”（核心任务）与“偶发场景”（异常处理）。【重要】

3.用户体验地图：以时间为轴，串联用户行为、接触点、想法、情绪线，定位机会缺口。教师以图书馆预约座位流程为完整示范，展示情绪曲线在“选座图载入慢”处骤降，揭示优化机会。【难点突破】

1.工具实战：为共享单车治理定义用户需求（18分钟）

任务发布：校园共享单车存在潮汐淤积、故障报修响应慢等问题。每组领取一份真实用户语录集（含3名学生的访谈节选，教师课前采集），15分钟内协作完成：[1]提炼典型用户画像1个，须包含姓名、身份特征、骑行习惯、核心目标、典型挫败点。【基础】[2]绘制从“解锁用车”到“关锁支付”全流程用户体验地图，标注至少三个情绪低谷，并针对每个低谷提出一个“我们如何……”（HMW）设计机会点。【重要】【热点】

教师巡组提供支架：情绪曲线不用数值，用“😊😐😫”三档定性；机会点不求完美方案，而是重构问题视角（例如针对“找不到车”，将“增加车辆”转为“预知车辆分布”）。抽取一组展示画像与地图，其他组以“用户代言人”身份质疑画像刻板性，如“是否所有学生都赶时间？”教师引导：画像应代表一类集群，而非虚构平均人。【核心实践】

2.项目启动锚定（2分钟）

布置小组项目选题：每组从校园生活服务中选择一个存在明显交互痛点的数字化触点（如图书馆研讨间预约、食堂点餐屏、课程评价系统），进行初步用户调研（至少访谈2名真实用户），下次课时携带用户画像草稿与场景剧本初案。【项目驱动】

（三）第三课时：原型迭代与评估双轨——将需求转化为验证

1.原型概念锚入（5分钟）

快速回顾：用户画像中的“李萌”在体验地图中的情绪低谷，教师设问：“如果我们现在要为李萌设计一个新的找车界面，最快的方法是什么？”引出原型定义——将设计概念外化以供测试与沟通的低成本制品。【核心工具】

2.原型保真光谱与工具链（10分钟）

[1]保真度连续统【基础】。低保真：纸面草图、线框图，关注信息架构与任务流，5分钟可改。中高保真：接近视觉稿、包含交互动效，适合细粒度测试。教师类比建筑学草模与渲染效果图，强调“保真度由待测问题决定”——测试导航层级用低保真，测试手势操作需高保真。【高频考点】

[2]工具速通。演示Figma创建组件、设置交互变体、发布可链接原型；展示AxureRP中中继器模拟动态数据。学生机同步练习：将一张纸质手绘登录页用Figma重构为线框图，耗时3分钟。【重要】

3.评估方法双柱：启发式评估与可用性测试精讲（18分钟）

[1]启发式评估：低成本专家审查【热点】。教师强调“评估者异质性”原则——3-5名评估者独立进行可发现80%问题。实施六步法：熟悉任务场景→浏览两遍（全局→局部）→定位具体元素问题→参照原则命名→评定严重等级→汇总报告。现场演示：教师以某课程论坛发帖流程为对象，口述思维过程——“我要找发帖按钮，它藏在二级菜单，这违背了‘识别而非回忆’，严重等级3，因为阻塞核心任务”。【难点示范】

[2]可用性测试：真实用户行为观测【核心技能】。三要素铁律：代表性用户（非同事）、典型任务（高频+高风险）、观测记录（录屏+出声思维）。教师播放一段5分钟测试录像：被试在二手交易App发布商品时，始终未找到“包邮”设置，最终放弃。学生记录关键事件发生时间戳与行为线索（反复点击不可用字段、叹息）。引出度量指标：任务成功率、时间、错误数、SUS量表。现场演算SUS分数转换公式（奇数项减1，偶数项5减，求和乘2.5）。【高频考点】

4.双轨实战：从评估到测试的验证循环（20分钟）

任务情境：每组接收一个“有缺陷的选课系统成绩查询原型”（Figma团队链接，含6处预设问题，如查询条件混用、结果排序混乱、无反馈）。【核心实践】

第一循环（8分钟）：组内4人扮演评估者，独立依据十大原则审查，汇总问题清单并严重评级。要求至少检出5项，用Miro贴纸标记位置。

第二循环（10分钟）：角色扮演可用性测试——2人任“用户”（非设计背景，可跨组），1人任主持人（宣读任务、鼓励出声思维），1人任记录员（计时、计数错误、截取困惑表情）。任务：“查询2023-2024学年第一学期数据库原理课程成绩”。完成后主客交换。

小组整合：对比两轮发现问题集合，讨论哪些问题仅通过测试暴露（如被试对“学期”下拉框格式误解），哪些被评估预见但测试未出现（因用户未触发该路径）。教师总结：评估快但可能误判严重性，测试真但样本有限，双轨并行是成熟团队的标配。【核心洞见】

5.项目推进指令（2分钟）

各小组依据本周完成的用户调研资料，用Figma或纸面构建所选题目的低保真原型；组内执行一轮启发式评估，产出一份问题清单及至少三项修改计划。下次课进行“迭代前-迭代后”对比展示。【项目驱动】

（四）第四课时：决策智慧——优化优先级与数据驱动迭代

1.迭代叙事复盘（8分钟）

随机抽取两组，用2分钟快速展示原型修改对照：左屏初始设计，右屏根据评估问题调整，并用箭头标注改动处。教师提炼共性修改类型：信息层级扁平化、反馈信号显性化、操作路径缩短。强调迭代不是推倒重来，而是基于证据的精准微创手术。【核心思维】

2.优先级决策：影响力-努力矩阵实战（12分钟）

[1]矩阵框架植入【高频考点】。教师以四象限图示：横轴“实现努力”（低至高），纵轴“用户体验影响力”（低至高）。高影响力-低努力：立即实施（低垂果实）；高影响力-高努力：路线图规划；低影响力-低努力：不做或最后做；低影响力-高努力：坚决不做。以出行App酒店预订页为例，演示将“增加免费取消筛选”定位第一象限，将“重构评论系统”定位第二象限。【决策工具】

[2]小组应用：每组从上一轮启发式评估问题清单中挑选4项，粘贴至Miro矩阵模板，并阐述排期逻辑。教师挑一组典型争议（如“修改图标风格”低影响力-高努力vs“增加历史搜索”高影响力-低努力）引导辩论，使学生理解决策本质是资源约束下的价值最大化。【难点攻克】

3.量化验证：A/B测试与统计思维渗透（10分钟）

[1]A/B测试核心要素【热点】。教师定义：同时运行原方案（A）与修改方案（B），分流用户流量，通过关键指标差异判断优胜版本。五大要素拆解：假设、变量、流量分割、样本量、统计显著性。以某新闻App标题党优化为例——原标题“震惊……”vs新标题“3个技巧……”，假设后者提高点击率，单一变量为标题文案，流量五五分，计算点击率提升0.5%且p<0.05判定胜出。【核心概念】

[2]快速实验：教师Excel演示两组点击数据（n=500），运用TTEST函数输出p值，学生直观感受“差异可能由随机波动造成”这一统计学核心观念。强调切忌提前停止测试、切忌多变量同时改动。【素养渗透】

4.综合实战工坊：图书馆座位预约系统优化（25分钟）【高峰体验】

任务情境：图书馆委托优化座位预约Web界面。教师分发当前系统真实截图（含7处原生缺陷）与三份典型用户诉求（“预约成功无推送”“取消预约步骤深”“剩余座位图例色盲不友好”）。每组15分钟内完成：

[1]全流程诊断：综合运用尼尔森原则与测试经验，定位至少8处具体问题，标注原则归类与严重等级。【综合应用】

[2]快速优化决策：应用影响力-努力矩阵，选定3项“立即做”优化项，绘制修改后线框图（纸面或Figma）。【决策实践】

[3]实验设计：为其中一项优化点设计微型A/B测试方案，明确假设（H0/H1）、测试指标（如点击通过率）、流量分配计划。【创新应用】

后10分钟，两组合并互评，从“问题挖掘深度”“方案与痛点关联度”“测试可执行性”三个维度贴星投票。教师总评时升华：优化没有终点，每一次测试都为下一次优化提供起点。【价值锚定】

5.知识体系结构化与前瞻视野（7分钟）

[1]思维导图式收束：教师边口述边在屏端生成全课程概念网络——中心为“交互优化设计”，四根支干为“原则（尼尔森十原则）”“流程（UCD双钻模型）”“方法（评估/测试/原型）”“决策（矩阵/A-B测试）”，每根支干附着关键术语与核心操作步骤。【系统建构】

[2]前沿窗口：3分钟微讲座《生成式AI重塑