基于AxureRP的電信運(yùn)營(yíng)商O2O產(chǎn)品原型設(shè)計(jì)和應(yīng)用

陳冬旭 梁琳

摘 ?要： 在軟件產(chǎn)品研發(fā)過程中，為了讓團(tuán)隊(duì)成員能更直觀地了解產(chǎn)品的功能、界面和交互，盡早讓產(chǎn)品暴露設(shè)計(jì)不足和功能缺陷，提高團(tuán)隊(duì)開發(fā)效率，在產(chǎn)品需求分析和研發(fā)之間增加產(chǎn)品原型設(shè)計(jì)。使用功能強(qiáng)大的原型建模工具Axure RP進(jìn)行原型設(shè)計(jì)工作，為產(chǎn)品經(jīng)理、交互設(shè)計(jì)師和開發(fā)工程師提供用于需求溝通的高保真原型。文章通過使用原型工具，設(shè)計(jì)了電信運(yùn)營(yíng)商的預(yù)約受理產(chǎn)品原型，形成一套完整的原型設(shè)計(jì)案例。

關(guān)鍵詞： 需求分析; 原型設(shè)計(jì); 高保真; 建模工具

中圖分類號(hào)：TP399，TP37 ? ? ? ? ?文獻(xiàn)標(biāo)志碼：A ? ? 文章編號(hào)：1006-8228（2019）11-54-04

Abstract： In the process of software development， in order to make team understand the function， interface and interaction of the product intuitively， expose the design shortcomings and functional defects as soon as possible， and improve the efficiency of development， product prototype design usually be added between product requirement analysis and development. The prototype modeling tool Axure RP is used to design the product prototype， providing product manager， interaction designer and development engineer with a high-fidelity prototype. This paper describes the designing of telecom operators product prototype with the prototype tool， and the forming of a complete set of prototype design cases.

Key words： requirement analysis; prototype design; high fidelity; modeling tool

0 引言

原型是解決軟件危機(jī)的一種行之有效、可操作性強(qiáng)的產(chǎn)品開發(fā)方法。其主要思想是在需求分析階段先行開發(fā)一個(gè)與需求盡可能匹配的“簡(jiǎn)約版”產(chǎn)品，然后通過需求分析溝通，進(jìn)行多次原型迭代和細(xì)化，以便準(zhǔn)確地表達(dá)客戶真實(shí)需求，并最終實(shí)現(xiàn)產(chǎn)品的成功開發(fā)。Axure RP是業(yè)內(nèi)廣泛采用的表示層原型建模工具，它通過設(shè)計(jì)出逼真的項(xiàng)目高保真原型，使開發(fā)團(tuán)隊(duì)在軟件開發(fā)前，就能真實(shí)地體驗(yàn)和直觀地展示未來(lái)軟件的效果與核心邏輯功能，從而實(shí)現(xiàn)精確的需求分析。同時(shí)Axure RP能便捷地創(chuàng)建基于目錄組織的原型文檔和功能說(shuō)明，并自動(dòng)生成HTML原型文件，原型HTML文件經(jīng)優(yōu)化后可直接用于后期邏輯代碼開發(fā)，能有機(jī)地將需求工作成果應(yīng)用于后期開發(fā)編碼。

1 產(chǎn)品開發(fā)過程和原型意義

典型的軟件產(chǎn)品開發(fā)過程一般經(jīng)歷需求分析、產(chǎn)品方案、交互視覺設(shè)計(jì)、開發(fā)、測(cè)試、上線等六大階段，六大階段形成閉環(huán)圈，每一圈，稱之為一個(gè)“迭代”[1]。需求分析階段為市場(chǎng)需求洞察，決定一個(gè)產(chǎn)品或一個(gè)功能到底做還是不做;產(chǎn)品方案階段為需求確認(rèn)后，產(chǎn)品經(jīng)理進(jìn)入細(xì)化產(chǎn)品方案設(shè)計(jì)環(huán)節(jié)，包括梳理功能、細(xì)化邏輯和排優(yōu)先級(jí)等;交互視覺設(shè)計(jì)階段更生動(dòng)的表述需求，交互設(shè)計(jì)師在充分理解產(chǎn)品目標(biāo)客戶、場(chǎng)景和需求基礎(chǔ)上，結(jié)合交互稿，使用視覺語(yǔ)言來(lái)完善每一個(gè)UI的具體視覺細(xì)節(jié);開發(fā)階段是開發(fā)工程師依照產(chǎn)品需求文檔、交互稿和視覺稿，將產(chǎn)品方案用編程的方式真正實(shí)現(xiàn)出來(lái);測(cè)試階段為產(chǎn)品開發(fā)上線前經(jīng)過的各類“測(cè)試”，產(chǎn)品測(cè)試通過后，可對(duì)外上線供客戶使用。

原型是指呈現(xiàn)產(chǎn)品一方面或多方面特征的近似品。原型可讓很多關(guān)于需求、功能、界面設(shè)計(jì)等方面的潛在問題盡早暴露出來(lái)。從整個(gè)項(xiàng)目的角度來(lái)看，原型階段的工作非但不代表“耗時(shí)”與“高成本”，實(shí)際上正相反，在原型的設(shè)計(jì)與測(cè)試過程中發(fā)現(xiàn)問題并加已解決，比將問題留到開發(fā)中再處理要省時(shí)省力得多。任何產(chǎn)品的開發(fā)和設(shè)計(jì)都涉及到構(gòu)建原型，這個(gè)過程被稱為原型化。原型化的目的通常有四個(gè)[2]：研究產(chǎn)品一個(gè)或多個(gè)特性而構(gòu)建;與上級(jí)、團(tuán)隊(duì)、客戶進(jìn)行交流而構(gòu)建;為保證產(chǎn)品的子系統(tǒng)及組件按照預(yù)期工作而構(gòu)建;為開發(fā)團(tuán)隊(duì)后期檢測(cè)產(chǎn)品在功能上是否達(dá)到預(yù)期水平而構(gòu)建。

2 原型工具對(duì)比和Axure RP概述

產(chǎn)品原型設(shè)計(jì)是最基礎(chǔ)的產(chǎn)品研發(fā)工作，是結(jié)合批注、大量的說(shuō)明以及流程圖畫和框架圖，將產(chǎn)品原型完整而準(zhǔn)確的表述給 UI、UE、開發(fā)工程師和市場(chǎng)人員，并通過溝通會(huì)議，反復(fù)修改原型直至最終確認(rèn)，開始投入執(zhí)行。原型的建模工具可以是簡(jiǎn)單的紙筆和Visio，也可以是功能強(qiáng)大的Dreamweave和Axure RP等[3]，它們各有利弊，對(duì)比起來(lái)，Axure RP功能更加強(qiáng)大，利于軟件產(chǎn)品的原型制作，也是行業(yè)內(nèi)最多選擇使用的原型制作工具。

紙筆：簡(jiǎn)單易得，上手難度為零。有利于瞬間創(chuàng)意的產(chǎn)生與記錄，有利于對(duì)文檔即時(shí)的討論與修改。但是保真度不高，難以表述頁(yè)面流程，更難以表述交互信息與程序需求細(xì)節(jié)。

Visio：功能相對(duì)比較復(fù)雜。善于畫流程圖，框架圖。不利于批注與大篇幅的文字說(shuō)明;同樣不利于交互的表達(dá)與演示。

Dreamweave：操作難度大，需要基礎(chǔ)的html知識(shí);易于畫框架圖、流程圖、表達(dá)交互設(shè)計(jì);不擅長(zhǎng)文字說(shuō)明與批注。

Axure RP是美國(guó)Axure RP Software Solution公司的旗艦產(chǎn)品，是一個(gè)專業(yè)的快速原型設(shè)計(jì)工具，它可讓負(fù)責(zé)定義需求和規(guī)格、設(shè)計(jì)功能和界面的人快速創(chuàng)建應(yīng)用軟件或網(wǎng)站頁(yè)面的線框圖、流程圖、原型和規(guī)格說(shuō)明文檔[4]。作為專業(yè)的原型設(shè)計(jì)工具，它能快速、高效的創(chuàng)建原型，同時(shí)支持可視化工作環(huán)境、多人協(xié)作設(shè)計(jì)和版本控制管理。

3 基于Axure RP的電信運(yùn)營(yíng)商O2O頁(yè)面原型設(shè)計(jì)案例

電信運(yùn)營(yíng)商與線上實(shí)體店不一樣，電信運(yùn)營(yíng)商主要是將虛擬的系統(tǒng)服務(wù)打包為商品進(jìn)行銷售，商品銷售過程也不一樣，比如客戶申請(qǐng)安裝寬帶，其中寬帶安裝過程需客戶先訂購(gòu)包月/包年服務(wù)外，還需上門進(jìn)行安裝服務(wù)，且涉及客戶安裝地址附近是否已滿足網(wǎng)絡(luò)覆蓋、網(wǎng)絡(luò)端口是否空余、拉線是否順暢、實(shí)地布線安裝、測(cè)試等等。電信運(yùn)營(yíng)商在線上銷售這些商品時(shí)，一般會(huì)按簡(jiǎn)單商品H5配置承載，復(fù)雜商品個(gè)性化承載這兩個(gè)方式進(jìn)行快速線上銷售。本案例是針對(duì)復(fù)雜商品進(jìn)行O2O原型設(shè)計(jì)，因?qū)拵暾?qǐng)安裝涉及客戶在線上快速下單和客服響應(yīng)訂單，該頁(yè)面原型可方便需求人、開發(fā)者、使用者、管理者等多方明確需求，減少開發(fā)階段中原需求反復(fù)修改，提升開發(fā)速度。

3.1 電信運(yùn)營(yíng)商O2O商品銷售流程

利用Axure RP元件庫(kù)中的Flow工具，使用流程圖元件進(jìn)行流程圖繪制;其中圓角矩形代表開始，菱形代表判斷，圓形代表結(jié)束，四方形代表處理方法，箭頭代表流轉(zhuǎn)過程，各元件雙擊均可編輯文字。本案例中，客戶在O2O商品銷售頁(yè)面中進(jìn)行登錄，提供兩種登錄方式，首要運(yùn)用運(yùn)營(yíng)商獨(dú)有的網(wǎng)關(guān)自動(dòng)登錄，當(dāng)無(wú)法取得網(wǎng)關(guān)登錄信息時(shí)，再使用常規(guī)的手機(jī)+動(dòng)態(tài)驗(yàn)證碼形式登錄;登錄后客戶選擇要辦理的商品并提交，訂單信息以實(shí)時(shí)接口方式從APP流轉(zhuǎn)到人工外呼坐席，話務(wù)員接到工單后對(duì)客戶進(jìn)行預(yù)約，可外呼辦理的，幫客戶進(jìn)行熱線辦理;無(wú)法外呼辦理的，預(yù)約客戶上門服務(wù)時(shí)間，并安排營(yíng)銷人員上門服務(wù)。預(yù)約成功結(jié)果或最終受理結(jié)果，可在APP中進(jìn)行進(jìn)度查詢。詳見圖1商品銷售流程圖。

3.2 電信運(yùn)營(yíng)商O2O商品銷售線框圖

線框圖是產(chǎn)品設(shè)計(jì)的低保真呈現(xiàn)方式，作為產(chǎn)品的骨干而存在。它就像一幢建筑的藍(lán)圖一樣，將細(xì)節(jié)規(guī)定地明明白白。它的目標(biāo)為：呈現(xiàn)主體信息群、勾勒出結(jié)構(gòu)和布局，提供客戶交互界面的主視覺和描述等。首先畫主要狀態(tài)或核心狀態(tài)的線框圖，一般是進(jìn)入該頁(yè)面之后，可以正常清晰地看到所有主要內(nèi)容，其次補(bǔ)充次要狀態(tài)的線框圖，以放置到主要狀態(tài)的線框圖旁邊，最后優(yōu)化線框圖的細(xì)節(jié)，添加交互，寫上邏輯，使原型開發(fā)容易理解。

客戶的商品預(yù)約頁(yè)面為O2O商品預(yù)約銷售的主要狀態(tài)頁(yè)面，頭部規(guī)劃了多幀的輪播圖，右上角放置“預(yù)約說(shuō)明”和“我的預(yù)約”，接著為預(yù)約流程描述，中間是商品檔次選擇和預(yù)約號(hào)碼登錄，客戶選擇商品檔次和確認(rèn)預(yù)約號(hào)碼，之后可“立馬預(yù)約”，頁(yè)面下部分是商品詳細(xì)說(shuō)明。將主要交互頁(yè)面進(jìn)行設(shè)計(jì)和交互邏輯描述，補(bǔ)充次要狀態(tài)的線框圖，其中包括客戶點(diǎn)擊“我的預(yù)約”可跳鏈接到“我的預(yù)約”次要頁(yè)面;客戶點(diǎn)擊“切換號(hào)碼”后可彈窗切換到預(yù)約號(hào)碼的次要頁(yè)面;客戶點(diǎn)擊“立馬預(yù)約”后彈窗展示預(yù)約成功的次要頁(yè)面。詳見圖2商品銷售線框圖。

3.3 電信運(yùn)營(yíng)商O2O商品銷售高保真原型

線框圖有時(shí)候并不一定適合，團(tuán)隊(duì)成員總能從線框原型中找到一些他們不理解的“問題”。因此在這個(gè)時(shí)候，他們更希望看到的是一個(gè)無(wú)限接近真實(shí)的高仿產(chǎn)品，從視覺顯示以及交互動(dòng)作上都和真實(shí)產(chǎn)品大致相同的高保真原型，讓團(tuán)隊(duì)能夠盡可能詳細(xì)的了解產(chǎn)品的功能及業(yè)務(wù)需求。所以高保真原型也可稱之為效果圖或產(chǎn)品DEMO，除了沒有真實(shí)的后臺(tái)數(shù)據(jù)進(jìn)行支撐外，幾乎可以模擬前端界面的所有功能，同時(shí)如果細(xì)節(jié)加深加厚可直接對(duì)接到開發(fā)人員[5]。

本次產(chǎn)品原型，利用AxureRP動(dòng)態(tài)面板控件實(shí)現(xiàn)高級(jí)的交互功能，將涉及小彈窗展現(xiàn)的“我的預(yù)約”、“預(yù)約說(shuō)明”、“切換號(hào)碼”和“預(yù)約成功”等做到動(dòng)態(tài)面板的多層中，讓頁(yè)面邏輯更加流暢;同時(shí)讓動(dòng)態(tài)面板的狀態(tài)進(jìn)行隱藏、顯示和改變，實(shí)現(xiàn)交互。詳見圖3和圖4商品銷售高保真圖。

原型交付最終通過需求文檔的形式展示出來(lái)，完整的需求文檔包括產(chǎn)品簡(jiǎn)介、行業(yè)概要和版本三大方面內(nèi)容，開發(fā)人員可直接從產(chǎn)品需求文檔中細(xì)化開發(fā)過程。其中產(chǎn)品簡(jiǎn)約說(shuō)明產(chǎn)品有什么用，價(jià)值在哪，目標(biāo)客戶是誰(shuí)和有哪些使用場(chǎng)景;行業(yè)概要闡述行業(yè)現(xiàn)狀、未來(lái)的發(fā)展趨勢(shì)和競(jìng)爭(zhēng)對(duì)手情況分析;版本則為上面研究的產(chǎn)品設(shè)計(jì)流程圖、線框圖和原型圖等等。產(chǎn)品經(jīng)理、運(yùn)營(yíng)人員和技術(shù)開發(fā)對(duì)需求文檔內(nèi)容進(jìn)行多方聯(lián)合評(píng)審，將需要優(yōu)化的地方增加到原型中，并同步更新需求文檔，最終形成開發(fā)建設(shè)方案。

4 結(jié)論

通過探討原型設(shè)計(jì)在產(chǎn)品研發(fā)過程中的作用和意義，分析手工草圖到高保真原型圖的利弊后，利用Axure RP原型開發(fā)工具對(duì)電信運(yùn)營(yíng)商的O2O商品預(yù)約銷售頁(yè)面進(jìn)行原型建模，包括功能流程圖、頁(yè)面線框圖和高保真原型等，且將原型設(shè)計(jì)過程加入到產(chǎn)品需求文檔中，形成完整的需求文檔，為后續(xù)開發(fā)過程奠定基礎(chǔ)，提高產(chǎn)品開發(fā)效率。本文研究的O2O商品預(yù)約銷售頁(yè)面目前已在某省電信運(yùn)營(yíng)商APP中上線，隨著市場(chǎng)和業(yè)務(wù)變化，原型可隨著新需求的變化而迭代優(yōu)化，進(jìn)一步縮短需求分析設(shè)計(jì)和產(chǎn)品開發(fā)時(shí)間。

參考文獻(xiàn)（References）：

[1] 舒浩.云南"掌上云游"交互式原型產(chǎn)品設(shè)計(jì)[D].昆明：昆明理工大學(xué)，2016.11-13

[2] 董元，張行文.基于Axure的軟件原型法的研究與應(yīng)用[J]. 湖北師范大學(xué)學(xué)報(bào)（自然科學(xué)版），2017.37（4）：15-19

[3] ToddZakiWarfel.沃菲爾，湯海等.原型設(shè)計(jì)：實(shí)踐者指南[M].北京：清華大學(xué)出版社，2013.

[4] 馬鳳娟，宋大偉.基于axure的web 網(wǎng)站原型設(shè)計(jì)—以糗事百科網(wǎng)站為例[J].電腦知識(shí)與技術(shù)，2015.11（30）：160-162

[5] 張曉景.Axure RP原型設(shè)計(jì)完全自學(xué)一本通[M].北京：電子工業(yè)出版社，2016.