不知道你有沒有這樣的經歷：為了不讓原型圖看起來太丑，會糾結各種細節處理（間距、大小），結果造成工作周期延長，精力損失。為了讓原型接近于真實效果，會思考各種精致布局，結果 leader 來一句「你現在做這么好看干嘛，這個功能都沒確定好。」

所以今天想聊聊「交互原型」這一話題，也算是對自己成長的一個總結和沉淀。

原型的不同階段

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

當產品經理/交互設計師沒認清當前的需求階段時，無論你畫的好不好看，都會出現一些糟糕的現象：一開始就注重細節處理；在原型需要重點輸出時，又忽略功能與邏輯上的思考；在功能未確定時追求精致頁面效果......

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

1. 想法階段

在產品需求的初始階段，功能概念都比較模糊，大部分想法都停留在腦海和口述上。這就需要我們不停地理清概念想法，驗證需求的合理性、目標是否正確。

所以這個階段強調的是：產品雛形。將我們的想法、概念需求可視化，并加以討論驗證。因此，最合適的方式就是用「草圖」表達，快速產出快速修改，能即時看見產品的雛形。

常用「草圖」勾勒產品雛形，除了可以表達想法、探索方向外，好處還有：

• 能提升你快速思考、驗證假設、優化設計流程的能力。
• 能展示你思考問題的過程（設計思維），體現專業能力。

2. 修改階段

這階段的產品目標和方向較為清晰，接下來需要優化原有的概念想法，為產品創建一個信息架構，梳理功能邏輯等工作，方便在需求評審會、團隊討論中推動產品功能的進展。

該階段強調：理清目標。根據用戶訴求、業務目標、運營需要等不同目標點，逐步梳理出原型上需要展示的功能內容（界面布局、信息取舍）。

所以對產品經理/交互設計師來說，只需產出一個大體上看得明白，能理清產品功能的「中保真原型」即可。方便即時修改，向產品定型/高保真原型過渡。

3. 確定階段

到了這個階段，產品需求的功能布局、信息設計已全部確定，這時一份全面、嚴謹的「高保真原型」就尤為重要。

一方面可以為視覺同事的 UI 輸出、開發的落地實現等提供依據。另一方面在各種工作場景中，高保真原型都能發揮很大的作用，如交互評審、領導過稿、A/B test、demo 演示等等。

這一階段強調：細節核對。因為關系著 UI 輸出、界面實現等工作，所以需要注意各種交互細節，以防出現設計、流程上的漏洞。

2個核對緯度上的檢查

規范對齊：若團隊內部有設計規范時，一定要對齊字體大小、顏色、布局、間距等視覺元素。且能復用已有樣式就盡量復用，避免出現「一個功能，兩種樣式」的情況，如圖：

交互走查：高保真原型輸出后，需要根據交互自查表，一一梳理原型說明是否存在漏洞，以防出現異常流程和內容狀態。

另外，當你想要獲得用戶反饋，測試你的想法是否為業務/用戶創造價值時，盡量使用高保真原型。原因在于：能夠產生真實的操作效果，給用戶帶來「身臨其境」的瀏覽體驗。

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

• 草圖：快速表達想法、驗證需求、展示思考過程。
• 中保真原型：梳理大體產品框架，繼續優化功能。
• 高保真原型：為 UI 輸出與開發實現提供依據、測試用戶反饋、制作交互 demo、向領導過稿等等。

原型和用戶體驗5個層面

另外我還發現，結合「用戶體驗5個層面」來看不同階段的原型，兩者是吻合，且有理有據的。

1. 戰略層和范圍層 - 草圖

產品想要做什么？如何去滿足戰略目標？在構思把目標和需求轉變成功能和內容時，用草圖的方式是極為合適的：快速表達、即時驗證，能讓概念想法馬上「可視化」。

2. 結構層 - 中保真原型

想法表達后，需要為產品構思一個具體的框架結構，根據業務目標和用戶訴求，不斷地修改產品功能、信息設計，慢慢完成產品的定型。所以這時候只需產出一個大體上看得懂、方便修改的中保真原型即可。

3. 框架層 - 高保真原型

這是原型設計的最后階段，產品關系已理清、功能內容已確定。這階段注重原型的界面細節處理，如梳理異常流程、信息的不同狀態、是否對齊規范等等，以便后期的界面實現，所以一份高保真原型就尤為重要了。

4. 表現層 - UI效果圖

原型確定后，接下就是 UI 優化階段了，這時候產品的最終效果也就出來了。產品的下次功能迭代，也是根據此 UI 效果圖的基礎上進行原型優化、修改。

交互原型的原則

最后簡單說下，原型產出的幾個原則：「使用灰色圖」和「復用已有樣式」，避免在今后工作上踩坑。

1. 使用灰色圖

原型就要有原型的樣子，大面積的彩色布局，很容易讓人覺得這是 UI 效果圖，尤其是在交互評審會上，這種細節更應該注意。

2. 復用已有樣式

這個上面已經說了，能復用樣式就復用，避免出現「一個功能、兩種樣式」的情況，否則和視覺、開發同事對接原型時，會造成一定的理解干擾。

總結

以上對交互原型的一些見解，若有描述得不當請多指教，下面是總結文件。

歡迎關注作者的微信公眾號：「和出此嚴」