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

一、高質(zhì)量原型的標準是什么？

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

1、統(tǒng)一設計規(guī)范，明確設計標準；

2、產(chǎn)品結(jié)構(gòu)清晰，內(nèi)容表達準確；

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

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

二、標準一：統(tǒng)一設計規(guī)范，明確設計標準

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

1. 統(tǒng)一視覺規(guī)范

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

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

頁面樣式管理器

頁面樣式與尺寸

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

元件樣式管理器

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

2. 統(tǒng)一組件規(guī)范

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

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

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

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

三、標準二：產(chǎn)品結(jié)構(gòu)清晰，內(nèi)容表達準確

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

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

中繼器

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

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

母版

原型結(jié)構(gòu)清晰，不僅體現(xiàn)在頁面內(nèi)部，也要體現(xiàn)在整個產(chǎn)品體系中。頁面設計完成后，要檢查頁面導航結(jié)構(gòu)是否清晰。如頁面的命名是否規(guī)范、頁面的層級是否清晰。

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

頁面導航

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

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

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

預覽原型

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

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

五、小結(jié)

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

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