人机界面设计课程互动式教学模式探索与实践

宋 辉，舒新峰，谢 婷，张 磊

（西安邮电大学 计算机学院，陕西 西安 710121）

0 引言

人机界面设计是软件设计的重要组成部分，经过多年发展已经成为一门以研究用户与计算机关系为基本特征的独立学科。近年来随着高速互联网应用和移动互联网应用的迅速发展和不断推动，用户对应用软件界面友好性和个性化的要求越来越高，人机界面设计也因此成为产业界与学术界关注和研究的热点。国内外一些高校的计算机相关专业已经将人机界面设计、人机交互设计等课程列入本科生培养方案中[1-3]。相关教师和一些学者对教学的组织和实施进行了研究与探索[4-6]。由于该课程涉及的知识面广、内容新、实践性和创新性强，按照传统的教学模式进行教学无法取得很好的教学效果[7-8]。针对这一问题，可以采用一种互动式教学模式，通过在教学组织和教学实施中的多方面互动，有效激发学生的学习兴趣，充分发挥学生在学习中的主动性和积极性，以取得良好的教学效果，与此同时也锻炼和培养软件工程专业认证所要求的学生自主学习能力和将本领域新技术应用于复杂工程问题解决方案中的能力。

1 互动式教学模式

根据软件工程专业培养方案[9]、软件工程专业工程认证对学生能力培养的要求[10]、教学大纲及教学目标的要求，人机界面设计课程的教学内容包括理论知识和实践技术两大部分。理论知识部分包括人机界面设计的起源和发展、人机界面设计的特点和设计原则、人机界面设计的过程和方法、人机界面设计的评价方式等。实践技术包括桌面应用软件界面设计技术、桌面Web软件界面设计技术和移动Web软件界面设计技术3方面内容。课程的理论知识部分涉及工程学、美学、心理学相关知识；实践技术部分涵盖了C/S和B/S两种模式下软件界面设计从前端到后端的主流技术，因而整个课程的知识面非常广、教学内容和开发技术很新，并且对学生的实践能力和创新能力要求较高。对于这样的教学内容和要求，如果按照传统的教学模式进行教学，学生在学习理论知识时往往会感觉抽象和枯燥；而在学习实践技术时又不能很好地与理论相结合，从而影响学习效果，并且很难激发学生的学习兴趣，促使学生自主自发学习。互动式教学模式课程教学组织及实施示意图如图1所示。图中纵向箭头表示教学实施过程中教师、学生和项目组这3个角色的活动流程，横向箭头表示教师、学生和项目组这3个角色的各项活动中的交互。

1.1 教学组织

图1 互动式教学模式课程教学组织及实施示意图

教学内容组织的总体思路是将理论知识的教学和实践技术的教学进行穿插，讲理论知识时以实践技术为载体，讲实践技术时以理论知识为支撑，形成两方面互动的模式。课程的教学组织首先从介绍人机界面设计的起源、发展和特点作为导入，给学生分析一些经典的人机界面设计产品以及失败的案例，让学生对人机界面设计有一个宏观和感性的认识。学生在学习本课程之前已经学习过了面向过程程序设计和面向对象程序设计的课程，具备了开发基本桌面软件界面的技术。在导入内容讲解之后，教师指导学生对其前期设计的软件界面进行分析，指出设计中存在的缺点和不足，并以此引入人机界面设计应遵循的普遍原则。人机界面设计的原则是课程理论知识的重点单元，如果只是常规的讲解，会让学生觉得空洞、流于形式和缺乏操作性；而当学生意识到自己此前所设计软件界面的缺陷后再进行本部分内容的讲解，学生就会认识到如果遵循这些设计原则，的确可以避免缺点并能改善自己此前的设计，从而很好地理解和接受这些理论知识。

课程接下来的安排是要求学生按照所学的设计原则对自己此前的界面设计进行改进，从而将理论应用于实践，更好地掌握和应用所学理论知识。教师讲解人机界面的评价方式。同样也是在理论讲解后，指导学生对自己改进后的设计按照所学理论进行评价，对于其中设计较好的部分予以肯定，对不符合设计原则和规范的部分提出改进意见。通过这样的理论与实践相结合的互动式学习，学生既能对理论知识有直观和深刻的认识，又能提高自己实际设计的能力和素养。

截至此时的教学安排，学生都是使用之前其他课程已经学过的开发技术来进行界面设计和改进。课程将逐步讲解桌面应用软件界面设计技术、桌面Web软件界面设计和移动Web软件界面设计这3部分的内容，其中重点是桌面Web软件界面设计。每部分的教学组织也都是理论知识和实践技术学习交互进行。将每部分中需要讲授的不同界面特点、具体设计原则、界面设计流程等理论知识点融入具体的设计技术和方法的讲解中，要求学生按照讲解进行实践练习，然后对于学生的作品进行评价和反馈，又回到理论知识点上。理论知识与实践技术互动式学习的教学组织模式能够很好地将人机界面设计课程的两方面教学内容有机结合起来，为取得良好的教学效果奠定基础。

1.2 教学实施

为了更好地实施上述教学安排，同时激发学生的学习兴趣，充分发挥学生在学习中的主动性和积极性，人机界面设计课程的教学实施采用了互动式项目小组学习方式，要求学生在一学期的学习过程中以项目小组的形式完成一个人机界面设计的实践项目。在讲解课程总的理论知识的同时，将所有学生分为5～6人的小组，每组选出一名组长。此后的日常上课、上机练习、课后作业和实践项目都以小组形式进行，由组长负责组织本小组的各项学习。项目小组成立后，教师会讲解人机界面设计的流程和完成一个界面设计项目从立项启动、分析设计、实现评价到最终项目总结的全过程；并指导各个小组进行项目选题、计划安排、人员分工、资料查找和分析整理等工作。比如某小组项目选题是“影院票务管理系统”，教师就会指导该小组学生去附近影院通过现场调研影院工作人员和观众来收集用户需求；对于不方便进行现场调研的选题项目，教师会作为模拟用户接受学生调研，以便学生能够亲身体会并完成需求调研和分析的环节。接下来，课程就进入前述所说的桌面应用软件界面设计技术、桌面Web软件界面设计和移动Web软件界面设计这3部分具体的设计技术和方法的讲解和练习中。教师在课堂上讲解主流的开发技术和方法，学生在课后通过完成作业和实践项目进行练习。由于界面设计尤其是Web界面设计中的新技术和新框架不断涌现，教师要求学生在课外自主学习感兴趣的新技术，并应用于实践项目的开发中。比如教师课堂上讲授的前端开发技术是HTML、CSS（Bootstrap）、Javascript（JQuery）和Ajax，后端开发技术是Java Servlet，要求学生课后根据自己的兴趣选择学习ECMAScript、Vue和React等前端开发新技术及PHP、Python等不同的后端开发技术。这样一方面可以拓展学生的视野，让学生追踪最新的技术发展趋势，另一方面又锻炼和培养在工程认证中所强调的学生自主学习、不断学习的能力以及通过各种平台学习本领域最新发展技术并将其应用于复杂工程问题的解决方案中的能力。

上述教学实施过程中的互动主要体现在教师与学生的互动和学生之间的互动两个方面。教师和学生之间的互动以“引导”和“推动”两种形式进行。课堂学习和上机实验时，教师提出预设的开放性问题，引导学生进行多角度思考，组织小组内学生的讨论和交流，鼓励学生进行创新性思考和设计，并敢于表达自己的想法和体会。比如开放性问题包括“微信的界面设计和手机QQ的界面设计各有什么特点?还可以设计得更好吗？”“如果你有机会设计新一代手机操作系统的界面，你会怎样去设计?”“响应式设计、扁平化设计、单页面应用设计等新的界面设计趋势会带来哪些弊端”等。这些问题没有统一的标准答案，提问的目的在于引导学生进行思考，鼓励学生表达自己的观点并与其他同学交流辩论，促进学生进行创新性设计等。另一方面，教师对学生的日常练习作业和项目设计进行及时的反馈和评价，肯定其中好的方面，对不足之处提出改进建议和意见，以推动学生更好地完成作业和实践项目。学生之间的互动主要有小组内互动和小组间互动两种形式。每个小组内各个学生的学习能力和设计能力各不相同，通过小组合作完成项目的方式，小组内同学之间互相学习、互相帮助、互相督促，既完成了人机界面设计的练习，又训练了学生的交流沟通能力和团队合作能力。由于在项目完成后，每组学生都要向老师和全班其他同学演示其作品的设计效果并讲解设计思路，并进行公开打分，这使得一方面各小组之间存在着互相竞争的氛围，各小组之间在平时做作业时就会进行互相对比、互相追赶；另一方面在作品演示时各小组学生又可以听到其他小组的设计思路和体会，看到其他小组的设计效果，起到了互相交流和互相学习的作用。在小组之间互相评分过程中，学生会主动地按照课堂上所学的人机界面设计原则和评价标准等知识来给其他组挑毛病，真正做到了学以致用，理论学习和实践学习相结合。除了在小组内互动和小组间互动，教师还鼓励学生和其他专业的学生进行交流，比如向艺术专业的同学学习美工设计和配色等知识，以使其作品更加美观和专业。

最终在学期末，教师指导学生进行项目总结和验收，各小组进行作品演示和经验分享，所有同学进行自己本学期学习的总结，分析自己所完成作业和项目产品的得失，也以此作为对本课程所讲授的所有理论知识和实践技术内容的总复习。通过这种在教学实施中的教师与学生的互动和学生之间的互动使得学生在一学期的学习中自始至终对课程的教学和作业练习和实践项目保持着浓厚的兴趣和积极的热情，学生会自主自发地去进行学习和练习，并乐于进行创新性思考和探索，既能较好地实现教学目标，又能培养学生各方面的工程实践能力。

2 教学实践及效果

人机界面设计课程目前已在我校软件工程专业2014—2017级的23个班开设。教学中按照前述的互动式教学模式实施并不断调整完善。从课堂教学和实验教学的实施情况、学生完成的各项作业和实践项目的实际效果、期末考试的成绩和课程目标的达成度来看，达到了预期的教学目标，总体教学效果良好。教学组织中理论知识与实践教学的穿插互动有效解决了课程涉及的知识面广、知识点多、内容新因而难于组织教学内容的问题。教学实施中学生与老师、学生与学生之间的互动有效解决了课程实践性和创新性强从而不易实施教学的问题。各项目小组学生对其设计作品的公开演示和评价打分更是激发了学生的学习兴趣和高质量完成作品的热情。学生除了课堂学习和课内上机之外，在课后还花了大量的时间自主查阅资料、收集和创作设计资源和设计模板、学习最新的设计技术和设计框架，获益匪浅。

在课程结束后所有学生对课程的内容、教学组织和自己的学习情况进行了反馈。经过统计，100%的学生都认可人机界面设计课程是一门非常重要、非常有用的课程，通过课程的学习对于设计开发出友好的软件界面和优秀的软件产品帮助很大，并且通过课程的学习对整个软件设计流程、软件用户体验等都有了新的认识。92%的学生认为课程的教学内容组织很好，教学和实验的方式适合，尤其是按照项目小组完成实践项目的学习方式对他们能力的提高帮助很大、自己收获很多。有些小组在学期末的作品演示时专门制作了自己本学期设计能力成长轨迹的PPT，在其中回顾和展示了一学期来其设计的作品如何从最初的粗糙和不规范逐渐改进，到最后达到了符合设计原则的友好美观的界面设计全过程，总结了学习的收获和成长的体会，表示经过一学期的学习自己在界面设计的各个方面都取得了很大的进步。此外，在本课程结束以后的软件工程课程设计中，学生就充分使用了本课程所学的知识和技术，通过良好的界面设计使得最终完成软件的可用性及质量比之前课程设计所完成软件有了很大的提高。以上这些成果都说明了在课程教学中采用的互动式教学模式是有效和成功的。

3 结语

人机界面设计课程作为一门新兴课程，其教学内容涉及的知识面广、开发技术新，课程的实践性和创新性强。针对课程的特点和工程认证的要求，互动式教学模式在教学组织中将理论知识教学与实践教学进行穿插和互动；在教学实施中通过教师与学生的互动和学生之间的互动完成教学、实验和实践项目练习。通过教学组织和教学实施两个方面的互动，极大地提高了学生的学习兴趣，充分发挥学生在学习中的主动性和积极性，促使学生自主自发进行学习和练习，并进行创新性思考和探索。4年来的教学效果和学生反馈表明了该教学模式是有效可行的。后续的教学中还将尝试将慕课、微课和翻转课堂等教学手段和互动式教学模式结合起来，以期进一步丰富教学形式，鼓励学生积极参与并更好地进行互动。