產品原型,應該畫到什么程度合適?

6 評論 22128 瀏覽 123 收藏 11 分鐘

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

不知你有沒有這樣的經歷:為了不讓原型看起來丑,會糾結各種細節處理(間距、大?。Y果造成工作周期延長,精力損失。為了讓原型接近于真實效果,會思考各種精致布局,結果leader來一句‘你現在做這么好看干嘛,這個功能都沒確定好’……在各種階段畫出了不合適的原型。

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

Part 1:原型的不同階段

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

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

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

1. 想法階段

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

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

常用‘草圖’勾勒產品雛形,除了可以表達想法、探索方向外,好處還在于:

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

2. 修改階段

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

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

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

3. 確定階段

到了這個階段,產品需求的功能布局、信息設計已全部確定,這時一份全面、嚴謹的‘高保真原型’就尤為重要。一方面可以為視覺同事的UI輸出、開發的落地實現等提供依據。另一方面在各種工作場景中,高保真原型都能發揮很大的作用,如交互評審、領導過稿、A/Btest、demo演示等等。

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

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

(1)規范對齊

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

(2)交互走查

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

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

最后總結一下,不同階段的原型用途:

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

Part 2:原型和用戶體驗5個層面

另外我還發現,結合‘用戶體驗5個層面’來看不同階段的原型,兩者是多么地吻合、有理有據。

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

產品想要做什么?如何去滿足戰略目標?

在構思把目標和需求轉變成功能和內容時,用草圖的方式是極為合適的:快速表達、即時驗證,能讓概念想法馬上‘可視化’出來。

2. 結構層:中保真原型

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

3. 框架層:高保真原型

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

4. 表現層:UI效果圖

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

Part 3:交互原型的原則

最后簡單說下,原型產出的幾個原則:‘使用灰色圖’和‘復用已有樣式’,避免在今后工作上踩坑:

1. 使用灰色圖

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

2. 復用已有樣式

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

總結

以上對交互原型的一些見解,若有描述得不當請多指教,下面是總結圖片。若文章如果有幫到你、啟發你一些思路的,請動動手指關注我,感激不盡!

相關閱讀

大廠產品告訴你:8個技巧強化交互表現

“信息引導”超全總結,讓你的設計有理有據

系統性地教你:如何設計產品的信息引導

以BAT產品為例,不再零碎地揣摩‘用戶心理’

干貨:7個案例為你深度剖析用戶心理

 

作者:和出此嚴,微信ID:elffzh,公眾號:和出此嚴

本文由 @和出此嚴 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash, 基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 推薦一個我做的學習網站:
    有蛋案例 youdananli.com
    有多個大廠、各個行業里有意思的設計案例,還有近百條產品/設計知識方法、理論模型
    感興趣的可以看看

    來自廣東 回復
  2. 學習到了

    來自湖南 回復
  3. 2修改階段的第二張圖中的“中保真原型圖”有錯字哦,另外寫的真的很棒,但是在實際工作中我覺得步驟有點多了,其實我們工作中就只有腦圖→高保真,最多在紙上畫一個草圖,中保真真的很少出現。

    來自湖南 回復
  4. 現在交互崗的要求越來越高了,只畫原型不行啊

    來自浙江 回復
  5. 感覺畫的都是中保真圖

    來自山東 回復
  6. 額,個人覺著 低保真/草稿作為個人思路整理,私下進行就好,跟結構功能相似只是輔助自己進行梳理,開發原型做到線框圖就好,不是很理解所謂的中保真到什么程度,高保真在開發中實用性不強,除非是有明確需要,一般很少做高保真。并且隨著職責劃分越來越細,很多互聯網公司產品只產出思路,交互模塊原型都交給UI/UE去做了

    來自浙江 回復