陳冬旭 梁琳

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

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

中圖分類號：TP399，TP37 ? ? ? ? ?文獻(xiàn)標(biāo)志碼：A ? ? 文章編號：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ā)一個與需求盡可能匹配的“簡約版”產(chǎn)品，然后通過需求分析溝通，進(jìn)行多次原型迭代和細(xì)化，以便準(zhǔn)確地表達(dá)客戶真實需求，并最終實現(xiàn)產(chǎn)品的成功開發(fā)。Axure RP是業(yè)內(nèi)廣泛采用的表示層原型建模工具，它通過設(shè)計出逼真的項目高保真原型，使開發(fā)團(tuán)隊在軟件開發(fā)前，就能真實地體驗和直觀地展示未來軟件的效果與核心邏輯功能，從而實現(xiàn)精確的需求分析。同時Axure RP能便捷地創(chuàng)建基于目錄組織的原型文檔和功能說明，并自動生成HTML原型文件，原型HTML文件經(jīng)優(yōu)化后可直接用于后期邏輯代碼開發(fā)，能有機(jī)地將需求工作成果應(yīng)用于后期開發(fā)編碼。

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

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

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

2 原型工具對比和Axure RP概述

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 結(jié)論

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

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

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

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

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

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

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