课程是本科数字媒体技术专业的专业基础课,主要任务是掌握人机界面方法、理论与设计实例，探索新的交互技术。课程设定构建应用型“技艺融合”本科课程。（数字媒体技术专业是一个技术与艺术相结合的综合性交叉学科，它具有理论与实践并重的特点。）
本课程的先修课程有《C语言程序设计》、《色彩与构成》。
后续课程有《网页设计与制作技术》、《客户端编程技术》、《网络游戏开发技术》等。
二．课程目的
通过对本课程的学习，学生加深对交互界面设计、软件工程、程序设计语言的理论知识的理解和应用水平，了解和掌握交互界面设计的基本方法，熟悉界面设计与制作的步骤和发布流程。掌握以用户为中心的互联网产品设计，网页布局技术；掌握HTML5+CSS编码技术，能进行人机交互界面的设计。为学生学习后续课程和将来从事工作打下必备基础。
三．课程设计思路
1、总体描述
本课程将根据高职教育的特征，以计算机职业能力培养为重点，应用现代教育技术理论，将“面向过程”、“项目导向”、“工学结合”、“任务驱动”作为课程开发与设计的基本理念。课程设计将面向工作过程的项目教学、任务驱动教学、案例教学的教学思想融为一体，并不追求形式上的项目教学、任务驱动教学或案例教学，而是重点体现项目教学、任务驱动教学、案例教学的精神实质。本课程将人机交互界面设计视为一个整体项目过程，打破传统教学的条块界限，按照网站建设与网页设计制作的实际项目过程作为课程教学主线，这样网页设计制作的实际顺序即是本课程的教学顺序。
本课程应用现代教育技术理论指导教学。特别是建构主义学习理论，充分体现学生主体地位和教师的主导作用，培养学生的自主学习、协作学习能力；采用任务驱动教学法，培养学生运用所学知识解决实际问题的能力；运用信息技术与课程整合，采用现代化多媒体教学手段以提高教学效率。
本课程既注重知识的科学性、系统性，又注重技能的实用性、可操作性。各部分都设有明确的教学目标任务，在内容安排上特别适合任务驱动教学法。
2、课程体系结构
任务模块 | 学习情景 | 目标 |
人机交互艺术设计 | 网站开发前期的知识准备，网站项目启动的基础。 | （1） 人机界面的定义、起源及发展 （2）了解软件开发过程 |
用户体验要素 | 用户体验概念 五个层面要素 战略层面——产品目标和用户需求 范围层——功能规格和内容需求 结构层——交互设计与信息架构 框架层——界面设计、导航和信息设计 表现层——感知设计 | （1）了解产品目标和用户需求，团队角色和流程 （2）掌握如何确定需求优先级 （3）掌握构建交互设计与信息架构方法和原则 （4）掌握界面设计、导航和信息设计的方法 （5）掌握界面视觉设计的方法 |
网页设计基础 | Photoshop设计基础知识 Photoshop图层样式与模式的运用 Photoshop图像调整与蒙版运用 Photoshop滤镜特效应用 Photoshop合成效果应用 Photoshop鼠绘特效 | （1）掌握Photoshop工具运用 （2）掌握photoshop特效合成运用 （3）Photoshop图层样式与模式的运用 （4）Photoshop图像调整与蒙版运用 （5）Photoshop滤镜特效应用 |
界面艺术设计 | 版式设计基础 网页色彩搭配基础 网页布局设计 网页界面设计 | （1）掌握网页界面设计布局原则 （2）掌握网页版式设计方法 （3）掌握网页色彩搭配 |
网页页面制作基础 | Web基础知识 HTML5基础知识 CSS3基础知识 盒子模型 表格、表单页面 系统的功能分析与设计 | （1）了解web、IP和域名、HTTP、FTP （2）认识DreamweaverCC2015 （3）网页文件的基本操作 （4）HTML5基础标签 （5）文本及图片制作 （6）超链接、列表标签及HTML5媒体元素 （7）CSS声明、选择符、注释、属性、定位、伪类及伪对象、动画及过渡、应用原则 （8）盒子模型、盒子的浮动、定位、简单网页布局 （9）表格的插入、嵌套、拆分及合并 （10）HTML5中的表单设计与制作 |
四、课程内容设计和学时分配要求
教学内容及学时分配表
序号 | 学习情景 | 情景描述 | 参考学时 |
1 | 人机交互艺术设计 | 网站开发前期的知识准备，网站项目启动的基础。 | 2 |
2 | 用户体验要素 | 用户体验概念 五个层面要素 战略层面——产品目标和用户需求 范围层——功能规格和内容需求 结构层——交互设计与信息架构 框架层——界面设计、导航和信息设计 表现层——感知设计 | 6 |
3 | 网页设计基础 | Photoshop设计基础知识 Photoshop图层样式与模式的运用 Photoshop图像调整与蒙版运用 Photoshop滤镜特效应用 Photoshop合成效果应用 Photoshop鼠绘特效 | 20 |
4 | 界面艺术设计 | 版式设计基础 网页色彩搭配基础 网页布局设计 网页界面设计 | 16 |
5 | 网页页面制作基础 | Web基础知识 HTML5基础知识 CSS3基础知识 盒子模型 表格、表单页面 系统的功能分析与设计 | 20 |
五．课程实施条件与建议
1、实施条件
| 教 师 | 学 生 | 办学条件 |
内部环境分析 | １．对教师的要求 有丰富的网页设计与制作的经验与知识，老师具有一定的美学功底，熟练掌握网页制作中各项基本技能。熟练Dreamweaver软件操作。 ２．本院教师的现状 担任本门课程教学任务的有4人，教师的优势条件是都一直从事网页设计与制作教学的工作，并在此方面做了一定的贡献。所有的教师都有3年以上的项目实践经验。 | １． 学生高考成绩居于中低段． ２． 已经初步掌握了办公软件使用。 ３． 学习目标不明确，学习动力不足，稳定性差，缺乏创新精神和自我调控能力。 ４． 部分学生对电脑操作和上网不熟练，打字速度不快。 ５． 涉及语言方面知识感到枯燥，学习积极性不高。 ６． 思想活跃、参与热情高、社会活动能力强。 ７． 对移动终端界面设计的感兴趣。 | １． 学院已经具备计算机实验室和多媒体教室，能满足课程教学需要． ２． 有可整体接纳学生的实习公司（基地）．重庆正大恒岭有限公司 |
外部环境分析 | １． 社会对有关知识或技能需要的程度：掌握网页界面设计的技能，能够熟练用div+css进行html页面排版设计，可独立快速完成网站前期的设计与制作；协调和沟通能力强，工作认真负责，具有良好的职业操守，团队合作意识强 ２． 相关技术或知识进步情况：精通photoshop、Dreamweaver设计软件； |
2、实施建议
教材选用:《人机交互界面设计》
教师教学方法与手段：
宏观教学方法：项目教学法、专题讨论
微观教学方法：任务驱动法、探究法、“教学做”三位一体法
学生学习方法:模仿学习法、比较学习法、直接学习法、拆卸学习法
课程教学过程使用的主要教学方法、使用目的、实施过程，如表7所示。
表7主要教学方法、使用目的、实施过程
教学方法 | 使用目的 | 实施过程 |
课堂教学采用项目教学法 | 激发学习兴趣，提高学生分析问题、解决问题的实际能力，达到轻松学习、自主学习的目的；充分调动了学生的学习积极性和主动性，有效提高学生的学习能力、应用能力和创新能力 | 采用项目驱动与能力和知识紧密相结合的全新教学模式，一边分析讲解、一边操作演示、一边动手练习，教、学、做一体 |
实践教学采用任务驱动型教学法 | 充分调动了学生的学习积极性和主动性，有利于训练学生职业态度，有效提高学生的知识应用能力和创新能力 | 将实践内容划分为相对独立的任务，这些任务分为三种类型：创意实践操作项目、独立操作项目、工学结合项目 |
启发式教学方法 | 突出培养学生的分析问题、解决问题的综合素质，强化学生的动手操作能力，突出“以学生为中心”的原则，达到“在做中学”的目的 | 网页欣赏－问题提出－准备素材－分析方法－展示结果－模仿操作－归纳总结 |
实际案例教学法 | 提高学生工作流程的认识，融创新思维培养、团队学习方式、实践案例教学于课程教学中 | 将实际案例引入教材、教学体系中，每个重要知识点均与实际应用结合起来 |
六．课程考核方案设计
本课程推行“过程考核+综合考核+期末考核”结合的方式，采用“全方位、多角度、综合性”的考核评价模式。
过程考核由“作业+考勤”部分组成。作业成绩，按照作品的平均分来算；考勤，则采用扣分制，学生旷课一次扣5分，迟到扣2分。
综合考核则是指课程综合案例分数。
期末考核，则是指课程期末考试。
其中，过程考核占比10%，综合考核占比20%，期末考核占比70%。
七．教学资源开发与利用
参考网站：
中国UI设计网 [url]http://www.chinaui.com[/url]
任务中国 [url]http://www.coodom.com/[/url]
慕课网 http://www.imooc.com.cn
参考书籍：
《用户体验要素》，机械工业出版社，作者是(美)Jesse James Garrett《HTML5+CSS3从入门到精通》，清华大学出版社出版的图书，作者是李东博
