如何設計規範的原型圖？
原型圖設計遵循的首要原則是：在滿足將產品需求轉化為界面功能需求的同時，儘可能的維持原型圖的美觀簡潔，人類始終嚮往和追求一切美好的事物，即便是黑白的世界，一樣會帶給人美的享受。
接下來將從「宏觀的基礎規範」和「微觀的細節規範」兩個維度，說明如何設計規範的移動端原型圖。
一、基礎規範
1.繪製原型圖的尺寸
考慮到繪製與查看原型圖的便利性，以及大部分產品與開發人員使用小屏幕筆記本，當前原型圖的尺寸一般採用375*670px，相當於iPhone 6s屏幕尺寸的一半，以iOS系統為主，安卓系統個別頁面單獨做圖說明。
2.原型圖常用組件尺寸
指經常使用的通用組件，如狀態欄、頂部導航欄、底部導航欄等，這裡由於最大寬度已經確定都是375px，因此關注的是各通用組件高度。狀態欄可以設置為母版高度是20px，頂部導航欄高度44px，底部tab導航欄高度49px。
3.對齊
頁面中的模塊或元素不能隨意放置，要保持對齊性，這樣呈現出的效果才規整有序。
4.親密關聯
也就是我們經常提到的「格式塔原理」的演變，是指內容屬性可以劃歸為一組的，在位置佈局上距離相近，不同屬性內容之間的距離相對遠一些。如下圖閱讀類APP的個人中心頁面，按照消費行為、個人互動消息、系統操作分成了不同模塊，同一模塊下相近屬性歸為一組。
5.對比和重複
- 頁面不同元素之間要有對比效果，目的是更清晰的組織信息、使層級關係明瞭，能夠引導用戶瀏覽並且製造焦點。
- 設計的某些元素可能在整個頁面中多次出現。重複的元素可能是某個模塊、一條分割線、某種粗字體、某類型圖標標識等。
如下圖，我的書評-我的回復頁面，通過背景色對比區分「原貼以及針對原貼的回復」，並且多個貼子的回復樣式是重複排版的。
二、細節規範
1.字體或模塊色值
- 原型圖模塊背景或元素一般採用黑白灰色值，目的是避免給視覺設計師造成用色幹擾。
- 頁面中重點凸顯的內容，如字體元素顏色加重，按鈕或某個模塊採用深色塊填充。下圖中購買價格、餘額是重點信息，因此色值加重；購買章節數以及購買按鈕也是關鍵內容，因此給予色塊填充。
- 這樣做的目的是視覺設計師可以很快明確頁面元素的重要性層級，而不必一定要仔細閱讀頁面交互說明。
作為交互設計師必須始終明確，原型圖的重點是功能和邏輯結構的梳理與呈現，用色不是我們應該考慮的。
2.字體類型與字型大小大小
原型圖中使用相同的字體，保持所有頁面字體呈現一致性。字型大小要依據具體頁面中元素重要性的不同而定，一般來說為便於清楚查看，字型大小最小12px。如下圖紅色框選部分，標題與簡介不是相同的字體，給人感覺頁面很跳破壞了統一性。
?
三、總結
交互設計師在產出原型圖時，在滿足產品和業務需求的基礎之上，遵循一些普適的規範原則，不僅使你的原型圖美觀簡潔，更是交互設計師專業性的體現要素之一。以上是我的一些經驗心得，大家如果有更好的觀點補充，歡迎留言探討。
本文章來源：如何設計規範的原型圖？ 學UI設計網-UI設計師交流學習互動平臺
推薦閱讀：
