不知道你有沒有出現(xiàn)過這種情況，在在各種階段畫出了不合適的原型。那么，本文就跟大家聊聊‘交互原型’這一話題，enjoy~

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

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

Part 1：原型的不同階段

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

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

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

1. 想法階段

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

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

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

• 能提升你快速思考、驗(yàn)證假設(shè)、優(yōu)化設(shè)計(jì)流程的能力。
• 能展示你思考問題的過程（設(shè)計(jì)思維），體現(xiàn)專業(yè)能力。

2. 修改階段

這階段的產(chǎn)品目標(biāo)和方向較為清晰，接下來需要優(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ù)用戶訴求、業(yè)務(wù)目標(biāo)、運(yùn)營需要等不同目標(biāo)點(diǎn)，逐步梳理出原型上需要展示哪些功能內(nèi)容（界面布局、信息取舍）。

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

3. 確定階段

到了這個(gè)階段，產(chǎn)品需求的功能布局、信息設(shè)計(jì)已全部確定，這時(shí)一份全面、嚴(yán)謹(jǐn)?shù)?strong>‘高保真原型’就尤為重要。一方面可以為視覺同事的UI輸出、開發(fā)的落地實(shí)現(xiàn)等提供依據(jù)。另一方面在各種工作場景中，高保真原型都能發(fā)揮很大的作用，如交互評(píng)審、領(lǐng)導(dǎo)過稿、A/Btest、demo演示等等。

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

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

（1）規(guī)范對齊

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

（2）交互走查

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

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

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

• 草圖：快速表達(dá)想法、驗(yàn)證需求、展示思考過程。
• 中保真原型：梳理大體產(chǎn)品框架，繼續(xù)優(yōu)化功能。
• 高保真原型：為UI輸出與開發(fā)實(shí)現(xiàn)提供依據(jù)、測試用戶反饋、制作交互demo、向領(lǐng)導(dǎo)過稿等等。

Part 2：原型和用戶體驗(yàn)5個(gè)層面

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

1. 戰(zhàn)略層和范圍層：草圖

產(chǎn)品想要做什么？如何去滿足戰(zhàn)略目標(biāo)？

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

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

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

3. 框架層：高保真原型

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

4. 表現(xiàn)層：UI效果圖

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

Part 3：交互原型的原則

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

1. 使用灰色圖

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

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

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

總結(jié)

以上對交互原型的一些見解，若有描述得不當(dāng)請多指教，下面是總結(jié)圖片。若文章如果有幫到你、啟發(fā)你一些思路的，請動(dòng)動(dòng)手指關(guān)注我，感激不盡！

相關(guān)閱讀

大廠產(chǎn)品告訴你：8個(gè)技巧強(qiáng)化交互表現(xiàn)

“信息引導(dǎo)”超全總結(jié)，讓你的設(shè)計(jì)有理有據(jù)

系統(tǒng)性地教你：如何設(shè)計(jì)產(chǎn)品的信息引導(dǎo)

以BAT產(chǎn)品為例，不再零碎地揣摩‘用戶心理’

干貨：7個(gè)案例為你深度剖析用戶心理

作者：和出此嚴(yán)，微信ID：elffzh，公眾號(hào)：和出此嚴(yán)

本文由 @和出此嚴(yán) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash, 基于CC0協(xié)議