北方工业大学：数字媒体技术《人机界面设计》课程教学大纲

《人机界面设计》 课程教学大纲 课程基本信息 总学时为学时数 ■理论课（含上机、实验学时） 课程类型 总学时为周数 口实习 口课程设计口毕业设计 课程编码 7074121 总学时 32学分 2 课程名称 人机界面设计 课程英文名称 I Interface Design 适用专业 数字媒体技术 先修课程 7051821数字媒体导论 开课部门信息学院计算机系 二、 课程支撑的毕业要求 3.2能够对数字媒体领域的一般性工程问题按照系统设计要求，进行系统的 开发与实现。能够具有较强的I设计、程序设计、算法分析、以及系统的开发 实践能力。 4.】能够基于科学原理并采用科学方法对数字媒体领域中的工程问题进行 研究，包括设计实验、分析与解释数据、并通过信息综合得到合理有效的结论 4.2能够利用数字媒体领域的基本方法和工具，对设计的研究方案或实验进 行组织实施。 5.1能够掌握数字媒体领域的常用美术资源设计工具、软件开发环境、数据 分析工具、模拟与仿真等工具，并能理解各种环境和工具的应用场景以及局限性。 10.1能够针对数字媒体领域复杂工程问题解决方案与同学、业界同行及社 会公众进行有效沟通和交流，包括撰写报告和设计文稿、陈述发言、清晰表达、 准确回应等 三、课程性质与目标 本课程为数字媒体技术专业选修课。本课程为学生奠定界面设计和交互设计 的基础，目的是让学生熟悉界面设计的流程，了解界面设计的历史和未来发展趋

《人机界面设计》 课程教学大纲 一、 课程基本信息 课程类型 总学时为学时数  理论课（含上机、实验学时） 总学时为周数 □实习 □课程设计 □毕业设计 课程编码 7074121 总学时 32 学分 2 课程名称 人机界面设计 课程英文名称 Interface Design 适用专业 数字媒体技术 先修课程 7051821 数字媒体导论 开课部门 信息学院计算机系 二、 课程支撑的毕业要求 3.2 能够对数字媒体领域的一般性工程问题按照系统设计要求，进行系统的 开发与实现。能够具有较强的 UI 设计、程序设计、算法分析、以及系统的开发 实践能力。 4.1 能够基于科学原理并采用科学方法对数字媒体领域中的工程问题进行 研究，包括设计实验、分析与解释数据、并通过信息综合得到合理有效的结论。 4.2 能够利用数字媒体领域的基本方法和工具，对设计的研究方案或实验进 行组织实施。 5.1 能够掌握数字媒体领域的常用美术资源设计工具、软件开发环境、数据 分析工具、模拟与仿真等工具，并能理解各种环境和工具的应用场景以及局限性。 10.1 能够针对数字媒体领域复杂工程问题解决方案与同学、业界同行及社 会公众进行有效沟通和交流，包括撰写报告和设计文稿、陈述发言、清晰表达、 准确回应等。 三、 课程性质与目标 本课程为数字媒体技术专业选修课。本课程为学生奠定界面设计和交互设计 的基础，目的是让学生熟悉界面设计的流程，了解界面设计的历史和未来发展趋

势，掌握用户调研、信息架构和原型设计、界面测试的方法，理解界面视觉设计 的原理，培养学生设计用户界面、评估界面的能力。 课程目标1：学生应了解界面设计的历史和未来发展趋势，熟悉界面设计基 本工作流程。 课程目标2：学生应掌握用户调研的多种方法，包括访谈法、问卷法和观察 法等用户调研方法，能够运用亲和图对调研结果进行梳理。 课程目标3：学生应掌握信息架构的方法，包括从上至下及从下至上的架构 方法，掌握卡片分类法的使用。 课程目标4：学生应掌握界面原型的设计方法，包括纸上原型、故事板、视 频原型的设计。 课程目标5：学生应掌握界面测试的方法，包括启发式评估和可用性测试的 测试准备和测试走查、测试结果统计。 课程目标6：学生应理解界面设计的视觉原理，掌握界面情绪板设计，掌握 界面色彩、文字、图标、图形等视觉元素的设计。 课程思政目标：本课程作为理论与实际结合紧密，要突出培育求真务实、实 践创新、精益求精的工匠精神，培养学生严谨求实、吃苦耐劳、追求卓越等优秀 品质，树立心系社会并有时代担当的精神追求。 四、课程教学目标一毕业要求关系表 课程教学目标-毕业要求关系见表1。 表1课程教学目标-毕业要求关系表 毕业要求 毕业要求 毕业要求 毕业要求毕业要求 毕业要求 课程目标 3.2 4.1 42 5.1 10.1 课程目标1 课程目标2 课程目标3 课程目标4 课程目标5 课程目标6 五、课程教学基本内容与要求 1.课程重点

势，掌握用户调研、信息架构和原型设计、界面测试的方法，理解界面视觉设计 的原理，培养学生设计用户界面、评估界面的能力。 课程目标 1：学生应了解界面设计的历史和未来发展趋势，熟悉界面设计基 本工作流程。 课程目标 2：学生应掌握用户调研的多种方法，包括访谈法、问卷法和观察 法等用户调研方法，能够运用亲和图对调研结果进行梳理。 课程目标 3：学生应掌握信息架构的方法，包括从上至下及从下至上的架构 方法，掌握卡片分类法的使用。 课程目标 4：学生应掌握界面原型的设计方法，包括纸上原型、故事板、视 频原型的设计。 课程目标 5：学生应掌握界面测试的方法，包括启发式评估和可用性测试的 测试准备和测试走查、测试结果统计。 课程目标 6：学生应理解界面设计的视觉原理，掌握界面情绪板设计，掌握 界面色彩、文字、图标、图形等视觉元素的设计。 课程思政目标：本课程作为理论与实际结合紧密，要突出培育求真务实、实 践创新、精益求精的工匠精神，培养学生严谨求实、吃苦耐劳、追求卓越等优秀 品质，树立心系社会并有时代担当的精神追求。 四、 课程教学目标-毕业要求关系表 课程教学目标-毕业要求关系见表 1。 表1 课程教学目标-毕业要求关系表 毕业要求 3.2 毕业要求 4.1 毕业要求 4.2 毕业要求 5.1 毕业要求 10.1 课程目标 1 √ 课程目标 2 √ √ 课程目标 3 √ 课程目标 4 √ √ 课程目标 5 √ √ 课程目标 6 √ √ 五、 课程教学基本内容与要求 1．课程重点 毕业要求 课程目标

用户调研、信息架构、界面测试和界面视觉设计。 2.课程难点 用户调研、界面测试和界面视觉设计。 3.课堂教学(16学时) 第一知识单元界面设计概述 学时分配 2学时 教学方式 课堂讲授，ppt电子课件， 板书 教学内容 重点难点 1界面的定义。 人机界面设计的发展历史。人适应机器向以人为中心的转变，命 令行界面、图形化界面、界面设计的未来发展趋势。 3界面设计基本流程。 界面的定义：界面以机器为中心向以人为中心转变的原因。图 考核要点 形化界面视觉风格由平面到拟物，又从拟物风格向扁平风格发 展背后的原因。 第二知识单元用户调研方法 学时分配 2学时 课堂讲授，ppt电子课件， 教学方式 板书 教学内容 重点难点 观察法。观察法的分类；参与观察法的准备、观察技巧和数据整 理。 访谈法。访谈法的分类；访谈准备、访谈中的技巧、访谈后数据 2 的整理。 3问卷法。问卷的设计、问卷的分发与回收和问卷数据的分析。 4专家用户。专家的寻找，与专家的合作方式。 5极端用户。极端用户判断与寻找，极端用户的启发性意义。 日记法。日记的设计，受访用户的维护，日记的分发与回收， 6记数据的分析

用户调研、信息架构、界面测试和界面视觉设计。 2．课程难点 用户调研、界面测试和界面视觉设计。 3. 课堂教学（16 学时） 第一知识单元 界面设计概述 学时分配 2 学时 教学方式 课堂讲授，ppt 电子课件， 板书 教学内容 重点 难点 1 界面的定义。 2 人机界面设计的发展历史。人适应机器向以人为中心的转变，命 令行界面、图形化界面、界面设计的未来发展趋势。 √ 3 界面设计基本流程。 √ 考核要点 界面的定义；界面以机器为中心向以人为中心转变的原因。图 形化界面视觉风格由平面到拟物，又从拟物风格向扁平风格发 展背后的原因。 第二知识单元 用户调研方法 学时分配 2 学时 教学方式 课堂讲授，ppt 电子课件， 板书 教学内容 重点 难点 1 观察法。观察法的分类；参与观察法的准备、观察技巧和数据整 理。 √ 2 访谈法。访谈法的分类；访谈准备、访谈中的技巧、访谈后数据 的整理。 √ √ 3 问卷法。问卷的设计、问卷的分发与回收和问卷数据的分析。 √ √ 4 专家用户。专家的寻找，与专家的合作方式。 5 极端用户。极端用户判断与寻找，极端用户的启发性意义。 6 日记法。日记的设计，受访用户的维护，日记的分发与回收，日 记数据的分析

7用户角色。 访谈法问题的设计。调查问卷的设计。调查数据的回收、甄别 考核要点 分析。用户角色的撰写。 第三知识单元信息架构 学时分配 2学时 教学方式 课堂讲授，ppt电子课件， 板书 教学内容 重点难点 1信息来源 2 信息处理。从下到上体系，从上而下分类体系，超文本体系。卡 片分类法。 3产出信息架构图。 考核要点 从下到上体系，从上而下分类体系，卡片分类法。 第四知识单元原型设计 课堂讲授，ppt电子课件， 学时分配 4学时 教学方式 板书 教学内容 重点难点 1原型的定义与作用。多样性原型设计的重要性及原因。 2纸上原型。材料与工具：创造性的运用材料：纸上原型的测试。 3故事板。故事板的内容梳理：故事版的绘制方法与注意事项。 4视频原型。视频原型的制作方法与注意事项。 考核要点 纸上原型的绘制与测试。故事板的内容梳理与绘制方法。 第五知识单元界面测试 课堂讲授，ppt电子课件， 学时分配 2学时 教学方式 板书 教学内容 重点难点 1启发式评估。评估准备、评估过程中及注意事项、评估结果分析。V√ 2可用性测试。测试准备、用户邀请、测试过程中的注意事项，可VV

7 用户角色。 √ 考核要点 访谈法问题的设计。调查问卷的设计。调查数据的回收、甄别、 分析。用户角色的撰写。 第三知识单元 信息架构 学时分配 2 学时 教学方式 课堂讲授，ppt 电子课件， 板书 教学内容 重点 难点 1 信息来源 2 信息处理。从下到上体系，从上而下分类体系，超文本体系。卡 片分类法。 √ 3 产出信息架构图。 √ 考核要点 从下到上体系，从上而下分类体系，卡片分类法。 第四知识单元 原型设计 学时分配 4 学时 教学方式 课堂讲授，ppt 电子课件， 板书 教学内容 重点 难点 1 原型的定义与作用。多样性原型设计的重要性及原因。 2 纸上原型。材料与工具；创造性的运用材料；纸上原型的测试。 √ 3 故事板。故事板的内容梳理；故事版的绘制方法与注意事项。 √ √ 4 视频原型。视频原型的制作方法与注意事项。 考核要点 纸上原型的绘制与测试。故事板的内容梳理与绘制方法。 第五知识单元界面测试 学时分配 2 学时 教学方式 课堂讲授，ppt 电子课件， 板书 教学内容 重点 难点 1 启发式评估。评估准备、评估过程中及注意事项、评估结果分析。 √ √ 2 可用性测试。测试准备、用户邀请、测试过程中的注意事项，可 √ √

用性问题结果的分析。 启发式评估标准的选择、评估专家的邀请、评估过程的控制、 考核要点 评估结果的统计与处理。可用性测试的用户的邀请，测试材料 的准备，测试过程中的注意事项，可用性问题的定级。 第六知识单元界面视觉设计 课堂讲授，ppt电子课件， 学时分配 4学时 教学方式 板书 教学内容 重点难点 1情绪板设计。作用、制作方法。 2界面视觉层次。视觉焦点、视觉流。 3界面元素设计。图标、莱单、按钮、文本框、链接的设计。 4界面交互设计。 5界面交付 考核要点 情绪板的设计方法。视觉焦点的营造，视觉流的构建，视觉焦 点与视觉流的关系。界面元素的设计方法与依据。 4.实验教学(16学时) 1)实验一用户调研(4学时) 学握访谈法、问卷调查法的实施方法和注意事项，掌握访谈数据的整理与归 类，学会使用亲和图对数据进行梳理。 2)实验二信息架构设计(4学时) 掌握卡片分类法的应用，能够对界面信息进行较为科学的架构。 3)实验三界面测试(4学时) 掌握启发式评估执行方法，包括准备阶段的专家邀请，评估标准确立。评估 过程中的注意事项，以及评估结果的处理。掌握可用性测试的执行方法，包 括可用性测试用户的选择与邀请，评估原型、评估 4)实验四界面视觉设计(4学时) 学握情绪板的设计，用情绪板指导界面的整体设计。能够依据信息架构对界 面进行视觉层次的设计。能够使用Sketch软件设计简洁、美观、完整的界 面。 六 课程学时分配

用性问题结果的分析。 考核要点 启发式评估标准的选择、评估专家的邀请、评估过程的控制、 评估结果的统计与处理。可用性测试的用户的邀请，测试材料 的准备，测试过程中的注意事项，可用性问题的定级。 第六知识单元 界面视觉设计 学时分配 4 学时 教学方式 课堂讲授，ppt 电子课件， 板书 教学内容 重点 难点 1 情绪板设计。作用、制作方法。 √ √ 2 界面视觉层次。视觉焦点、视觉流。 √ √ 3 界面元素设计。图标、菜单、按钮、文本框、链接的设计。 √ 4 界面交互设计。 √ 5 界面交付。 考核要点 情绪板的设计方法。视觉焦点的营造，视觉流的构建，视觉焦 点与视觉流的关系。界面元素的设计方法与依据。 4. 实验教学（16 学时） 1) 实验一 用户调研（4 学时） 掌握访谈法、问卷调查法的实施方法和注意事项，掌握访谈数据的整理与归 类，学会使用亲和图对数据进行梳理。 2) 实验二 信息架构设计（4 学时） 掌握卡片分类法的应用，能够对界面信息进行较为科学的架构。 3) 实验三 界面测试（4 学时） 掌握启发式评估执行方法，包括准备阶段的专家邀请，评估标准确立。评估 过程中的注意事项，以及评估结果的处理。掌握可用性测试的执行方法，包 括可用性测试用户的选择与邀请，评估原型、评估 4) 实验四 界面视觉设计（4 学时） 掌握情绪板的设计，用情绪板指导界面的整体设计。能够依据信息架构对界 面进行视觉层次的设计。能够使用 Sketch 软件设计简洁、美观、完整的界 面。 六、 课程学时分配

课内 课外 教学内容 讲授 实验 上机 学时 学时 小计 1.界面设计概述 2.用户调研方法 2 3.信息架构 2 4.原型设计 5.界面测试 6.界面视觉设计 合 计 七、 实践性教学内容的安排与要求 课程共安排4次实验，实验场地为数字媒体设计实验室，实验前需进行实验 预习，实验后需上交实验报告。 1实验预习要求： 了解实验内容，并对实验内容进行构思和设计。 2.实验报告要求： 1)实验目的： 2)实验设备： 3)实验步骤 4)实验成果： 3.成果分享： 挑选创意构思巧妙，完成度高的实验作品进行分享，增强学生间的良性互动， 提高学生提出建议，接纳建议的能力。 八、教学设计与教学组织 人机界面设计领域发展迅速，需要不断跟进最新英文版教材和引进国外相关 课程的先进教学内容、理念和教学法。课程与实践结合紧密，在教学过程中注意 理论联系实际。 创新课堂教学方式，从传统的“以教为主”转变为“以学为主”。对学生进 行分组，通过命题案例组织学生进行讨论，并在学生讨论成果的基础上引导出课 程的重点、难点问题。对重点难点问题辅以动画、视频、图片、表格形式进行讲 解，增强学生的兴趣，加深学生对知识点的理解和学握。教师讲授基本教学内容

教学内容 讲授 实验 上机 课内 学时 小计 课外 学时 1. 界面设计概述 2 2. 用户调研方法 2 4 3. 信息架构 2 4. 原型设计 4 4 5. 界面测试 2 4 6. 界面视觉设计 4 4 合 计 七、 实践性教学内容的安排与要求 课程共安排 4 次实验，实验场地为数字媒体设计实验室，实验前需进行实验 预习，实验后需上交实验报告。 1.实验预习要求： 了解实验内容，并对实验内容进行构思和设计。 2.实验报告要求： 1) 实验目的； 2) 实验设备； 3) 实验步骤； 4) 实验成果； 3.成果分享： 挑选创意构思巧妙，完成度高的实验作品进行分享，增强学生间的良性互动， 提高学生提出建议，接纳建议的能力。 八、 教学设计与教学组织 人机界面设计领域发展迅速，需要不断跟进最新英文版教材和引进国外相关 课程的先进教学内容、理念和教学法。课程与实践结合紧密，在教学过程中注意 理论联系实际。 创新课堂教学方式，从传统的“以教为主”转变为“以学为主”。对学生进 行分组，通过命题案例组织学生进行讨论，并在学生讨论成果的基础上引导出课 程的重点、难点问题。对重点难点问题辅以动画、视频、图片、表格形式进行讲 解，增强学生的兴趣，加深学生对知识点的理解和掌握。教师讲授基本教学内容

的过程中适当穿插引入个体针对性提问、集体提问、答疑、讨论等教学形式。通 过慕课为学生提供课前预习和课外拓展的学习资料。 九、教材与参考资料 1.教材 Jenifer Tidwell,Designing Interfaces(第二版)，电子工业出版社，2O08 1SBN9787121047978。 2.参考资料 动静之美Sketch移动U与交互动效设计详解，黄方闻编著，人民邮电出版 社，2016.ISBN9787115426208。 人机交互以用户为中心的设计和评估（第6版），董建明等，清华大学出版社， 021.ISBN9787302589488。 人机交互基础教程（第2版），孟祥旭，清华大学出版社，2016. ISBN9787302427452。 十、 知识单元对课程目标的达成度设计 围绕每一个具体的课程目标，从相关支撑知识单元的角度设计不同的考核方 式，如下表： 课程目标 知识单元 考核方式设计 单元1界面设计概述 以问答题的方式在实验报考 目标1 中考核。 单元2用户调研方法 在实验中实施访谈和问卷调 目标2 查进行用户调研，通过实验 报告成果老核。 单元3信息架构 在实验中用卡片分类法对案 目标3 例进行信息架构，通过实验 报告成果考核。 单元4原型设计 在实验中用完成案例的纸上 目标4 原型、故事板和视频原型设 计，通过实验报告成果考核。 单元5界面测试 对上一实验中的原型成果进 目标5 行测试，通过实验报告成果 考核。 单元6界面视觉设计 完成实验案例的界面视觉设 目标6 计，通过实验报告成果考核

的过程中适当穿插引入个体针对性提问、集体提问、答疑、讨论等教学形式。通 过慕课为学生提供课前预习和课外拓展的学习资料。 九、 教材与参考资料 1. 教材 Jenifer Tidwell，Designing Interfaces(第二版)，电子工业出版社，2008. ISBN9787121047978。 2. 参考资料 动静之美 Sketch 移动 UI 与交互动效设计详解，黄方闻编著，人民邮电出版 社，2016. ISBN9787115426208。 人机交互以用户为中心的设计和评估(第 6 版)，董建明等，清华大学出版社， 2021. ISBN9787302589488。 人 机 交 互 基 础 教 程 ( 第 2 版 ) ， 孟 祥 旭 ， 清 华 大 学 出 版 社 ， 2016. ISBN9787302427452。 十、 知识单元对课程目标的达成度设计 围绕每一个具体的课程目标，从相关支撑知识单元的角度设计不同的考核方 式，如下表： 课程目标 知识单元 考核方式设计 目标 1 单元 1 界面设计概述 以问答题的方式在实验报考 中考核。 目标 2 单元 2 用户调研方法 在实验中实施访谈和问卷调 查进行用户调研，通过实验 报告成果考核。 目标 3 单元 3 信息架构 在实验中用卡片分类法对案 例进行信息架构，通过实验 报告成果考核。 目标 4 单元 4 原型设计 在实验中用完成案例的纸上 原型、故事板和视频原型设 计，通过实验报告成果考核。 目标 5 单元 5 界面测试 对上一实验中的原型成果进 行测试，通过实验报告成果 考核。 目标 6 单元 6 界面视觉设计 完成实验案例的界面视觉设 计，通过实验报告成果考核

十一、课程考核方式与成绩评定标准 考核采用百分制，总评成绩由平时成绩和期末成绩构成，平时成绩占30%， 期末成绩占70%。平时成绩包括出勤与实验过程表现构成，其中出勤占10%，实 验过程表现占20%。期末成绩由课程实验报告构成，实验报告成绩占70%。 十二、大纲制（修）订说明 无 大纲执笔人：胡燕 大纲审核人：王辉柏 开课系主任：蔡兴泉 开课学院教学副院长：宋威 制（修）订日期：2022年2月

十一、 课程考核方式与成绩评定标准 考核采用百分制，总评成绩由平时成绩和期末成绩构成，平时成绩占 30%， 期末成绩占 70%。平时成绩包括出勤与实验过程表现构成，其中出勤占 10%，实 验过程表现占 20%。期末成绩由课程实验报告构成，实验报告成绩占 70%。 十二、 大纲制(修)订说明 无 大纲执笔人：胡燕 大纲审核人：王辉柏 开课系主任：蔡兴泉 开课学院教学副院长：宋威 制（修）订日期：2022 年 2 月