畫(huà)原型圖，是產(chǎn)品設(shè)計(jì)過(guò)程中的重頭戲。一個(gè)優(yōu)秀的原型圖，能把設(shè)計(jì)理念以視覺(jué)的形式呈現(xiàn)出來(lái)，讓團(tuán)隊(duì)感受產(chǎn)品的交互和體驗(yàn)，明確下一步要做什么。那么，怎樣才能畫(huà)出高質(zhì)量的原型圖呢？下面就來(lái)介紹幾招實(shí)用的技巧。

1、明確目標(biāo)和需求

首先，得先弄清需求。搞明白產(chǎn)品要解決的問(wèn)題和目標(biāo)用戶(hù)是誰(shuí)，對(duì)畫(huà)原型很關(guān)鍵。和團(tuán)隊(duì)把需求討論清楚，明確主要的功能和目的，才能正確傳達(dá)設(shè)計(jì)意圖。

2、構(gòu)建用戶(hù)故事和用戶(hù)流程

然后，通過(guò)用戶(hù)故事和流程圖勾勒出用戶(hù)的使用場(chǎng)景和路徑。用戶(hù)故事描述典型的使用案例，流程圖展示用戶(hù)的交互步驟。這些都是轉(zhuǎn)化為原型設(shè)計(jì)的好材料。下方的設(shè)計(jì)資源是來(lái)自即時(shí)設(shè)計(jì)資源廣場(chǎng)中 Ant Design 分享的【 AntUX 頁(yè)面線(xiàn)框圖模板】，這套 web 端站點(diǎn)地圖模板資源，作品資源中展示了低保真與線(xiàn)框圖的頁(yè)面布局、典型頁(yè)面模板，在設(shè)計(jì)用戶(hù)流、產(chǎn)品架構(gòu)、邏輯圖的時(shí)候可以復(fù)用該作品資源。

https://js.design/community?category=detail&type=resource&id=5ee1bcb57e05ed5002fe1dfd&source=bz&plan=yzbz08081

3、畫(huà)低保真度草圖

有了大體框架，可以先通過(guò)簡(jiǎn)單的手繪來(lái)輸出構(gòu)思，做一些低保真的原型草圖。在這一步，重點(diǎn)是快速驗(yàn)證設(shè)計(jì) idea, 而不需要太多細(xì)節(jié)。草圖算是原型的敲門(mén)磚，找到主要痛點(diǎn)之后再深入。下方的設(shè)計(jì)資源是來(lái)自即時(shí)設(shè)計(jì)資源廣場(chǎng)中 Kishore 分享的【低保真App線(xiàn)框圖設(shè)計(jì)模板】，這套制作精良的電商類(lèi)移動(dòng)端線(xiàn)框圖資源，作品資源中展示了「登錄注冊(cè)」流程，展示了「商品列表」、「瀑布流」、「?jìng)€(gè)人主頁(yè)」等核心頁(yè)面，在設(shè)計(jì)同類(lèi)型APP的線(xiàn)框圖或頁(yè)面時(shí)，可以參考復(fù)用該作品資源的版式布局。

https://js.design/community?category=detail&type=resource&id=5ee1bcb57e05ed5002fe1e17&source=bz&plan=yzbz08081

4、使用原型設(shè)計(jì)工具

接下來(lái)就要?jiǎng)诱娓竦模_(kāi)啟原型設(shè)計(jì)工具吧。Axure、Sketch、Figma 等都很好用，選一個(gè)你熟悉的工具開(kāi)始畫(huà)原型。這時(shí)要注重產(chǎn)品的核心功能和用戶(hù)體驗(yàn)，畫(huà)出關(guān)鍵的交互流程和界面來(lái)。

例如下方這個(gè)插件，是來(lái)自即時(shí)設(shè)計(jì)插件廣場(chǎng)中的線(xiàn)框圖插件，提供了快速繪制低保真界面圖的功能，它內(nèi)置了兩種低保真風(fēng)格模板：線(xiàn)框圖和灰度圖，設(shè)計(jì)師可以一鍵將高保真界面轉(zhuǎn)換成這兩種低保真樣式。設(shè)計(jì)師無(wú)需單獨(dú)調(diào)整每個(gè)圖層的樣式，就可以快速在不同保真度的線(xiàn)框圖、灰度圖和高保真圖之間切換轉(zhuǎn)換，以便嘗試不同的界面方案。

https://js.design/community?category=detail&type=plugin&id=62b3109292fb88262035efb3&source=bz&plan=yzbz08081

5、進(jìn)行用戶(hù)測(cè)試和迭代

原型完成后，一定要讓用戶(hù)測(cè)試一下，收集真實(shí)的使用感受。問(wèn)題和改進(jìn)意見(jiàn)都寶貴，可以作為進(jìn)一步迭代的依據(jù)。

6、與團(tuán)隊(duì)溝通和分享

最后，把原型和團(tuán)隊(duì)分享，討論評(píng)審。作為產(chǎn)品設(shè)計(jì)的重要組成部分，原型可以促進(jìn)團(tuán)隊(duì)之間的溝通和理解，也可以成為說(shuō)服決策者的有力工具。

簡(jiǎn)而言之，畫(huà)原型就是把設(shè)計(jì)轉(zhuǎn)化為交互式的藍(lán)圖和體驗(yàn)樣機(jī)。搞清需求，畫(huà)流程圖，使用設(shè)計(jì)工具，進(jìn)行用戶(hù)測(cè)試，都可以幫助制作出高質(zhì)量的原型。記住保持靈活，根據(jù)反饋進(jìn)行適當(dāng)調(diào)整，讓原型圖成為設(shè)計(jì)過(guò)程中強(qiáng)大的利器。