對于創(chuàng)業(yè)公司的產(chǎn)品經(jīng)理來說,一般身兼交互設計,所以輸出的原型圖一方面要給研發(fā)作為需求說明,一方面是為了讓UI更有效率的輸出。
畫原型的工具我一直使用的是axure,因為用習慣了,上手比較順,而我對于原型的理解也經(jīng)歷了三個階段。
第一階段:追求接近UI的高保真效果
這個時期,我做的原型是這樣的
無論是從部件的布局,顏色的選擇和搭配,字號的大小,圖標的使用,我都會投入很多精力,當時的成就感來自于把axure用的像ps一樣。
但是后來會發(fā)現(xiàn),研發(fā)在需求開發(fā)時,會直接拿著我的原型圖參考做,而UI設計師給到的效果圖和切圖跟我的原型圖是有差異的,出現(xiàn)了好幾次溝通誤解。
而另一方面,UI設計師對于我的這種越俎代庖的行為一直非常不爽,甚至有一次在UI給到了四個首頁視覺方案時,老板竟然直接說用我的原型圖效果最好。
左圖是我的原型,右圖是最終的UI效果圖,幾乎是90%的還原。
那時UI設計師幾乎是抓狂了,我才突然意識到自己好像確實做過了。
一方面花了很多的時間追求原型的效果,一方面限制了UI設計師的發(fā)揮,反而拖延了項目的進度和效率。
于是,我開始了第二階段。
第二階段:追求最簡易的線框圖
也許是為了避免再次惹怒UI設計師,我只做最簡易的線框圖,就是能用文字表示的絕不用圖標,不會出現(xiàn)彩色和圖片。
但這時問題又來了,雖然我輸出原型的速度快了很多,但是在UI效果圖出來后會發(fā)現(xiàn)可能跟我預想中的差異較大,因為UI設計師沒有真正理解每個模塊的功能意義,以及界面布局中的重點和層級。
于是,我開始進入到第三階段。
第三階段:追求色塊與圖標的合理配合
只使用黑白灰色系區(qū)分不同模塊的層級,用通用型圖標表述功能。
這樣,既能夠保證原型圖的輸出效率,又能夠讓UI設計師快速理解界面中的功能關系,并且能夠避免最終UI效果圖與產(chǎn)品原型的差異過大。
色塊的顏色搭配并不難,只需要選擇中間那一條灰色系的顏色即可。
而通用型圖標的資源也比較容易找,推薦幾個我常用的網(wǎng)站:
http://www.easyicon.net/
https://www.iconfinder.com/
http://www.iconfont.cn/
畫原型的過程,其實就是框架、流程、細節(jié)的再次梳理,不斷調(diào)整和明確功能定義。
原型圖配合交互說明,是我認為比較合理的產(chǎn)品需求文檔形式,因為大篇幅的文字說明是開發(fā)不愿意看的。
至于原型圖的整體美觀度,是在保證功能模塊表達完整之后再考慮的,關鍵在于每個界面的風格統(tǒng)一。
不過作為一個對設計有追求的產(chǎn)品經(jīng)理,原型圖還是別做的太粗糙吧。
個人原創(chuàng)文章,轉(zhuǎn)載請聯(lián)系本人授權。