原形是一個新產品的實體模型，根據制做這樣的一個實體模型可以讓大伙兒深刻體會商品功能的，讓團隊人員、項目干系人了解市場的概況。原型制作的好與壞，直接關系大伙兒對產品了解與理解，決定著要求傳遞的精確性。原形具體指導著設計、開發和測試工作中階段，進而進而影響了商品最終的品質。因而，設計一份高質量原形，對于整個項目工作來講尤為重要，因此我們必須努力把原形設計得很好。
大家科學研究了很多的出色設計實例，發覺這些出色原型都主要有以下5個特點：統一的設計規格及合理布局構造、典雅的色彩搭配、很明確的文本標準、高效率的母版設計、強悍的部件系統軟件。一份好原型看起來給人的感覺是簡約、一目了然、整齊劃一，頁面間的邏輯順序也挺條理清晰。今天我們就來剖析這5個特點：
不論是設計手機端頁面，或是PC端頁面，首先我們都要確認好頁面的設計規格，一般手機端頁面的設計規格為375(總寬) x 667(相對高度)，在Axure RP9版本的之中，根據頁面款式，我們能依據設計必須或是演試機器的屏幕分辨率選擇適合的手機端頁面規格。假如是PC端頁面，總寬一般設為1024，相對高度一般不設置限制。
頁面規格
這兒關鍵說明下PC端的設計規格，明確完后頁面規格，下面我們應該根據用戶需求來決定頁面的設計樣式及其界面布局，從縱向來看將頁面必須分為好多個版面，每一個版面間的留白藝術空隙多少錢，這些都要統一。在設計PC端頁面時，依據柵格系統的設計標準，從橫著上把頁面切分成24個格子,那樣有利于頁面的合理布局，不論是兩等份、三等份、四等分、六等分都能夠滿足設計規定。每一個版面中間間隙一般為6px、8px、10px、12px、14px，不管選擇哪種空隙規格，也要注意每一個版面間的留白藝術空隙始終保持相同。
設計規格
頁面合理布局架構
設計標準中也要重視色彩搭配的統一，最先明確新產品的品牌色，品牌色即是新產品的主色，主色一般只有有一個。確認了主色，還要明確2個輔助色，一個產品的色彩搭配不要超過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折優惠。如果你感覺交易平臺更方便，也可點擊上邊連接購買，交易平臺不打折。
原創文章，作者：leping，如若轉載，請注明出處：http://www.qdgszy.com/hq-1824.html