原型設(shè)計(jì)教學(xué)案例研究

摘要：信息化高速發(fā)展的今天，軟件功能需求愈發(fā)趨向繁雜，用戶更多地參與產(chǎn)品開發(fā)過程，能夠挖掘用戶實(shí)際需求的產(chǎn)品原型的作用越發(fā)重要。本文介紹了原型設(shè)計(jì)的概念，以一個(gè)健身助手系統(tǒng)中的APP程序和Web網(wǎng)站為例，闡述了使用原型設(shè)計(jì)工具進(jìn)行界面設(shè)計(jì)的過程，為系統(tǒng)設(shè)計(jì)、軟件工程等課程的教學(xué)提供了參考思路和案例。

關(guān)鍵詞：教學(xué)案例;原型設(shè)計(jì);MockingBot

1原型設(shè)計(jì)

在交互設(shè)計(jì)中，原型是能夠幫助我們與未來產(chǎn)品進(jìn)行交互，從而獲得第一手體驗(yàn)，并啟發(fā)思路的裝置[1]。原型展示了產(chǎn)品設(shè)計(jì)界面，表達(dá)了功能與交互，提供了溝通依據(jù)。用戶界面原型一般用于系統(tǒng)開發(fā)的初期或精化階段，以在實(shí)際設(shè)計(jì)與實(shí)施前揭示和測試系統(tǒng)的功能與可用性[2]。本文主要介紹高保真原型，即制作與最終產(chǎn)品界面高度接近的界面模型，供開發(fā)者和用戶進(jìn)行可用性測試[3]。

2原型設(shè)計(jì)案例

2.1設(shè)計(jì)工具

目前流行的原型設(shè)計(jì)工具眾多，如設(shè)計(jì)概念模型的Balsamiq，設(shè)計(jì)框架模型的AxureRP和Sketch，設(shè)計(jì)仿真模型的Principle等。本文采用MockingBot[4]作為原型設(shè)計(jì)工具，其常用于開發(fā)可演示的交互原型，支持多平臺設(shè)計(jì)。

2.2界面設(shè)計(jì)

本案例設(shè)計(jì)了一個(gè)運(yùn)動(dòng)分析和社交系統(tǒng)的原型，該系統(tǒng)涉及手機(jī)應(yīng)用程序（APP）、Web網(wǎng)站程序和Web服務(wù)器程序。APP采集用戶運(yùn)動(dòng)數(shù)據(jù)，計(jì)算參數(shù)并實(shí)時(shí)展示。APP將用戶擬保存的運(yùn)動(dòng)參數(shù)無線傳輸至服務(wù)器程序進(jìn)行長期保存，用戶可以在電腦端網(wǎng)頁登錄查看自己的運(yùn)動(dòng)歷史記錄等信息。

該原型采用MockingBot設(shè)計(jì)了APP頁面和Web頁面的高保真效果圖。例如，通過Web網(wǎng)站的運(yùn)動(dòng)歷史記錄頁，用戶可以日/周/月/季度/半年/年為單位，查看其運(yùn)動(dòng)歷史記錄，如圖1所示。該原型也創(chuàng)建了鏈接，進(jìn)行頁面間的跳轉(zhuǎn)，以實(shí)現(xiàn)原型的交互性演示。例如，通過點(diǎn)擊APP主頁中的項(xiàng)目列表，可分別進(jìn)入其下的各個(gè)子頁面，如圖2所示。

3結(jié)論

本文介紹了采用MockingBot工具進(jìn)行的界面原型設(shè)計(jì)，為系統(tǒng)設(shè)計(jì)、軟件工程等課程提供了參考思路。原型設(shè)計(jì)是一個(gè)和評估緊密結(jié)合的迭代過程，故該案例仍存在待完善之處。例如制作更細(xì)節(jié)化的頁面組件，添加更靈活的動(dòng)效等。

參考文獻(xiàn)：

[1]李洪海，石爽，李霞.交互界面設(shè)計(jì)[M].北京：化學(xué)工業(yè)出版社，2011.

[2]貝尼昂.交互式系統(tǒng)設(shè)計(jì)[M].北京：清華大學(xué)出版社，2014.

[3]韓凱迪.移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)原則探析[J].電子信息，2017，5：53.

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

課題：本文得到遼東學(xué)院2019年度教學(xué)質(zhì)量保障與評價(jià)專項(xiàng)課題（系統(tǒng)設(shè)計(jì)類課程建設(shè)質(zhì)量提高及評價(jià)研究，No.69）資助

*通訊作者：孟瑤（1980-），女，主要研究領(lǐng)域?yàn)槿藱C(jī)交互。