首先需要了解交互稿和原型圖的聯(lián)系與區(qū)別：按照常規(guī)的工作流程，交互設(shè)計(jì)師最終交付的產(chǎn)物包括任務(wù)流程圖、信息架構(gòu)圖、頁面原型圖、頁面交互說明、頁面流程圖，這些都可以歸納到交互設(shè)計(jì)文檔中。因此原型圖只是交互稿的一部分，本文將鋪開闡述設(shè)計(jì)規(guī)范的原型圖應(yīng)該注意哪些。

原型圖設(shè)計(jì)遵循的首要原則是：在滿足將產(chǎn)品需求轉(zhuǎn)化為界面功能需求的同時(shí)，盡可能的維持原型圖的美觀簡(jiǎn)潔，人類始終向往和追求一切美好的事物，即便是黑白的世界，一樣會(huì)帶給人美的享受。

接下來將從「宏觀的基礎(chǔ)規(guī)范」和「微觀的細(xì)節(jié)規(guī)范」兩個(gè)維度，說明如何設(shè)計(jì)規(guī)范的移動(dòng)端原型圖。

一、基礎(chǔ)規(guī)范

1. 繪制原型圖的尺寸

考慮到繪制與查看原型圖的便利性，以及大部分產(chǎn)品與開發(fā)人員使用小屏幕筆記本，當(dāng)前原型圖的尺寸一般采用375*667px，相當(dāng)于 iPhone 6s 屏幕尺寸的一半，以 iOS系統(tǒng)為主，安卓系統(tǒng)個(gè)別頁面單獨(dú)做圖說明。

2. 原型圖常用組件尺寸

指經(jīng)常使用的通用組件，如狀態(tài)欄、頂部導(dǎo)航欄、底部導(dǎo)航欄等，這里由于最大寬度已經(jīng)確定都是375px，因此關(guān)注的是各通用組件高度。狀態(tài)欄可以設(shè)置為母版高度是20px，頂部導(dǎo)航欄高度44px，底部 tab導(dǎo)航欄高度49px。

3. 對(duì)齊

頁面中的模塊或元素不能隨意放置，要保持對(duì)齊性，這樣呈現(xiàn)出的效果才規(guī)整有序。

4. 親密關(guān)聯(lián)

也就是我們經(jīng)常提到的「格式塔原理」的演變，是指內(nèi)容屬性可以劃歸為一組的，在位置布局上距離相近，不同屬性內(nèi)容之間的距離相對(duì)遠(yuǎn)一些。如下圖閱讀類APP 的個(gè)人中心頁面，按照消費(fèi)行為、個(gè)人互動(dòng)消息、系統(tǒng)操作分成了不同模塊，同一模塊下相近屬性歸為一組。

5. 對(duì)比和重復(fù)

頁面不同元素之間要有對(duì)比效果，目的是更清晰的組織信息、使層級(jí)關(guān)系明了，能夠引導(dǎo)用戶瀏覽并且制造焦點(diǎn)。

設(shè)計(jì)的某些元素可能在整個(gè)頁面中多次出現(xiàn)。重復(fù)的元素可能是某個(gè)模塊、一條分割線、某種粗字體、某類型圖標(biāo)標(biāo)識(shí)等。

如下圖，我的書評(píng)-我的回復(fù)頁面，通過背景色對(duì)比區(qū)分「原貼以及針對(duì)原貼的回復(fù)」，并且多個(gè)貼子的回復(fù)樣式是重復(fù)排版的。

二、細(xì)節(jié)規(guī)范

1. 字體或模塊色值

原型圖模塊背景或元素一般采用黑白灰色值，目的是避免給視覺設(shè)計(jì)師造成用色干擾。

頁面中重點(diǎn)凸顯的內(nèi)容，如字體元素顏色加重，按鈕或某個(gè)模塊采用深色塊填充。下圖中購(gòu)買價(jià)格、余額是重點(diǎn)信息，因此色值加重；購(gòu)買章節(jié)數(shù)以及購(gòu)買按鈕也是關(guān)鍵內(nèi)容，因此給予色塊填充。

這樣做的目的是視覺設(shè)計(jì)師可以很快明確頁面元素的重要性層級(jí)，而不必一定要仔細(xì)閱讀頁面交互說明。

作為交互設(shè)計(jì)師必須始終明確，原型圖的重點(diǎn)是功能和邏輯結(jié)構(gòu)的梳理與呈現(xiàn)，用色不是我們應(yīng)該考慮的。

2. 字體類型與字號(hào)大小

原型圖中使用相同的字體，保持所有頁面字體呈現(xiàn)一致性。字號(hào)要依據(jù)具體頁面中元素重要性的不同而定，一般來說為便于清楚查看，字號(hào)最小12px。如下圖紅色框選部分，標(biāo)題與簡(jiǎn)介不是相同的字體，給人感覺頁面很跳，破壞了統(tǒng)一性。

總結(jié)

交互設(shè)計(jì)師在產(chǎn)出原型圖時(shí)，在滿足產(chǎn)品和業(yè)務(wù)需求的基礎(chǔ)之上，遵循一些普適的規(guī)范原則，不僅使你的原型圖美觀簡(jiǎn)潔，更是交互設(shè)計(jì)師專業(yè)性的體現(xiàn)要素之一。以上是我的一些經(jīng)驗(yàn)心得，大家如果有更好的觀點(diǎn)補(bǔ)充，歡迎留言探討。

歡迎關(guān)注作者的微信公眾號(hào)：「Viksea」

圖片素材作者：Gaeul Lee

「從零開始教你繪制原型圖」

• 《用一個(gè)實(shí)戰(zhàn)項(xiàng)目，讓你全面認(rèn)識(shí)產(chǎn)品原型的誕生過程！》
• 《高級(jí)設(shè)計(jì)師：如何用科學(xué)的方法做出專業(yè)的原型圖？》
• 《基礎(chǔ)小課堂！從零開始教你做高保真原型圖+UI 設(shè)計(jì)規(guī)范》