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