基于AxureRP的電信運營商O2O產品原型設計和應用

陳冬旭 梁琳

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

關鍵詞： 需求分析; 原型設計; 高保真; 建模工具

中圖分類號：TP399，TP37 ? ? ? ? ?文獻標志碼：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 引言

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

1 產品開發過程和原型意義

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

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

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

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

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

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

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

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

3 基于Axure RP的電信運營商O2O頁面原型設計案例

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

3.1 電信運營商O2O商品銷售流程

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

3.2 電信運營商O2O商品銷售線框圖

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

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

3.3 電信運營商O2O商品銷售高保真原型

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

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

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

4 結論

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

參考文獻（References）：

[1] 舒浩.云南"掌上云游"交互式原型產品設計[D].昆明：昆明理工大學，2016.11-13

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

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

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

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