原型的不同階段，含義和作用也各不相同，更加認(rèn)清了原型在工作中的用途，希望對(duì)各位也有所幫助~

不知你有沒(méi)有這樣的經(jīng)歷：為了不讓原型看起來(lái)丑，會(huì)糾結(jié)各種細(xì)節(jié)處理（間距、大小），結(jié)果造成工作周期延長(zhǎng)，精力損失；為了讓原型接近于真實(shí)效果，會(huì)思考各種精致布局，結(jié)果leader來(lái)一句‘你現(xiàn)在做這么好看干嘛，這個(gè)功能都沒(méi)確定好’....在各種階段畫(huà)出了不合適的原型。

所以今天想聊聊‘交互原型’這一話(huà)題，也算是對(duì)自己成長(zhǎng)的一個(gè)總結(jié)和沉淀。

文章目錄：

·原型的不同階段

·原型與用戶(hù)體驗(yàn)的5個(gè)層面

·原型產(chǎn)出的原則

Part1：原型的不同階段

其實(shí)我覺(jué)得畫(huà)原型和做設(shè)計(jì)的理念是一樣的：沒(méi)有好壞，只有是否合適~

當(dāng)產(chǎn)品經(jīng)理/交互設(shè)計(jì)師沒(méi)認(rèn)清當(dāng)前的需求階段時(shí)，無(wú)論你畫(huà)的好不好看，都會(huì)出現(xiàn)一些糟糕的現(xiàn)象：一開(kāi)始就注重細(xì)節(jié)處理、在原型需要重點(diǎn)輸出時(shí)，又忽略功能與邏輯上的思考、在功能未確定時(shí)追求精致頁(yè)面效果...

下面是我對(duì)‘原型’的理解，所繪制用于表示不同階段下的需求特征。

01.想法階段：

在產(chǎn)品需求的初始階段，功能概念都比較模糊，大部分想法都停留在腦海和口述上（工作中典型的場(chǎng)景，如團(tuán)隊(duì)風(fēng)暴、需求討論、會(huì)議評(píng)審）。需要我們不停地理清概念想法，驗(yàn)證需求的合理性、目標(biāo)是否正確。

所以這個(gè)階段的強(qiáng)調(diào)是：產(chǎn)品雛形 - 將我們的想法、概念需求可視化出來(lái)，并加以討論驗(yàn)證。因此，最合適的方式就是用‘草圖’表達(dá)，快速產(chǎn)出快速修改，能即時(shí)看見(jiàn)產(chǎn)品的雛形。

常用‘草圖’勾勒產(chǎn)品雛形，除了可以表達(dá)想法、探索方向外，好處還在于：

a. 能提升你快速思考、驗(yàn)證假設(shè)、優(yōu)化設(shè)計(jì)流程的能力。

b. 能展示你思考問(wèn)題的過(guò)程（設(shè)計(jì)思維），體現(xiàn)專(zhuān)業(yè)能力。

02.修改階段： 

這階段的產(chǎn)品目標(biāo)和方向較為清晰，接下來(lái)需要優(yōu)化原有的概念想法，為產(chǎn)品創(chuàng)建一個(gè)信息架構(gòu)、梳理功能邏輯等工作，方便在需求評(píng)審會(huì)、團(tuán)隊(duì)討論中推動(dòng)產(chǎn)品功能的進(jìn)展。 

該階段強(qiáng)調(diào)：理清目標(biāo) - 根據(jù)用戶(hù)訴求、業(yè)務(wù)目標(biāo)、運(yùn)營(yíng)需要等不同目標(biāo)點(diǎn)，逐步梳理出原型上需要展示哪些功能內(nèi)容（界面布局、信息取舍）。

所以對(duì)產(chǎn)品經(jīng)理/交互設(shè)計(jì)師來(lái)說(shuō)，只需產(chǎn)出一個(gè)大體上看得明白、能理清產(chǎn)品功能的‘中保真原型’即可。方便即時(shí)修改，向產(chǎn)品定型/高保真原型過(guò)渡。

03.確定階段：

到了這個(gè)階段，產(chǎn)品需求的功能布局、信息設(shè)計(jì)已全部確定，這時(shí)一份全面、嚴(yán)謹(jǐn)?shù)?strong>‘高保真原型’就尤為重要。

一方面可以為視覺(jué)同事的UI輸出、開(kāi)發(fā)的落地實(shí)現(xiàn)等提供依據(jù)。另一方面在各種工作場(chǎng)景中，高保真原型都能發(fā)揮很大的作用，如交互評(píng)審、領(lǐng)導(dǎo)過(guò)稿、A/Btest、demo演示等等。

這一階段強(qiáng)調(diào)：細(xì)節(jié)核對(duì) - 因?yàn)殛P(guān)系著UI輸出、界面實(shí)現(xiàn)等工作，所以需要注意各種交互細(xì)節(jié)，以防出現(xiàn)設(shè)計(jì)、流程上的漏洞。

有2個(gè)核對(duì)緯度上的檢查：

a. 規(guī)范對(duì)齊

若團(tuán)隊(duì)內(nèi)部有設(shè)計(jì)規(guī)范時(shí)，一定要對(duì)齊字體大小、顏色、布局、間距等視覺(jué)元素。且能復(fù)用已有樣式就盡量復(fù)用，避免出現(xiàn)“一個(gè)功能，兩種樣式”的情況，如圖：

b. 交互走查

高保真原型輸出后，需要根據(jù)交互自查表，一一梳理原型說(shuō)明是否存在漏洞，以防出現(xiàn)異常流程和內(nèi)容狀態(tài)。

另外，當(dāng)你想要獲得用戶(hù)反饋、測(cè)試你的想法是否為業(yè)務(wù)/用戶(hù)創(chuàng)造價(jià)值時(shí)，盡量使用高保真原型。原因在于：能夠產(chǎn)生真實(shí)的操作效果、給用戶(hù)帶來(lái)‘身臨其境’的瀏覽體驗(yàn)。

最后總結(jié)一下，不同階段的原型用途：

·草圖：快速表達(dá)想法、驗(yàn)證需求、展示思考過(guò)程。

·中保真原型：梳理大體產(chǎn)品框架，繼續(xù)優(yōu)化功能。

·高保真原型：為UI輸出與開(kāi)發(fā)實(shí)現(xiàn)提供依據(jù)、測(cè)試用戶(hù)反饋、制作交互demo、向領(lǐng)導(dǎo)過(guò)稿等等。

Part2：原型和用戶(hù)體驗(yàn)5個(gè)層面

另外我還發(fā)現(xiàn)，結(jié)合‘用戶(hù)體驗(yàn)5個(gè)層面’來(lái)看不同階段的原型，兩者是多么地吻合、有理有據(jù)。

01.戰(zhàn)略層和范圍層 - 草圖

產(chǎn)品想要做什么？如何去滿(mǎn)足戰(zhàn)略目標(biāo)？在構(gòu)思把目標(biāo)和需求轉(zhuǎn)變成功能和內(nèi)容時(shí)，用草圖的方式是極為合適的：快速表達(dá)、即時(shí)驗(yàn)證，能讓概念想法馬上‘可視化’出來(lái)。

02.結(jié)構(gòu)層 - 中保真原型

想法表達(dá)后，需要為產(chǎn)品構(gòu)思一個(gè)具體的框架結(jié)構(gòu)，根據(jù)業(yè)務(wù)目標(biāo)和用戶(hù)訴求，不斷地修改產(chǎn)品功能、信息設(shè)計(jì)，慢慢完成產(chǎn)品的定型。所以這時(shí)候只需產(chǎn)出一個(gè)大體上看得懂、方便修改的中保真原型即可。

03.框架層 - 高保真原型

這是原型設(shè)計(jì)的最后階段，產(chǎn)品關(guān)系已理清、功能內(nèi)容已確定。這階段注重原型的界面細(xì)節(jié)處理，如梳理異常流程、信息的不同狀態(tài)、是否對(duì)齊規(guī)范等等，以便后期的界面實(shí)現(xiàn)，所以一份高保真原型就尤為重要了。

04.表現(xiàn)層 - UI效果圖

原型確定后，接下就是UI優(yōu)化階段了，這時(shí)候產(chǎn)品的最終效果也就出來(lái)了。產(chǎn)品的下次功能迭代，也是根據(jù)此UI效果圖的基礎(chǔ)上進(jìn)行原型優(yōu)化、修改。

Part3：交互原型的原則

最后簡(jiǎn)單說(shuō)下，原型產(chǎn)出的幾個(gè)原則：‘使用灰色圖’和‘復(fù)用已有樣式’，避免在今后工作上踩坑：

01.使用灰色圖

原型就要有原型的樣子，大面積的彩色布局，很容易讓人覺(jué)得這是UI效果圖（視覺(jué)同事可不背這個(gè)鍋），尤其是在交互評(píng)審會(huì)上，這種細(xì)節(jié)更應(yīng)該注意。

02. 復(fù)用已有樣式

這個(gè)上面已經(jīng)說(shuō)了，能復(fù)用樣式就復(fù)用，避免出現(xiàn)“一個(gè)功能 兩種樣式”的情況，否則和視覺(jué)、開(kāi)發(fā)同事對(duì)接原型時(shí)，會(huì)造成一定的理解干擾。

總結(jié)：

以上對(duì)交互原型的一些見(jiàn)解，若有描述得不當(dāng)請(qǐng)多指教，下面是總結(jié)文件（轉(zhuǎn)發(fā)截圖給我可領(lǐng)?。?。

文章來(lái)源：UI中國(guó)