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

一、高質(zhì)量原型的標(biāo)準(zhǔn)是什么？

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

1、統(tǒng)一設(shè)計(jì)規(guī)范，明確設(shè)計(jì)標(biāo)準(zhǔn)；

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

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

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

二、標(biāo)準(zhǔn)一：統(tǒng)一設(shè)計(jì)規(guī)范，明確設(shè)計(jì)標(biāo)準(zhǔn)

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

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

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

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

頁面樣式管理器

頁面樣式與尺寸

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

元件樣式管理器

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

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

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

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

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

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

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

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

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

中繼器

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

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

母版

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

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

頁面導(dǎo)航

四、標(biāo)準(zhǔn)三：交互邏輯完整，操作流程順暢

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

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

預(yù)覽原型

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

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

五、小結(jié)

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

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