浅析《用户体验设计》中APP原型设计在教学中的应用

周 健

（武汉职业技术学院计算机技术与软件工程学院，湖北武汉 430074）

引言：

现在,在我们日常生活的方方面面，都离不开手机APP的应用，APP就是在智能手机操作系统下（IOS、Android和WindowsPhone等）使用的第三方应用程序。APP种类纷繁复杂，有可以发送视频、图片、文本和语音信息，与好友一起玩游戏，分享自己的生活到朋友圈的社交类的微信，让你感受耳目一新的移动方式的通讯应用；有出行必不可少的地图导航类APP，高德地图最大的优点就是精确，而百度地图功能做的十分完善，依靠自身公司的大数据库，对于找一些周边的商家，饭店，酒店什么的，百度的标注的可能更多一些；还有翻译类APP，将厚重的纸质词典安装到手机上并装入口袋，随时随地，想翻就翻，支持多语种互译，语音翻译，拍照翻译，离线翻译等等；还有分享美食信息的大众点评，网上购物的淘宝，自娱自乐地酷狗音乐，各种休闲娱乐的小游戏，更有许多企业因为管理和技术查询的需求，会专门定制一些适合企业使用的APP。

因此，如何设计一款界面美观，操作简单，层次清晰的APP已经成为产品经理、UI设计师和软件工程师等前端开发关注的重点。同时《用户体验设计》课程也逐渐引入各大高校的课堂，成为日后投身IT前端开发和软件设计行业的必修课。

1 什么是用户体验设计

所有的设计都来源于生活的需求，生活中有很多好的体验和不好的体验，随着现代科技的发展，知识社会的到来，创新形态的改变，设计也正由专业设计师的工作向更更广泛的用户参与演变，以用户为中心，用户参与的创新设计日益受到关注。在当前信息时代，人们的日常生活和工作，时时刻刻都离不开手机和电脑的使用，针对各种应用的软件和APP层出不穷，用户体验设计主要是针对PC端和移动端应用软件的研发和流程设计。

如何成为一个好的用户体验设计师？用户体验设计包含两个方面：界面设计和交互设计。界面设计主要在于体现品牌特色，包括色彩，色调，视觉风格，整体感官等；交互设计包含功能设计，流程设计，界面布局，交互逻辑，信息反馈等。交互设计又称互动设计，是定义设定人造系统行为的设计领域，是一门以用户为中心，关注交互体验的学科。

2 产品原型与AXURE

PC端web网站设计和移动端APP设计制作流程通常有4个步骤，首先是经过与客户沟通，了解客户的需求，经过市场调研后，定义产品的场景、功能范围和商业需求，并对项目进行评估，确定它的商业价值、业务逻辑，核心特点及创意控制，然后经过交互原型设计，包括产品结构设计、产品细节定义、视觉表现设计等，接下来做软件代码设计，最后进行产品测试和产品交付。其中原型设计是非常关键的一步，直接决定了最终产品的使用感受和效果，客户的想法和理念在原型中得到体现。AXURERP是一个专业的快速原型设计工具，让交互设计师能够快速创建原型的应用软件，可以创建APP或web网站的原型、流程图、线框图和规格说明文档，作为专业的原型设计工具，它比一般的创建静态原型的工具要快速、高效。

3 AXURE在课程教学中的应用

本文是以《用户体验设计》课程中使用AXURERP8设计APP原型为例，目标是让学生掌握AXURE的主要操作方法,并能够设计详细的功能交互流程和交互效果的APP产品原型，授课学生是本院计算机网络技术专业前端方向的大三年级学生，有一定的软件开发能力和平面设计经验基础。

3.1 AXURE的主要操作方法

课程选择的是AXURERP8版本，AXURE软件的操作界面简单明了，与图像处理软件Photoshop和矢量图设计软件Illustrator的界面布局类似，学生本身有一定的软件设计基础，因此对AXURE的适应能力很强。在AXURE中，学生首先制作了基于IOS操作系统和Android操作系统中常用的元件图标，并导入了其他常用的UI元件素材库（菜单栏、键盘和各种按钮）和市面上主流的手机机身图（IPHONE、华为等）。这样既让学生熟悉了AXUER的基本操作，又便于后期设计时，学生不用将时间消耗在设计手机小部件等细节上，学生可以专心研究界面布局和交互效果方面的设计。

AXURE软件自带丰富的元件库，在APP的界面布局设计时，可以通过鼠标拖拽的方式直接使用，其中“动态面板”元件的使用是重点也是难点，动态面板是一个能实现多种交互动作、多空间的、透明的、无限大的元件容器。在课程中教师详细讲解动态面板状态及状态页的编辑，动态面板的交互设计也比其他元件的交互效果设计更丰富，在课程中讲授中，通过对轮播图案例分析、全局导航案例分析，让学生更加理解动态面板的概念并掌握其使用方法，同时要求学生运用动态面板使用多种方法制作轮播图和全局导航效果，使之熟练掌握。

3.2 APP交互设计案例分析

对手机界面的设计风格，色彩搭配和界面的构图，讲授完之后，重点给学生介绍交互效果的设计，在AXURE中，选择不同的元件，交互事例设计的内容是不同的。交互事例设计主要是在用例编辑器中完成，添加的动作可分为5类：链接，元件，全局变量，中继器和其他的动作添加。每一个动作选择不同的元件，设置相应的参数，并加上不同的动画，并且还可以给动作设置相应的条件，达到我们所需要的交互效果。

下面以登录界面的登录按钮事件设计为例，分析交互设计：

在常见的登录界面中，只有用户名和密码正确输入后，才能正常登录，并跳转到相应的页面，那么登录按钮的交互用例就会有四种情况判断：（1）用户名和密码都没有输入，点击登录按钮，（2）用户名已输入，密码没有输入时，点击登录按钮，（3）当用户名没输入，密码输入时，点击登录按钮，（4）用户名和密码都输入后，点击登录按钮。这就需要对多个用例设置条件，并正确设置各个条件之间的关系，只要条件关系整理清楚，用例编辑器就很好掌握了，这部分内容也是讲授的重点。

图：登录界面多条件用例设置学生APP设计作品创作

按照课程计划，以微信APP为例，完成16课时的讲授操作之后，布置课程作业，要求学生运用AXURE设计一个APP原型，要求产品架构信息完整，且功能丰富详细。学生对这项作业的兴趣很高，制作效率高，作品质量良好，作品主要有以下几类：以QQ为例的即时通信软件类；有模仿哔哩哔哩动画的APP；有美团外卖之类的APP；还有像网易云词典，云音乐之类的APP。尽管一些作品仍有小部分的功能没有实现，有些设计不合理，但是学生的学习积极性得到极大提高，并且体现出更活跃更丰富的创新能力。

4 结束语

AXURE的出现是行业岗位细分化和更专业化的体现，为什么要设计原型？第一是减少修改成本，第二是便于沟通讨论,在用户和产品经理之间，在产品经理和交互设计师之间，在交互设计师和开发工程师之间,有了原型，他们的交流沟通更加明朗清晰,工作效率也自然提高。现在大学课程中引入AXURE教学的，并不是很多，有待进一步的改进和完善，笔者主要从自身的教学中进行了总结归纳，有一定的局限性，仅以此同广大教育工作者共勉。