本文件讨论了用户体验设计的重要性及原型制作的多种方法，包括低擬真和高擬真原型。强调了理解用户需求的关键性，以便在设计过程中做出更符合用户认知的决策。此外，介绍了多种原型工具和技术，以帮助设计师在开发阶段提高有效沟通和共同理解的能力。

1. 從雛形著手-
設計出使用者需要的
楊梭逸
2011/5/31於屏科大資管系「網際網路原理」課程

2. • 楊梭逸 Carter Yang
• 現職：
– 凌誠科技（股）經理
• 興趣：
– Capability Maturity Model Integration
– Quality Assurance
– Project Management
– Web Design
– User Center Design
– Usability
• 網絡平台：
– 大頭鼠的部落格，http://www.bhm.idv.tw/blog/
– AboutMe社交名片，http://about.me/bhm
本投影片Prototype資料由蔡明哲 (Richard Tsai)整理提供，經同意進行修改與教學使用
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. http://www.userxper.com
-2-

3. 本堂課對您有什麼
『意義』
?
-3-

4. 意義是三小?
林北只知道義氣
http://iphoto.ipeen.com.tw/photo/comment/201002/cgmec8d7dae3596eaa6ebb977aa3c225e2e153.jpg
-4-

5. http://www.crazyleafdesign.com/blog/wp-content/uploads/2010/07/web-design-usability.jpg
-5-

6. 1.符合使用者需求並表現專業
http://mymkc.com/sites/default/files/imagecache/400xY/SP034-086.jpg
-6-

7. 2.方便溝通，容易達成共識
http://www.its4training.com/wp-content/uploads/communication.jpg
-7-

8. 3.規劃下的快速開發
http://www.xhtml-css-code.com/wp-content/uploads/2009/07/search_engine_friendly.jpg
-8-

9. 4.產出令老師驚艷的作品
http://image.chinaacc.com/upload/html/2009/8/20/xinyan29572009820850234105.jpg
-9-

10. 為何
了解使用者
是重要的
？
-10-

11. 1.您覺得這是什麼建築物？
-11-

12. 台南鹽水鎮天主聖神堂
-12-

13. 2
1
4
3
http://farm4.static.flickr.com/3577/3379395472_d6da0be894.jpg
2.您要下車時如何感應？ -13-

14. -14-

15. http://l.yimg.com/f/xp/tw-
tech.yahookimo.com.tw/20100917/06/2965299138.jpg?y http://readatech.com/wp-content/uploads/2011/04/SamsungGalaxySII.jpg
=500&n=1&sig=MBL_5YXIExCoS9qCf8MFtg--
3.您父母親偏好提供按鍵的裝置?
-15-

16. http://uedc.163.com/wp-content/uploads/2010/11/phone.png
-16-

17. 4.您注意到白色傳球次數有多少?
-17-

18. http://www.youtube.com/watch?v=vJG698U2Mvo
白色衣服總共有15次，但您有注意到黑猩猩嗎?
有限的注意力選擇
-18-

19. 為何了解使用者是重要的？
• 1.您覺得這是什麼建築物？
– 環境與風俗會影響使用者認知
• 2.您要下車如何感應？
– 操作習性會影響使用者認知
• 3.您父母親偏好提供按鍵的裝置?
– 年齡世代會影響使用者認知
• 4.您注意到白色傳球次數有多少?
– 有限選擇性會影響使用者認知
-19-

20. 你也是使用者!!!
請不要設計出『自我感覺良好』的作品!!!
-20-
http://www.thegreatgeekmanual.com/images/humor/motivational/march/motivational-i-want-you.jpg

21. http://www.crazyleafdesign.com/blog/wp-content/uploads/2010/07/web-design-usability.jpg
-21-

22. 使用者經驗設計流程
研究
需求
驗證
N
設計 構思
http://www.usablebrands.ch/usability_.html
-22-

23. Prototype
雛形
-23-

24. -24-
http://image-1.verycd.com/d326fa8ee9bc3015b5df6e9fa3e6596943228(600x)/thumb.jpg

25. 模型屋
Prototype(雛形)
可供討論的模型或樣品
http://www.sexinsex.net/luntan/thread-1704273-1-1.html
樣品屋 透視圖
http://ohwed.youthwant.com.tw/blog/user1/CIDesigner/archives/2007/986.html http://blog.sina.com.tw/a0933448885/article.php?pbgid=52334&entryid=577267
-25-

26. Low Fidelity(低擬真)
• 不像最終設計成品
• 好處
– 很快，有東西可以討論
– 可以專注在High-level的設計觀念
– 探討主要的架構與功能
– 更容易發散思考不受拘束
-26-

27. High Fidelity(高擬真)
• 接近最終設計成品
• 好處
– 有更具體的東西可以討論
– 專注在更多的設計細節
– 驗證各種角度的使用者經驗
– 開發工作的工程師更容易理解
– 客戶(老闆/老師)更容易理解
-27-

28. 低擬真 > 高擬真
Wireframe(線框)
-28-

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

30. Prototyping的方法
• Wireframe prototyping
• Paper prototyping
• Storyboard prototyping
• Digital prototyping
• Blank model prototyping
• Video prototyping
• Wizard of Oz prototyping
• Coded prototyping (including scripting
and HTML)
-30-

31. Wireframe prototyping Paper prototyping
http://3.bp.blogspot.com/_tsuzO7Ymydg/TSztbfYyXNI/AAAAAAAA
ACE/P5uDxoEfz1w/s1600/lmf_paper_prototype.gif
-31-

32. Storyboard prototyping
混搭mix
Paper – Digital prototyping
http://www.youtube.com/watch?v=GrV2SZuRPv0
-32-

33. Blank model prototyping Wizard of Oz prototyping
http://www.youtube.com/watch?v=_aoo_N-7AYk
-33-

34. Video Prototyping Code Prototyping
http://www.youtube.com/watch?v=BpWM0FNPZSs http://www.flickr.com/photos/s4xton/2425718415/sizes/z/in/photostream/
56秒-64秒
-34-

35. Tools
工具
-35-

36. 廣義Prototyping Tool 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
-36-

37. 廣義Prototyping Tool 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
– Dreamweaver
– MS FrontPage,Express Web,MS Visual Studio
• Aid.(其他輔助軟體)
– XMinid
– FastStone Capture
-37-

38. Axure RP
-38-

39. Pencil Project (Plug-in Firefox)
http://pencil.evolus.vn/en-US/Home.aspx
-39-

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

41. Balsamiq Mockups(Free)
http://balsamiq.com/products/mockups
-41-

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

43. Evolution
雛形工具演化經驗
-43-

44. MS PowerPoint
-44-

45. MS Word + MS Visio
-45-

46. Axure RP
-46-

47. 小結(1)
• 本堂課對您有什麼意義？
– 符合使用者需求並表現專業
– 方便溝通，容易達成共識
– 規劃下的快速開發
– 產出令老師驚艷的作品
• 為何了解使用者是重要的？
– 環境與風俗會影響使用者認知
– 操作習性會影響使用者認知
– 年齡世代會影響使用者認知
– 有限選擇性會影響使用者認知
-47-

48. 小結(2)
• Prototyping的方法
– Wireframe prototyping
– Paper prototyping
– Storyboard prototyping
– Digital prototyping
– Blank model prototyping
– Video prototyping
– Wizard of Oz prototyping
– Coded prototyping (including scripting and HTML)
• Prototyping的工具
– Axure RP
– Pencil Project (Plug-in Firefox)
– Cacoo(Free)
– Balsamiq Mockups(Free)
– MS Office
-48-

49. 培養 觀
察
力
的重要性
http://pica.nipic.com/2008-03-24/200832414823712_2.jpg
-49-

50. Q&A
-50-