內(nèi)容摘要

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

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

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

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

頁面尺寸

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

設計尺寸

頁面布局框架

特征二：明確產(chǎn)品色調(diào)

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

豐富的配色方案

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

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

文字使用規(guī)范

特征四：善于使用成母版

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

擅用母版

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

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

風格統(tǒng)一的各類組件庫

作為一個在互聯(lián)網(wǎng)領域打拼了10年的老兵，根據(jù)多年的原型設計經(jīng)驗，在工作中逐漸沉淀總結(jié)了一套適用于移動端設計的高保真交互組件庫及頁面模板、一套適用于PC端設計的高保真交互組件庫。

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

移動端高保真交互組件庫

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

PC端高保真交互組件庫

關注并私信作者索要微信或支付寶賬號，通過微信或支付寶轉(zhuǎn)賬(付款后發(fā)送源文件)，可享受8折優(yōu)惠。如果您覺得平臺交易更安全，也可以點擊上方鏈接直接購買，平臺交易不打折。