2019-8-29 資深UI設計者
原型的不同階段，含義和作用也各不相同，更加認清了原型在工作中的用途，希望對各位也有所幫助~
不知你有沒有這樣的經歷：為了不讓原型看起來丑，會糾結各種細節處理（間距、大小），結果造成工作周期延長，精力損失；為了讓原型接近于真實效果，會思考各種精致布局，結果leader來一句‘你現在做這么好看干嘛，這個功能都沒確定好’....在各種階段畫出了不合適的原型。
所以今天想聊聊‘交互原型’這一話題，也算是對自己成長的一個總結和沉淀。
文章目錄：
·原型的不同階段
·原型與用戶體驗的5個層面
·原型產出的原則
Part1：原型的不同階段
其實我覺得畫原型和做設計的理念是一樣的：沒有好壞，只有是否合適~
當產品經理/交互設計師沒認清當前的需求階段時，無論你畫的好不好看，都會出現一些糟糕的現象：一開始就注重細節處理、在原型需要重點輸出時，又忽略功能與邏輯上的思考、在功能未確定時追求精致頁面效果...
下面是我對‘原型’的理解，所繪制用于表示不同階段下的需求特征。
01.想法階段：
在產品需求的初始階段，功能概念都比較模糊，大部分想法都停留在腦海和口述上（工作中典型的場景，如團隊風暴、需求討論、會議評審）。需要我們不停地理清概念想法，驗證需求的合理性、目標是否正確。
所以這個階段的強調是：產品雛形 - 將我們的想法、概念需求可視化出來，并加以討論驗證。因此，最合適的方式就是用‘草圖’表達，快速產出快速修改，能即時看見產品的雛形。
常用‘草圖’勾勒產品雛形，除了可以表達想法、探索方向外，好處還在于：
a. 能提升你快速思考、驗證假設、優化設計流程的能力。
b. 能展示你思考問題的過程（設計思維），體現專業能力。
02.修改階段：
這階段的產品目標和方向較為清晰，接下來需要優化原有的概念想法，為產品創建一個信息架構、梳理功能邏輯等工作，方便在需求評審會、團隊討論中推動產品功能的進展。
該階段強調：理清目標 - 根據用戶訴求、業務目標、運營需要等不同目標點，逐步梳理出原型上需要展示哪些功能內容（界面布局、信息取舍）。
所以對產品經理/交互設計師來說，只需產出一個大體上看得明白、能理清產品功能的‘中保真原型’即可。方便即時修改，向產品定型/高保真原型過渡。
03.確定階段：
到了這個階段，產品需求的功能布局、信息設計已全部確定，這時一份全面、嚴謹的‘高保真原型’就尤為重要。
一方面可以為視覺同事的UI輸出、開發的落地實現等提供依據。另一方面在各種工作場景中，高保真原型都能發揮很大的作用，如交互評審、領導過稿、A/Btest、demo演示等等。
這一階段強調：細節核對 - 因為關系著UI輸出、界面實現等工作，所以需要注意各種交互細節，以防出現設計、流程上的漏洞。
有2個核對緯度上的檢查：
a. 規范對齊
若團隊內部有設計規范時，一定要對齊字體大小、顏色、布局、間距等視覺元素。且能復用已有樣式就盡量復用，避免出現“一個功能，兩種樣式”的情況，如圖：
b. 交互走查
高保真原型輸出后，需要根據交互自查表，一一梳理原型說明是否存在漏洞，以防出現異常流程和內容狀態。
另外，當你想要獲得用戶反饋、測試你的想法是否為業務/用戶創造價值時，盡量使用高保真原型。原因在于：能夠產生真實的操作效果、給用戶帶來‘身臨其境’的瀏覽體驗。
最后總結一下，不同階段的原型用途：
·草圖：快速表達想法、驗證需求、展示思考過程。
·中保真原型：梳理大體產品框架，繼續優化功能。
·高保真原型：為UI輸出與開發實現提供依據、測試用戶反饋、制作交互demo、向領導過稿等等。
Part2：原型和用戶體驗5個層面
另外我還發現，結合‘用戶體驗5個層面’來看不同階段的原型，兩者是多么地吻合、有理有據。
01.戰略層和范圍層 - 草圖
產品想要做什么？如何去滿足戰略目標？在構思把目標和需求轉變成功能和內容時，用草圖的方式是極為合適的：快速表達、即時驗證，能讓概念想法馬上‘可視化’出來。
02.結構層 - 中保真原型
想法表達后，需要為產品構思一個具體的框架結構，根據業務目標和用戶訴求，不斷地修改產品功能、信息設計，慢慢完成產品的定型。所以這時候只需產出一個大體上看得懂、方便修改的中保真原型即可。
03.框架層 - 高保真原型
這是原型設計的最后階段，產品關系已理清、功能內容已確定。這階段注重原型的界面細節處理，如梳理異常流程、信息的不同狀態、是否對齊規范等等，以便后期的界面實現，所以一份高保真原型就尤為重要了。
04.表現層 - UI效果圖
原型確定后，接下就是UI優化階段了，這時候產品的最終效果也就出來了。產品的下次功能迭代，也是根據此UI效果圖的基礎上進行原型優化、修改。
Part3：交互原型的原則
最后簡單說下，原型產出的幾個原則：‘使用灰色圖’和‘復用已有樣式’，避免在今后工作上踩坑：
01.使用灰色圖
原型就要有原型的樣子，大面積的彩色布局，很容易讓人覺得這是UI效果圖（視覺同事可不背這個鍋），尤其是在交互評審會上，這種細節更應該注意。
02. 復用已有樣式
這個上面已經說了，能復用樣式就復用，避免出現“一個功能 兩種樣式”的情況，否則和視覺、開發同事對接原型時，會造成一定的理解干擾。
總結：
以上對交互原型的一些見解，若有描述得不當請多指教，下面是總結文件（轉發截圖給我可領取）。
文章來源：UI中國
