1 術(shù)語與解釋

表 1 1術(shù)語表

2 概述

2.1 前言

由于多種因素，在需求分析階段得到完全、一致、準確、合理的需求說明存在困難。在獲得一組原始需求后，如何快速地使其“實現(xiàn)”，通過原型反饋，加深對系統(tǒng)的理解？如何滿足用戶基本要求，使用戶在試用過程中受到啟發(fā)，對需求說明進行補充和精確化，消除不協(xié)調(diào)的系統(tǒng)需求，逐步確定各種需求？如何獲得合理、協(xié)調(diào)一致、無歧義的、完整的、可行的需求說明？

圖 2 1不同角色認為的需求

隨著計算機輔助設(shè)計的應(yīng)用，產(chǎn)品設(shè)計和生產(chǎn)能力得到極大提高，然而在產(chǎn)品設(shè)計、研發(fā)和生產(chǎn)前，快速獲取產(chǎn)品設(shè)計的反饋信息，如何對產(chǎn)品用戶價值、可行性、可用性和交互體驗等快速地做出評估、論證和改進，這是軟、硬件產(chǎn)品生產(chǎn)的痛點。
快速原型技術(shù)的出現(xiàn)，為這一問題的解決提供了有效途徑，不僅解決了需求階段的一致性問題，還能很好地將這種一致性的傳遞到產(chǎn)品研發(fā)過程中的系統(tǒng)設(shè)計階段、視覺設(shè)計階段、編碼和測試階段等過程?？焖僭褪欠浅Ｓ行У男枨罂梢暬尸F(xiàn)、傳遞和解釋手段。

2.2 定義
快速原型（特指IT領(lǐng)域，下同）常被稱為線框圖、mockuo、demo，是對產(chǎn)品可視化的呈現(xiàn)，主要表達一個產(chǎn)品的信息架構(gòu)、頁面布局、內(nèi)容、功能和交互方式，可以真實的模擬產(chǎn)品最終的視覺效果、交互效果和用戶體驗感受。快速原型，按照仿真效果劃分為：低保證原型和高保真原型；按照業(yè)務(wù)流程劃分為：水平原型和垂直原型。
目前，主流的產(chǎn)品原型設(shè)計軟件/工具有：
POP（Prototyping on Paper）是由來自臺灣的Woomoo公司推出的一款界面原型設(shè)計工具，適用于iOS和Android平臺。
摩客（Mockplus）是一款簡潔、快速、免費的原型圖工具，適合軟件團隊、個人在軟件開發(fā)的設(shè)計階段使用。該工具具有低保真、無需學習、快速上手等功能特點，可以幫助用戶輕松的做出專業(yè)化的原型設(shè)計。
Briefs是Mac最新上架的專業(yè)App設(shè)計工具，提供了成熟的交互設(shè)計功能，堪稱移動App上的“Axure RP”，設(shè)計師可以利用Briefs設(shè)計完整的iPhone、iPad應(yīng)用交互模型，并利用模擬器即時體驗設(shè)計的成果，或者利用BriefsLive，將 作品同步到裝有Briefscase的iOS 6設(shè)備上。
Wireframe是一款具有“點擊-拖-放”界面且超簡單的線框圖創(chuàng)作工具。雙擊實現(xiàn)編輯功能，有限的界面意味著你會把精力集中于你的想法上。還給每個線框圖分配了特有的URL，便于標記和分享。

我們?yōu)槭裁催x擇Axure？
Axure RP，地球上的PM應(yīng)該都知道它，雖然它不是最完美，但是具有以下優(yōu)勢：
1. Axure可以進行更加高效的動態(tài)設(shè)計；
2. Axure可以讓你體驗動態(tài)真實原型；
3. Axure可以更加清晰的交流想法；
4. Axure可以更便捷的被分享；
5. Axure是使用最廣泛的原型設(shè)計工具。

圖 2 2Axure_7.0主界面

2.3 目的
產(chǎn)品原型設(shè)計規(guī)范（下稱“本規(guī)范”）指導產(chǎn)品經(jīng)理、交互設(shè)計師或產(chǎn)品原型設(shè)計工作者，在產(chǎn)品原型設(shè)計活動中理解、遵循和掌握各節(jié)點的任務(wù)、邊界、規(guī)范等相關(guān)內(nèi)容；提高產(chǎn)品原型設(shè)計工作者的專業(yè)水平和產(chǎn)品原型設(shè)計的質(zhì)量，達到產(chǎn)品原型設(shè)計活動的專業(yè)性、規(guī)范性和系統(tǒng)性等目的。

2.4 范圍
本規(guī)范由產(chǎn)品經(jīng)理團隊負責制定并授權(quán)更改，產(chǎn)品原型設(shè)計活動遵循此過程。本規(guī)范影響范圍包括項目組所以人員。

2.5 流程
產(chǎn)品原型設(shè)計活動主要工作是設(shè)計和評審，參考《產(chǎn)品經(jīng)理工作規(guī)范快速指南》，從產(chǎn)品經(jīng)理工作規(guī)范和流程角度出發(fā)，產(chǎn)品原型設(shè)計活動分為3個階段：需求階段、產(chǎn)品原型設(shè)計與評審階段和交付與維護階段。
需求階段，主要工作是需求調(diào)研和業(yè)務(wù)流程梳理，并輸出需求文檔。需求階段可根據(jù)需要輸出低保證產(chǎn)品原型展示給需求方，產(chǎn)品和需求方雙方進行需求一致性前期確認；
產(chǎn)品原型設(shè)計與評審階段，產(chǎn)品經(jīng)理一般組織完成需求文檔編制和評審工作，接著輸出高保真產(chǎn)品原型，建議邀請用戶、產(chǎn)品伙伴、測試組同事參與產(chǎn)品原型體驗，提前發(fā)現(xiàn)產(chǎn)品原型中的需求缺陷、交互缺陷和用例缺陷等問題，完成缺陷修復后，產(chǎn)品經(jīng)理應(yīng)該邀請需求方、項目組、部門主管、公司領(lǐng)導（按需）組成評審小組，參與產(chǎn)品原型評審活動；
交付與維護階段，產(chǎn)品原型評審通過后，產(chǎn)品原型交付給項目組（納入項目組SVN），后期研發(fā)過程中，如果出現(xiàn)需求變更或發(fā)現(xiàn)產(chǎn)品原型設(shè)計缺陷等問題，應(yīng)當及時進行維護，產(chǎn)品原型必須做好修訂記錄，并通知項目組等相關(guān)方。產(chǎn)品研發(fā)后期或完成后，產(chǎn)品原型源文件應(yīng)歸檔至產(chǎn)品組SVN。

圖 2 3產(chǎn)品原型設(shè)計與評審流程

2.6 原則
1.對齊原則
相關(guān)元件和內(nèi)容按照層次必須對齊。
2.親密原則
相似而不同的內(nèi)容分成幾個區(qū)域，各區(qū)域相關(guān)內(nèi)容相互聚攏。
3.對比原則
加大不同元素或者板塊的對比和視覺差異。
4.一致原則
不同頁面相同內(nèi)容，設(shè)計上的必須保證一致性和連貫性；不同頁面相同元件和交互事件必須保證一致性。
5.留白原則
注意頁面元素的密度，保持必要的空白。
6.降噪原則
顏色過多、字數(shù)過多、圖形過繁，都是分散注意力的”噪音”，注意頁面整體視覺效果，整體色調(diào)必須以灰色系為主，點綴色為輔。
7.節(jié)省原則
元件使用盡量節(jié)省，可以一個面板處理不要使用兩個，可以一個事件處理，不要多個。
8.MECE原則
交互/用例設(shè)計滿足相互獨立完全窮盡原則（MECE原則），避免遺漏和交叉。

2.7 元件

圖 2 4Axure默認元件概覽圖

Axure自帶豐富的元件庫，默認元件庫包括：通用型元件、排列型元件和菜單型元件3種，還自帶一個默認流程圖元件庫；Axure支持設(shè)計、導入和導出自定義元件庫（文件格式：“*.rplib”），滿足產(chǎn)品原型設(shè)計工作者個性化使用。Axure默認元件庫介紹如下：

表 2Axure默認元件列表

?

3 輸入

一般需求階段已完成或者處于后期文檔編制和評審階段，開始產(chǎn)品原型設(shè)計工作。產(chǎn)品原型設(shè)計前置條件：必須完成產(chǎn)品定義和版本規(guī)劃，確定產(chǎn)品形態(tài)和界面尺寸，輸出產(chǎn)品功能結(jié)構(gòu)圖、業(yè)務(wù)流程圖、用例圖等必要的需求文檔。
?

4 設(shè)計規(guī)范

設(shè)計規(guī)范詳細闡述本規(guī)范的維度、要求和示例等內(nèi)容，產(chǎn)品原型設(shè)計工作者應(yīng)共同努力使用規(guī)范、維護規(guī)范和更新規(guī)范。設(shè)計規(guī)范更新是一個不斷調(diào)整和豐富的動態(tài)過程，通過持續(xù)更新以符合公司產(chǎn)品原型設(shè)計的實際情況，保證專業(yè)性、規(guī)范性與實用性的統(tǒng)一。
設(shè)計規(guī)范在操作過程中，從強制性角度劃分有4個級別：必須、推薦、一般和禁止。下文均有明確提示，如未明確提示的，則表示為“一般”。
本規(guī)范包括3個配套附件：
1. 產(chǎn)品原型設(shè)計模板-WEB.rp
2. 產(chǎn)品原型設(shè)計模板-Software.rp
3. 產(chǎn)品原型設(shè)計模板-APP.rp
溫馨提示：產(chǎn)品原型設(shè)計模板見產(chǎn)品組SVN：…SVN\Productfile\工作規(guī)范\文檔模板\產(chǎn)品原型

4.1 頁面結(jié)構(gòu)
4.1.1 描述
頁面結(jié)構(gòu)指產(chǎn)品原型設(shè)計工作界面的目標產(chǎn)品的頁面結(jié)構(gòu)，頁面結(jié)構(gòu)由原型說明和產(chǎn)品原型2部分組成，各部分使用文件夾分隔（如果產(chǎn)品包含多個子系統(tǒng)，則需要創(chuàng)建多個文件夾分隔）。
原型說明是輔助說明內(nèi)容，方便體驗者快速了解產(chǎn)品的全貌，原型說明包括：修訂記錄、版本規(guī)劃、業(yè)務(wù)流程、功能模塊、交互說明和參考尺寸等頁面；
產(chǎn)品原型是頁面設(shè)計的主體部分，各頁面嚴格按照功能結(jié)構(gòu)拓撲或者任務(wù)關(guān)系拓撲，且命名必須使用“編號+名稱”的形式，如：A-1-1-新聞列表，其中，A表示頁面或任務(wù)編號，1-1表示層級，各部分使用“-”連接。

4.1.2 示例

圖 4 1產(chǎn)品頁面/任務(wù)結(jié)構(gòu)

4.2 修訂記錄
4.2.1 描述
產(chǎn)品原型通過評審，交付項目組后，如果進行后期維護，必須打上修訂記錄。每次產(chǎn)品原型修訂，詳細描述修訂記錄，修訂類型：創(chuàng)建、新增、修改、刪除。修訂記錄需要說明頁面層級或編號以明確路徑。

4.2.2 示例

圖 4 2產(chǎn)品原型修訂記錄

4.3 版本計劃
4.3.1 描述
版本計劃，需要簡述軟件簡介，描述軟件名稱、定位、目標用戶、子系統(tǒng)職責等基本信息。版本計劃應(yīng)該基于目標產(chǎn)品和產(chǎn)品目標輸出，在產(chǎn)品原型中重點描述規(guī)劃的版本號（如2.5.0）、特性和優(yōu)先級等。

4.3.2 示例

圖 4 3軟件簡介和版本計劃

4.4 業(yè)務(wù)流程
4.4.1 描述
業(yè)務(wù)流程是指產(chǎn)品的整體/全局業(yè)務(wù)流程，用于描述產(chǎn)品的業(yè)務(wù)場景。流程圖要求：包含流程名稱、角色/職責/系統(tǒng)名稱、起始狀態(tài)等；建議使用Visio/Axuer等軟件繪制流程圖；其中，子流程建議在中轉(zhuǎn)頁面中繪制。

4.4.2 示例

圖 4 4整體業(yè)務(wù)流程示意圖

4.5 功能模塊
4.5.1 描述
功能結(jié)構(gòu)圖即軟件的功能拓撲圖，是一種快速直觀地展示軟件功能的圖示，建議使用MindManager、Xmind、Axure等軟件繪制思維導圖，以功能層級或業(yè)務(wù)流程為基準進行拓撲設(shè)計，或者使用Microsoft Office軟件繪制也可。推薦思維導圖工具：Xmind_7.5。

4.5.2 示例

圖 4 5軟件功能結(jié)構(gòu)圖

4.6 交互說明
4.6.1 描述
全局性交互說明，如：彈窗、數(shù)據(jù)加載、暫無數(shù)據(jù)、404等；交互說明包括：事件名稱、觸發(fā)條件、適用范圍和交互流程等，且輔助示例展示。

4.6.2 示例

圖 4 6全局性交互設(shè)計列表

圖 4 7全局性交互設(shè)計示例

4.7 參考尺寸
4.7.1 描述
參考尺寸是輔助產(chǎn)品原型設(shè)計的說明內(nèi)容，不作為產(chǎn)品視覺設(shè)計依據(jù)。根據(jù)產(chǎn)品形態(tài)不同，產(chǎn)品原型設(shè)計參考尺寸如下：

1.WEB：
頁面尺寸：推薦1600*900（min）px
版心尺寸：推薦1000*600（min）px

2.Software：
NO.1-推薦尺寸：1366*768PX（16:9）
NO.2-推薦尺寸：1024*768PX（4:3）

3.APP：
Phone:
NO.1-最小尺寸：320*570PX；
NO.2-推薦尺寸：393*700PX;
NO.3-最大尺寸：456*821X;
Pad：
NO.1-推薦尺寸：553*738PX（738*553PX）；
NO.2-最大尺寸：768*1024PX（1024*768PX）

4.7.2 示例

圖 4 8產(chǎn)品原型-WEB-參考尺寸

圖 4 9產(chǎn)品原型-Software-參考尺寸（16:9）

圖 4 10產(chǎn)品原型-Software-參考尺寸（4:3）

圖 4 11產(chǎn)品原型-APP-參考尺寸（Phone）

圖 4 12產(chǎn)品原型-APP-參考尺寸（PAD）

4.8 版權(quán)信息
4.8.1 描述
版權(quán)信息指產(chǎn)品原型的版權(quán)信息，即可凸顯公司產(chǎn)品實力，又可防止產(chǎn)品原型被盜用。版權(quán)信息包括產(chǎn)品名稱、版本號、產(chǎn)品經(jīng)理和版權(quán)申明等內(nèi)容。針對不同的使用場景，提供2種版權(quán)信息示例。

4.8.2 示例

圖 4 13版權(quán)信息（1）
圖 4 14版權(quán)信息（2）

4.9 頁面設(shè)計
4.9.1 描述
頁面設(shè)計是產(chǎn)品原型設(shè)計的主體工作，一般依據(jù)需求文檔進行頁面規(guī)劃和版面設(shè)計，不僅需要實現(xiàn)頁面布局和內(nèi)容展示，還需要實現(xiàn)頁面的交互設(shè)計和需求標注等。
頁面設(shè)計嚴格按照功能結(jié)構(gòu)拓撲或者任務(wù)關(guān)系拓撲，且命名必須使用“編號+名稱”的形式，如：A-1-1-新聞列表，其中，A表示頁面或任務(wù)編號，1-1表示層級，各部分使用“-”連接。
頁面設(shè)計要求菜單層級的鏈接和業(yè)務(wù)流程的層級跳轉(zhuǎn)是有效的，保證主要頁面之間交互的連續(xù)性，便于體驗者瀏覽產(chǎn)品原型HTML；頁面設(shè)計需嚴格遵循本規(guī)范定義的設(shè)計原則，以保證原型設(shè)計質(zhì)量；產(chǎn)品原型設(shè)計應(yīng)該在注重實用性的同時，考慮創(chuàng)新性。

4.9.2 示例

圖 4 15產(chǎn)品原型頁面設(shè)計示例圖

4.10 用例描述
4.10.1 描述
高保真產(chǎn)品原型設(shè)計重點在于交互設(shè)計，對象的交互用例設(shè)計必須遵循相互獨立完全窮盡原則（MECE原則）。同一個對象用例超過2個時，必須對用例進行命名，建議保留用例編號，如：用例3；

4.10.2 示例

圖 4 16用例設(shè)計示意圖

4.11 需求說明
4.11.1 描述
為了保證需求傳遞的一致性，頁面的關(guān)鍵元件、用例、表單、按鈕等按需標注需求說明。需求、用例、備注、提示等需求說明，推薦使用規(guī)范格式設(shè)計，如：1A，其中，1表示編號，A表示流程順序；需求說明也可使用快捷方式如：TIPS：密碼錯誤時，在密碼輸入框下方提示“密碼錯誤”。需求描述的放置位置應(yīng)當保持頁面的美觀。

4.11.2 示例

圖 4 17需求描述說明

4.12 中轉(zhuǎn)頁面
4.12.1 描述
中轉(zhuǎn)頁面一般是在產(chǎn)品原型設(shè)計過程中產(chǎn)生的，如：一級菜單=產(chǎn)品發(fā)布，二級子菜單1=產(chǎn)品列表，二級子菜單2=產(chǎn)品修改，由于產(chǎn)品發(fā)布頁面并沒有內(nèi)容，所以產(chǎn)品發(fā)布頁面就是中轉(zhuǎn)頁面。中轉(zhuǎn)頁面必須放置頁面跳轉(zhuǎn)的按鈕，方便瀏覽。
中轉(zhuǎn)頁面大有可為，推薦在中轉(zhuǎn)頁面繪制子業(yè)務(wù)流程圖、頁面流程圖（APP必須）、用例圖、數(shù)據(jù)流圖等需求類圖示，加強產(chǎn)品原型的解釋能力。

4.12.2 示例

圖 4 18子業(yè)務(wù)流程圖

圖 4 19用例圖

圖 4 20頁面流程圖

?
4.13 彈窗/浮窗
4.13.1 描述
頁面交互如果涉及彈窗/浮窗提示的，必須設(shè)計彈窗/浮窗，且保證事件執(zhí)行有效性和完備性，禁止出現(xiàn)彈窗點擊沒有反應(yīng)的情況。彈窗設(shè)計禁止出現(xiàn)超過3層彈窗的情況！
彈窗設(shè)計主流的3種方式：彈窗沒有背景效果；彈窗附帶頁面背景遮罩效果；彈窗附帶陰影效果。
浮窗設(shè)計一般是顯示后自動隱藏，少數(shù)隱藏后還執(zhí)行事件。

4.13.2 示例

圖 4 21彈窗示意圖

圖 4 22浮窗示意圖

4.14 菜單設(shè)計
4.14.1 描述
Axure自帶元件庫提供了樹形菜單、橫向菜單和縱向菜單3種菜單設(shè)計方案，能夠滿足多數(shù)使用場景。如果產(chǎn)品需要，建議自定義創(chuàng)新菜單設(shè)計。
菜單設(shè)計，必須實現(xiàn)懸浮、點選、選中等交互效果，推薦與母版嵌套使用，方便后期維護，禁止出現(xiàn)多個頁面菜單一致的情況下，不使用母版。

4.14.2 示例

圖 4 23Axure自動的3種菜單

圖 4 24自定義菜單設(shè)計（1）

圖 4 25自定義菜單設(shè)計（2）

4.15 表單設(shè)計
4.15.1 描述
表單設(shè)計應(yīng)用于多項數(shù)據(jù)排版和展示的場景，如：機構(gòu)用戶注冊、標識符申請、產(chǎn)品發(fā)布等。推薦使用表格進行設(shè)計表單設(shè)計，包括：查詢表單、數(shù)據(jù)填寫表單、查看詳情表單等。

4.15.2 示例

圖 4 26查看詳情表單設(shè)計示例

圖 4 27修改信息表單設(shè)計示例

圖 4 28查詢列表表單設(shè)計示例

4.16 提示設(shè)計
4.16.1 描述
產(chǎn)品原型的精細程度，除了合理的頁面布局和完備的交互外，很大一部分是交互提示和交互提示的系統(tǒng)化整理。避免，遇到一個默認提示或者報錯，臨時定義。時間長了，數(shù)量多了，沒有辦法跟蹤和管理。一方面，產(chǎn)品原型中窮盡用例和提示語，另一方，推薦使用Excel文檔形式進行跟蹤。

4.16.2 示例

圖 4 29表單提示語規(guī)范參考圖

圖 4 30交互提示語規(guī)范參考圖

圖 4 31錯誤提示產(chǎn)品原型示例
?
4.17 動態(tài)面板
4.17.1 描述
動態(tài)面板是產(chǎn)品原型設(shè)計中，非常重要和常用的元件。動態(tài)面板必須命名，推薦使用英文名稱或拼音；狀態(tài)數(shù)量超過2個時，必須對狀態(tài)進行命名；同一個頁面動態(tài)面板數(shù)量推薦控制在3個以內(nèi)；同一個動態(tài)面板，狀態(tài)層級數(shù)量推薦控制在3層以內(nèi)。

4.17.2 示例

圖 4 32動態(tài)面板示例

4.18 母版設(shè)計
4.18.1 描述
頁面通用模塊/組件，建議使用母版制作。包括但不限于：頁面頭部和底部、功能菜單、屬性面板等版式固定的區(qū)域。
溫馨提示：各種元件包括動態(tài)面板支持與母版嵌套使用。

4.18.2 示例

圖 4 33母版示例

5 輸出

產(chǎn)品原型設(shè)計活動中，產(chǎn)品經(jīng)理負責輸出高保真原型，必要時還需輸出低保真原型。高保真產(chǎn)品原型設(shè)計流程和規(guī)范應(yīng)遵循本規(guī)范。
?

6 質(zhì)量與評價

對產(chǎn)品原型設(shè)計活動進行測量，并將測量結(jié)果用于確定軟件研發(fā)活動的狀態(tài)和產(chǎn)品經(jīng)理考核。產(chǎn)品原型測量依據(jù)：
1.需求符合度：評判產(chǎn)品原型表達的需求和功能與需求文檔定義一致性或符合程度；
2.產(chǎn)品原型設(shè)計質(zhì)量：參照本規(guī)范和產(chǎn)品原型設(shè)計模板對比產(chǎn)品經(jīng)理輸出的產(chǎn)品原型源文件，評判其規(guī)范符合度以及設(shè)計質(zhì)量；
3.產(chǎn)品原型設(shè)計效率：綜合考慮產(chǎn)品原型的頁面數(shù)量、控件數(shù)量、交互復雜度等，對比產(chǎn)品原型設(shè)計的時長進行考量；
4.產(chǎn)品原型體驗滿意度：體驗產(chǎn)品原型輸出的HTML頁面，評價用戶滿意度。