首先需要了解交互稿和原型圖的聯系與區別：按照常規的工作流程，交互設計師最終交付的產物包括任務流程圖、信息架構圖、頁面原型圖、頁面交互說明、頁面流程圖，這些都可以歸納到交互設計文檔中。因此原型圖只是交互稿的一部分，本文將鋪開闡述設計規范的原型圖應該注意哪些。
原型圖設計遵循的首要原則是：在滿足將產品需求轉化為界面功能需求的同時，盡可能的維持原型圖的美觀簡潔，人類始終向往和追求一切美好的事物，即便是黑白的世界，一樣會帶給人美的享受。
接下來將從「宏觀的基礎規范」和「微觀的細節規范」兩個維度，說明如何設計規范的移動端原型圖。
一、基礎規范
1. 繪制原型圖的尺寸
考慮到繪制與查看原型圖的便利性，以及大部分產品與開發人員使用小屏幕筆記本，當前原型圖的尺寸一般采用375*667px，相當于 iPhone 6s 屏幕尺寸的一半，以 iOS系統為主，安卓系統個別頁面單獨做圖說明。
2. 原型圖常用組件尺寸
指經常使用的通用組件，如狀態欄、頂部導航欄、底部導航欄等，這里由于最大寬度已經確定都是375px，因此關注的是各通用組件高度。狀態欄可以設置為母版高度是20px，頂部導航欄高度44px，底部 tab導航欄高度49px。
3. 對齊
頁面中的模塊或元素不能隨意放置，要保持對齊性，這樣呈現出的效果才規整有序。
4. 親密關聯
也就是我們經常提到的「格式塔原理」的演變，是指內容屬性可以劃歸為一組的，在位置布局上距離相近，不同屬性內容之間的距離相對遠一些。如下圖閱讀類APP 的個人中心頁面，按照消費行為、個人互動消息、系統操作分成了不同模塊，同一模塊下相近屬性歸為一組。
5. 對比和重復
頁面不同元素之間要有對比效果，目的是更清晰的組織信息、使層級關系明了，能夠引導用戶瀏覽并且制造焦點。
設計的某些元素可能在整個頁面中多次出現。重復的元素可能是某個模塊、一條分割線、某種粗字體、某類型圖標標識等。
如下圖，我的書評-我的回復頁面，通過背景色對比區分「原貼以及針對原貼的回復」，并且多個貼子的回復樣式是重復排版的。
二、細節規范
1. 字體或模塊色值
原型圖模塊背景或元素一般采用黑白灰色值，目的是避免給視覺設計師造成用色干擾。
頁面中重點凸顯的內容，如字體元素顏色加重，按鈕或某個模塊采用深色塊填充。下圖中購買價格、余額是重點信息，因此色值加重；購買章節數以及購買按鈕也是關鍵內容，因此給予色塊填充。
這樣做的目的是視覺設計師可以很快明確頁面元素的重要性層級，而不必一定要仔細閱讀頁面交互說明。
作為交互設計師必須始終明確，原型圖的重點是功能和邏輯結構的梳理與呈現，用色不是我們應該考慮的。
2. 字體類型與字號大小
原型圖中使用相同的字體，保持所有頁面字體呈現一致性。字號要依據具體頁面中元素重要性的不同而定，一般來說為便于清楚查看，字號最小12px。如下圖紅色框選部分，標題與簡介不是相同的字體，給人感覺頁面很跳，破壞了統一性。
總結
交互設計師在產出原型圖時，在滿足產品和業務需求的基礎之上，遵循一些普適的規范原則，不僅使你的原型圖美觀簡潔，更是交互設計師專業性的體現要素之一。以上是我的一些經驗心得，大家如果有更好的觀點補充，歡迎留言探討。
歡迎關注作者的微信公眾號：「Viksea」
圖片素材作者：Gaeul Lee
「從零開始教你繪制原型圖」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 3 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓