開門見山，直接跟大家分享一些關(guān)于APP原型設(shè)計(jì)的三種表現(xiàn)方式。讓大家對(duì)原型圖有一定的了解。

APP 原型設(shè)計(jì)的表現(xiàn)手法主要有三種：手繪原型、灰模原型、交互原型。

從工作效率的角度考慮，25學(xué)堂小編 非常建議先通過手繪的形式快速在草紙上繪制出產(chǎn)品的原型，推演和討論方案的可行性。當(dāng)方案的可行性被驗(yàn)證之后，我們?cè)俑鶕?jù)個(gè)人習(xí)慣或團(tuán)隊(duì)要求，通過原型軟件工具進(jìn)行更深入的設(shè)計(jì)。

①?手繪原型

因?yàn)樵鸵脖环Q為線框圖，因此手繪是最簡單直接的方法，也是最快速的表現(xiàn)產(chǎn)品輪廓的手法。

手繪原型在初期驗(yàn)證想法時(shí)非常高效，也方便討論和重構(gòu)，同時(shí)也適合敏捷開發(fā)時(shí)快速出原型。

如下圖所示：

如果你喜歡手繪風(fēng)格的APP產(chǎn)品經(jīng)理或者是APP UI設(shè)計(jì)師，可以用這個(gè)工具幫助你實(shí)現(xiàn)。

Balsamiq Mockups 是一款基于Adodb AIR的優(yōu)秀跨平臺(tái)原型設(shè)計(jì)工具，提供了豐富的各種常用元件，可快速制作出手繪風(fēng)格的原型圖。

之前25學(xué)堂推薦的：

1、UI/UX設(shè)計(jì)師及產(chǎn)品經(jīng)理必備的APP手繪草圖模板

2、移動(dòng)產(chǎn)品經(jīng)理入門：繪制手機(jī)界面交互框架流程

所以，手繪原型圖是屬于低保真框線圖。

②?灰模原型 ? 也就是線框圖為主的原型圖

灰模原型是由圖形設(shè)計(jì)軟件制作而成，最常用的軟件是Photoshop和Fireworks，相對(duì)手繪原型，灰模更加清晰和整潔，也適用于正式場合的PPT形式宣講。

灰模原型也可以稱之為平面原型，所以如果不會(huì)使用圖形軟件也可以使用Axure?RP設(shè)計(jì)，相比交互原型，灰模原型只是缺少交互效果，僅僅是將產(chǎn)品需求以線框結(jié)構(gòu)的方式展示出來，讓產(chǎn)品需求更加規(guī)整的直觀展現(xiàn)。

如下圖所示：

③?交互原型

交互原型是使用原型設(shè)計(jì)軟件完成的原型，常用軟件是Axure?RP，通常情況交互原型的設(shè)計(jì)要早于產(chǎn)品需求文檔，是產(chǎn)品經(jīng)理想法推演的重要一步。

通過Axure?RP之類的交互原型軟件制作出來的產(chǎn)品原型，在功能需求和交互需求的表現(xiàn)上，幾乎和正式產(chǎn)品是一致的，所以有時(shí)交互原型也被稱為產(chǎn)品Demo版。

用Axure生成鏈接即可訪問預(yù)覽交互效果，

操作是：點(diǎn)擊Axure右上角的Axure Share，然后就可以把原型圖發(fā)布成鏈接了。

另外，25學(xué)堂推薦一下axure中文社區(qū)的可以免費(fèi)上傳和共享axure原型圖的地址：

share.axure.org

今天25學(xué)堂分享一個(gè)高保真的交互原型圖：

通常情況下交互原型是產(chǎn)品經(jīng)理與交互設(shè)計(jì)師共同討論確定，然后由交互設(shè)計(jì)師制作，但是絕大多數(shù)的公司是沒有交互設(shè)計(jì)師這個(gè)職位的，因此這類工作最終是由產(chǎn)品經(jīng)理來負(fù)責(zé)的。

交互原型屬于高保真原型圖了，這里25學(xué)堂提供高保真的APP原型設(shè)計(jì)模板PSD素材下載

最后，以上三種方法并不是漸進(jìn)的流程，而是三種原型設(shè)計(jì)的方法，具體取決于你的APP產(chǎn)品需求和團(tuán)隊(duì)人員要求。

對(duì)于移動(dòng)端APP產(chǎn)品經(jīng)理來說，原型設(shè)計(jì)是為了幫助我們細(xì)致的考慮方案，并論證方案的可行性，同時(shí)也是為了產(chǎn)品宣講時(shí)讓聽眾能夠清晰直觀的了解產(chǎn)品，避免抽象的語言描述導(dǎo)致聽眾理解困難和理解偏差。

產(chǎn)品原型也是為了確保產(chǎn)品在執(zhí)行過程中，是按產(chǎn)品經(jīng)理最初設(shè)想的需求和期望完成的，因此產(chǎn)品經(jīng)理的原型是沒有很高的要求的，只要對(duì)方能夠聽懂看懂就可以了，所以使用手繪原型是最高效率的方法。

以上這些只是原作者跟25學(xué)堂一起分享給大家的關(guān)于原型圖的基本知識(shí)點(diǎn)。