怎么畫好軟件產(chǎn)品原型圖?

　　一、工具選擇

　　工欲善其事，必先利其器。作為產(chǎn)品經(jīng)理，好的原型設(shè)計(jì)是提高產(chǎn)品開發(fā)效率不可或缺的一部分，那么，一款好的原型設(shè)計(jì)工具就是你的武器。下面給大家推薦幾款好用的原型設(shè)計(jì)軟件，有需要的朋友可以根據(jù)自己的需要進(jìn)行參考。

　　1、Axure RP

　　Axure RP是美國Axure Software Solution公司的旗艦產(chǎn)品，是一個(gè)專業(yè)的快速原型設(shè)計(jì)工具。讓負(fù)責(zé)定義需求和規(guī)格、設(shè)計(jì)功能和界面的專家能夠快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。

　　在交互效果層面，可以實(shí)現(xiàn)非常多條件判斷、巧妙運(yùn)用可以實(shí)現(xiàn)更復(fù)雜的交互。

　　缺點(diǎn)：

　　1)正版的Axure售價(jià)高，學(xué)生等群體可能負(fù)擔(dān)不起;(別怕，有破解版，哈哈)

　　2)動(dòng)態(tài)面板和中繼器較為復(fù)雜，要完全弄懂也需要一定的時(shí)間成本，學(xué)習(xí)成本高(跟著老師學(xué)習(xí)，上手快，嘿嘿)。

　　2、墨刀

　　墨刀是一款功能非常強(qiáng)大的原型設(shè)計(jì)工具，擁有云端保存，實(shí)時(shí)手機(jī)預(yù)覽，多種手勢，頁面切換特效等多種功能!另外，墨刀能夠快速創(chuàng)建頁面連接，獨(dú)創(chuàng)的拖拽連接方式，讓頁面間的連接關(guān)系清晰呈現(xiàn)出來。

　　缺點(diǎn)：

　　1)應(yīng)用局限性。墨刀專注于app原型設(shè)計(jì),在后臺和網(wǎng)站稍有乏力;

　　2)需要收費(fèi)。墨刀本地下載功能需要注冊購買，無法直接分享給他人;

　　3)歸檔能力不足。墨刀更傾向于鏈接、二維碼形式輸出，不能以文檔輸出。

　　3、Mockplus

　　Mockplus是一款簡潔高效的原型圖設(shè)計(jì)軟件，適合快速迭代的開發(fā)模式，無需學(xué)習(xí)、快速上手、功能強(qiáng)勁。支持安卓App、iOS App、Windows / MAC OS桌面程序和Web原型設(shè)計(jì)，其Web版和桌面版均可跨Window和蘋果操作系統(tǒng)使用。

　　Mockplus雖然快速上手，操作簡易。但是，這款工具在用戶體驗(yàn)上是存在著一定的缺陷的。

　　目前Mockplus對于一些過于復(fù)雜的功能，比如：判斷和變量，是不支持的。所以在用戶體驗(yàn)上會(huì)造成影響。也不支持手勢交互，無法通過其設(shè)計(jì)制作一些較為精細(xì)的操作，而且設(shè)計(jì)界面不夠美觀。此外，對于產(chǎn)品文檔的支持，也有不足。

　　當(dāng)然還有其它很多類型的原型設(shè)計(jì)工具，比如Justinmind，如果不做交互也可以考慮sketch，其他就不再一一例舉了，朋友們可以根據(jù)自己的需要進(jìn)行選擇。這里我推薦新手一定要選擇Axure RP，功能強(qiáng)大，有自己的元件庫，也可以自己做元件庫添加到軟件中。

　　Axure RP軟件你會(huì)使用了，其它的軟件也不在話下。

　　二、確定保真程度

　　作為一名產(chǎn)品經(jīng)理，必須得和原型圖打交道，而許多剛?cè)胄械漠a(chǎn)品助理對原型圖的繪制可能有些不太理解，因?yàn)闆]有相關(guān)的項(xiàng)目經(jīng)驗(yàn)，原型圖畫得深入還是粗糙，這個(gè)度不好把握，原型圖繪制是一個(gè)彈性的東西，你可以花很多時(shí)間讓它栩栩如生，有視覺有交互，會(huì)讓人覺得你做得非常的精美，但非常耗費(fèi)時(shí)間。

　　不同情況有不同的需求，我們可以通過匯報(bào)對象/項(xiàng)目緊急情況來判定是否需要高保真原型圖。

　　? 如果匯報(bào)對象對互聯(lián)網(wǎng)的理解成本高，公司給到UI、UX等設(shè)計(jì)師支持還較少。那高保真原型圖可以降低溝通成本，讓匯報(bào)對象更直觀了解產(chǎn)品交互邏輯。

　　? 另外，還要看項(xiàng)目的緊急程度，一般都按項(xiàng)目上線時(shí)間倒推估算畫原型的時(shí)間，如果十分充裕的，你可以對你的原型圖精雕細(xì)琢。

　　高保真不管從交互邏輯、視覺展現(xiàn)都更加直觀，對于接收者來說，應(yīng)該沒有人會(huì)拒絕。

　　三、原型圖繪制的一般繪制流程

　　1、思維導(dǎo)圖梳理好架構(gòu)

　　2、visio流程圖梳理業(yè)務(wù)邏輯

　　3、輸出原型

　　? 創(chuàng)建一個(gè)新的原型項(xiàng)目

　　? 利用元件庫搭建組件進(jìn)行原型制作(可以用線條、圖形、圖表、圖標(biāo)等素材)

　　? 保存并分享原型項(xiàng)目

　　4、加交互及相關(guān)文字說明

　　? 頁面的跳轉(zhuǎn)交互，設(shè)置觸發(fā)方式、要跳轉(zhuǎn)的頁面、動(dòng)效和時(shí)長

　　? 頁面的狀態(tài)交互，可以實(shí)現(xiàn)整體頁面內(nèi)的交互動(dòng)畫。狀態(tài)交互可以設(shè)置細(xì)節(jié)，比如組件平滑移動(dòng)的效果，并且可以讓某個(gè)組件的屬性(位置、大小、顏色等)發(fā)生改變。

　　? 加上必要的說明文字，增加可讀性。(有些公司非常喜歡把需求也標(biāo)注在原型圖上)

　　一般來說都是按照這四步來做就可以了，如果業(yè)務(wù)簡單可以忽略前兩條。切記!產(chǎn)品經(jīng)理不要盲目的一上來就畫原型圖，得先列清楚和想清楚之后再動(dòng)手，不然會(huì)容易疏漏一些東西，造成不必要的反工。

　　四、如何提升原型制作效率

　　想在畫原型這件事上提高效率，需要產(chǎn)品、交互或視覺設(shè)計(jì)師根據(jù)產(chǎn)品的品牌定位特性，設(shè)計(jì)一套模板元件，產(chǎn)品設(shè)計(jì)時(shí)就可以直接拖拽完成，定出基調(diào)就容易事半功倍。

　　福利!!!點(diǎn)擊獲取元件庫(PC端常用組件，請私聊作者獲取提取碼及更多元件庫)

　　提升效率從原型制作的工作中盡可以解脫出來，用更多的精力去處理更關(guān)鍵的地方，比如深入業(yè)務(wù)、行業(yè)、用戶、運(yùn)營的研究

　　總之：原型只是一個(gè)傳達(dá)需求的工具，產(chǎn)品最終會(huì)怎樣發(fā)展，都是依戰(zhàn)略、市場、用戶決定的，不會(huì)一勞永逸、也不會(huì)一成不變。