Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Who am I ?• 楊梭逸 Carter Yang• 工作經歷:  – 2012/01~迄今     , 經理  – 2010/06~2011/12,視覺設計組(兼品管部)經理  – 2006/04~2010/12,專案經理• 專注領域: ...
課程大綱      【內容講解】                                                  【微型工作坊】•   雛形的意義何在?                                     ...
什麼是Prototype   ?    4
Prototype5     雛形
Prototype…= =?    6
為什麼要做雛形…圖片來源,http://www.my-project-management-expert.com/business-requirements-management.html                            ...
圖片來源:不可考           8
每個人看到/想的都不一樣,Prototype 是個可以用來溝通的方法      9
使用者經驗(UX)設計方法研究                                                      需求驗證                                                 ...
Prototype在專案中的循環 圖片來源,http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/             ...
模型屋Prototype(雛形)可供討論的模型或樣品      樣品屋                                                               透視圖圖片來源:http://house.hin...
低擬真 VS.高擬真 Low Fidelity(低擬真)         High Fidelity(高擬真)• 不像最終設計成品                • 接近最終設計成品• 好處                      • 好處 ...
低擬真 VS.高擬真Low Fidelity(低擬真)        High Fidelity(高擬真)                    14
設計流程中,二者都具有意義  低擬真                 高擬真Prototype(Sketch手繪草稿)               =    Prototype         實際設計產品時,    大家都希望看到更真實的設計...
低擬真?高擬真?傻傻分不清• 考量因素:時間/成本/品質(專案管理三大要素)    圖片來源: https://blog.xing.com/wp-content/uploads/2011/09/Prototyping_Days_presenta...
Prototyping的方法• Wireframe prototyping(WP)• Paper prototyping(PP)• Storyboard prototyping• Paper+Digital prototyping• Blank...
Wireframe prototyping                      Paper prototyping                             http://3.bp.blogspot.com/_tsuzO7Y...
Storyboard prototyping                              混搭mix                              Paper – Digital Prototyping        ...
Blank model prototyping                               Wizard of Oz prototyping                          20
Video prototyping                                     Code prototyping                         http://www.flickr.com/photo...
LEGO prototyping圖片來源,http://taichungservicejam.wordpress.com/2012/08/12/mobile-kitchen/                                  22
23
雛形工具演化經驗   24
MS PowerPoint      25
MS Word + MS Visio        26
HTML/PS(直接做網頁或圖)Adobe Dreamweaver/Photoshop      MS Visual Studio                              27
Axure RP   28
MS PowerPoint   MS Word + MS Visio/Excel   HTML/PS   Axure RP                                 29
工具     常用雛形工具簡介30
廣義雛型工具 for Web/AP(1)• Diagram Tools (General Purpose)  –   MS Visio  –   MS PowerPoint  –   MS Word  –   MS Excel  –   Pen...
廣義雛型工具 for Web/AP(2)• Purpose-Built (For Software Application or Web)   –   Axure RP   –   iRise Studio   –   Prototype Co...
Balsamiq Mockups(Free)http://www.balsamiq.com/products/mockups                       33
Cacoo(Free)http://cacoo.com/更多簡介:http://playpcesor.blogspot.com/2011/04/cacoo.html                               34
Axure RP (付費軟體)-1• Axure RP 可以做什麼? – 專案規劃,框線繪製,雛型設計,自動化文件 – 著重於「功能性設計」• Axure RP 不可以做什麼? – 視覺或圖像設計 – 繪圖軟體 – 系統開發環境• Axure ...
Axure RP (付費軟體)-2• Axure RP Pro 可做到的功能遠遠超乎您的  需求… – 多人共同編輯(Collaboration, Shared Projects   for Teams) – 客製化規格文件(Specifica...
Axure Prototype Testing for Mobile                37
其他雛形設計輔助軟體  Xmind                          FastStone Capture心智圖(需求整理)                         螢幕畫面擷取編輯                    ...
Interface Sketch  圖片來源: http://interfacesketch.tumblr.com/                      39
POP – Prototyping On Paper           圖片來源: http://popapp.in/                 40
本次練習重點-Paper Prototyping   圖片來源: Samuel Mann ,http://www.flickr.com/photos/21218849@N03/sets/72157629538078220/           ...
5點PP可能的問題與解答縮寫:                              本五點部分內容引用自UX map,並進行內容部分修改:Wireframe prototyping(WP)        http://uxmap.net/...
做就對了,管你畫得好不好!• Myth : “I can’t draw well enough to create a paper  prototype.”圖片來源:http://www.flickr.com/photos/rohdesign/...
做就對了,管你畫得好不好!圖片來源: http://www.userfocus.co.uk/resources/prototype.html      /                                             ...
做就對了,管你畫得好不好!• PP的目的是用來評估使用者介面背後的  idea,而非圖像本身的意義。          45
做就對了,管你畫得好不好!• PP是可以缺乏藝術性的,所呈現出來在視  覺上是相當簡單且自然的。          46
WF和PP是不同的!• Myth : “Wireframes are the same as  Paper Prototypes.”                  =                  /                  ...
WF和PP是不同的!• WF通常代表的是產品設計階段的尾端,  PP通常代表的是一開始。• WF很耗時耗力,PP快速完成。• WF專注於版型上,客戶通常會進行挑剔,  如顏色、字形等視覺層面。設計初期必須  專注在導覽,操作流程或功能性方面等。...
離開電腦,手繪/製你的PP吧!  • Myth : “I can do it just as well with    Visio/AxureRP.”圖片來源, http://andrewgarrison.com/project/codemon...
離開電腦,手繪/製PP吧!• 電腦軟體通常: – 限制如何實現某設計時的思考。 – 並不適合在找出腦力激盪中對的設計。 – 僅適用關於逐步改善的部分。• 『一開始必須要去找到對的設計(the right  design),之後再專注到去設計對的...
離開電腦,手繪/製你的PP吧!/   圖片來源: http://www.teehanlax.com/blog/ipad-gui-psd-retina-display/                                  51
PP也是很專業的!• Myth : “It looks unprofessional.”      圖片來源: Office線上圖庫                         52
PP也是很專業的!• 專業的定義,是得到使  用者的「實際」參與;  快速完成,快速取得  使用者的滿意。• 在設計流程中很早就將  使用者參與進來,並且  很認真的考量他們的  意見。           53
PP也是可以做互動的!• Myth : “I can’t prototype interactivity.”           圖片來源: http://www.alistapart.com/articles/paperprototyping...
PP也是可以做互動的!• 這點實質上這是對的,也是有些複雜的互  動形式並不適合用在PP上;如Google  Map效果等。• 但是絕大多數的網站與軟體的互動方式,  甚至是在行動裝置上面,依然是指向(Point)  與點擊(Click)的動作...
夜市人生!圖片來源:http://www.flickr.com/photos/lightstars/2341036366/                          56
用電腦逛夜市…                                57圖片來源:http://www.walkgoler.cc/qmap/113             圖片來源:http://www.walkgoler.cc/qm...
58
用手機/平板逛夜市…?     59
設計參考 60
設計參考     『食在好康』     Android平台61
設計參考     『台灣夜市大全+』      Android平台62
微型工作坊1. 【雛形設計】Paper Prototyping (10分鐘) –   不用管現實做不做的到,請創意發想 –   如果小組已有想法,請大家依據想法共同設計 –   同時想出一個吸引人的APP名稱 –   請將雛形畫在手上的小卡上,...
Q&A      64
聯絡資料• 基本資料 – 楊梭逸 – bhm@mail.linkchain.tw – 0952-641875• 個人Facebook – https://www.facebook.com/souyiyang• 個人網絡名片 – http://a...
近期服務與設計相關活動            • 12/15              – UX使用者                經驗高峰                會心得分                享,高雄           ...
優設聚落(Users Village)• 本聚落是以推廣設計思考、服務設計、使  用者經驗設計等使用者中心設計為主旨,  進行各項設計與研究方法的實作,藉此提  升南部從業人員的能力,讓日常工具使用  更為友善,進而促進區域產業升級。     ...
成大心理系-Prototyping方法
Upcoming SlideShare
Loading in …5
×

成大心理系-Prototyping方法

分享於2012年11月21日於成功大學心理系「創新科技探索智慧空間-以夜市文化為例」課程,所進行的1小時Prototyping方法說明,與1小時的微型工作坊課程內容。

大頭鼠的部落格
http://www.bhm.idv.tw/blog/

成大心理系-Prototyping方法

  1. 1. Who am I ?• 楊梭逸 Carter Yang• 工作經歷: – 2012/01~迄今 , 經理 – 2010/06~2011/12,視覺設計組(兼品管部)經理 – 2006/04~2010/12,專案經理• 專注領域: – 專案管理,網頁與多媒體設計,網站行銷與企劃, 使用者體驗與互動,Drupal CMS,CMMI,品質 管理 2
  2. 2. 課程大綱 【內容講解】 【微型工作坊】• 雛形的意義何在? • 電腦逛夜市與手機/• 使用者經驗設計流程 平板逛夜市的差異?• 雛形的範圍 • 各組期中報告摘要回• 雛形的方法 顧• 雛形工具演化經驗 • 設計說明與參考做法• 常用雛形工具簡介 • 分組練習與發表• 5點PP可能問題解答 本投影片部分資料由蔡明哲 (Richard Tsai)整理提供,經同意進行修改與教學使用 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. http://www.userxper.com 3
  3. 3. 什麼是Prototype ? 4
  4. 4. Prototype5 雛形
  5. 5. Prototype…= =? 6
  6. 6. 為什麼要做雛形…圖片來源,http://www.my-project-management-expert.com/business-requirements-management.html 7
  7. 7. 圖片來源:不可考 8
  8. 8. 每個人看到/想的都不一樣,Prototype 是個可以用來溝通的方法 9
  9. 9. 使用者經驗(UX)設計方法研究 需求驗證 N 設計 構思http://www.usablebrands.ch/usability_.html 10
  10. 10. Prototype在專案中的循環 圖片來源,http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/ 11
  11. 11. 模型屋Prototype(雛形)可供討論的模型或樣品 樣品屋 透視圖圖片來源:http://house.hinet.net/img/xml_13/7889323/7889323-10.jpg 圖片來源: http://homepage18.seed.net.tw/cgi/file_view.pl/TH.CJ0yww 12
  12. 12. 低擬真 VS.高擬真 Low Fidelity(低擬真) High Fidelity(高擬真)• 不像最終設計成品 • 接近最終設計成品• 好處 • 好處 – 很快,有東西可以討論 – 有更具體的東西討論 – 可以專注在High-level – 專注在更多設計細節 的設計觀念 – 驗證各種角度的使用者 – 探討主要的架構與功能 經驗 – 更容易發散思考不受拘 – 開發工作的工程師更容 束 易理解 – 客戶(老闆)更容易理解 13
  13. 13. 低擬真 VS.高擬真Low Fidelity(低擬真) High Fidelity(高擬真) 14
  14. 14. 設計流程中,二者都具有意義 低擬真 高擬真Prototype(Sketch手繪草稿) = Prototype 實際設計產品時, 大家都希望看到更真實的設計 低擬真 高擬真Prototype(Sketch手繪草稿) < Prototype 15
  15. 15. 低擬真?高擬真?傻傻分不清• 考量因素:時間/成本/品質(專案管理三大要素) 圖片來源: https://blog.xing.com/wp-content/uploads/2011/09/Prototyping_Days_presentation.jpg 16
  16. 16. 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
  17. 17. Wireframe prototyping Paper prototyping http://3.bp.blogspot.com/_tsuzO7Ymydg/TSztbfYyXNI/AAAAAAAAACE/ P5uDxoEfz1w/s1600/lmf_paper_prototype.gif 18
  18. 18. Storyboard prototyping 混搭mix Paper – Digital Prototyping 19
  19. 19. Blank model prototyping Wizard of Oz prototyping 20
  20. 20. Video prototyping Code prototyping http://www.flickr.com/photos/s4xton/2425718415/sizes/z/in/photostream/ 21
  21. 21. LEGO prototyping圖片來源,http://taichungservicejam.wordpress.com/2012/08/12/mobile-kitchen/ 22
  22. 22. 23
  23. 23. 雛形工具演化經驗 24
  24. 24. MS PowerPoint 25
  25. 25. MS Word + MS Visio 26
  26. 26. HTML/PS(直接做網頁或圖)Adobe Dreamweaver/Photoshop MS Visual Studio 27
  27. 27. Axure RP 28
  28. 28. MS PowerPoint MS Word + MS Visio/Excel HTML/PS Axure RP 29
  29. 29. 工具 常用雛形工具簡介30
  30. 30. 廣義雛型工具 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
  31. 31. 廣義雛型工具 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
  32. 32. Balsamiq Mockups(Free)http://www.balsamiq.com/products/mockups 33
  33. 33. Cacoo(Free)http://cacoo.com/更多簡介:http://playpcesor.blogspot.com/2011/04/cacoo.html 34
  34. 34. Axure RP (付費軟體)-1• Axure RP 可以做什麼? – 專案規劃,框線繪製,雛型設計,自動化文件 – 著重於「功能性設計」• Axure RP 不可以做什麼? – 視覺或圖像設計 – 繪圖軟體 – 系統開發環境• Axure RP 設計用途有何? – 桌面應用程式 – 瀏覽器為主的應用程式或網站 – 行動應用程式或網站 35
  35. 35. Axure RP (付費軟體)-2• Axure RP Pro 可做到的功能遠遠超乎您的 需求… – 多人共同編輯(Collaboration, Shared Projects for Teams) – 客製化規格文件(Specifications) – 進階互動功能(Interactions) 36
  36. 36. Axure Prototype Testing for Mobile 37
  37. 37. 其他雛形設計輔助軟體 Xmind FastStone Capture心智圖(需求整理) 螢幕畫面擷取編輯 更多簡介: http://briian.com/?p=5713http://www.xmind.net/ 38
  38. 38. Interface Sketch 圖片來源: http://interfacesketch.tumblr.com/ 39
  39. 39. POP – Prototyping On Paper 圖片來源: http://popapp.in/ 40
  40. 40. 本次練習重點-Paper Prototyping 圖片來源: Samuel Mann ,http://www.flickr.com/photos/21218849@N03/sets/72157629538078220/ 41
  41. 41. 5點PP可能的問題與解答縮寫: 本五點部分內容引用自UX map,並進行內容部分修改:Wireframe prototyping(WP) http://uxmap.net/2011/02/28/7-myths-about- paper-prototyping/Paper prototyping(PP) 42
  42. 42. 做就對了,管你畫得好不好!• 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
  43. 43. 做就對了,管你畫得好不好!圖片來源: http://www.userfocus.co.uk/resources/prototype.html / 圖片來源: http://assets.uxbooth.com/uploads/2010/08/paperPrototype.png 44
  44. 44. 做就對了,管你畫得好不好!• PP的目的是用來評估使用者介面背後的 idea,而非圖像本身的意義。 45
  45. 45. 做就對了,管你畫得好不好!• PP是可以缺乏藝術性的,所呈現出來在視 覺上是相當簡單且自然的。 46
  46. 46. 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
  47. 47. WF和PP是不同的!• WF通常代表的是產品設計階段的尾端, PP通常代表的是一開始。• WF很耗時耗力,PP快速完成。• WF專注於版型上,客戶通常會進行挑剔, 如顏色、字形等視覺層面。設計初期必須 專注在導覽,操作流程或功能性方面等。 48
  48. 48. 離開電腦,手繪/製你的PP吧! • Myth : “I can do it just as well with Visio/AxureRP.”圖片來源, http://andrewgarrison.com/project/codemonkey/ 49
  49. 49. 離開電腦,手繪/製PP吧!• 電腦軟體通常: – 限制如何實現某設計時的思考。 – 並不適合在找出腦力激盪中對的設計。 – 僅適用關於逐步改善的部分。• 『一開始必須要去找到對的設計(the right design),之後再專注到去設計對的事物 (the design right)』 – Bill Buxton, Principal Researcher Microsoft Research 50
  50. 50. 離開電腦,手繪/製你的PP吧!/ 圖片來源: http://www.teehanlax.com/blog/ipad-gui-psd-retina-display/ 51
  51. 51. PP也是很專業的!• Myth : “It looks unprofessional.” 圖片來源: Office線上圖庫 52
  52. 52. PP也是很專業的!• 專業的定義,是得到使 用者的「實際」參與; 快速完成,快速取得 使用者的滿意。• 在設計流程中很早就將 使用者參與進來,並且 很認真的考量他們的 意見。 53
  53. 53. PP也是可以做互動的!• Myth : “I can’t prototype interactivity.” 圖片來源: http://www.alistapart.com/articles/paperprototyping/ 54
  54. 54. PP也是可以做互動的!• 這點實質上這是對的,也是有些複雜的互 動形式並不適合用在PP上;如Google Map效果等。• 但是絕大多數的網站與軟體的互動方式, 甚至是在行動裝置上面,依然是指向(Point) 與點擊(Click)的動作為基礎,這些可以很簡 單的利用PP來模擬。 55
  55. 55. 夜市人生!圖片來源:http://www.flickr.com/photos/lightstars/2341036366/ 56
  56. 56. 用電腦逛夜市… 57圖片來源:http://www.walkgoler.cc/qmap/113 圖片來源:http://www.walkgoler.cc/qmap/113
  57. 57. 58
  58. 58. 用手機/平板逛夜市…? 59
  59. 59. 設計參考 60
  60. 60. 設計參考 『食在好康』 Android平台61
  61. 61. 設計參考 『台灣夜市大全+』 Android平台62
  62. 62. 微型工作坊1. 【雛形設計】Paper Prototyping (10分鐘) – 不用管現實做不做的到,請創意發想 – 如果小組已有想法,請大家依據想法共同設計 – 同時想出一個吸引人的APP名稱 – 請將雛形畫在手上的小卡上,一張畫一個畫面,僅 畫正面背面不要畫,紙不夠可以和助教拿(1人6張)2. 【小組討論】小組內各自介紹自己的想法 – 共同推選出設計最有特色的一份進行成果發表 (10 分鐘) – 討論過程若有新的想法可重新手繪3. 【成果發表】每組2分30秒 (10分鐘)4. 【全班討論】想法分享 (5分鐘) 63
  63. 63. Q&A 64
  64. 64. 聯絡資料• 基本資料 – 楊梭逸 – bhm@mail.linkchain.tw – 0952-641875• 個人Facebook – https://www.facebook.com/souyiyang• 個人網絡名片 – http://about.me/bhm• 個人部落格 – http://www.bhm.idv.tw/blog/ 65
  65. 65. 近期服務與設計相關活動 • 12/15 – UX使用者 經驗高峰 會心得分 享,高雄 軟體科技 園區(暫定) – Axure RP 使用者聚 會,台南 (暫定) – 以上有可 11/30 能會合辦 66
  66. 66. 優設聚落(Users Village)• 本聚落是以推廣設計思考、服務設計、使 用者經驗設計等使用者中心設計為主旨, 進行各項設計與研究方法的實作,藉此提 升南部從業人員的能力,讓日常工具使用 更為友善,進而促進區域產業升級。 67

    Be the first to comment

    Login to see the comments

  • LinYiHung

    Dec. 12, 2012
  • chuck7349

    Dec. 18, 2012
  • alexchou0008

    Dec. 7, 2013
  • christinashan1

    Dec. 5, 2014
  • yukiko.young

    Jan. 18, 2015
  • MadeleineLee

    Feb. 26, 2015
  • KAKASHITW

    Jul. 27, 2015
  • wenshanchang

    Oct. 4, 2015

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

Views

Total views

2,113

On Slideshare

0

From embeds

0

Number of embeds

12

Actions

Downloads

66

Shares

0

Comments

0

Likes

8

×