本文分享來(lái)自Axure實(shí)戰(zhàn)班第6期同學(xué)@?Coreleone：原型設(shè)計(jì)是交互設(shè)計(jì)師與PD、PM、開(kāi)發(fā)工程師溝通的最好工具。本人將結(jié)合最近制作好的keep原型，與大家分享一些個(gè)人對(duì)畫(huà)原型的一些看法。

1. 合格原型應(yīng)該是規(guī)范的

原型是用線條，圖形、字體等元素描繪的線框圖。對(duì)這些構(gòu)成原型的基本元素進(jìn)行規(guī)范的處理可以讓原型更加的高保真

1.1 字體

字體統(tǒng)一：選擇常用字體（微軟雅黑，黑體等）；字號(hào)統(tǒng)一：一級(jí)標(biāo)題，二級(jí)標(biāo)題，正文等字體描述字號(hào)大小保持一致；顏色規(guī)范：正文，標(biāo)題等代表不同功能的字體做出一定的顏色區(qū)分。

1.2 間距

適當(dāng)?shù)牧舭卓梢允拐麄€(gè)作品畫(huà)面，模塊間更為協(xié)調(diào)精美。

小提示：字體統(tǒng)一是為了避免同事間使用原型時(shí)因?yàn)樽煮w原因出現(xiàn)頁(yè)面錯(cuò)亂的問(wèn)題。

2. 搭建你的產(chǎn)品的整體框架和各個(gè)頁(yè)面的流程圖

任何產(chǎn)品的設(shè)計(jì)都離不開(kāi)流程的構(gòu)建，它是后續(xù)產(chǎn)品架構(gòu)，用戶交互的地基。構(gòu)建好你的產(chǎn)品各個(gè)頁(yè)面的功能流程圖，構(gòu)畫(huà)原型時(shí)更有效率。

從上面的流程圖中，你可以清楚的知道完成登錄操作需要登錄頁(yè)面、輸入手機(jī)號(hào)和密碼頁(yè)面以及各個(gè)頁(yè)面的跳轉(zhuǎn)邏輯。它可以使你避免丟失重要頁(yè)面，更有效制作demo。

左側(cè)導(dǎo)航清晰的層級(jí)關(guān)系，可以讓程序員們很清楚的知道你的產(chǎn)品的整體架構(gòu)，頁(yè)面間的關(guān)系，減少他們索引的時(shí)間。

3. 了解你原型的輸出對(duì)象

產(chǎn)品原型貫穿于整個(gè)項(xiàng)目鏈，它輸出的下一個(gè)節(jié)點(diǎn)就是我們的程序猿們，如何更好的讓程序猿讀懂我們的原型，是我們?cè)诶L制原型中重要考慮的因素，因?yàn)樗麄兪悄愕漠a(chǎn)品用戶。

頁(yè)面的內(nèi)容被我拆分成不同模塊，對(duì)不同的版塊說(shuō)明它包含的內(nèi)容、功能、交互、操作邏輯。程序員可以清晰的知道他要做的事情。在對(duì)頁(yè)面的內(nèi)容進(jìn)行說(shuō)明時(shí)，頁(yè)面一定要簡(jiǎn)潔，不要把解釋寫(xiě)的”遍地開(kāi)花，箭頭亂飛“，這給程序員的體驗(yàn)會(huì)非常差勁，可能直接”提刀“找你了。對(duì)版塊的解釋要盡可能的清晰，簡(jiǎn)單，這樣可以減少程序員理解你原型的時(shí)間。最后在嘮叨一句，對(duì)頁(yè)面的分解和內(nèi)容說(shuō)明一定要規(guī)范，左邊放頁(yè)面，右邊放文字（怎么放都行，個(gè)人習(xí)慣），頁(yè)面的統(tǒng)一對(duì)程序員的體驗(yàn)也是影響很大的。

小提示：多和你公司的程序猿溝通交流，聽(tīng)取他們對(duì)你制作的原型的建議，形成一定的共識(shí)后，會(huì)很有利于你的原型設(shè)計(jì)。

4. 總結(jié)

在實(shí)際工作中，每個(gè)團(tuán)隊(duì)對(duì)原型的要求程度不一樣，所以產(chǎn)出的原型圖側(cè)重點(diǎn)不同，與你家的設(shè)計(jì)師、程序員達(dá)成一定的共識(shí)，設(shè)計(jì)出有助于他們理解的原型即可。在原型的動(dòng)效制作上前期不要太過(guò)于注重，能黑紙白字的注釋就不要花太多功夫制作，能簡(jiǎn)則簡(jiǎn)。但界面的流程，邏輯一定要理清，相信我，這樣做你后期的路會(huì)越來(lái)越來(lái)越順。

小提示：原型圖分為兩種：低保真原型圖和高保真原型圖。我們一般輸出低保真原型圖給設(shè)計(jì)和程序，因?yàn)檫@時(shí)候我們需要在提高自己工作效率的同時(shí)更好的幫助開(kāi)發(fā)人員理解需求。高保真原型圖制作是在設(shè)計(jì)師的設(shè)計(jì)圖出稿后，結(jié)合設(shè)計(jì)圖產(chǎn)出可操做的有逼格的原型圖，這時(shí)候原型圖的動(dòng)效幾乎和程序?qū)懗龅姆浅ＹN合。公司可用高保真原型圖進(jìn)行對(duì)外的宣傳或者對(duì)某一新功能進(jìn)行一定用戶的體驗(yàn)來(lái)獲得用戶對(duì)這一新功能的體驗(yàn)反饋。

以上是我在制作keep原型以及結(jié)合自己工作經(jīng)驗(yàn)做的總結(jié)，希望可以幫助同是剛進(jìn)入產(chǎn)品這條崎嶇路的新人們。

感謝閱讀~

源文件下載：

keep源文件下載鏈接：https://pan.baidu.com/s/1qV6yAKCn9nY1BhrSDQvR9Q 密碼：83xd

（注：若提示鏈接不存在，刷新或者更換瀏覽器重進(jìn)即可）

參考文章：

全面解讀流程圖｜附共享單車(chē)摩拜ofo案例分析

讓原型更加高保真，重要的規(guī)范是字體、字號(hào)、間距、對(duì)齊

絕密原型檔案后記：原型背后的設(shè)計(jì)思路

Axure實(shí)戰(zhàn)班，“騰訊課堂&起點(diǎn)學(xué)院”聯(lián)合辦學(xué)，是專(zhuān)門(mén)給產(chǎn)品經(jīng)理設(shè)計(jì)的Axure課程。

通過(guò)6周的系統(tǒng)學(xué)習(xí)，5次作業(yè)實(shí)戰(zhàn)，將能做出規(guī)范的Axure低保真原型，認(rèn)真學(xué)習(xí)也能做出帶有交互效果的高保真原型。戳這里，了解Axure實(shí)戰(zhàn)班，快速提升Axure水平

本文由 @Coreleone 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pixabay，基于 CC0 協(xié)議