分享於2012年11月21日於成功大學心理系「創新科技探索智慧空間-以夜市文化為例」課程，所進行的1小時Prototyping方法說明，與1小時的微型工作坊課程內容。 大頭鼠的部落格 http://www.bhm.idv.tw/blog/

2. Who am I ?
• 楊梭逸 Carter Yang
• 工作經歷：
– 2012/01~迄今 ， 經理
– 2010/06~2011/12，視覺設計組(兼品管部)經理
– 2006/04~2010/12，專案經理
• 專注領域：
– 專案管理，網頁與多媒體設計，網站行銷與企劃，
使用者體驗與互動，Drupal CMS，CMMI，品質
管理
2

3. 課程大綱
【內容講解】 【微型工作坊】
• 雛形的意義何在？ • 電腦逛夜市與手機/
• 使用者經驗設計流程 平板逛夜市的差異?
• 雛形的範圍 • 各組期中報告摘要回
• 雛形的方法 顧
• 雛形工具演化經驗
• 設計說明與參考做法
• 常用雛形工具簡介
• 分組練習與發表
• 5點PP可能問題解答
本投影片部分資料由蔡明哲 (Richard Tsai)整理提供，經同意進行修改與教學使用
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. http://www.userxper.com
3

4. 什麼是
Prototype
？
4

5. Prototype
5
雛形

6. Prototype…= =?
6

7. 為什麼要做雛形…
圖片來源，http://www.my-project-management-expert.com/business-requirements-management.html
7

8. 圖片來源：不可考
8

9. 每個人看到/想的都不一樣，
Prototype
是個可以用來溝通的方法
9

10. 使用者經驗(UX)設計方法
研究
需求
驗證
N
設計 構思
http://www.usablebrands.ch/usability_.html
10

11. Prototype在專案中的循環
圖片來源，http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/
11

12. 模型屋
Prototype(雛形)
可供討論的模型或樣品
樣品屋 透視圖
圖片來源：http://house.hinet.net/img/xml_13/7889323/7889323-10.jpg 圖片來源： http://homepage18.seed.net.tw/cgi/file_view.pl/TH.CJ0yww
12

13. 低擬真 VS.高擬真
Low Fidelity(低擬真) High Fidelity(高擬真)
• 不像最終設計成品 • 接近最終設計成品
• 好處 • 好處
– 很快，有東西可以討論 – 有更具體的東西討論
– 可以專注在High-level – 專注在更多設計細節
的設計觀念 – 驗證各種角度的使用者
– 探討主要的架構與功能 經驗
– 更容易發散思考不受拘 – 開發工作的工程師更容
束 易理解
– 客戶(老闆)更容易理解
13

14. 低擬真 VS.高擬真
Low Fidelity(低擬真) High Fidelity(高擬真)
14

15. 設計流程中，二者都具有意義
低擬真 高擬真
Prototype
(Sketch手繪草稿)
= Prototype
實際設計產品時，
大家都希望看到更真實的設計
低擬真 高擬真
Prototype
(Sketch手繪草稿) < Prototype
15

16. 低擬真?高擬真?傻傻分不清
• 考量因素：時間/成本/品質(專案管理三大要素)
圖片來源： https://blog.xing.com/wp-content/uploads/2011/09/Prototyping_Days_presentation.jpg
16

17. Prototyping的方法
• Wireframe prototyping(WP)
• Paper prototyping(PP)
• Storyboard prototyping
• Paper+Digital prototyping
• Blank model prototyping
• Video prototyping
• Wizard of Oz prototyping
• Coded prototyping (including scripting
and HTML)
• LEGO prototyping
17

18. Wireframe prototyping Paper prototyping
http://3.bp.blogspot.com/_tsuzO7Ymydg/TSztbfYyXNI/AAAAAAAAACE/
P5uDxoEfz1w/s1600/lmf_paper_prototype.gif
18

19. Storyboard prototyping
混搭mix
Paper – Digital Prototyping
19

20. Blank model prototyping
Wizard of Oz prototyping
20

21. Video prototyping
Code prototyping
http://www.flickr.com/photos/s4xton/2425718415/sizes/z/in/photostream/
21

22. LEGO prototyping
圖片來源，http://taichungservicejam.wordpress.com/2012/08/12/mobile-kitchen/
22

23. 23

24. 雛形工具演化經驗
24

25. MS PowerPoint
25

26. MS Word + MS Visio
26

27. HTML/PS(直接做網頁或圖)
Adobe Dreamweaver/Photoshop
MS Visual Studio
27

28. Axure RP
28

29. MS PowerPoint MS Word + MS Visio/Excel HTML/PS Axure RP
29

30. 工具
常用雛形工具簡介
30

31. 廣義雛型工具 for Web/AP(1)
• Diagram Tools (General Purpose)
– MS Visio
– MS PowerPoint
– MS Word
– MS Excel
– Pencil Project (Plug-in Firefox)
– OmniGraffle (Mac OS X, Mac版的Visio)
– Cacoo
• Graphics Tool
– Photoshop / Illustrator / Firework / FlashMX
31

32. 廣義雛型工具 for Web/AP(2)
• Purpose-Built (For Software Application or Web)
– Axure RP
– iRise Studio
– Prototype Composer
– GUI Design Studio (Caretta)
– MockupScreens
– Balsamiq Mockups
• Developing Tool
– Adobe Dreamweaver
– MS FrontPage,Express Web,MS Visual Studio
• Aid.(其他輔助軟體)
– XMinid
– FastStone Capture
32

33. Balsamiq Mockups(Free)
http://www.balsamiq.com/products/mockups
33

34. Cacoo(Free)
http://cacoo.com/
更多簡介：http://playpcesor.blogspot.com/2011/04/cacoo.html
34

35. Axure RP (付費軟體)-1
• Axure RP 可以做什麼？
– 專案規劃，框線繪製，雛型設計，自動化文件
– 著重於「功能性設計」
• Axure RP 不可以做什麼？
– 視覺或圖像設計
– 繪圖軟體
– 系統開發環境
• Axure RP 設計用途有何？
– 桌面應用程式
– 瀏覽器為主的應用程式或網站
– 行動應用程式或網站
35

36. Axure RP (付費軟體)-2
• Axure RP Pro 可做到的功能遠遠超乎您的
需求…
– 多人共同編輯(Collaboration, Shared Projects
for Teams)
– 客製化規格文件(Specifications)
– 進階互動功能(Interactions)
36

37. Axure Prototype Testing for Mobile
37

38. 其他雛形設計輔助軟體
Xmind FastStone Capture
心智圖(需求整理) 螢幕畫面擷取編輯
更多簡介：
http://briian.com/?p=5713
http://www.xmind.net/
38

39. Interface Sketch
圖片來源： http://interfacesketch.tumblr.com/
39

40. POP – Prototyping On Paper
圖片來源： http://popapp.in/
40

41. 本次練習重點-Paper Prototyping
圖片來源： Samuel Mann ，http://www.flickr.com/photos/21218849@N03/sets/72157629538078220/
41

42. 5點PP可能的問題與解答
縮寫： 本五點部分內容引用自UX map，並進行內容部分修改：
Wireframe prototyping(WP) http://uxmap.net/2011/02/28/7-myths-about-
paper-prototyping/
Paper prototyping(PP)
42

43. 做就對了，管你畫得好不好!
• Myth : “I can’t draw well enough to create a paper
prototype.”
圖片來源：http://www.flickr.com/photos/rohdesign/3307873748/ 圖片來源： http://www.flickr.com/photos/playingwithshapes/3345425396
43

44. 做就對了，管你畫得好不好!
圖片來源： http://www.userfocus.co.uk/resources/prototype.html
/ 圖片來源： http://assets.uxbooth.com/uploads/2010/08/paperPrototype.png
44

45. 做就對了，管你畫得好不好!
• PP的目的是用來評估使用者介面背後的
idea，而非圖像本身的意義。
45

46. 做就對了，管你畫得好不好!
• PP是可以缺乏藝術性的，所呈現出來在視
覺上是相當簡單且自然的。
46

47. WF和PP是不同的!
• Myth : “Wireframes are the same as
Paper Prototypes.”
=
/
圖片來源， http://3.bp.blogspot.com/_tsuzO7Ymydg/TSztbfYyXNI/AAAAAAAAACE/P5uDxoEfz1w/s1600/lmf_paper_prototype.gif
47

48. WF和PP是不同的!
• WF通常代表的是產品設計階段的尾端，
PP通常代表的是一開始。
• WF很耗時耗力，PP快速完成。
• WF專注於版型上，客戶通常會進行挑剔，
如顏色、字形等視覺層面。設計初期必須
專注在導覽，操作流程或功能性方面等。
48

49. 離開電腦，手繪/製你的PP吧!
• Myth : “I can do it just as well with
Visio/AxureRP.”
圖片來源， http://andrewgarrison.com/project/codemonkey/
49

50. 離開電腦，手繪/製PP吧!
• 電腦軟體通常：
– 限制如何實現某設計時的思考。
– 並不適合在找出腦力激盪中對的設計。
– 僅適用關於逐步改善的部分。
• 『一開始必須要去找到對的設計(the right
design)，之後再專注到去設計對的事物
(the design right)』
– Bill Buxton, Principal Researcher Microsoft Research
50

51. 離開電腦，手繪/製你的PP吧!
/ 圖片來源： http://www.teehanlax.com/blog/ipad-gui-psd-retina-display/
51

52. PP也是很專業的!
• Myth : “It looks unprofessional.”
圖片來源： Office線上圖庫
52

53. PP也是很專業的!
• 專業的定義，是得到使
用者的「實際」參與；
快速完成，快速取得
使用者的滿意。
• 在設計流程中很早就將
使用者參與進來，並且
很認真的考量他們的
意見。
53

54. PP也是可以做互動的!
• Myth : “I can’t prototype interactivity.”
圖片來源： http://www.alistapart.com/articles/paperprototyping/
54

55. PP也是可以做互動的!
• 這點實質上這是對的，也是有些複雜的互
動形式並不適合用在PP上；如Google
Map效果等。
• 但是絕大多數的網站與軟體的互動方式，
甚至是在行動裝置上面，依然是指向(Point)
與點擊(Click)的動作為基礎，這些可以很簡
單的利用PP來模擬。
55

56. 夜市人生!
圖片來源：http://www.flickr.com/photos/lightstars/2341036366/
56

57. 用電腦逛夜市…
57
圖片來源：http://www.walkgoler.cc/qmap/113
圖片來源：http://www.walkgoler.cc/qmap/113

58. 58

59. 用手機/平板逛夜市…?
59

60. 設計參考
60

61. 設計參考
『食在好康』
Android平台
61

62. 設計參考
『台灣夜市大全+』
Android平台
62

63. 微型工作坊
1. 【雛形設計】Paper Prototyping (10分鐘)
– 不用管現實做不做的到，請創意發想
– 如果小組已有想法，請大家依據想法共同設計
– 同時想出一個吸引人的APP名稱
– 請將雛形畫在手上的小卡上，一張畫一個畫面，僅
畫正面背面不要畫，紙不夠可以和助教拿(1人6張)
2. 【小組討論】小組內各自介紹自己的想法
– 共同推選出設計最有特色的一份進行成果發表 (10
分鐘)
– 討論過程若有新的想法可重新手繪
3. 【成果發表】每組2分30秒 (10分鐘)
4. 【全班討論】想法分享 (5分鐘)
63

64. Q&A
64

65. 聯絡資料
• 基本資料
– 楊梭逸
– bhm@mail.linkchain.tw
– 0952-641875
• 個人Facebook
– https://www.facebook.com/souyiyang
• 個人網絡名片
– http://about.me/bhm
• 個人部落格
– http://www.bhm.idv.tw/blog/
65

66. 近期服務與設計相關活動
• 12/15
– UX使用者
經驗高峰
會心得分
享，高雄
軟體科技
園區(暫定)
– Axure RP
使用者聚
會，台南
(暫定)
– 以上有可
11/30 能會合辦
66

67. 優設聚落(Users' Village)
• 本聚落是以推廣設計思考、服務設計、使
用者經驗設計等使用者中心設計為主旨，
進行各項設計與研究方法的實作，藉此提
升南部從業人員的能力，讓日常工具使用
更為友善，進而促進區域產業升級。
67