成大心理系-Prototyping方法
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

成大心理系-Prototyping方法

on

  • 1,565 views

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

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

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

Statistics

Views

Total Views
1,565
Views on SlideShare
1,556
Embed Views
9

Actions

Likes
4
Downloads
40
Comments
0

1 Embed 9

http://140.116.183.229 9

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

成大心理系-Prototyping方法 Presentation Transcript

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