原型設計教學案例研究

摘要：信息化高速發展的今天，軟件功能需求愈發趨向繁雜，用戶更多地參與產品開發過程，能夠挖掘用戶實際需求的產品原型的作用越發重要。本文介紹了原型設計的概念，以一個健身助手系統中的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-），女，主要研究領域為人機交互。