1 術語與解釋
表 1 1術語表
2 概述
2.1 前言
由於多種因素，在需求分析階段得到完全、一致、準確、合理的需求說明存在困難。在獲得一組原始需求後，如何快速地使其“實現”，通過原型反饋，加深對系統的理解？如何滿足用戶基本要求，使用戶在試用過程中受到啓發，對需求說明進行補充和精確化，消除不協調的系統需求，逐步確定各種需求？如何獲得合理、協調一致、無歧義的、完整的、可行的需求說明？
圖 2 1不同角色認爲的需求
隨着計算機輔助設計的應用，產品設計和生產能力得到極大提高，然而在產品設計、研發和生產前，快速獲取產品設計的反饋信息，如何對產品用戶價值、可行性、可用性和交互體驗等快速地做出評估、論證和改進，這是軟、硬件產品生產的痛點。
快速原型技術的出現，爲這一問題的解決提供了有效途徑，不僅解決了需求階段的一致性問題，還能很好地將這種一致性的傳遞到產品研發過程中的系統設計階段、視覺設計階段、編碼和測試階段等過程。快速原型是非常有效的需求可視化呈現、傳遞和解釋手段。
2.2 定義
快速原型（特指IT領域，下同）常被稱爲線框圖、mockuo、demo，是對產品可視化的呈現，主要表達一個產品的信息架構、頁面佈局、內容、功能和交互方式，可以真實的模擬產品最終的視覺效果、交互效果和用戶體驗感受。快速原型，按照仿真效果劃分爲：低保證原型和高保真原型；按照業務流程劃分爲：水平原型和垂直原型。
目前，主流的產品原型設計軟件/工具有：
POP（Prototyping on Paper）是由來自臺灣的Woomoo公司推出的一款界面原型設計工具，適用於iOS和Android平臺。
摩客（Mockplus）是一款簡潔、快速、免費的原型圖工具，適合軟件團隊、個人在軟件開發的設計階段使用。該工具具有低保真、無需學習、快速上手等功能特點，可以幫助用戶輕鬆的做出專業化的原型設計。
Briefs是Mac最新上架的專業App設計工具，提供了成熟的交互設計功能，堪稱移動App上的“Axure RP”，設計師可以利用Briefs設計完整的iPhone、iPad應用交互模型，並利用模擬器即時體驗設計的成果，或者利用BriefsLive，將 作品同步到裝有Briefscase的iOS 6設備上。
Wireframe是一款具有“點擊-拖-放”界面且超簡單的線框圖創作工具。雙擊實現編輯功能，有限的界面意味着你會把精力集中於你的想法上。還給每個線框圖分配了特有的URL，便於標記和分享。
我們爲什麼選擇Axure？
Axure RP，地球上的PM應該都知道它，雖然它不是最完美，但是具有以下優勢：
1. Axure可以進行更加高效的動態設計；
2. Axure可以讓你體驗動態真實原型；
3. Axure可以更加清晰的交流想法；
4. Axure可以更便捷的被分享；
5. Axure是使用最廣泛的原型設計工具。
圖 2 2Axure_7.0主界面
2.3 目的
產品原型設計規範（下稱“本規範”）指導產品經理、交互設計師或產品原型設計工作者，在產品原型設計活動中理解、遵循和掌握各節點的任務、邊界、規範等相關內容；提高產品原型設計工作者的專業水平和產品原型設計的質量，達到產品原型設計活動的專業性、規範性和系統性等目的。
2.4 範圍
本規範由產品經理團隊負責制定並授權更改，產品原型設計活動遵循此過程。本規範影響範圍包括項目組所以人員。
2.5 流程
產品原型設計活動主要工作是設計和評審，參考《產品經理工作規範快速指南》，從產品經理工作規範和流程角度出發，產品原型設計活動分爲3個階段：需求階段、產品原型設計與評審階段和交付與維護階段。
需求階段，主要工作是需求調研和業務流程梳理，並輸出需求文檔。需求階段可根據需要輸出低保證產品原型展示給需求方，產品和需求方雙方進行需求一致性前期確認；
產品原型設計與評審階段，產品經理一般組織完成需求文檔編制和評審工作，接着輸出高保真產品原型，建議邀請用戶、產品夥伴、測試組同事參與產品原型體驗，提前發現產品原型中的需求缺陷、交互缺陷和用例缺陷等問題，完成缺陷修復後，產品經理應該邀請需求方、項目組、部門主管、公司領導（按需）組成評審小組，參與產品原型評審活動；
交付與維護階段，產品原型評審通過後，產品原型交付給項目組（納入項目組SVN），後期研發過程中，如果出現需求變更或發現產品原型設計缺陷等問題，應當及時進行維護，產品原型必須做好修訂記錄，並通知項目組等相關方。產品研發後期或完成後，產品原型源文件應歸檔至產品組SVN。
圖 2 3產品原型設計與評審流程
2.6 原則
1.對齊原則
相關元件和內容按照層次必須對齊。
2.親密原則
相似而不同的內容分成幾個區域，各區域相關內容相互聚攏。
3.對比原則
加大不同元素或者板塊的對比和視覺差異。
4.一致原則
不同頁面相同內容，設計上的必須保證一致性和連貫性；不同頁面相同元件和交互事件必須保證一致性。
5.留白原則
注意頁面元素的密度，保持必要的空白。
6.降噪原則
顏色過多、字數過多、圖形過繁，都是分散注意力的”噪音”，注意頁面整體視覺效果，整體色調必須以灰色系爲主，點綴色爲輔。
7.節省原則
元件使用盡量節省，可以一個面板處理不要使用兩個，可以一個事件處理，不要多個。
8.MECE原則
交互/用例設計滿足相互獨立完全窮盡原則（MECE原則），避免遺漏和交叉。
2.7 元件
圖 2 4Axure默認元件概覽圖
Axure自帶豐富的元件庫，默認元件庫包括：通用型元件、排列型元件和菜單型元件3種，還自帶一個默認流程圖元件庫；Axure支持設計、導入和導出自定義元件庫（文件格式：“*.rplib”），滿足產品原型設計工作者個性化使用。Axure默認元件庫介紹如下：
表 2Axure默認元件列表
3 輸入
一般需求階段已完成或者處於後期文檔編制和評審階段，開始產品原型設計工作。產品原型設計前置條件：必須完成產品定義和版本規劃，確定產品形態和界面尺寸，輸出產品功能結構圖、業務流程圖、用例圖等必要的需求文檔。
4 設計規範
設計規範詳細闡述本規範的維度、要求和示例等內容，產品原型設計工作者應共同努力使用規範、維護規範和更新規範。設計規範更新是一個不斷調整和豐富的動態過程，通過持續更新以符合公司產品原型設計的實際情況，保證專業性、規範性與實用性的統一。
設計規範在操作過程中，從強制性角度劃分有4個級別：必須、推薦、一般和禁止。下文均有明確提示，如未明確提示的，則表示爲“一般”。
本規範包括3個配套附件：
1. 產品原型設計模板-WEB.rp
2. 產品原型設計模板-Software.rp
3. 產品原型設計模板-APP.rp
溫馨提示：產品原型設計模板見產品組SVN：…SVN\Productfile\工作規範\文檔模板\產品原型
4.1 頁面結構
4.1.1 描述
頁面結構指產品原型設計工作界面的目標產品的頁面結構，頁面結構由原型說明和產品原型2部分組成，各部分使用文件夾分隔（如果產品包含多個子系統，則需要創建多個文件夾分隔）。
原型說明是輔助說明內容，方便體驗者快速瞭解產品的全貌，原型說明包括：修訂記錄、版本規劃、業務流程、功能模塊、交互說明和參考尺寸等頁面；
產品原型是頁面設計的主體部分，各頁面嚴格按照功能結構拓撲或者任務關係拓撲，且命名必須使用“編號+名稱”的形式，如：A-1-1-新聞列表，其中，A表示頁面或任務編號，1-1表示層級，各部分使用“-”連接。
4.1.2 示例
圖 4 1產品頁面/任務結構
4.2 修訂記錄
4.2.1 描述
產品原型通過評審，交付項目組後，如果進行後期維護，必須打上修訂記錄。每次產品原型修訂，詳細描述修訂記錄，修訂類型：創建、新增、修改、刪除。修訂記錄需要說明頁面層級或編號以明確路徑。
4.2.2 示例
圖 4 2產品原型修訂記錄
4.3 版本計劃
4.3.1 描述
版本計劃，需要簡述軟件簡介，描述軟件名稱、定位、目標用戶、子系統職責等基本信息。版本計劃應該基於目標產品和產品目標輸出，在產品原型中重點描述規劃的版本號（如2.5.0）、特性和優先級等。
4.3.2 示例
圖 4 3軟件簡介和版本計劃
4.4 業務流程
4.4.1 描述
業務流程是指產品的整體/全局業務流程，用於描述產品的業務場景。流程圖要求：包含流程名稱、角色/職責/系統名稱、起始狀態等；建議使用Visio/Axuer等軟件繪製流程圖；其中，子流程建議在中轉頁面中繪製。
4.4.2 示例
圖 4 4整體業務流程示意圖
4.5 功能模塊
4.5.1 描述
功能結構圖即軟件的功能拓撲圖，是一種快速直觀地展示軟件功能的圖示，建議使用MindManager、Xmind、Axure等軟件繪製思維導圖，以功能層級或業務流程爲基準進行拓撲設計，或者使用Microsoft Office軟件繪製也可。推薦思維導圖工具：Xmind_7.5。
4.5.2 示例
圖 4 5軟件功能結構圖
4.6 交互說明
4.6.1 描述
全局性交互說明，如：彈窗、數據加載、暫無數據、404等；交互說明包括：事件名稱、觸發條件、適用範圍和交互流程等，且輔助示例展示。
4.6.2 示例
圖 4 6全局性交互設計列表
圖 4 7全局性交互設計示例
4.7 參考尺寸
4.7.1 描述
參考尺寸是輔助產品原型設計的說明內容，不作爲產品視覺設計依據。根據產品形態不同，產品原型設計參考尺寸如下：
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產品原型-WEB-參考尺寸
圖 4 9產品原型-Software-參考尺寸（16:9）
圖 4 10產品原型-Software-參考尺寸（4:3）
圖 4 11產品原型-APP-參考尺寸（Phone）
圖 4 12產品原型-APP-參考尺寸（PAD）
4.8 版權信息
4.8.1 描述
版權信息指產品原型的版權信息，即可凸顯公司產品實力，又可防止產品原型被盜用。版權信息包括產品名稱、版本號、產品經理和版權申明等內容。針對不同的使用場景，提供2種版權信息示例。
4.8.2 示例
圖 4 13版權信息（1）
圖 4 14版權信息（2）
4.9 頁面設計
4.9.1 描述
頁面設計是產品原型設計的主體工作，一般依據需求文檔進行頁面規劃和版面設計，不僅需要實現頁面佈局和內容展示，還需要實現頁面的交互設計和需求標註等。
頁面設計嚴格按照功能結構拓撲或者任務關係拓撲，且命名必須使用“編號+名稱”的形式，如：A-1-1-新聞列表，其中，A表示頁面或任務編號，1-1表示層級，各部分使用“-”連接。
頁面設計要求菜單層級的鏈接和業務流程的層級跳轉是有效的，保證主要頁面之間交互的連續性，便於體驗者瀏覽產品原型HTML；頁面設計需嚴格遵循本規範定義的設計原則，以保證原型設計質量；產品原型設計應該在注重實用性的同時，考慮創新性。
4.9.2 示例
圖 4 15產品原型頁面設計示例圖
4.10 用例描述
4.10.1 描述
高保真產品原型設計重點在於交互設計，對象的交互用例設計必須遵循相互獨立完全窮盡原則（MECE原則）。同一個對象用例超過2個時，必須對用例進行命名，建議保留用例編號，如：用例3；
4.10.2 示例
圖 4 16用例設計示意圖
4.11 需求說明
4.11.1 描述
爲了保證需求傳遞的一致性，頁面的關鍵元件、用例、表單、按鈕等按需標註需求說明。需求、用例、備註、提示等需求說明，推薦使用規範格式設計，如：1A，其中，1表示編號，A表示流程順序；需求說明也可使用快捷方式如：TIPS：密碼錯誤時，在密碼輸入框下方提示“密碼錯誤”。需求描述的放置位置應當保持頁面的美觀。
4.11.2 示例
圖 4 17需求描述說明
4.12 中轉頁面
4.12.1 描述
中轉頁面一般是在產品原型設計過程中產生的，如：一級菜單=產品發佈，二級子菜單1=產品列表，二級子菜單2=產品修改，由於產品發佈頁面並沒有內容，所以產品發佈頁面就是中轉頁面。中轉頁面必須放置頁面跳轉的按鈕，方便瀏覽。
中轉頁面大有可爲，推薦在中轉頁面繪製子業務流程圖、頁面流程圖（APP必須）、用例圖、數據流圖等需求類圖示，加強產品原型的解釋能力。
4.12.2 示例
圖 4 18子業務流程圖
圖 4 19用例圖
圖 4 20頁面流程圖
4.13 彈窗/浮窗
4.13.1 描述
頁面交互如果涉及彈窗/浮窗提示的，必須設計彈窗/浮窗，且保證事件執行有效性和完備性，禁止出現彈窗點擊沒有反應的情況。彈窗設計禁止出現超過3層彈窗的情況！
彈窗設計主流的3種方式：彈窗沒有背景效果；彈窗附帶頁面背景遮罩效果；彈窗附帶陰影效果。
浮窗設計一般是顯示後自動隱藏，少數隱藏後還執行事件。
4.13.2 示例
圖 4 21彈窗示意圖
圖 4 22浮窗示意圖
4.14 菜單設計
4.14.1 描述
Axure自帶元件庫提供了樹形菜單、橫向菜單和縱向菜單3種菜單設計方案，能夠滿足多數使用場景。如果產品需要，建議自定義創新菜單設計。
菜單設計，必須實現懸浮、點選、選中等交互效果，推薦與母版嵌套使用，方便後期維護，禁止出現多個頁面菜單一致的情況下，不使用母版。
4.14.2 示例
圖 4 23Axure自動的3種菜單
圖 4 24自定義菜單設計（1）
圖 4 25自定義菜單設計（2）
4.15 表單設計
4.15.1 描述
表單設計應用於多項數據排版和展示的場景，如：機構用戶註冊、標識符申請、產品發佈等。推薦使用表格進行設計表單設計，包括：查詢表單、數據填寫表單、查看詳情表單等。
4.15.2 示例
圖 4 26查看詳情表單設計示例
圖 4 27修改信息表單設計示例
圖 4 28查詢列表表單設計示例
4.16 提示設計
4.16.1 描述
產品原型的精細程度，除了合理的頁面佈局和完備的交互外，很大一部分是交互提示和交互提示的系統化整理。避免，遇到一個默認提示或者報錯，臨時定義。時間長了，數量多了，沒有辦法跟蹤和管理。一方面，產品原型中窮盡用例和提示語，另一方，推薦使用Excel文檔形式進行跟蹤。
4.16.2 示例
圖 4 29表單提示語規範參考圖
圖 4 30交互提示語規範參考圖
圖 4 31錯誤提示產品原型示例
4.17 動態面板
4.17.1 描述
動態面板是產品原型設計中，非常重要和常用的元件。動態面板必須命名，推薦使用英文名稱或拼音；狀態數量超過2個時，必須對狀態進行命名；同一個頁面動態面板數量推薦控制在3個以內；同一個動態面板，狀態層級數量推薦控制在3層以內。
4.17.2 示例
圖 4 32動態面板示例
4.18 母版設計
4.18.1 描述
頁面通用模塊/組件，建議使用母版製作。包括但不限於：頁面頭部和底部、功能菜單、屬性面板等版式固定的區域。
溫馨提示：各種元件包括動態面板支持與母版嵌套使用。
4.18.2 示例
圖 4 33母版示例
5 輸出
產品原型設計活動中，產品經理負責輸出高保真原型，必要時還需輸出低保真原型。高保真產品原型設計流程和規範應遵循本規範。
6 質量與評價
對產品原型設計活動進行測量，並將測量結果用於確定軟件研發活動的狀態和產品經理考覈。產品原型測量依據：
1.需求符合度：評判產品原型表達的需求和功能與需求文檔定義一致性或符合程度；
2.產品原型設計質量：參照本規範和產品原型設計模板對比產品經理輸出的產品原型源文件，評判其規範符合度以及設計質量；
3.產品原型設計效率：綜合考慮產品原型的頁面數量、控件數量、交互複雜度等，對比產品原型設計的時長進行考量；
4.產品原型體驗滿意度：體驗產品原型輸出的HTML頁面，評價用戶滿意度。