基于Axure RP 的O2O 電商產品原型設計

朱 格,張 磊,吳慧欣

(華北水利水電大學,河南 鄭州 450046)

0 引言

軟件開發由需求分析、概要設計、詳細設計、開發、上線5 大階段形成閉環,為了保證軟件開發順利進行,需求分析階段的工作內容不僅影響著項目需求與用戶需求的一致性,還對后續的開發階段的工作效率有著較大影響。使用Axure 進行原型開發,可以有效提升需求分析階段的工作效率。

1 原型開發的意義

1.1 產品原型

在開發啟動階段,可通過制作原型的方式得到一個和產品相似的原型,節約大量的時間和金錢成本。再以原型的方式呈現在用戶眼前,確保需求和用戶預期的一致性[1]。原型設計是原型法開發過程中的關鍵環節,用戶要求與呈現內容不一致時,可以快速修改以適應需求。在進入開發階段之前,以用戶確認后的原型為模板,開發階段后會形成更高的開發效率,避免大量因需求不明確導致的返工。

1.2 Axure 原型開發工具

Axure 是一款專業的原型工具,主要作用于軟件需求梳理階段,能夠快速、全面地呈現需求[2]。支持團隊多人協作,進行版本控制。

原型設計非常重要,也有很多種設計方式可選,可以使用紙筆畫出頁面草圖。畫草圖僅僅為靜態頁面,沒有體現頁面尺寸、跳轉關系、顯示邏輯[3]。另外,也可以使用Photoshop。Photoshop 是一款強大的作圖軟件,對于頁面設計的精美程度幾乎超過市面其他工具。但是對于原型設計來說,這并不是一款能夠快速設計、反映頁面關系和交互邏輯的軟件。

Axure 之所以被原型設計工作者廣泛應用,是因為該軟件能夠支持頁面上呈現的所有元件,包括按鈕、文本框、單選框、復選框等。除此之外,還具有較強的交互邏輯說明能力。比如希望實現“當點擊一個按鈕時,可以跳轉到對應的頁面”,只需要將該按鈕的點擊事件指向這個頁面就可以實現跳轉功能。

2 原型制作過程簡介

2.1 靜態頁面

以員工入職辦理功能為例介紹靜態頁面和動態交互的設計過程。員工入職需要指明入職店面、員工類別以及在系統中的角色,也就是員工權限。另外還需要提交身份證驗證、記錄員工手機號碼等(見圖1)。

圖1 靜態頁面

2.2 動態交互

Axure 支持動態交互,可以針對“移入、移出、單擊、拖動、狀態改變”等事件,觸發用例,展現交互的動態效果。希望實現“點擊上傳身份證時,彈出照相機拍攝頁面”的動態效果時,“點擊上傳身份證”這個矩形,在“交互”欄中,雙擊“鼠標單擊時”彈出彈框,如圖2 所示,選擇“設置面板狀態”,選擇“上傳身份證”動態面板,再設置狀態為“拍照頁面”即可完成該用例的編輯。

圖2 動態交互頁面

3 O2O 電商App 所需功能簡介及部分頁面介紹

3.1 電商App 所需功能簡介

一款高質量的電商App,主要使用人群為18 歲及以上的成年用戶,他們具有相當的軟件使用能力,該App 致力于幫助線下手機銷售店鋪實現信息化管理,從而提升管理效率,提高利潤。這款App 包括成本價計算、渠道價計算、出庫規則計算,并且實時掌握庫存信息、銷售統計信息,及時判斷調貨需求,提供精準的運營建議。

3.2 App 部分頁面介紹

整個軟件的下載安裝、登錄、使用,每個頁面的元素、圖標、色彩都需要設計,比如App 的logo、App 引導頁、登錄注冊頁面等。App 的一級頁面分別是首頁、訂單、我的3 個頁面。首頁包含店鋪名稱、商品列表。商品列表由一行展示兩個的表格方式顯示,點擊單個商品,跳轉至商品詳情頁。在商品詳情頁有商品狀態查詢、商品庫存查詢、商品底價查詢等功能。在訂單頁面顯示登錄人的歷史成交訂單。在我的頁面中,有個人昵稱、手機號碼、生日等字段的維護。對于不同的App,所呈現的需求功能點是各不相同的,在使用Axure 制作原型的時候,應當充分理解頁面要包含的功能點,功能點之間的關系,有沒有重點非重點之分,在制作頁面的時候才能夠合理布局,設計出符合使用習慣的頁面。

4 結語

通過探討原型法在軟件研發過程中的作用和意義,對比紙筆草稿、Photoshop、Axure 的利弊后,利用Axure 軟件對該電商App 進行原型設計,且將原型設計過程作為開發過程的一個前置條件,在確認好原型之后,進入開發階段,提高開發效率。在以后的版本迭代中也可以迅速的響應用戶需求,進一步縮短需求分析和軟件開發的時間。