內容摘要

原型是一個產品的模型，通過製作這樣的一個模型能夠讓大家直觀感受產品的功能，讓團隊成員、項目干係人了解產品的概貌。原型製作的好壞，直接影響大家對產品的認識與理解，影響著需求傳達的準確性。原型指導著設計、開發與測試的工作環節，從而間接影響了產品的最終質量。因此，設計一份高質量的原型，對整個項目工作而言至關重要，所以我們有必要努力將原型設計得更好。

我們研究了大量的優秀設計案例，發現那些優秀的原型都具有以下5個特徵：統一的設計尺寸及布局結構、優雅的配色方案、明確的文字規範、高效的母版設計、強大的組件系統。一份好的原型看上去給人的感覺就是簡潔、明了、整齊劃一，頁面之間的邏輯關係也很清晰明了。下面我們就來分析這5個特徵：

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

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

頁面尺寸

這裡重點說明下PC端的設計尺寸，確定完了頁面尺寸，接下來我們需要根據產品需求來確定頁面的設計版式以及界面布局，從橫向上看將頁面需要分成幾個版塊，每個版塊之間的留白間隙是多少，這些都需要統一。在設計PC端頁面的時候，根據柵格系統的設計原則，從橫向上將頁面切分為24個方塊,這樣便於界面的布局，無論是兩等份、三等份、四等分、六等分都可以滿足設計要求。每個版塊之間的間隙一般為6px、8px、10px、12px、14px，無論選擇什麼樣的間隙尺寸，都要注意每個版塊之間的留白間隙要保持相等。

設計尺寸

頁面布局框架

特徵二：明確產品色調

設計規範中還要注重用色的統一，首先確定產品的品牌色，品牌色即為產品的主色調，主色調通常只能有一個。確定了主色調，還需要確定兩個輔助色，一個產品的用色最好不要超過3種顏色，尤其是同一個頁面的顏色更不應超過3種，研究表明同一個頁面的顏色超過3種以上，頁面給人的感覺就會覺得混亂，讓人抓不住重點信息。品牌的logo、操作按鈕、以及導航等應使用主色調，重要的文字信息應使用主色調。次要的操作按鈕、頁面的狀態信息、部分提示信息可以使用輔助色。同一個按鈕的不同狀態，可以使用同一色系的不同深淺度或飽和度來區分狀態。統一用色，可以讓原型看上去更簡潔，避免出現五彩斑斕的黑、或者讓人眼花繚亂的配色方案。顏色規範的目的主要用於向用戶傳達統一的視覺觀感，一眼就能夠記住產品的顏色。當然有些產品經理、交互設計師可能更傾向於黑白灰這種經點配色，最終的配色方案會交由視覺設計師來確定，但即便使用黑白灰也要注重用色的統一，同一個設計元素在不同的頁面之間要保持用色的統一。

豐富的配色方案

特徵三：確定文字使用規範

產品信息是由文字、圖片和視頻傳達的，而絕大部分的信息又是以文字作為載體。因此，在進行產品原型設計，我們也需要認證研究下文字的使用。首先，我們需要確定文字的字體，和顏色的規範一樣，字體的使用最多不應超過3種，能使用同一種字體固然是最好的。中文字體推薦大家使用PingFang SC、Langting SC、Microsoft YaHei，英文字體推薦使用Helvetica Neue、Symbol、Arial。根據文字信息的重要程度、文字類型，所使用的字型大小也是不同的，通常，越重要的文字信息使用的字型大小也越大。大部分的文字盡量使用同一個顏色，這裡推薦純黑色#000000，不同類型的文字可以使用不同的飽和度來進行區分。下面這兩張圖，整理了不同類型的文字使用的文字大小、文字顏色。

文字使用規範

特徵四：善於使用成母版

同一個產品原型設計當中，我們可以將一些使用率較高的組件、模板設置為母版，如頁面導航、文章列表、商品列表、頁頭、頁尾、表格、各類表單等都可以設置為母版，下次使用，直接從母版中拖拽。養成使用母版的良好習慣，可以大大的提高我們的設計效率。根據使用需求的不同，可以將設計內容轉化為不同類型的母版。母版類型分為三種：固定型母版、任意型母版以及脫離型母版。固定型母版，通常位置是固定好的，不能人為的改變位置，如頁頭、App的底部導航等；任意型母版，在引用的時候，可以靈活修改位置，這類型的母版也是使用最廣泛的母版；最後一種就是脫離型母版，這種母版與前面兩種母版最大的區別就是在引用頁面中修改它的內容，而不會影響到原母版的內容，就好像是脫離了母子關係。另外兩種母版， 如果在引用頁面中進行修改，則會同步修改原母版的內容，他們之間保持了一種特殊的母子關係。

擅用母版

特徵五：建立自己的組件庫

隨著參與的設計項目越來越多，我們會發現有些設計元素在很多不同的產品當中都會被多次重複使用。如App的底部導航、table標籤、彈框組合、toast提示、浮層提示、下拉菜單、進度條、各類選擇器、文本框、單選、複選等，這些使用場景廣泛的通用型控制項、組件會被不同的設計項目多次頻繁使用，這個時候母版已經幫不了我們了。到了這一步，我們可以考慮建立自己的組件庫，將這些使用頻率高的通用型控制項、組件，甚至頁面模板納入到我們的組件庫當中。建立一套成熟、全面的組件庫，不僅可以統一我們的設計規範，還能夠極大的提高原型設計效率。有了這樣的一套組件庫，設計產品原型只需要不停的拖拽，並在這些基礎上稍作修改，就能夠快速的完成原型設計。原型設計的時間減少了，作為產品經理、交互設計師就可以有更多的時間思考產品的流程、邏輯以及用戶體驗。

風格統一的各類組件庫

作為一個在互聯網領域打拚了10年的老兵，根據多年的原型設計經驗，在工作中逐漸沉澱總結了一套適用於移動端設計的高保真交互組件庫及頁面模板、一套適用於PC端設計的高保真交互組件庫。

移動端高保真交互組件庫及頁面模板（點擊下方鏈接獲取）

移動端高保真交互組件庫

PC端高保真交互組件庫（點擊下方鏈接獲取）

PC端高保真交互組件庫

關注並私信作者索要微信或支付寶賬號，通過微信或支付寶轉賬（付款後發送源文件），可享受8折優惠。如果您覺得平台交易更安全，也可以點擊上方鏈接直接購買，平台交易不打折。