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

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

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

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

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

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

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

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

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

1. 統一視覺規范

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

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

頁面樣式管理器

頁面樣式與尺寸

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

元件樣式管理器

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

2. 統一組件規范

除了視覺規范外，團隊內部還應建立一套適合自己的統一組件庫，標準組件庫的制作可以由產品牽頭，組織UI及前端開發共同完成。國內大部分團隊都是參考或直接借鑒了Ant Design、Element UI等大廠的組件庫，但是那種不夠美觀全面有較強的局限性，我們團隊本身也都會積累完善且配有豐富美觀全面的Axure元件庫組件庫源文件。組件庫演示地址如下：

web組件庫元件庫資源演示地址：https://n9r8hk.axshare.com

移動組件庫元件庫資源演示地址：https://2qsb9k.axshare.com

元件庫部分頁面截圖如下：

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

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

對于一些內容較為固定的，且被多次使用的結構化模塊，可以使用中繼器或者母版來提升我們的設計效率與設計質量。不同頁面重復使用的內容，推薦使用母版，同一個頁面中重復出現的內容可以使用中繼器。

中繼器

母版有三種類型：任意位置的母版、固定位置的母版、脫離母體的母版。任意位置的母版是被使用范圍最廣的母版。在這里和大家簡單說明下另外兩種母版的使用場景。固定位置的母版，常使用于位置固定的內容元素，如PC網頁的頂部登錄條、頁底的友情鏈接等。

脫離母體的母版適用于內容元素基本相同，少量元素不同的設計場景。如App應用底部導航欄，在不同的頁面選中不同的導航標簽。脫離母體的母版在頁面中修改母版內容時，并不會影響原本的母版內容。

母版

原型結構清晰，不僅體現在頁面內部，也要體現在整個產品體系中。頁面設計完成后，要檢查頁面導航結構是否清晰。如頁面的命名是否規范、頁面的層級是否清晰。

當項目設計中涉及多個系統、多個模塊時，甚至某個頁面的多個狀態時（若每個狀態單獨畫了一個頁面），為了使頁面導航看上去清晰易懂，可以考慮使用文件夾，將頁面進行有序歸類。

頁面導航

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

一份高質量的原型除了能夠讓人看懂頁面內部的內容，還應做到讓讀者能夠了解頁面之間的邏輯關系。因此，我們在制作原型時，不要忘記給操作按鈕、鏈接文字配置跳轉交互。在實際的原型制作過程中，常常會忽略這一步，或者會遺漏某些頁面之間的跳轉關系。

那么怎樣減少這樣的問題呢？建議大家原型制作完成后，養成預覽原型的習慣，預覽原型能夠讓我們跳出局部細節站在全局的視角看待原型設計。預覽時，我們從原型閱讀者的視角觸發，去嘗試點擊每一個操作按鈕，去檢查我們的交互是否完整，操作流程是否順暢。

預覽原型

追求交互邏輯完整，并不意味著追求完美的高保真交互。復雜的數據交互、動畫效果也不提倡大家在原型中實現，可以通過需求文檔或者當面溝通來得更為高效。在這里我們建議的是添加頁面之間的跳轉交互、頁面內的彈框交互，這兩種交互在原型制作當中也比較容易實現。

一個簡單的交互勝過千言萬語的解釋，代替了大量的文字說明，而且讀者進行交互操作時也更有代入感，能夠更快速的理解操作流程。

五、小結

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

1. 統一設計規范，明確設計標準：善于借助頁面樣式管理器和元件樣式管理器這兩個輔助工具來幫助我們養成統一視覺規范的良好習慣，團隊內部還要做到組件庫的統一。
2. 產品結構清晰，內容表達準確：用好柵格系統、母版、中繼器使得頁面結構清晰，內容傳達準確；用好頁面導航，規范頁面的名稱、層級關系，使得產品結構更清晰。
3. 交互邏輯完整，操作流程順暢：養成預覽原型的好習慣，檢查頁面操作流程，對頁面跳轉交互進行查漏補缺。