“米兰设计周高校设计展”|优秀论文鉴赏第33辑

摘要: 

数字界面设计课程是随着互联网的发展而兴起的一门新学科。作为一门应用型课程，数字界面设计教学需要不断优化结构，符合市场需求，解决市场落地问题。目前国内相关研究更多的是从视觉设计层面出发，课程教学中的内容重点在于app视觉设计与规范。国外相关研究主要集中在交互设计领域，更加重视产品的用户体验要素研究。本文以视觉传达设计专业《数字界面设计》课程为例，探讨“项目任务驱动”教学法在《数字界面设计》课程中的应用。课程整体教学设计思路是以项目任务驱动为主，结合“项目任务驱动”的教学内容融合“项目式”课堂组织设计，同时在项目教学中充分发挥人工智能优势，紧跟数智化时代的发展需求。

关键词:数字界面设计；视觉传达设计；项目任务驱动；教学改革；AIGC

引言:

数字界面设计作为现代信息技术领域中的重要分支，扮演着连接人与技术、信息与用户之间的纽带角色。随着数字化时代的不断发展和普及，数字界面设计的重要性日益凸显。在这个充满竞争与创新的时代背景下，如何培养具备优秀设计能力和创新思维的专业人才成为了数字界面设计教育的关键挑战之一。传统的教学模式往往过于注重理论知识的灌输，而忽视了学生实践能力的培养和创新意识的激发。因此，探索一种符合现代教育理念、能够激发学生学习兴趣和提升专业技能的教学方法显得尤为重要。"项目任务驱动"教学法应运而生，以项目实践为核心，通过任务驱动学生学习，激发其自主学习的动力和创造力。本研究旨在深入探究"项目任务驱动"教学法在数字界面设计课程中的应用，从而为数字界面设计教育的改革和创新提供理论指导和实践经验。

一、基本体系

《数字界面设计》课程是一门开设在视觉传达设计专业品牌方向大三第一学期的一门专 业选修课，共 64个课时。通过《数字界面设计》课程的学习，旨在培养和提高学生的图形设计、信息处理、版式编排和配色能力。本课程主要教学内容包括数字界面设计规范、界面组成要素设计和界面设计方法。主要以移动 APP 界面设计为核心内容，重点讲述 APP 界面设计的相关设计规范、流程及方法。本课程的主要任务是使学生掌握数字界面的设计方法，设计出较高水平的具有实际内容、具体用途，具有新形式与新特征的数字界面视觉设计作品。通过讲授、实训等环节，使学生系统地获得数字界面设计相关知识，掌握界面设计的方法，具备设计分析与设计创新的能力。

根据人培的要求来看，本门课程主要要求专业知识技能、学生解决问题和使用现代工具的能力。对应这三个基本要求，课程目标主要围绕几个要点：一、阐述数字界面设计的基本原理；二、掌握各种数字界面设计的方法, 注重设计创意的设计表现；三、准确应用界面设计规范；四、合理构建数字界面设计的布局，熟练应用数字界面制作软件，界面发布与交互展示方式；五、辨析各类数字界面设计作品；六、独立完成数字界面设计作品。根据行业要求来看的，我们的人培和行业要求是有一定的对应关系。行业要求更具创意和创新性、同时具有品牌营销意识、视觉传达设计能力、还需要要掌握一定的技术和工具实现创作、此外还有对于行业标准和趋势的要求，以及更高层次的用户体验设计、交互设计（如图1所示）。从这些行业需求来看，学生学习的难点归纳起来是两大问题：一个是设计创意，这一块后续可以通过人工智能来解决；另外一点是关于行业标准的问题，这一块会通过项目教学，进一步提高学生的职业素养。

图 1 课程目标

二、《数字界面设计》课程教学现状

很多学校都开设了《数字界面设计》课程，比较有代表性的有慕课网上华中科技大学的课程教学视频。课程开设在大三年级的本科，以理论知识教学与实践环节并行的模式来培养学生。理论方面，包括设计、图标、字体、色彩、动效、实践能力，以及界面设计思维与逻辑。另外一个方面，强调对于各项技术的熟练使用程度。因为界面设计需要不断探索新的交互技术，因此课程里面会用到很多设计软件来完成交互与视觉表现。

同时数字界面设计这门课程也是基于现代新科技而产生的一门课程。因此，很多急于就业的同学和设计师会通过一些UI设计的网上课程培训，来提高自己的专业技能。相对于学校课程来说，它的实践性会更强一点。比如站酷推荐设计师张双的课程——系列UI课程。大纲16次课，共四个章节。第一章行业认知与基础，第二章ui设计师必备知识篇，第三章品牌视觉拔高篇，第四章就业指导篇。里面有关于大厂的工作流程和大厂实战项目的案例，对学生的指导性会更强一点。包括后面有一个模块是求职技巧作品集的思路，对于学生走向社会工作提供了参考价值。

三、课程教学改革

1.明确课程初阶和高阶目标，进一步规划教学知识板块。

通过数字界面课程的学习，初级阶段是让学生掌握数字界面基础的理论知识，明白界面设计流程及方法，高阶目标是具备全链路的界面设计的思维能力，运用视觉规范来进行界面设计作品创作，从而让设计作品能够真正的投入市场。

针对这一目标对课程内容进行了新的调整和规划。除了网页和app设计外，把品牌运营进一步强化。增加学生就业后会临的高频设计需求：如banner和运营活动页的H5设计。配合武汉东湖的校企合作项目进行节日推广及活动策划，为学生提供实践机会。另外增加标注切图模块知识点，以加强学生的规范和开发意识。调整后的知识板块更加符合市场实际设计需要，将人才培养与企业需求结合，通过市场岗位需求导向调整知识板块。同时高阶目标应该更具前瞻性，教学内容需紧跟时代潮流，如引入了与AR虚实结合的空间界面设计等新兴领域，毕竟数字界面都是依附于硬件、软件，需落实到具体行业的应用场景才更贴切。因此最终章节设置结合数字化升级平台设计，扩展学生眼界，培养国际性视野，使他们能够更好地适应未来数字界面设计行业的发展需求（如图2所示）。

图 2 教学内容

2.融入项目式专题训练，注重真题项目复盘。

以应用实践为导向，专题训练紧跟市场，实施课程教学改革创新设计。根据课程特点，将课程教学内容分为两大模块专题：网页端界面设计、移动端界面设计。因为这两个方向是当前界面设计师就业的重点，学生需要掌握这些技能才能在市场中有竞争力。同时两个板块都融入实际项目，以项目驱动的方式引导学生进行构思和设计。

项目来源： 

一是服务地方文旅融合推动经济发展：如围绕景区校企合作项目，景区的活动宣传需求较大，通过景区真题项目中提高学生的策划思维，同步进行节日及活动推文h5制作，通过设计赋能服务复苏地方文旅经济。通过这样的项目，来培养学生对地方文化的理解，同时将数字界面设计与地域文化相结合，为地方经济的发展贡献力量。

二是加强校企联合，引入企业真实案例：如引入公司项目案例。提供ui产品原型图，让学生能够参与真实的公司设计项目中去。同时寻找合适的本土界面设计公司，让学生能真实体验全流程的设计过程，从而更好地理解行业的实际运作。导入大厂和企业真实原型进行项目复盘训练，以项目为载体，案例导入讲解。同时项目复盘训练注重模拟实际工作流程。项目单中会明确设计内容，设计目标，输出要求。以及设计分析思考过程。课题训练以导入企业真题项目贯穿实践训练中，改变以往理论与实践教学脱节的情况。

三是服务学校设计项目：如学校校园官网设计和相应官宣推文设计，让学生能为自己发声，提高设计积极性和责任意识。这样的项目不仅能够让学生为学校做出贡献，还可以让他们在实践中提升自己的设计能力，并且为未来的职业生涯做好准备。

四是校外外包项目：外包项目会更加短平快一点，在这个过程中主要培养学生的时间观念、责任意识、和沟通能力。通过参与这样的项目，学生可以学会与甲方沟通，了解客户需求，并且在实践中不断提升自己的设计水平和专业技能。

针对不同项目采用项目单的形式标注好项目需求与时间节点安排，并对应相应的知识点和实训目的。学生根据下派的任务单完成项目设计并锻炼相应设计能力。如下图是学生参与的项目：项目一是武汉东湖项目。要求围绕东湖樱花节进行相应的H5活动设计。实训目的：培养学生在活动设计方面的创意思维和实践能力。相关知识点：H5设计、活动策划、视觉传达等（如图3所示）。项目二是学校官网设计项目。学生需要设计学校官网，掌握网页端的界面尺寸设计规范。实训目的：培养学生对网页端界面设计的专业意识和实践能力。相关知识点：网页设计、界面尺寸规范、用户体验等（如图4所示）。项目三是只是好物平台项目。学生需要搭建只是好物平台，并上传产品页。实训目的：让学生了解淘宝后台的设计规范，贴近行业实际需求，为未来就业做好准备。相关知识点：电商平台设计、产品页设计、淘宝后台操作等（如图5所示）。通过这样的项目单形式，能够清晰地了解每个项目的具体要求和实施计划，有利于学生在实践中全面发展自己的设计技能，并为未来的就业做好充分准备。

图 3 项目一东湖花花游园会

图 4 项目二学校官网设计

图 5 项目三只是好物淘宝后台

同时针对上面不同项目设计会通过课堂模拟公司流程的形式来进行课程的教学。比如说设计前：公司需要参与需求评审，了解项目情况；而对应到课堂内容则是提供真实的项目案例建设计群发布要求，根据项目学生个人或者分组完成。设计中：需要根据需要有序的输出设计稿；而对应的课堂内容就是学生进行小组讨论，完成初步原型，框架合理后输出设计稿。并进行切图标注。设计后：前端还原走查；对应的课堂内容则是学生检查效果，并用文档汇总与设计不一致的地方，然后再提交给前端（如图 6 所示）。这种模拟公司流程的教学方式能够更好地锻炼学生的团队协作能力和项目管理技能，使他们更好地适应未来的职场环境。

图 6 课堂中模拟公司流程

3.AIGC 助力课程创新，适应数字化时代需求。

在当今社会，人工智能已成为热门话题，并在各行各业展现出了巨大的潜力和影响力。特别是在数字界面设计领域，人工智能的应用正在引领着一场革命性的变革，也为数字界面设计带来了更高效的工作流程和更智能的设计工具。

对于数字界面设计项目任务可以分成个人项目和分组项目。

个人项目里面可以充分结合人工智能的操作方法。比如传统的操作方法，首先是进行需求分析、用户分析；其次再根据甲方需求确认设计风格；最后进行草图设计、软件绘制出图，最终修改完善定稿。针对前面的两个步骤，需求分析和与甲方确认风格这个方面是不能省略的。到第三步，我们就可以介入人工智能使用，比如说使用 chatgpt 帮忙生成画面描述。这个用时可能就三分钟就能完成；再修改 chatgpt 的画面描述，去掉一些不必要的描述。然后根据描述进行画面搜图，使用 midjourney 生成关键词，刷图加上垫图的方式进行生成，最后是草图细节的完善和排版。

比如说要生成一张医疗引导页的设计，描述是需要有描述逻辑的，需要包括它的人物描述、地点描述、动作描述和物件描述。进一步细化来看，人物描述可以涵盖医护人员、患者或用户的形象，根据具体情境来展现其行为特点和表情状态，以匹配引导页的主题和目的。地点描述则需要清晰地呈现医疗场景，例如医院大厅、诊室等，以便用户能够准确理解引导页所指向的环境背景。动作描述可以是医护人员或用户在医疗场景中的行动，如接待、就诊、咨询等，有助于传达引导页的功能和服务。而物件描述则可能涵盖医疗设备、药品、等元素，用以强调医疗环境的特色和服务内容。这样生成的图片才能符合医疗引导页的主题和目的，确保页面设计与用户预期相符。下图为用midjourney 软件生成的一些简单的界面（如图7所示）。

图 7 项目三只是好物淘宝后台

因此，利用AIGC（人工智能）可以解决在数字界面设计中创意激发和风格选择等问题。首先，AIGC可以补充素材库，为设计师提供丰富的素材资源，包括图片、图标、背景等，从而拓展设计的创意空间。其次，AIGC还能够节约时间成本，通过自动化生成设计元素，减少了人工处理的时间和劳动成本，提高了设计效率。特别是在界面设计的启动页、开屏设计和活动页图设计等方面，人工智能具有广泛的应用前景。例如，利用AIGC可以快速生成各类启动页和开屏设计的创意，满足不同项目的需求，同时也能够为活动页的图像设计提供多样化的选择。

此外，进一步寻找适合数字界面设计的人工智能工具，包括用于文本描述、项目构思、主题画面生成以及手绘和交互式UI设计等方面的工具，可以进一步提升课程的技术先进性。通过结合这些人工智能工具，学生可以更加高效地完成设计任务，同时也能够探索和应用最新的技术手段，使设计作品更具创新性和竞争力（如图8所示）。

图 8 AIGC 工具

4.进一步推动课程思政，培养学生社会责任感与实践能力。

针对每个章节，将思政教育融入数字界面设计课程中，以培养学生的专业素养、社会责任感和技术应用能力为目标。 

首先，在引入中国传统节日活动页设计时，强调品牌传递的社会价值。通过分析中国传统节日的文化内涵和社会意义，学生可以深入了解传统文化对品牌形象传递的影响。通过案例分析和讨论，学生将探讨如何将传统文化元素融入设计中，传达企业的社会责任和文化认同。 

其次，在强调视觉设计规范时，可以培养学生的团队协作意识。通过引入团队项目和合作任务，学生将学会与他人合作，共同完成设计任务。同时，课程中会着重强调设计规范的重要性，教导学生如何遵循行业标准和规范，以确保设计作品的质量和一致性。 

另外，将强调用户体验和人文关怀，并讨论设计行业的变化和发展趋势。通过分析用户需求和行为，学生将学会设计具有人文关怀和用户友好性的界面。同时，第五章将讨论设计行业的技术创新和发展趋势，引导学生思考如何应对行业变化并不断提升自己的技术能力。与AIGC结合，引导学生思考技术与社会互动。通过探讨人工智能在设计领域的应用，学生将了解技术对设计师工作的影响，并思考技术发展对社会的影响和责任，从而培养学生具有多样化的综合素养。

通过这样的课程改革，旨在打造有温度、有文化、有技术的课堂。学生将不仅仅是技术的运用者，更是具有社会责任感和文化传播使者的设计人才。这样的课程将激发学生对专业的热爱，培养他们对社会的责任和担当，同时促进荆楚本土文化的传承和可持续发展（如图 9 所示）。

图 9 课程思政融入点

5.构建学生积极参与，教师、设计师共通共融的辅导模式。

以学生为主体、以问题为核心规划学习内容，让学生围绕问题寻求解决方案。整个过程强调学生积极参与。项目的执行通常涉及到产品功能构建、原型分析、视觉设计、效果复原等多个阶段。可以让学生进行不同角色扮演体会真实项目流程，训练学生的分析、实践、解决问题的能力，并培养团队合作精神和沟通能力。

对于课程作业的评价教师不再是唯一主体，邀请企业设计师进行分享和作品修改提议，从企业角度评价学生作品。建立教师+设计师共同辅导与评价的模式，可以发挥教师专业优势和企业设计师实战优势，为学生提供更贴近实际行业需求的指导，帮助他们提升设计水平。实现一加一大于二的效果。

课程评价体系包括课堂考勤与表现（10%），平时作业（50%）和结课作业（40%)。结课评价量表会从多个维度强调综合考核学生的能力和表现：包括主题定位与调研、界面视觉设计、设计规范和成品制作等对学生进行综合考核。强调整个界面设计过程而不是单一的视觉效果。这样的评价体系不仅能够促进学生全面发展，还能更好地反映其在实践中的综合能力和专业素养。

6.融合课前课中课后三阶段教学法，采用灵活多样的方式丰富教学。

基于项目任务驱动的教学模式将学生置于实践性的学习环境中，促进其知识的深度理解和能力的全面提升。教学环节分成课前、课中和课后这三个部分：

课前准备： 

搜集资料与主动分析：学生在课前针对即将进行的项目任务点积极搜集相关资料，主动分析行业趋势和相关案例，为项目任务做好充分准备。 

提前预习与项目思考：提前预习相关理论知识，并针对项目任务点进行深入思考，思考项目的可行性、解决方案以及可能遇到的挑战，并提出问题以备课堂讨论。 

课中实践：

创设情境与企业实际案例展开：教师通过创设情境和展示真实企业案例，将学生置于真实的项目环境中，帮助他们更好地理解项目任务的背景和要求。 

分组互动交流与解决方案提出：学生根据分组任务展开互动交流，分享各自的分析和思考，共同探讨解决方案，并提出创新性的设计思路和建议。 

教师答疑与师生互动：教师在课堂中及时解答学生提出的问题，引导学生思考和深入探讨，促进师生之间的积极互动和知识分享。 

项目总结：在课程结束前，进行项目总结，对学生在课堂上的表现和讨论进行回顾和概括，强调重点和收获，为学生后续的学习提供指导。

课后反馈：

优化设计方案：学生在课后进一步完善和优化设计方案，结合课堂上的讨论和反馈，对项目进行深入思考和调整，提高设计的质量和可行性。 

邀请企业导师指导反馈：教师可以邀请具有丰富实践经验的企业导师对学生的设计方案进行指导和反馈，提供专业的建议和指导，帮助学生更好地理解实际行业需求和提升设计水平（如图10所示）。

图 10 三阶段教学法

此外，结合案例分析、拆解法、小组合作、角色扮演等方法，采用灵活多样的方式丰富教学。

分析实际数字界面设计案例，可以选择一些成功的案例和失败的案例，让学生深入了解成功案例的设计原因和失败案例的不足之处，从而提高他们的设计思维和判断能力。通过拆解法的使用，将每个界面拆解成ui视觉设计和ux交互设计两个方面。视觉设计从界面图文大小、对齐、边距、视觉重心、界面风格等进行拆分；交互设计从界面功能完整度、按钮交互状态、界面框架关系等进行拆分。运用各个击破的方式引导学生更具针对性的进行再设计工作。对于分组项目，组织学生成小组，共同解决设计问题或完成项目，促进学生的团队合作和沟通能力。同时设计情境，要求学生扮演不同用户；进行用户场景模拟；扮演设计师和客户角色等增加教学趣味性，也能更好地理解用户需求和设计思维（如图11所示）。

图 11 角色扮演法

7. 构建综合性、多样性和富有层次性的数字界面设计教学资源库。 

对于教学资源库的构建需要更加科学合理，以满足学生在不同层次上的学习和成长需要。在这个资源库里面包括：1.数字与人工智能的工具。会提供所需的数字化设计工具，例如设计软件的安装指导、使用教程和工具下载链接。除了常见的设计软件，还可以引入一些新兴的人工智能设计工具，如自动化布局生成器、图像生成工具等，以帮助学生更高效地完成设计任务。2.教学资源。涵盖从基础知识到高级技能的各个层次。这些资源可以包括电子书籍、学术论文、案例分析、视频教程等，供学生在线阅读和下载。3.在线学习平台。利用学习通平台，用于教学资源的上传、课程内容的发布、学生作业的提交和评估，以及学生和教师之间的交流互动，实现教学过程的数字化和信息化管理。4.定期举办腾讯会议，邀请设计师参与学生的讨论和作业点评。这种实时互动的方式可以为学生提供直接的指导和反馈，帮助他们更好地理解课程内容和提高设计水平。此外教学资源还包括聘请一些校外的教学团队进行课程搭建。通过这样的方式来构建一个科学合理、丰富多样的教学资源库，为学生提供更加优质和个性化的学习支持。

五、总结 

应用型人才专业能力的培养不能停留在课堂教学上，而是要让项目走进课堂，理论与实践真正结合。从市场角度出发，突出《数字界面设计》课程的应用型、实操性特色，结合企业真实设计项目，进行项目任务驱动教学。《数字界面设计》课程改革应该更加强调市场化导向。我们的课程最终还是需要市场检验的。课程设计时需要强调全链路的UI设计思维，包括设计前期明确需求；设计中期有序设计工作，包括设计后期对结果负责等。同时培养学生的设计师责任感和担当也是我们高校课程建设中应该考虑到的问题。希望在数字界面设计改革中，以项目任务驱动为主，紧跟行业前沿趋势。充分发挥视觉传达专业特色，为学生面向市场就业打下坚实的基础。