編輯導語：如果具備了快速產出一份高質量的原型意味著什麼？意味著你能夠準確地傳遞設計思想，別人也能夠認可你的專業設計能力，評審會的氣氛也能夠更為融洽。本文將探索高質量的原型標準，以及通過哪些方法能夠滿足這些標準，從而產出高質量的原型。

一、高質量原型的標準是什麼？

如何產出一份高質量的原型？在回答這個問題之前，我們首先需要搞清楚，高質量的原型有哪些要求或標準，形成一個統一的認識。在實際的工作當中，原型的閱讀用戶主要是開發、測試、UI等產研團隊成員。如果你有過原型設計評審會被開發小哥哥Diss的經歷後，或許你能夠找到一些答案。作者認為，一份高質量的原型需要做到以下三點：

1、 統一設計規範，明確設計標準；

2、 產品結構清晰，內容表達準確；

3、 交互邏輯完整，操作流程順暢。

高質量的原型標準已經找到，接下來的任務就是如何滿足這些標準。本文以Axure為例說明如何製作一份高質量的原型，本文重點說明設計思想與設計習慣，分享的內容同樣適合於其它原型設計工具。

二、標準一：統一設計規範，明確設計標準

在製作原型之前，首先我們需要確定產品的一些常用規範，如尺寸、留白間距、產品顏色、文字、樣式等視覺規範和常用的組件規範。

01 統一視覺規範

視覺規範的統一性問題，我們可以通過「頁面樣式管理器」和「元件樣式管理器」來建立標準。

頁面樣式管理可以設置統一的頁面背景色（也可以是背景圖片）、頁面的對齊方式、頁面的保真效果，在這裡我們可以任意添加、修改、刪除頁面樣式。頁面的尺寸可以通過右側的樣式設置完成，Axure提供了常用的移動端尺寸、web端尺寸，工具也支持自定義頁面尺寸。

頁面樣式管理器

頁面樣式與尺寸

元件樣式管理器可以用來解決頁面內容的視覺樣式規範。在這裡可以修改Axure中基礎元件的樣式，如標題、正文、按鈕、文本框等。如果我們不想修改基礎元件的默認樣式，也可以添加新的元件樣式。如添加產品設中常用按鈕的樣式、正文的樣式、提示信息的樣式等。

元件樣式管理器

通過頁面樣式管理器與元件樣式管理器設置的內容可以在頁面設計中被重複使用，不僅統一了原型設計標準，也提高了原型設計效率。

02 統一組件規範

除了視覺規範外，團隊內部還應建立一套適合自己的統一組件庫，標準組件庫的製作可以由產品牽頭，組織UI及前端開發共同完成。國內大部分團隊都是參考或直接借鑒了Ant Design、Element UI等大廠的組件庫，官方網站也都會配有Axure、Sketch源文件。

三、標準二：產品結構清晰，內容表達準確

要想提高原型的可讀性，原型頁面的設計需要結構清晰，內容表達準確。達到結構清晰的要求，我們就需要將頁面功能、信息進行分層、分類。如何使原型看上去結構清晰就需要利用柵格化設計系統，通過利用輔助線在橫向上將頁面設計區域進行分塊，將設計區域進行分塊是為了頁面內容更好的保持對齊和保持舒適的間距。

對於一些內容較為固定的，且被多次使用的結構化模塊，可以使用中繼器或者母版來提升我們的設計效率與設計質量。不同頁面重複使用的內容，推薦使用母版，同一個頁面中重複出現的內容可以使用中繼器。中繼器的使用有一定的門檻，有興趣的可以看看這篇文章：Axure 9.0案例：玩轉中繼器，讓你的原型更保真

中繼器

母版有三種類型：任意位置的母版、固定位置的母版、脫離母體的母版。任意位置的母版是被使用範圍最廣的母版。在這裡和大家簡單說明下另外兩種母版的使用場景。固定位置的母版，常使用於位置固定的內容元素，如PC網頁的頂部登錄條、頁底的友情鏈接等。脫離母體的母版適用於內容元素基本相同，少量元素不同的設計場景。如App應用底部導航欄，在不同的頁面選中不同的導航標籤。脫離母體的母版在頁面中修改母版內容時，並不會影響原本的母版內容。關於母版內容的詳細介紹，可以查看這篇文章：用好母版，提升原型設計效率，從此告別加班

母版

原型結構清晰，不僅體現在頁面內部，也要體現在整個產品體系中。頁面設計完成後，要檢查頁面導航結構是否清晰。如頁面的命名是否規範、頁面的層級是否清晰。當項目設計中涉及多個系統、多個模塊時，甚至某個頁面的多個狀態時（若每個狀態單獨畫了一個頁面），為了使頁面導航看上去清晰易懂，可以考慮使用文件夾，將頁面進行有序歸類。

頁面導航

四、標準三：交互邏輯完整，操作流程順暢

一份高質量的原型除了能夠讓人看懂頁面內部的內容，還應做到讓讀者能夠了解頁面之間的邏輯關係。因此，我們在製作原型時，不要忘記給操作按鈕、鏈接文字配置跳轉交互。在實際的原型製作過程中，常常會忽略這一步，或者會遺漏某些頁面之間的跳轉關係。那麼怎樣減少這樣的問題呢？建議大家原型製作完成後，養成預覽原型的習慣，預覽原型能夠讓我們跳出局部細節站在全局的視角看待原型設計。預覽時，我們從原型閱讀者的視角觸發，去嘗試點擊每一個操作按鈕，去檢查我們的交互是否完整，操作流程是否順暢。

預覽原型

追求交互邏輯完整，並不意味著追求完美的高保真交互。複雜的數據交互、動畫效果也不提倡大家在原型中實現，可以通過需求文檔或者當面溝通來得更為高效。在這裡我們建議的是添加頁面之間的跳轉交互、頁面內的彈框交互，這兩種交互在原型製作當中也比較容易實現。一個簡單的交互勝過千言萬語的解釋，代替了大量的文字說明，而且讀者進行交互操作時也更有代入感，能夠更快速的理解操作流程。

五、小結

最後，我們一起來總結下本文的討論主題，如何產出一份高質量的原型。我們應做好以下三點要求：

1、 統一設計規範，明確設計標準：善於藉助頁面樣式管理器和元件樣式管理器這兩個輔助工具來幫助我們養成統一視覺規範的良好習慣，團隊內部還要做到組件庫的統一。

2、 產品結構清晰，內容表達準確：用好柵格系統、母版、中繼器使得頁面結構清晰，內容傳達準確；用好頁面導航，規範頁面的名稱、層級關係，使得產品結構更清晰。

3、 交互邏輯完整，操作流程順暢：養成預覽原型的好習慣，檢查頁面操作流程，對頁面跳轉交互進行查漏補缺。