原型设计教学案例研究

摘要：信息化高速发展的今天，软件功能需求愈发趋向繁杂，用户更多地参与产品开发过程，能够挖掘用户实际需求的产品原型的作用越发重要。本文介绍了原型设计的概念，以一个健身助手系统中的APP程序和Web网站为例，阐述了使用原型设计工具进行界面设计的过程，为系统设计、软件工程等课程的教学提供了参考思路和案例。

关键词：教学案例;原型设计;MockingBot

1原型设计

在交互设计中，原型是能够帮助我们与未来产品进行交互，从而获得第一手体验，并启发思路的装置[1]。原型展示了产品设计界面，表达了功能与交互，提供了沟通依据。用户界面原型一般用于系统开发的初期或精化阶段，以在实际设计与实施前揭示和测试系统的功能与可用性[2]。本文主要介绍高保真原型，即制作与最终产品界面高度接近的界面模型，供开发者和用户进行可用性测试[3]。

2原型设计案例

2.1设计工具

目前流行的原型设计工具众多，如设计概念模型的Balsamiq，设计框架模型的AxureRP和Sketch，设计仿真模型的Principle等。本文采用MockingBot[4]作为原型设计工具，其常用于开发可演示的交互原型，支持多平台设计。

2.2界面设计

本案例设计了一个运动分析和社交系统的原型，该系统涉及手机应用程序（APP）、Web网站程序和Web服务器程序。APP采集用户运动数据，计算参数并实时展示。APP将用户拟保存的运动参数无线传输至服务器程序进行长期保存，用户可以在电脑端网页登录查看自己的运动历史记录等信息。

该原型采用MockingBot设计了APP页面和Web页面的高保真效果图。例如，通过Web网站的运动历史记录页，用户可以日/周/月/季度/半年/年为单位，查看其运动历史记录，如图1所示。该原型也创建了链接，进行页面间的跳转，以实现原型的交互性演示。例如，通过点击APP主页中的项目列表，可分别进入其下的各个子页面，如图2所示。

3结论

本文介绍了采用MockingBot工具进行的界面原型设计，为系统设计、软件工程等课程提供了參考思路。原型设计是一个和评估紧密结合的迭代过程，故该案例仍存在待完善之处。例如制作更细节化的页面组件，添加更灵活的动效等。

参考文献：

[1]李洪海，石爽，李霞.交互界面设计[M].北京：化学工业出版社，2011.

[2]贝尼昂.交互式系统设计[M].北京：清华大学出版社，2014.

[3]韩凯迪.移动互联网产品原型设计原则探析[J].电子信息，2017，5：53.

[4]MockingBot，https：//modao.cc/.

课题：本文得到辽东学院2019年度教学质量保障与评价专项课题（系统设计类课程建设质量提高及评价研究，No.69）资助

*通讯作者：孟瑶（1980-），女，主要研究领域为人机交互。