【第11天】創(chuàng)業(yè)公司產(chǎn)品經(jīng)理如何畫好原型圖

對于創(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)系本人授權。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • 一.如何看待資產(chǎn)——負債不是壞事,比如房貸車貸會增加壓力。 二,因為收入不能覆蓋投資,我們要跑贏通貨膨脹 8%所以...
    一優(yōu)恒閱讀 242評論 0 0
  • 進程: 進程是一個正在執(zhí)行中的程序,每一個進程都有一個執(zhí)行順序。該順序是一個執(zhí)行路徑,或者叫一個控制單元 線程: ...
    機智的老劉明同志閱讀 356評論 0 1
  • 那些富人的思維邏輯 ——《富有習慣》的讀書筆記 富人在人生道路上占據(jù)一定優(yōu)勢的。 所以,成為一個富人,可以讓我們生...
    超級早起者William閱讀 360評論 0 2
  • 本周二得到《產(chǎn)品思維30講》主理人梁寧直播分享了美團公司多次后發(fā)先至的成長歷程,其中給我觸動最大的一點就是講到“千...
    專注執(zhí)行閱讀 200評論 1 1
  • 在國內(nèi)考雅思,口語小分卡6,就打算去越南碰碰運氣。其實也是想出國透透氣,也是有了暑假的河內(nèi)九日游。 大學前幾年,我...
    SunJi_閱讀 216評論 0 0