项目式教学：虾米音乐与浙工大的界面设计教学合作
大设计 深阅读
《装饰》杂志2017年度
“优秀投稿论文”
编辑推荐与全文分享
2018首届装饰学术年会
期待您的到来！
你还在通宵写作
苦苦修改论文吗？
你还在为自己的学术研究无法
组织成有深度的学术论文而苦恼吗?
你还在恐惧被编辑秒退文稿后，
让你茫然不知所措吗?
如果真是这样
那么恭喜你
今天的文章对你太重要了
看完今天的文章大概需要10分钟
但看完之后
说不定能让你对设计论文的
写作思路豁然开朗^^
2014年，《装饰》杂志进行了首次“年度优秀投稿论文”的评选暨交流活动，并从此作为年度常设活动举办。今年举办的该项活动已是第五届。
本次评选以2017年《装饰》杂志发表的投稿论文为对象，主要集中在“教学档案”“史论空间”“个案点击”“设计实践”“民俗民艺”五个栏目。
点击以下链接可查看：
一直以来，《装饰》杂志都强调文献性与记录性，在实务研究中融入理论研究是杂志的一个努力方向。通过这样的评选活动，本刊旨在弘扬扎实严谨的学术风气，也意在向广大作者进一步明确《装饰》杂志的学术标准和投稿要求。我们将陆续在微信公众平台把2017年评选出的14篇优秀论文做全文的推送，还会附上每个栏目编辑的推荐语。
今天我们要推荐的是一篇
“教学档案”栏目的文章
原文：
以设计工作流程为导向的
项目式界面设计课堂教学改革与实践
陈星海
1
改革目的
国内界面设计人才供需矛盾突出，主要表现为：1.教学内容与企业内部的设计生态脱节；2. 学生专业能力无法满足企业对人才的要求。为了缩小高校与企业对培养界面设计人才认知上的差距，接轨企业内部的设计生态，我们将企业岗前培训环节前置，提出以设计工作流程为导向的项目式界面设计课堂教学改革与实践。这样既有助于学生在理解界面设计工作流程的前提下，学习各阶段的设计方法，并形成系统设计观念，也可以让学生通过项目实训积累实践经验、提高团队协作能力。
2
教学理念
1
方法：以设计工作流程为导向
1
方法：以设计工作流程为导向
界面设计课程具有跨学科的特点，这表现为界面设计工作通常是由用户研究员、交互设计师、视觉设计师三方合作完成。其设计工作流程也可大致分为用户研究、交互设计与视觉设计三部分。用户研究主要负责界面设计开始阶段的用户需求挖掘和分析，以及设计阶段的验证和测试工作。交互设计主要基于用户研究的需求分析整理产品功能结构，梳理界面信息架构，并输出交互界面原型。视觉设计会依据目标用户的偏好设定视觉设计风格，在交互界面原型基础上设计高保真视觉界面。
将界面设计工作流程融入界面设计课程的教学方法，其主要目的在于转换师生角色，打破传统填鸭式教学模式。教师和学生，依据工作流程中不同角色职能建立共同合作探究的学习模式（例如：教师和企业设计师担任项目经理角色，确定项目目标和方向；学生以小组分工合作形式分别承担用户研究员、交互设计师和视觉设计师的职能）。该教学模式能够营造实际的项目开发环境，引发学生主动学习的热情，使学生形成系统的界面设计思维。
2
内容：以企业实际项目为基础
2
内容：以企业实际项目为基础
通过调研国内知名高校，我们发现他们都在积极加强与企业合作，将项目带入界面设计课堂，这些院校的毕业生也普遍受到国内一流互联网企业的欢迎。因此，界面设计课程具有重实践的特征。
在其课堂教学内容中引入企业实际项目，能够让学生按照界面设计工作流程，从用户研究出发，围绕企业实题开展用户调研，发现用户痛点，并将其转化为设计机会点，再通过交互与视觉设计呈现为产品界面以满足用户需求。其目的是使学生在学习理论知识的基础上，通过企业项目实践，深入理解和学习界面设计工作流程各环节的设计方法与原则。
3
评价：以企业人员评分为依据
3
评价：以企业人员评分为依据
学生企业项目界面设计方案完成后，将邀请企业内部设计师、市场部等其他专业人员参与答辩，并让其从界面设计工作流程各环节对学生设计方案进行评分。其作用在于通过项目设计方案答辩，在提高学生方案陈述能力的同时，又可在与企业设计师和市场部等专业人员的交流过程中激发学生的反思。另外，不同背景企业人员本身就是该产品的专家级用户，因此他们对学生设计方案的评分和建议显得更为公正和专业，也更有益于培养学生系统全面的项目思考能力，促进其向PMD式设计人才[1]发展。
3
教学案例
2017年2月至4月，浙江工业大学与虾米音乐联合开展为期两个月的界面设计课程。课程第一周16课时为基础理论课程，后七周共72课时为项目实践课程。
1
基础理论：建立知识体系
1
基础理论：建立知识体系
教师分角色讲解设计团队每个成员在界面设计工作流程每个阶段的任务，以及他们的协作关系。比如在项目发起阶段，界面交互设计师需要与项目经理沟通项目的可行性，明确项目的主要目标。在设计过程中，交互设计师还需与用户研究员合作定义产品使用场景、开展用户任务分析。交互设计完成后，交互设计师还应跟进视觉设计，协助视觉设计师按照交互稿完成视觉界面。教师这样讲解，能够让学生对界面设计工作流程有全面、详实的认识，也让其在后续的项目实践课程中理解各自承担的角色任务。
另外，为了让学生更好地理解企业内部如何实施界面设计工作流程，我们邀请虾米音乐UED设计总监结合实际设计案例为学生讲解运用设计思维从定义问题、观察、找出洞见、脑暴、原型、说故事六个步骤创建和推动界面设计工作流程；同时要求学生针对这六个步骤，围绕音乐互动体验这个议题开展快题训练。
基础理论课程结束后，我们与虾米音乐UED设计总监围绕“音乐+”这个主题并结合校园生活设计了3个企业实题：
提高音乐在校园的必需性；
让虾米更多地被你的朋友接受使用；
利用音乐提高社交。
学生以小组为单位，围绕这三个实际项目开展设计实践。每组学生共4人，设组长一名负责整个项目的进度和组员间的协调，其他三名学生分别担任用户研究员、交互设计师、视觉设计师，并按照界面设计的工作流程实施项目开发。教师与企业设计师在设计过程中起到指导作用。
2
项目实践：提升设计能力
2
项目实践：提升设计能力
（1）乐动校园——提高音乐在校园的必需性
首先，教师要求学生进行破题分析，思考课题背后真正的设计目标。该课题设计目标为：用一种方法（一款产品）使音乐成为校园生活中必需的一部分，其目标人群为在校大学生。
乐动校园界面设计
乐动校园界面设计
① 用户研究：围绕大学生生活方式展开研究
依据设定好的设计目标，教师要求学生从了解大学生生活方式入手，通过问卷调查法调研大学生闲暇时间的活动占比。从问卷的反馈得出，玩手机和听音乐是占比最高的两项活动。因此，学生将该项目产品定位为针对大学生校园生活场景，集听和玩为一体的音乐App（乐动校园）。然后，学生针对音乐在校园生活不同场景下的使用状态和作用设计第二轮调研问卷，问卷设计是对学生逻辑推理与客观表达能力的训练。例如，
a.你在哪个场景下听音乐花费的时间最长？
b.你在寝室的时候习惯边听音乐边做什么事情？
在问题1中，学生可以了解用户听音乐的高频场景；从问题2中，学生可以进一步挖掘寝室场景下用户什么行为会触发听音乐的需求。这两个问题呈逻辑递进关系，同时能够发现听音乐和其他行为的关联性。经过第二轮问卷调查，学生得出学习、睡前、跑步、休闲是大学生听音乐的四个高频场景，推荐歌单是音乐App中最受大学生关注的内容板块。
问卷调查能够发现趋势，用户访谈则能够挖掘趋势背后的原因。在第三轮用户访谈中，我们要求学生依据每个受访用户的问卷答案先拟出访谈问题提纲，并注意在访谈过程中保持中立客观的态度，抓住受访者反馈信息中的要点，围绕要点开展提问，牵引出更多有价值的信息。
最终，学生在访谈基础上提出4个设计机会点：
a.学习场景：提供好心情、找灵感、抗疲劳音乐；
b.睡前场景：提供音乐资讯与定时关闭功能；
c.跑步场景：根据跑步距离匹配歌单；
d.休闲场景：依据散步、路途、阅读、下午茶这几类场景提供合适音乐。
另外，学生还发现一部分受访用户希望通过音乐平台的社交功能来结交朋友。
乐动校园界面设计
乐动校园界面设计
② 交互设计：针对场景音乐推荐与自定义功能设计交互信息流程
依据设计机会点，学生内容模块中的场景音乐推荐功能作为界面交互设计的重点。我们要求学生先分析用户在不同场景下听音乐的任务流程，从中发现和归纳用户的操作习惯与需求，为交互信息流程设计提供指导。比如：学习场景听音乐是大学生高频场景中的强需求，因此需要将该功能置于App首页首屏，方便用户快速找到该功能入口。另外，用户在学习场景听音乐不会频繁操作产品，所以通过提供换一批按钮，让用户在学习的过程中可以根据自己的喜好快速批量挑选系统推荐的音乐，简化其挑选音乐的过程。针对产品定位中玩的属性，学生提出玩乐和画板歌单两个自定义功能。
在设计过程中，学生经常会沉迷于其他音乐编辑软件高级的编辑功能，将其交互流程复杂化。教师需要时刻提醒学生保持同理心，多站在用户的角度去思考交互流程是否易用，而不是单纯追求功能的强大。因此，学生应尽可能减少编辑操作步骤，并将操作步骤选项化、图标化，让用户在使用玩乐和画板歌单的过程中更加简单轻松，提升其操作的完成度与愉悦感。
乐动校园界面设计
③ 视觉设计：采用舒压色，强化音乐放松、抗疲劳的功能属性
界面视觉设计并不仅仅是给交互界面增加一层视觉皮肤，它需要符合产品功能和用户审美的调性。因此，我们要求学生在设定界面视觉系统之前，应该重新审视产品的属性与功能，并围绕用户审美调性开展研究。学生通过前期用户研究了解到，音乐在不同高频场景中起到的都是放松和抗疲劳的作用。因此，选用2016年Pantone选出的两款舒压色作为界面的主色彩。另外，以大学生为主的目标用户偏好以图形为主的信息界面，所以学生在设计界面中的主要功能，特别是自定义功能模块都采用可视化图标的形式展示，易于用户识别和操作。
（2）虾米实验室——让虾米更多地被你的朋友接受使用
①用户研究：根据不同类型用户设计问题开展调研。
在问卷调研中，通过预设问题对用户进行分类可以使得后续问题更有针对性。因此，我们要求学生在问卷开始的题目中针对用户的使用频率进行提问，依据答案将用户分层，具体为：潜在用户——听说过虾米但没有使用过的用户；低频用户——使用过虾米但每周使用低于三次的用户；高频用户——每周使用虾米超过七次以上的用户。教师要求学生依据不同类型用户的特点设计问题。例如：针对潜在用户，需要问其下载音乐App的原因是什么，从用户体验旅程图的接受环节分析其接受音乐App的主因。面对低频用户，应该发起对其使用产品的满意度调查，分析不满意原因。高频用户问题应聚焦其使用习惯与内容偏好，为其带来更好体验和更高质量内容。基于三类用户问卷和访谈内容分析，学生归纳出七个主要用户需求：a.更全歌曲库；b.更符合用户喜好推荐歌曲；c.更快速找到歌曲；d.更多歌曲分类；e.个性化视觉界面；f.更多歌曲相关信息；g.更有趣的娱乐互动功能。
②交互设计：以趣玩和公益功能模块为主的交互信息流程
面对七个主要用户需求如何做取舍，教师与学生开展创新性评估，得出第七点：更有趣的娱乐互动功能需求能给产品带来更大创新空间，而其他需求大多是从内容和技术角度对产品体验做出改进。因此，学生将产品定义为“虾米实验室”，将趣玩和公益功能模块作为主要创新点，并围绕其进行交互设计。
在设计趣玩功能模块的过程中，我们鼓励学生发散思维，尽可能多地想趣味功能。但为了避免偏离主题，也要给学生制定限定条件：功能中需要融入音乐元素。经过概念收敛，学生得出虾点、虾表情、虾算、虾斗四个趣味功能。其中，最具创新性的是虾点功能，它能帮助用户在特定场景中点歌和藏歌，用户可以随歌附上文字、图片和视频信息并将其藏于某一地点，听歌用户通过虾米信息提示，可以在藏歌地点收听音乐。另外，虾公益功能模块以用户每天听歌满一小时即可向听障儿童援助计划捐款一角钱的形式，鼓励用户增加和延长使用虾米音乐的频率和时间。这种价值激励的方式是否可以应用到整个产品，从而构建一个持续的价值激励生态？我们要求学生结合产品功能点分析用户使用行为，并为不同行为定义价值设置相应权益。
在此基础上，学生创新性地构建音力值体系，用户在虾米上特定操作行为都可以为其获得相应的音力值。这些音力值可以用于购买VIP等相关权益，从而增加用户对虾米的黏性。例如：用户累计登录虾米30天可以获得150个音力值，能够下载两首无损歌曲。学生在交互流程上将这些趣味及公益功能置入App首页首屏，强化其入口，满足年轻群体对虾米的趣味性需求，以吸引潜在用户，激活低频用户。
虾米实验室界面设计
③ 视觉设计：整合视觉层级，强调图文编排
在设计视觉界面时，我们要求学生强调扁平化，这里的扁平化是指视觉层级上的扁平化，这样可以引导用户更有效率地阅读核心信息，完成主要操作。基于该原则，学生在首页展示了更多模块内容，整合视觉层级。界面背景则以高亮白色为主，强调图文以及控件的有序编排，突出对内容的展现。另外，考虑到趣玩和公益功能模块的个性趣味特征，学生采用以淡黄色为背景的暖色调结合矢量插画风格来设计其视觉界面，尤其是虾表情和虾斗中的游戏人物和表情样式都以色彩明快的矢量插画来表现。
虾米实验室界面设计
（3）虾趣——利用音乐提高社交
在教师的指导帮助下，学生将该课题转化为更为具体的产品定位：通过音乐更好地为青年群体找到趣味相投的朋友。其目标人群为：喜爱音乐的青年群体，以大学生为主。
①用户研究：了解用户的社交行为及其对音乐社交的需求
用户研究是一个不断收敛提炼用户需求的过程。教师要求学生通过多轮问卷调研和用户访谈，围绕用户产生社交行为的原因、方式、途径，以及社交过程中遇到的困难，音乐对用户社交的作用和影响开展调研。在第一轮问卷调研和用户访谈的基础上，学生归纳出14个用户需求。在第二轮用户调研中，学生将总结的14个用户需求发给之前的受访用户，对这些需求进行权重分析，得出最重要的5个需求点：
a.隐私保护功能；
b.希望结交趣味相近的朋友；
c.喜欢看直观高效、趣味性的内容；
d.结交音品相似的朋友；
e.在社交平台分享内容时增加音效。
②交互设计：以音乐名片为核心的功能体系与交互逻辑
教师与学生综合分析产品定位和五个需求点，认为可以通过提供有趣的音乐类互动游戏、共同喜爱音乐背景的聊天场所来形成趣味社交，因此将产品名称定义为“虾趣”。
但是如何将这些有趣的功能联系在一起，为用户搭建一个社交闭环？我们要求学生观察现实场景中用户是如何与陌生人认识并形成社交关系的。通过观察发现，名片交换是一个相对安全和正式的建立社交关系的方式。
由此，学生提出给用户设计音乐名片，该名片首先让用户自定义个性标签，同时系统也会根据用户的听歌偏好对其进行精确校准。音乐名片能够只展示用户对音乐的喜好，一定程度上保护用户隐私，有利于用户更有效地结交音品相似的好友。它也可以作为虾趣摇摇机和虾趣星球等功能趣味筛选的依据，帮助用户选择不同趣味属性的好友开展及时线上社交。另外，我们还要求学生尽可能地通过产品带动线下社交，使用户社交关系更加立体化。所以学生设计了虾城功能中的门票拼团活动，鼓励用户与好友拼团购买演唱会门票，一起参与线下音乐活动，促进线下社交。
虾趣界面设计
③视觉设计：以品牌调性为依据的视觉风格
在设计界面视觉时，我们强调要有统一的视觉设计语言，使用户对产品形成统一的品牌认知感。由于学生将虾趣定位为虾米音乐的子App，虾趣界面主色调延用虾米的暖色系，色相上相对更偏亮黄色。此外，学生依据虾趣强调趣味社交的品牌调性，界面视觉选择扁平化视觉风格，通过图文编排规划界面，更直观高效地给用户展示趣味性的内容。针对名片本身过于严肃的属性，教师指导学生采用卡通图画风格设计音乐名片，个性化的卡通人物形象与关键身份信息相结合，增加其视觉趣味性，符合整个品牌调性。
虾趣界面设计
4
评价与总结
最后，师生受邀来到虾米音乐总部进行课程项目汇报答辩。我们现场将由用户研究、交互设计、视觉设计、命题完成度、创新程度五个维度组成的评分表发予企业人员，让其给答辩的每组学生进行评分。综合统计评分结果，学生项目成果用户研究环节均得分为90分，交互设计环节均得分为80分，视觉设计环节均得分为80分，命题完成度均得分为95分，创新程度均得分为88分。由此可见，企业人员对学生的课程项目成果比较满意，尤其是用户研究环节，在专业教师和企业设计师的共同指导下，都经历了两至三轮的用户调研，使得结论逐步被提炼和明确，为后续的交互和视觉设计奠定了良好的研究基础。
项目答辩交流现场
在答辩的交流环节中，也有不少企业设计师和市场运营人员对学生作品某些功能的交互逻辑提出了修改建议。例如：
a.乐动校园作品中音乐画板功能如何让用户生成的内容更加多元化地输出，让操作更加简单有趣；
b.虾米实验室中虾算功能能否强化音质测试功能，并给用户推荐适合其音质表现的歌曲，鼓励用户录制歌曲分享给朋友。这些评价和建议会让学生反思作品的不足，促进其专业能力的提高。
同时，课程项目成果也对虾米音乐最新改版设计提供了创新方向。例如：在虾米音乐6.1.9版本设计中：
a.随心·听功能里面包含跑步、工作、休闲等场景音乐推荐模块；
b.养虾米功能可以通过听音乐、分享、购买等行为产生相应音乐能量，每100个能量换得一颗爱心，用于捐赠购买人工耳蜗，帮助贫困听障儿童恢复听力。
综上所述，以设计工作流程为导向的项目式界面设计课堂教学改革与实践，通过教师与企业设计师在教学过程中讲授界面设计工作流程及其设计方法，引导学生按其流程开展了实践，使学生不仅积累了项目实践经验，同时加深了对界面设计工作流程的理解，更为培养系统的界面设计思维，成为能力全面的界面设计师奠定了扎实的专业基础。这对高校和企业人才培养与招募来说具有双赢效益。
注释：
[1]“PMD”类型的设计人才观：P代表产品，M代表管理，D代表设计。这类人才在一个项目中担任产品经理，同时又是项目经理，而且还是这个项目的设计师（两层含义：视觉设计师+交互设计师，有可能还涉及用户研究的相关工作），并且是整个项目的发起人。张林林:《交互设计师在未来的5种转型方式》，人人都是产品经理www.woshipm.com，2017。
来源：《装饰》杂志2017年第11期
原文标题：《以设计工作流程为导向的项目式界面设计课堂教学改革与实践》
作者：陈星海 浙江工业大学设计艺术学院
欲知2018装饰学术年会参与方式，请点击以下链接：
点击以下图片可查看本期介绍
点击最下方“阅读原文"可购买本期刊物
《装饰》杂志欢迎您的来稿
E-mail：zhuangshi689@263.net
地址：北京市海淀区清华园清华大学美术学院A431 中国装饰杂志社编辑部
电话：010-62798189 010-62798878
邮编：100084
官网：http://www.izhsh.com.cn
建议邮件 书信亦可
在微信中回复“投稿”即可获得投稿须知