第四章:產(chǎn)品設(shè)計(jì)(2.3)PRD寫作 – 原型設(shè)計(jì)(界面線框圖)

5 評論 99777 瀏覽 175 收藏 8 分鐘

2.3、原型設(shè)計(jì)(界面線框圖)

當(dāng)我們逐漸清晰了產(chǎn)品的需求后,并梳理了產(chǎn)品的各個(gè)頻道及頁面,那么這一步就要開始驗(yàn)證這些想法的具體界面表現(xiàn)和方案的可行性了。

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

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

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

原型設(shè)計(jì)的表現(xiàn)手法主要有三種:手繪原型、灰模原型、交互原型。從工作效率的角度考慮,我非常建議先通過手繪的形式快速在草紙上繪制出產(chǎn)品的原型,推演和討論方案的可行性。當(dāng)方案的可行性被驗(yàn)證之后,我們再根據(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í)快速出原型。

② 灰模原型

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

灰模原型
phone

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

shu-23

③ 交互原型

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

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

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

對于產(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)理的原型是沒有很高的要求的,只要對方能夠聽懂看懂就可以了,所以使用手繪原型是最高效率的方法。

產(chǎn)品需求文檔(PRD文檔)系列導(dǎo)讀

2、產(chǎn)品需求文檔寫作

2.1、羅列信息(信息結(jié)構(gòu)圖)

2.2、梳理需求(產(chǎn)品結(jié)構(gòu)圖)

2.3、原型設(shè)計(jì)(界面線框圖)

2.4、用例模型(產(chǎn)品用例圖)

2.5、邏輯流程(功能流程圖)

2.6、需求文檔(PRD文檔)

本章索引:

第四章:產(chǎn)品設(shè)計(jì)(1) – 產(chǎn)品需求文檔(PRD)介紹

第四章:產(chǎn)品設(shè)計(jì)(2.1)PRD寫作 – 羅列信息(信息結(jié)構(gòu)圖)

第四章:產(chǎn)品設(shè)計(jì)(2.2)PRD寫作 – 梳理需求(產(chǎn)品結(jié)構(gòu)圖)

第四章:產(chǎn)品設(shè)計(jì)(2.3)PRD寫作 – 原型設(shè)計(jì)(界面線框圖)

第四章:產(chǎn)品設(shè)計(jì)(2.4)PRD寫作 – 用例模型(產(chǎn)品用例圖)

第四章:產(chǎn)品設(shè)計(jì)(2.5)PRD寫作 – 邏輯流程(功能流程圖)

第四章:產(chǎn)品設(shè)計(jì)(2.6)PRD寫作 – 需求文檔(PRD文檔)

第四章:產(chǎn)品設(shè)計(jì)(4) – 產(chǎn)品設(shè)計(jì)的十條理論

全文索引:

第一章:產(chǎn)品介紹(1~2) – 產(chǎn)品經(jīng)理職業(yè)和職能介紹

第二章:產(chǎn)品入門(1) – 我的入門經(jīng)歷分享

第三章:產(chǎn)品規(guī)劃(1) – 產(chǎn)品規(guī)劃介紹

第四章:產(chǎn)品設(shè)計(jì)(1) – 產(chǎn)品需求文檔(PRD)介紹

第五章:產(chǎn)品管理(1~2) – 產(chǎn)品管理介紹和需求管理方法

第六章:產(chǎn)品工作(1) – 工作環(huán)境介紹

本文為作者?產(chǎn)品經(jīng)理@唐杰?授權(quán)發(fā)布,轉(zhuǎn)載請注明來源于人人都是產(chǎn)品經(jīng)理并附帶本文鏈接。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 快速原型模型。我認(rèn)為給到原型,在原型里增加點(diǎn)文件說明,即可開發(fā)了,那就看開發(fā)聽不聽PM的。還寫那么多就效率慢了,達(dá)不到互聯(lián)網(wǎng)公司的快了。 既然不是互聯(lián)網(wǎng)公司,用瀑布模型好了,文檔驅(qū)動(dòng)。

    來自廣東 回復(fù)
  2. 好吧 我也吐以下,尼瑪怎么收藏按鍵 只有在低端 有

    來自浙江 回復(fù)