對(duì)于創(chuàng)業(yè)公司的產(chǎn)品經(jīng)理來說，一般身兼交互設(shè)計(jì)，所以輸出的原型圖一方面要給研發(fā)作為需求說明，一方面是為了讓UI更有效率的輸出。

畫原型的工具我一直使用的是axure，因?yàn)橛昧?xí)慣了，上手比較順，而我對(duì)于原型的理解也經(jīng)歷了三個(gè)階段。

第一階段：追求接近UI的高保真效果

這個(gè)時(shí)期，我做的原型是這樣的

無論是從部件的布局，顏色的選擇和搭配，字號(hào)的大小，圖標(biāo)的使用，我都會(huì)投入很多精力，當(dāng)時(shí)的成就感來自于把a(bǔ)xure用的像ps一樣。

但是后來會(huì)發(fā)現(xiàn)，研發(fā)在需求開發(fā)時(shí)，會(huì)直接拿著我的原型圖參考做，而UI設(shè)計(jì)師給到的效果圖和切圖跟我的原型圖是有差異的，出現(xiàn)了好幾次溝通誤解。

而另一方面，UI設(shè)計(jì)師對(duì)于我的這種越俎代庖的行為一直非常不爽，甚至有一次在UI給到了四個(gè)首頁視覺方案時(shí)，老板竟然直接說用我的原型圖效果最好。

左圖是我的原型，右圖是最終的UI效果圖，幾乎是90%的還原。

那時(shí)UI設(shè)計(jì)師幾乎是抓狂了，我才突然意識(shí)到自己好像確實(shí)做過了。

一方面花了很多的時(shí)間追求原型的效果，一方面限制了UI設(shè)計(jì)師的發(fā)揮，反而拖延了項(xiàng)目的進(jìn)度和效率。

于是，我開始了第二階段。

第二階段：追求最簡(jiǎn)易的線框圖

也許是為了避免再次惹怒UI設(shè)計(jì)師，我只做最簡(jiǎn)易的線框圖，就是能用文字表示的絕不用圖標(biāo)，不會(huì)出現(xiàn)彩色和圖片。

但這時(shí)問題又來了，雖然我輸出原型的速度快了很多，但是在UI效果圖出來后會(huì)發(fā)現(xiàn)可能跟我預(yù)想中的差異較大，因?yàn)閁I設(shè)計(jì)師沒有真正理解每個(gè)模塊的功能意義，以及界面布局中的重點(diǎn)和層級(jí)。

于是，我開始進(jìn)入到第三階段。

第三階段：追求色塊與圖標(biāo)的合理配合

只使用黑白灰色系區(qū)分不同模塊的層級(jí)，用通用型圖標(biāo)表述功能。

這樣，既能夠保證原型圖的輸出效率，又能夠讓UI設(shè)計(jì)師快速理解界面中的功能關(guān)系，并且能夠避免最終UI效果圖與產(chǎn)品原型的差異過大。

色塊的顏色搭配并不難，只需要選擇中間那一條灰色系的顏色即可。

而通用型圖標(biāo)的資源也比較容易找，推薦幾個(gè)我常用的網(wǎng)站：

http://www.easyicon.net/

https://www.iconfinder.com/

http://www.iconfont.cn/

畫原型的過程，其實(shí)就是框架、流程、細(xì)節(jié)的再次梳理，不斷調(diào)整和明確功能定義。

原型圖配合交互說明，是我認(rèn)為比較合理的產(chǎn)品需求文檔形式，因?yàn)榇笃奈淖终f明是開發(fā)不愿意看的。

至于原型圖的整體美觀度，是在保證功能模塊表達(dá)完整之后再考慮的，關(guān)鍵在于每個(gè)界面的風(fēng)格統(tǒng)一。

不過作為一個(gè)對(duì)設(shè)計(jì)有追求的產(chǎn)品經(jīng)理，原型圖還是別做的太粗糙吧。

個(gè)人原創(chuàng)文章，轉(zhuǎn)載請(qǐng)聯(lián)系本人授權(quán)。