產品經理,為什么必須要會手繪原型?

16 評論 20261 瀏覽 138 收藏 14 分鐘

返璞歸真,其實是一種極簡主義設計理念。在如今的數字時代,設計師可以利用的設計工具不勝枚舉。如果把“返璞歸真”這種設計理念運用到設計過程中,那將是什么體驗?

在如今的數字設計時代,我們可以借助于各種工具來設計原型。但是對用戶體驗設計師而言,紙和筆才是最有用的工具。

在早期的構思過程中,因為需要一個個驗證構思概念并選擇確認最終所選,手繪原型圖是非常實用的一種方式。通過手繪,可以快速地將想法轉化成實際內容,并快速測試和驗證。

這篇文章,將向大家簡要介紹手繪原型,并推薦3種實用的測試建議。

手繪原型的利弊

就手繪原型的好處而言,大概有如下5個方面:

  1. 趣味性很高。手繪原型應該要快,而且有足夠的趣味性。如果手繪過程很痛苦,而且畫得很慢的話,那肯定是整個原型設計流程出了問題。一定要快速重復和迭代草稿,一般而言只需要幾分鐘就可以完成簡單的原型設計。
  2. 成本低。手繪原型一點也不貴,基本的工具只需要紙和筆。相比之下,數字原型設計工具雖然價格不等,但基本上大多數工具都需要一次性購買或者按期訂閱。
  3. 精力消耗少。如果通過數字工具花幾個小時設計一個原型,放棄這個原型想法的時候多多少少都有點不舍得。但是如果用手繪原型的方式,只需要幾分鐘就可以畫一個草圖。
  4. 更忠實有效的反饋。手繪原型的另一個好處則是其草圖概念,這些草圖一看就知道只花了很短時間就完成了。因此,相比于數字工具做出來的精細設計稿,手繪原型圖能收到更加忠實有效的批評反饋。
  5. 有利于團隊建設。因為手繪原型不需要太多特殊技巧,無論什么背景的團隊成員都可以參與到這個過程中。所以,很容易將原型設計變成團隊活動。

當然,手繪原型也存在弊端,主要有以下3個方面:

  1. 獲取反饋過程中存在一定難度。對參與測試的對象而言,僅僅對手繪原型進行評論需要有足夠的想象力。有時候,要從測試對象身上收集直覺反饋可能并不簡單,因為只通過看草圖,他們可能很難想象產品最終到底是什么樣的。
  2. 必須親自測試或當面測試。如果測試對象來自五湖四海,那要用手繪原型來做可用性測試就比較難。
  3. 手繪原型其實是額外的步驟。從最終結果來看,手繪原型還是需要轉化成數字原型。

什么時候可以用手繪原型?

手繪原型對以下2個場景非常適用:

  1. 頭腦風暴。比如,當團隊成員需要勾畫用戶流的步驟時。
  2. 概念測試。比如,需要進行游擊式測試時。

當然,有些設計師肯定會認為,手繪原型只是在早期的產品設計中有用。但這并不是事實。實際上,在產品設計過程中的每個環節,手繪原型都能發揮作用。即便在做高保真原型時,都可以用手繪原型。

手繪原型的11條實用建議

1. 畫原型前一定要有清晰的目標

開始原型設計前,一定要有清晰的目標。多思考你想要解決的痛點是什么,原型的設計一定要以解決痛點為目的。

2. 草圖就應該是草圖

手繪原型的重點不是你的作圖技巧和能力,而是盡可能快速地找到問題解決方案。因此,不需要花大量時間將每個細節都畫得很完美,也不用在意原型圖上的元素是否對齊等等。

3. 借助有用的工具

就手繪原型而言,只真正需要的只有2個工具:紙和筆。除此之外,以下3種工具對有效的手繪原型過程也有幫助:

(1)桌面文件架

我推薦三層文件架:一層放白紙,一層放草圖,另外一層放成品手繪原型圖。

木制文件架。圖片來源:Promidesign

(2)手繪原型套裝

套裝包括預制的方格紙,以及讓手繪原型更加輕松便利的模板紙。

適用于iPad的手繪原型模板。圖片來源:tripwiremagazine

(3)圖形模板

圖形模版可以讓你又快又好地設計按鈕及圖標。

適用于iOS客戶端的圖形模版,圖片來源:Amazon

注意:好工具并不意味著是貴工具。事實上,我更推薦便宜的紙和筆。因為如果你用Moleskin的話,你可能會陷入不停修改草圖的困境中。畢竟,用了好筆,可不希望它畫出來的是一副“丑”圖。

4. 可以用筆,但不能用鉛筆

畫原型草圖時,很多設計師都會掉入一個陷阱:他們開始畫圖后,中途就開始懷疑自己的想法是否合理正確。因此,好多很好的設計就這樣被扼殺在搖籃中。

但是如果是手繪原型的話,設計師能完成設計圖的可能性更大。因為手上握著筆會讓人有一種使命感——而且只要不是鉛筆的話,也無法擦掉重來,只得繼續堅持畫下去。

5. 一張紙,一個草圖

可能你會覺得,為了節約空間,在一張紙上多畫幾張圖更好,但最好不要有這種想法,因為在后期原型測試過程中會出現很多麻煩。比如:假如原型草圖上有過多的內容,就會顯得雜亂無章,測試參與者可能不了解哪些元素屬于哪部分草圖。

6. 手繪原型,從最小的屏幕開始

如果你的產品有移動客戶端和桌面客戶端的話,建議從移動客戶端的原型開始。因為在小屏幕的場景下,你會更加關注重要的內容。將大部分時間都花在這些重要內容的優化后,在其它客戶端的設計體驗過程就會變得易如反掌。

7. 故意使用色彩

畫原型草圖可以用黑白色,但對于后續的重要部分元素(比如:按鈕),就可以故意使用其它顏色來高亮。

此外,選定色彩后,要盡量保持整副手繪原型圖的一致性。比如:所有的交互元素盡量用一種顏色標注,這樣也可以在可用性測試過程中幫你降低認知負載。

8. 除了手繪原型,還要有頁面文案

在敏捷(Agile)環境中,設計師和開發者可能都沒有足夠時間來寫頁面文案。如果手繪原型的話,就可能解決這個問題。因為紙是看得見摸得著的,設計師在設計過程中就可以很好地進行再利用。

小提示:可以在不同頁面或者不同交互過程的草圖上添加筆記。附注筆記可以幫助他人理解你的設計想法。另外,在回顧的過程中,也可以利用文字幫你回憶當初這樣設計的初衷。

圖片來源:jasonrobb

9. 手繪原型完成后,別忘了做好數字備份

做好數字備份最重要的好處,就在于可以避免到處拿著一沓設計稿走來走去。最簡單的數字備份,直接用手機拍照即可。

小提示:你也可以通過特定的用戶流來做一個動態GIF圖。只需要先將特定流中的草圖拍照,然后把這些照片用來做成GIF圖即可。

10. 除了數字備份,還要創建數字原型

對于低保真的數字原型來說,手繪原型是可以解決問題的。如果你知道Marvel開發的POP工具,你還可以把草圖或者圖片轉化成交互原型。

圖片來源:Marvel

11. 手動創建復雜效果

手繪原型還有一個重要作用,即設計師可以通過多種創意方式來模擬視覺效果或交互過程。比如:如果你想得到的話,直接可以模擬出在移動客戶端滑動屏幕的效果。

圖片來源:Csaba Házi

除此之外,還可以模擬出陰影等效果。有了陰影效果,設計圖會顯得更加逼真,在向用戶或者客戶呈現設計方案的過程中也會更有幫助。

圖片來源:Google

手繪原型測試的3個實用建議

如果回到最初的問題:我們為什么要做產品原型?

這背后的主要原因,是因為可以用原型來進行測試,從真實用戶口中得到反饋,并且在產品設計初期就能知道設計想法和理念是否可行。

對于手繪原型的測試,這是一個較大的課題,可能需要詳細地介紹。這里,我只跟大家分享3個在測試過程中需要考慮的內容:

1. 協調人以及“人機”角色

如果你用手繪原型來進行可用性測試的話,在每次測試過程中你都需要以下兩種角色的人物:

  1. 協調人(講述人)。這是專門向測試參與者講述相關信息,并與其互動的角色。
  2. “人機”。這個角色,即參與測試過程但全程不用說話,并且負責切換頁面或頁面狀態的人。這個角色非常重要,測試效果通常也都取決于這個人操作“計算機”本領的高低,特別是針對測試者的反饋意見或提問后的操作。

千萬不要讓一個人來承擔這兩個角色的任務,否則,作為“人機”的協調人很有可能會錯過測試者反饋的信息。

2. 測試過程中要設定場景

向測試參與者展示手繪原型時,需要讓他們明白設計的場景。因此,要清晰地讓他們解釋測試場景,并展示手繪原型的設計原理。

在開始測試之前,你需要明白以下3個基本問題:

  1. 你為什么設計這個原型?
  2. 通過這次測試,你想達到什么目的?
  3. 通過這次測試,你希望測試參與者反饋哪些信息?

3. 至少找5個不同的用戶參與測試

測試要遵循常規可用性測試的最佳實踐,即至少找5個不同的用戶參與測試,并做好相關測試記錄,以備后續分析之需。

寫在最后

手繪原型是一種快速創建并測試設計方案的有效方法,運用合理的話,手繪原型可以達到事半功倍的效果。

 

原文鏈接:http://babich.biz/the-magic-of-paper-prototyping/

編譯:郝鵬程

來源:https://36kr.com/p/5166904.html

本文由 @郝鵬程 授權發布于人人都是產品經理,未經作者許可,禁止轉載

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 我選擇腦繪原型,哈哈哈

    回復
  2. 這種方式真的得在很閑并且有心境的時候去做。博主提出的這個方法還是挺有意思的,贊她的思維創意。

    來自廣東 回復
  3. 確實挺可愛的,不過紙質原型幾分鐘?原型幾小時?像文章那樣做應該不止吧,現在工具已經很完善了,紙質1秒畫的框,工具1下也能拖出來,還更好看,簡單的紙質原型我們只用來做初步的思考和腦暴的時候用,感覺文章并不實用。

    回復
  4. 當然有意義啊,我隨身的小本子就是畫原型的,腦圖是在手機app里畫的

    回復
  5. 深度學習

    回復
  6. 這種文章也能過,浪費時間

    來自廣東 回復
  7. 畫原型就像畫畫,一直畫就對了。

    回復
  8. ^_^

    回復
  9. 有意義嘛

    來自北京 回復
  10. 適當收手繪是可以在靈感迸發時及時記錄下來的好方法。
    但是文章后半部分提及的用手稿做交互還是有點費時費力,不大實用。
    點到即可,過猶不及。

    來自廣東 回復
    1. ^_^

      回復
  11. 適合在出差時做,一方面打發了無聊時光,也對自己的工作有了不同的構思

    來自浙江 回復
  12. 有點麻煩

    回復
  13. 手繪原型搞動效還真cute

    回復
  14. 感覺用AXURE比這個要快很多吧,手繪多浪費精力。。。除非是前期創作概念的時候

    來自廣東 回復
  15. 你做久了之后畫原型速度比手繪肯定還快的

    來自上海 回復