以项目设计流程为导向的APP界面视觉设计教学改革初探

向桦

（西南财经大学 天府学院，成都 610052）

高校艺术专业开设的“UI设计”课程中，界面设计教学部分属于课程的重点和难点。随着互联网时代的进步，美观的界面设计已经成为了设计中最基本的要求，体验、交互、视觉设计的配合才能真正提升互联网产品的价值。所以企业需要有思考能力和分析能力的设计师。

一、国内高校培养的界面设计人才与社会所需人才的现状

互联网的兴起，催生了UI设计师这个职业，设计师主要负责互联网产品界面视觉设计工作，企业对此有大量的人才需求。艺术类高校尝试开设界面设计课程，特别是平面设计专业在互联网设计的冲击下，也开始探寻互联网设计之路。对于平面专业设计人才来讲，互联网视觉设计只是换了设计载体，不再基于传统纸媒上进行。平面设计转向界面设计，有版式作为基础是最大的优势，但如果把界面当画册、折页等思路来进行设计，即使做得美观漂亮也无法满足用户的需求。所以培养界面设计人才应该更多的让设计师明白项目的背景，理解用户体验、交互设计在项目中对视觉设计的支持。

图1 学生进行小组讨论及阶段成果汇报

图2 宠鸣——救助流浪动物app界面设计

经过调研（往届毕业生就业情况反馈、各大人才招聘网站招聘设计师信息、与互联网设计公司负责人交流访谈等）发现目前的互联网行业已不再过分关注产品视觉的包装，更加注重产品的易学、易用性等体验。企业对年轻设计师的评价，特别是对刚参加工作负责界面视觉设计的人才有诸多不满，提出如“年轻设计师美工化”、设计“重皮肤轻骨骼”等问题。认为多数年轻设计师的工作仅停留在自我陶醉的美观层面上，缺乏对项目本身的思考与认知，对用户体验置若惘然，设计的界面出现“绣花枕头好看不中用”的问题，以至反复改稿影响整个项目进度。近几年，还特别流行“全链路设计师”的说法，“全链路设计师”即能够精通整个设计流程各个环节（用户体验、交互设计、视觉设计等）的设计师。虽然这是企业对人才需求的美好愿景，但也侧面反映出企业对人才技能的要求变得越来越高。所以，目前高校开设的界面设计课程培养的人才还不能很好地满足社会对人才的需求，界面设计课程除了解决美观问题外，为适应互联网行业人才需求的变化发展需尝试进行改革与调整。

二、教学对象和教学目标

课程教学对象为平面设计专业本科三年级学生。图形创意、字体设计、版式设计、海报设计、VI设计课程作为先行课程，为平面设计专业转互联网界面设计提供了良好的版式基础和视觉审美力。

针对目前国内高校输出的界面设计人才与企业对人才需求标准不匹配的问题，避免平面专业的学生把APP界面视觉设计当画册、书籍来进行设计，课程教学目标如下：

1.工作坊制度的引入，使学生理解互联网产品从无到有的过程，形成设计思维。

2.让学生充分融入整个项目设计流程，加强团队协作意识，知道产品设计的每个环节、每个职位如何衔接的。

3.除掌握界面视觉设计原则及知识外，使学生懂得一些用户体验和交互设计知识，项目的视觉设计产出推行“皮肤+骨骼”的形式，避免“重皮肤轻骨骼”的设计出现。

三、教学方法

理论讲授：互联网项目设计通用流程及在设计工作中每个流程所对应的工作岗位和工作内容。

案例分析：选择实际互联网产品案例，结合项目设计流程和方法完整地进行分析展示。

工作坊形式（以项目设计流程为导向）：界面设计工作通常需要用户研究员、交互设计师、视觉设计师等团队成员共同协作完成。整个项目设计流程也按职位分为四个阶段：发现需求—用户研究—交互设计—视觉设计。

把此流程贯穿于创意工作坊中，对所有学生进行分组，每个团队4～6人为宜，并选出一名综合素质较强、具备领导才能的同学作为小组长，以便在讨论中活跃气氛和加强团队凝聚力。老师在产品从无到有的项目设计流程中进行方向的把控，避免讨论结果和设计流程跑偏。工作坊的每一个阶段，团队都需通过PPT形式汇报自己的产品设计结果，老师和其他组的成员也可以对其提问。课程最后每个团队还需通过PPT完整地展示产品的设计流程和过程及视觉设计结果。

整个项目设计流程以学生讨论、实际操作为主，与传统老师教、学生听的教学模式不同，学生参与度更高，锻炼自身的表述能力，对项目的了解更深刻，注重产品的“骨骼”，最终为APP界面视觉设计找到合适的视觉“皮肤”。

四、教学内容与安排

界面设计教学共四周，每周8个课时，共32个课时，课程内容采用理论知识+案例分析+工作坊实践穿插的模式展开。

（一）第一阶段（8课时）

了解项目设计流程及互联网公司里对应的职位。

1.理论讲授（4课时）

（1）一个软件的诞生（从无到有的设计流程）

老板/客户提出或发现用户需求——产品经理（市场调研、用户研究、初步的交互、需求分配）——交互设计师（结合用户研究结果整理出信息架构、绘制出交互原型图）——视觉设计师（根据交互原型图设计出高保真原型图、页面标准）——前端工程师（切图、搭建前端页面）——后端工程师（功能程序编写、测试、发布）

（2）竞品分析、头脑风暴、用户访谈（问卷、单人访谈）[案例分析法]

2.工作坊讨论和任务布置（4课时）

任务：服务类方向APP软件任选其一，以组为单位进行调研，组员每人选定一款该方向服务类的APP进行竞品调研[每款APP调研内容包括：软件名称（由来）、软件介绍、用户分析（目标定位、用户画像）、视觉风格、软件特色在哪里？主要界面截图等] ，竞品汇总、产品定位、用户访谈（问卷和单人访谈结果），制作展示PPT。

团队讨论：组员们进行竞品汇总整理、通过头脑风暴拟定团队要设计的产品定位、进行用户访谈（问卷和单人访谈结果），并用PPT整理出调研结果。

（二）第二阶段（8课时）

1.汇报第一阶段调研结果（1课时）：每组10分钟展示时间，老师和其他组同学提问，帮助其分析思路中存在的问题。

2.理论讲授（2课时）：同理心地图、用户画像、用户旅程图、痛点、机会点、故事版[案例分析法]

3.工作坊讨论（5课时）：协作完成同理心地图，绘制用户画像、绘制主要功能的用户旅程图，并用PPT整理出讨论结果。

（三）第三阶段（8课时）

1.汇报第一阶段调研结果（1课时）：每组10分钟展示时间，老师和其他组同学提问，帮助其分析思路中存在的问题。（图1）

2.理论讲授（2课时）：业务流程图、任务流程图、页面流程图、界面视觉设计分析[案例分析法]

3.工作坊讨论（6课时）：协作完成业务流程图、任务流程图、页面流程图、低保真交互原型图、产品logo设计、产品slogan、确定产品主色调、主要页面高保真原型图。

（四）第四阶段（8课时）

1.工作坊讨论（7课时）：老师介入到每个团队，检查第三阶段任务完成情况，并进行界面视觉设计上的指导。

2.最终展示（1课时）：每组10分钟展示汇报时间。

五、教学案例

课程班级共分为五个小组，其中一个创意工作坊小组的产品设计过程如下：

宠呜——救助流浪动物APP（图2）

本团队观察到现今很多流浪动物无法得到正确救助，拟开发一款能让爱心人士及时帮助流浪动物脱险、领养和防止危险流浪动物流窜伤人的APP，并与宠物管理相关部门合作。该软件集救助、领养、众筹、商城、个人中心为一体，在救助流浪动物的同时，可以解决爱心人士想救却因为经济受限救助不了的问题。用户还可以在APP上分享自己爱宠的动态，与其他用户进行沟通，分享经验，实现资源共享。

用户研究阶段：小组成员通过问卷进行网络投放，3个小时回收了134份问卷，结果显示超过一半以上的人看到流浪动物愿意关注它们并愿意投食物，少部分人选择将其送往宠物管理相关部门。然后选择了特别爱心人士进行了单人访谈，绘制了同理心地图，确定了目标人群为学生党、上班族、家庭主妇。绘制出了用户画像，定义了用户使用场景。根据功能优先级绘制出用户主要的旅程图。

交互设计阶段：根据用户研究的结果，小组成员对信息架构进行了梳理，协作完成了业务流程图、任务流程图、页面流程图。该软件的主要页面为：救助系统，领养与互动，众筹，个人中心。

视觉设计阶段：用户研究和交互设计阶段工作的完成，为产品界面设觉设计奠定了基础。小组成员根据前期的调研结果，为产品命名“宠呜”，“宠呜”的“呜”字为动物受伤时发出的声音，“宠呜”也与宠物同音。产品logo采用“房子”+“宠物狗”造型正负形结合，表现出对动物的帮助关爱，产品色调采用黄橙色，展现温暖和关怀的理念。界面视觉设计不只是软件的“皮肤”，需结合“骨骼”——用户研究和交互设计软件来进行。

总结

课程五个小组，产生了5个不同的创意产品，课程要求学生推行“皮肤+骨骼”的方式来设计界面，让产品更加易学、易用。在创意工作坊的开展过程中，学生反映学到了很多界面视觉设计以外的知识，拓展了眼界和设计思路，也更加理解了界面视觉设计不能只考虑美观，必须依托于用户研究和交互设计的结果来进行拓展，才能真正做到好体验。

课程初次尝试以项目设计流程为导向的方式来学习界面视觉设计，课程改革目的也正是为了让学生不要只停留在研究界面视觉效果上，而应该在坚持研究视觉效果的基础上，不断拓展产品设计思维，让产品视觉设计和交互更好地融合到一起，使自己的专业技能更适应社会发展对人才的要求。■