優(yōu)秀的原型設計，不光是自己和相關人員看起來賞心悅目，在團隊溝通、協(xié)作時也能提高工作效率，達成默契。這篇文章，作者分享了優(yōu)秀的原型的五個特征，快來看看你的原型是否符合要求吧。

原型是一個產品的模型，通過制作這樣的一個模型能夠讓大家直觀感受產品的功能，讓團隊成員、項目干系人了解產品的概貌。原型制作的好壞，直接影響大家對產品的認識與理解，影響著需求傳達的準確性。

原型指導著設計、開發(fā)與測試的工作環(huán)節(jié)，從而間接影響了產品的最終質量。因此，設計一份高質量的原型，對整個項目工作而言至關重要，所以我們有必要努力將原型設計得更好。

我們研究了大量的優(yōu)秀設計案例，發(fā)現(xiàn)那些優(yōu)秀的原型都具有以下5個特征：統(tǒng)一的設計尺寸及布局結構、優(yōu)雅的配色方案、明確的文字規(guī)范、高效的母版設計、強大的組件系統(tǒng)。一份好的原型看上去給人的感覺就是簡潔、明了、整齊劃一，頁面之間的邏輯關系也很清晰明了。

下面我們就來分析這5個特征：

特征一：確定設計尺寸及界面布局

無論是設計移動端頁面，還是PC端頁面，我們首先都需要確定好頁面的設計尺寸，通常移動端頁面的設計尺寸為375（寬度） x 667（高度），在Axure RP9的版本當中，通過頁面樣式，我們可以根據(jù)設計需要或者演示設備的分辨率選擇合適的移動端頁面尺寸。如果是PC端頁面，寬度一般設置為1024，高度通常不上限。

這里重點說明下PC端的設計尺寸，確定完了頁面尺寸，接下來我們需要根據(jù)產品需求來確定頁面的設計版式以及界面布局，從橫向上看將頁面需要分成幾個版塊，每個版塊之間的留白間隙是多少，這些都需要統(tǒng)一。

在設計PC端頁面的時候，根據(jù)柵格系統(tǒng)的設計原則，從橫向上將頁面切分為24個方塊,這樣便于界面的布局，無論是兩等份、三等份、四等分、六等分都可以滿足設計要求。每個版塊之間的間隙一般為6px、8px、10px、12px、14px，無論選擇什么樣的間隙尺寸，都要注意每個版塊之間的留白間隙要保持相等。

無論是設計移動端頁面，還是PC端頁面，我們首先都需要確定好頁面的設計尺寸，通常移動端頁面的設計尺寸為375（寬度） x 667（高度），在Axure RP9的版本當中，通過頁面樣式，我們可以根據(jù)設計需要或者演示設備的分辨率選擇合適的移動端頁面尺寸。如果是PC端頁面，寬度一般設置為1024，高度通常不設上限。

這里重點說明下PC端的設計尺寸，確定完了頁面尺寸，接下來我們需要根據(jù)產品需求來確定頁面的設計版式以及界面布局，從橫向上看將頁面需要分成幾個版塊，每個版塊之間的留白間隙是多少，這些都需要統(tǒng)一。

在設計PC端頁面的時候，根據(jù)柵格系統(tǒng)的設計原則，從橫向上將頁面切分為24個方塊,這樣便于界面的布局，無論是兩等份、三等份、四等分、六等分都可以滿足設計要求。每個版塊之間的間隙一般為6px、8px、10px、12px、14px，無論選擇什么樣的間隙尺寸，都要注意每個版塊之間的留白間隙要保持相等。

特征二：明確產品色調

設計規(guī)范中還要注重用色的統(tǒng)一。

首先確定產品的品牌色，品牌色即為產品的主色調，主色調通常只能有一個。

確定了主色調，還需要確定兩個輔助色，一個產品的用色最好不要超過3種顏色，尤其是同一個頁面的顏色更不應超過3種，研究表明同一個頁面的顏色超過3種以上，頁面給人的感覺就會覺得混亂，讓人抓不住重點信息。品牌的logo、操作按鈕、以及導航等應使用主色調，重要的文字信息應使用主色調。次要的操作按鈕、頁面的狀態(tài)信息、部分提示信息可以使用輔助色。同一個按鈕的不同狀態(tài)，可以使用同一色系的不同深淺度或飽和度來區(qū)分狀態(tài)。

統(tǒng)一用色，可以讓原型看上去更簡潔，避免出現(xiàn)五彩斑斕的黑、或者讓人眼花繚亂的配色方案。顏色規(guī)范的目的主要用于向用戶傳達統(tǒng)一的視覺觀感，一眼就能夠記住產品的顏色。

當然有些產品經(jīng)理、交互設計師可能更傾向于黑白灰這種經(jīng)點配色，最終的配色方案會交由視覺設計師來確定，但即便使用黑白灰也要注重用色的統(tǒng)一，同一個設計元素在不同的頁面之間要保持用色的統(tǒng)一。

特征三：確定文字使用規(guī)范

產品信息是由文字、圖片和視頻傳達的，而絕大部分的信息又是以文字作為載體。因此，在進行產品原型設計，我們也需要認證研究下文字的使用。

首先，我們需要確定文字的字體，和顏色的規(guī)范一樣，字體的使用最多不應超過3種，能使用同一種字體固然是最好的。

中文字體推薦大家使用PingFang SC、Langting SC、Microsoft YaHei，英文字體推薦使用Helvetica Neue、Symbol、Arial。

根據(jù)文字信息的重要程度、文字類型，所使用的字號也是不同的，通常，越重要的文字信息使用的字號也越大。

大部分的文字盡量使用同一個顏色，這里推薦純黑色#000000，不同類型的文字可以使用不同的飽和度來進行區(qū)分。

下面這兩張圖，整理了不通類型的文字使用的文字大小、文字顏色。

特征四：善于使用成母版

同一個產品原型設計當中，我們可以將一些使用率較高的組件、模板設置為母版，如頁面導航、文章列表、商品列表、頁頭、頁尾、表格、各類表單等都可以設置為母版，下次使用，直接從母版中拖拽。

養(yǎng)成使用母版的良好習慣，可以大大的提高我們的設計效率。根據(jù)使用需求的不同，可以將設計內容轉化為不同類型的母版。

母版類型分為三種：固定型母版、任意型母版以及脫離型母版。

1. 固定型母版，通常位置是固定好的，不能人為的改變位置，如頁頭、App的底部導航等；
2. 任意型母版，在引用的時候，可以靈活修改位置，這類型的母版也是使用最廣泛的母版；
3. 最后一種就是脫離型母版，這種母版與前面兩種母版最大的區(qū)別就是在引用頁面中修改它的內容，而不會影響到原母版的內容，就好像是脫離了母子關系。

另外兩種母版， 如果在引用頁面中進行修改，則會同步修改原母版的內容，他們之間保持了一種特殊的母子關系。

特征五：建立完善的組件庫

隨著參與的設計項目越來越多，我們會發(fā)現(xiàn)有些設計元素在很多不同的產品當中都會被多次重復使用。

如App的底部導航、table標簽、彈框組合、toast提示、浮層提示、下拉菜單、進度條、各類選擇器、文本框、單選、復選等，這些使用場景廣泛的通用型控件、組件會被不同的設計項目多次頻繁使用，這個時候母版已經(jīng)幫不了我們了。

到了這一步，我們可以考慮建立自己的組件庫，將這些使用頻率高的通用型控件、組件，甚至頁面模板納入到我們的組件庫當中。

建立一套成熟、全面的組件庫，不僅可以統(tǒng)一我們的設計規(guī)范，還能夠極大的提高原型設計效率。

有了這樣的一套組件庫，設計產品原型只需要不停的拖拽，并在這些基礎上稍作修改，就能夠快速的完成原型設計。

原型設計的時間減少了，作為產品經(jīng)理、交互設計師就可以有更多的時間思考產品的流程、邏輯以及用戶體驗。

交互組件庫演示地址：https://8hzn8o.axshare.com

小結

最后，我們一起來總結下本文的討論主題，我們應做好以下三點要求：

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

感謝您的閱讀，由于本人才疏學淺，難免有不足之處，歡迎大家在評論區(qū)分享交流，愿你我一起成長，共同進步！謝謝！