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

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

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

1.1 字體

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

1.2 間距

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

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

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

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

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

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

3. 了解你原型的輸出對象

產(chǎn)品原型貫穿于整個項目鏈，它輸出的下一個節(jié)點就是我們的程序猿們，如何更好的讓程序猿讀懂我們的原型，是我們在繪制原型中重要考慮的因素，因為他們是你的產(chǎn)品用戶。

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

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

4. 總結(jié)

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

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

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

感謝閱讀~

源文件下載：

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

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

參考文章：

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

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

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

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

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

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

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