基于问题式学习的网站UI设计课程优化与实践

蓝丽萍

摘 要 问题式学习是一种以问题为导向，倡导学生通过研究、讨论、协作解决问题，注重培养学生的能动性、协作性和探索实际运用的创作能力。在简要阐述“网站UI设计”的课程背景、教学现状、教学目标之后，从课程内容的重构、教学模式的创新、考核标准的改变这三方面进行优化。并以大二网络与新媒体专业学生为实践对象，依据“提出问题—分析问题—解决问题”的思路来设计各教学环节，并要求学生分阶段产出学习效果。实践表明，把学习置于真实的或者贴近实际的大问题中，能激发学生的学习兴趣，提高学生的网站综合设计能力，体验并形成完整的产品设计理念。

关键词 网络与新媒体专业；问题式学习；网站UI设计；教学模式

中图分类号：G658.3 文献标识码：B

文章编号：1671-489X（2018）08-0069-03

Curriculum Optimization and Practice of Website UI Design based on Problem-based Learning//LAN Liping

Abstract Problem based learning is a problem oriented approach， which advocates students to solve problems through research， discu-ssion and collaboration. It focuses on cultivating students' initiative， collaboration and practical abilities. In this paper， after briefly ex-pounds the website on the UI Design curriculum background， tea-ching situation， teaching objectives， from curriculum reconstruction， the innovation of teaching model， assessment criteria change these three aspects of the optimization. Then practiced in the second net-

work and new media professional students， on the basis of the pro-blem-analysis problem-to solve the problem of the train of thought to

design the teaching process， students are required to study the effect of real estate in stages. Last， practice shows that the learning in real

or practical problems， learning interest and ability to stimulate stu-dents， improve the comprehensive ability of students' experience of website design， product design concept and form complete.

Key words network and new media； problem-based learning； web-site UI design； model of instruction

1 課程背景

网站UI设计这门课程是广东技术师范学院网络与新媒体专业大二学生的一门专业必修课。UI，即用户界面（User Interface）。UI设计的范畴很大，其中应用最广泛的是网站UI设计，随着移动终端用户数量的迅猛增长，目前大多数网页在开发Web端网页的同时，也需要开发相应的移动端网页。网站UI设计作为网站建设的第一个环节，是指对软件的人机交互、操作逻辑、界面美观的整体设计。优化网站UI设计课程，对培养符合社会急需的全能型新媒体人才，建设理论与实践相结合更紧密的课程体系，全面提高教育质量，均具有十分重要的现实意义。

2 课程教学现状

问题式学习以问题为导向，倡导学生通过研究、讨论、协作解决问题，注重培养学生的能动性、协作性和探索实际运用的创作能力。目前个别设计类课程仍然多采用以学科知识结构为逻辑的课程设计理念和思路，且UI知识范围较广而零散，多以个人为单位完成课程作业，知识略显教条式，案例小而独立，在教学中呈现模块化，但零散的知识结构并不利于学生形成网站UI的总体产品设计理念。为培养学生解决问题的整体能力，让他们可以协作完成更大的项目任务，必须改变以知识模块结构为导向的旧式课程教学模式，以小组为单位，用问题式学习的有效课程教学模式来取而代之。

3 课程教学目标

课程的主要任务是学习网站UI的设计，设计并开发一个中小型高保真网站原型，体验网站的完整设计流程。

1）本课程的期末实践，采用四人为一组的工作室方式，分工合作，要求学生在工作室中能各自找好定位，意识到头脑风暴与团队合作的重要性，摈弃独立完成小作品的模式，去体验公司做一个产品的完整工作流程，达到训练学生的团队合作能力、与人交流的能力。

2）在综合技能的训练上，要求学生了解网站设计流程：确定网站主题—需求分析—信息架构—线框图—UI效果图—高保真原型开发。具备设计中小型网站的策划、分析、设计的能力。

4 课程优化策略

为了更好地实现课程的教学目标，笔者主要从三方面对网站UI设计课程进行优化。

课程内容的重构 单门课程的教学时段通常设置为16周，过往常见的网站设计课程的教学流程：前期按照网站设计教材的内容模块进行知识的讲解和小案例的实操，约占14周；后期让学生进行网站的整体设计，占1～2周。虽然课程的最后也是基于问题的解决，但这个问题并没有始终贯穿于课程内容中，致使课程内容与问题解决是分开的。因此，本课程的内容应始终围绕一个问题，按照网站UI的整体设计流程，即“确定网站主题—需求分析—信息架构—线框图—UI效果图—高保真原型开发”，将UI知识内容逐步分解到每周的教学环节中，突破常规的体系框架，真正实现理论和实践相结合。

教学模式的创新 采用基于问题式学习，以工作组为单位的创新教学模式，问题的解决不再基于个人，而是基于工作组的团队合作方式，以团队的力量致力于研究更大的问题，倡导的是头脑风暴式、启发探究式的教学，通过“提出问题—分析问题—解决问题”的思路来开展教学，提高综合设计能力。把学生融入有意义的问题解决过程中，强调以学生为中心，发挥他们在完成项目过程中的能动性。

考核标准的改变 传统的课程考核方式有两种：一是以个人为单位，考核个人的学习结果；二是以小组为单位，考核小组协作的学习结果。但是这两种均有利弊，即前者重视个人能力而忽略了團队协作的能力培养，后者则容易出现个别成员水平参差不齐，无法得出真正的考核效果。本课程将对考核方式进行改革，建立“个人作业+小组作品”的双重考核标准，既能体现对个人能力差异的考核，又能对工作组协作的结果进行考核。

5 课程教学实践

本次课程实践以大二的网络与新媒体专业学生为实践对象，14级网络与新媒体班共40人，分为10组。课程全部在机房上课，一人一机。课程总课时为64学时，每周4节，共16周。

在实践过程中，始终以基于问题为学习点，这个“问题”必须是一个复杂的具有挑战性的任务，而不是一个人能轻易完成的，这个任务应该是真实的或者贴近实际的，因此，各组在第二周时要确定网站选题，思考人们在生活中遇到的“痛点”和“不方便”，从人们需求性和网站可行性方面考虑，最后确定的选题如表1所示。学生始终围绕各自选题，以此为问题进行整门课的学习和协作。

教学实践分为两大部分。

1）基础学习阶段（1～4周）。该阶段主要讲解网站配色、元素设计等基础知识，并布置相应作业，课上点评，互相交流，灌输“多看优秀网页—临摹优秀网页—达到自主设计”式逐层提升设计感的思路。该阶段主要考核个人的设计能力，作业占成绩的30%。

2）问题学习阶段（5～16周）。该阶段的教学实践多为引导+讨论，将教学内容贯穿在作品进度中，边学边做，引导学生将前期所学知识运用到最后的期末作品中。四人一组，以团队的方式自主选题，共同设计一个网站。学生置于工作组中，分工合作，发挥头脑风暴的积极作用，可自行扮演设计总监、UI设计师、信息架构师、原型设计师、交互设计师等。该阶段主要考核综合设计能力和团队协作成果，作品占成绩的70%。

通过个人作业+小组作品，实现双重考核。

教学实践阶段把各组的问题引入课堂，依据“提出问题—分析问题—解决问题”的总体思路，围绕问题来设计每周的教学环节，并实时跟踪各组问题的解决进度，如表2所示。

6 实践效果分析

实践表明，网站UI设计课程采用基于问题式学习的教学模式来开展教学，把学习置于一个真实的或者贴近实际的大问题环境中，分阶段产出学习效果，既能激发学生的学习兴趣，又能增强学生学习的成就感。本课程以课堂讲授和上机实验为主，结合作品分析、小组讨论、头脑风暴、拓展练习、点评作业、演示汇报等多种教学方式，着重培养学生欣赏优秀作品和共同研究分析问题的能力。小组在自主选题时，都是从生活中寻找需求，力争设计一个能解决人们某个“痛点”的网站，做自己想做的功能，活跃学生思维的同时，也激发了学生的兴趣和比一比的斗志。

参考文献

[1]付昕.高职院校UI界面设计课程设置的构思与创想[J].科技风，2016（9）：19-20.

[2]王淼.广告设计与制作专业《UI界面设计》课程教学模式改革与探索[J].艺术品鉴，2015（3）：238.

[3]孟妍.PBL教学法在高职艺术设计专业教学中的应用[J].陕西青年职业学院学报，2015（1）：19-22.

[4]王晓俊.PBL教学模式的构建与实践：以艺术设计专业为例[J].梧州学院学报，2016（6）：89-93.