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

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

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

文章目錄：

·原型的不同階段

·原型與用戶體驗的5個層面

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

Part1：原型的不同階段

其實我覺得畫原型和做設(shè)計的理念是一樣的：沒有好壞，只有是否合適~

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

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

01.想法階段：

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

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

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

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

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

02.修改階段： 

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

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

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

03.確定階段：

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

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

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

有2個核對緯度上的檢查：

a. 規(guī)范對齊

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

b. 交互走查

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

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

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

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

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

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

Part2：原型和用戶體驗5個層面

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

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

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

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

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

03.框架層 - 高保真原型

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

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

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

Part3：交互原型的原則

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

01.使用灰色圖

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

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

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

總結(jié)：

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

文章來源：UI中國