產(chǎn)品需求文檔的寫(xiě)作(三) – 原型設(shè)計(jì)(手繪原型,灰模原型,交互原型)

3 評(píng)論 163926 瀏覽 456 收藏 8 分鐘

上一篇文章我們通過(guò)思維導(dǎo)圖將想法進(jìn)行了結(jié)構(gòu)化梳理,接下來(lái)我們就需要進(jìn)行方案的可行性推演,驗(yàn)證產(chǎn)品功能是否可行,預(yù)估項(xiàng)目要花多少人力物力,因此我們就要通過(guò)原型設(shè)計(jì)進(jìn)行相關(guān)需求的論證。一開(kāi)始就撰寫(xiě)PRD文檔,我們很難對(duì)產(chǎn)品進(jìn)行各方面的評(píng)估,也無(wú)法得知方案的可行性,并且無(wú)法直觀(guān)細(xì)致的考慮產(chǎn)品。

原型設(shè)計(jì)是幫助我們更細(xì)致的思考,并做各項(xiàng)需求的評(píng)估,同時(shí)也是將自己腦海里的想法進(jìn)行輸出,通過(guò)原型設(shè)計(jì)后,我們就可以進(jìn)行產(chǎn)品宣講了。相對(duì)于之前抽象的文字描述,原型則更加清晰產(chǎn)品的需求,設(shè)計(jì)和技術(shù)人員或者老板也能夠更加直觀(guān)的了解到產(chǎn)品意圖。

原型設(shè)計(jì)是將結(jié)構(gòu)化的需求進(jìn)行框架化,因此原型也被稱(chēng)為線(xiàn)框圖,具體的表現(xiàn)手法有很多種,相關(guān)的輔助軟件也有很多,例如:Axure RP、Balsamiq Mockups、UIDesigner等等。

當(dāng)?shù)搅嗽驮O(shè)計(jì)這一步時(shí),已經(jīng)不僅僅是構(gòu)思了,我們需要更加深入的了解每個(gè)頁(yè)面上的元素和這些元素的屬性。例如按鈕元素,我們就需要考慮這個(gè)按鈕的功能,并且這個(gè)功能操作后帶給后端和前端的反饋。舉例這個(gè)按鈕是注冊(cè)會(huì)員按鈕,用戶(hù)操作后,第一步邏輯是驗(yàn)證用戶(hù)輸入的信息是否合法,不合法則給出前端反饋;合法則和后端通信驗(yàn)證是否已經(jīng)存在同樣信息,已經(jīng)存在則給出前端反饋,不存在則進(jìn)入下一步,注冊(cè)成功;注冊(cè)成功后的反饋是跳轉(zhuǎn)頁(yè)面,還是彈出層提示用戶(hù)完善資料,這些都是需要更詳情的考慮的。當(dāng)然這些更細(xì)致的思考是留在需求文檔撰寫(xiě)時(shí)的,而此時(shí)我們需要做的就是把這些元素通過(guò)原型表現(xiàn)出來(lái)。

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

1、手繪原型

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

手繪原型

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

2、灰模原型

灰模原型是由圖形設(shè)計(jì)軟件制作而成,我最常用的軟件是PhotoShop和FireWorks,相對(duì)手繪原型,灰模更加清晰和整潔,也適用于宣講,但是需要產(chǎn)品人員熟悉使用圖形設(shè)計(jì)軟件(如下圖)。

iPad灰模原型

灰模原型常用于移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì),由于移動(dòng)產(chǎn)品的交互需求復(fù)雜,原型設(shè)計(jì)軟件難以高效的表達(dá)需求,因此移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)通常是灰模原型加交互文檔組合成PRD文檔。(過(guò)幾天我再詳情講講移動(dòng)互聯(lián)網(wǎng)的產(chǎn)品設(shè)計(jì))

手機(jī)版灰模原型

3、交互原型

交互原型是使用原型設(shè)計(jì)軟件完成的原型,常用軟件是Axure RP,通常情況交互原型的設(shè)計(jì)僅早于PRD文檔,是產(chǎn)品經(jīng)理想法推演的最后一步。通過(guò)Axure PR之類(lèi)的交互原型軟件制作出來(lái)的產(chǎn)品原型,在功能需求與交互需求的表現(xiàn)和正式產(chǎn)品幾乎是一致的,所以有時(shí)交互原型也被稱(chēng)為產(chǎn)品Demo版。

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

關(guān)于A(yíng)xure PR制作交互原型我在這里就不多介紹了,網(wǎng)絡(luò)上有很多這類(lèi)的教程,我個(gè)人建議是學(xué)習(xí)Axure PR時(shí),隨便了解一下網(wǎng)站模板的結(jié)構(gòu),這樣可以幫助你更加結(jié)構(gòu)化使用Axure PR。(推薦一個(gè)我之前畫(huà)的原型,網(wǎng)站已經(jīng)關(guān)了,原型當(dāng)時(shí)設(shè)計(jì)的也比較簡(jiǎn)陋,有很多缺失的頁(yè)面,僅供參考看看。)

分享微世界原型Demo(源文件)http://tangjie.me/blog/11.html

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

產(chǎn)品經(jīng)理設(shè)計(jì)原型是為了幫助自己更細(xì)致的思考方案的可行性,也是為了給別人講解的時(shí)候,讓聽(tīng)眾能夠清晰直觀(guān)的了解產(chǎn)品,同時(shí)也是為了確保產(chǎn)品在執(zhí)行過(guò)程中,是按產(chǎn)品經(jīng)理最初設(shè)想的需求和期望完成的。因此產(chǎn)品經(jīng)理的原型是沒(méi)有很高的要求的,只要對(duì)方能夠聽(tīng)懂看懂,使用手繪原型是最高效率的方法。

最后推薦幾篇我以前寫(xiě)的文章。

網(wǎng)站產(chǎn)品設(shè)計(jì):
產(chǎn)品經(jīng)理需要知道的SEO知識(shí)
網(wǎng)站產(chǎn)品和SEO的融合

移動(dòng)產(chǎn)品設(shè)計(jì):
移動(dòng)產(chǎn)品之體驗(yàn)設(shè)計(jì)(PPT)
產(chǎn)品設(shè)計(jì)原則 之 體驗(yàn)設(shè)計(jì)(移動(dòng)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì))

下一篇我將講述產(chǎn)品需求文檔的寫(xiě)作要求和模板格式,并且分享一些我的案例文檔。

產(chǎn)品需求文檔(PRD)的寫(xiě)作:
產(chǎn)品需求文檔(PRD)的寫(xiě)作方法(文章的摘要介紹)
產(chǎn)品需求文檔的寫(xiě)作(一) – 寫(xiě)前準(zhǔn)備(信息結(jié)構(gòu)圖)
產(chǎn)品需求文檔的寫(xiě)作(二) – 梳理需求(產(chǎn)品結(jié)構(gòu)圖和用戶(hù)流程圖)
產(chǎn)品需求文檔的寫(xiě)作(三) – 原型設(shè)計(jì)(手繪原型,灰模原型,交互原型)
產(chǎn)品需求文檔的寫(xiě)作(四) – 撰寫(xiě)文檔(PRD文檔)
產(chǎn)品需求文檔的寫(xiě)作(五) – 用例文檔(UML用例圖、流程圖)

本文出自 產(chǎn)品經(jīng)理 唐杰

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. Axure RP,不是PR

    來(lái)自山東 回復(fù)
  2. :mrgreen:

    來(lái)自江蘇 回復(fù)
  3. ??

    來(lái)自廣東 回復(fù)