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.
Upcoming SlideShare
App使用者經驗設計
Next
Download to read offline and view in fullscreen.

75

Share

Download to read offline

20130112用原型驅動設計@webconf

Download to read offline

原型是網站或App開發過程當中,不可或缺的一項實用技巧。原型能夠讓我們用更少的成本、更短的時間,驗證某項設計的可行性,進而提高最終產品的品質。也能夠促進不同職能團隊成員間的溝通,避免想像與成果間的落差。本議程介紹基本的原型設計工具與其應用時機。

Related Books

Free with a 30 day trial from Scribd

See all

20130112用原型驅動設計@webconf

  1. 1. ⽤用原型驅動設計PROTOTYPING DRIVEN DESIGN 阿修
  2. 2. 阿修台灣使用者經驗設計協會(UiGathering)創會成員與工作小組理事·•www.lis186.com·•lis186@gmail.com·•twitter @lis186
  3. 3. 動⼯工前你會先畫草圖嗎? http://designedbynatalie.com/2010/01/31/case-study-part-1-victorsfood-brief-wireframe-concept/
  4. 4. 原型為什麼重要?
  5. 5. WATERFALL已經不符合時代潮流
  6. 6. 專業分⼯工 研究 設計 前端 後端 ⼈人⽂文 ⼯工程 前端 後端 設計師 ⼯工程師 ⼯工程師改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html
  7. 7. 從GUI到NUI
  8. 8. RESPONSE WEB DESIGNhttp://theindustry.cc/2012/02/06/your-response-responsive-web-design/
  9. 9. 不可能⼀一次想清楚、 講清楚所有的事file folders image by CraterValley Photo from Fotolia.com
  10. 10. http://software-document.blogspot.tw/2010/11/scrum-sprint.html
  11. 11. 環環相扣 研究 設計 前端 後端 ⼈人⽂文 ⼯工程 使⽤用者經驗 應⽤用程式 設計師 ⼯工程師 使⽤用者界⾯面 ⼯工程師改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html
  12. 12. 專業分⼯工,環環相扣 使⽤用者經驗 資訊 設計師 設計 互動 研究 設計 前端 後端 ⼈人⽂文 設計 視覺 ⼯工程 研究員 應⽤用程式 設計 視覺 ⼯工程師 設計師 使⽤用者界⾯面 ⼯工程師改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html
  13. 13. ⽤用原型驅動設計http://www.flickr.com/photos/maxdicapua/4461034536/
  14. 14. 原型設計可幫助你• 打磨點⼦子,做出更好的設計決策• 探索未知,減少思考的盲點• 便於溝通,減少誤解• 早期發現,早期「治療」• 確認技術可⾏行性• 銷售你的解決⽅方案
  15. 15. 原型的流程
  16. 16. Assassins Creed 2
  17. 17. Assassins Creed 2
  18. 18. 原型的流程起點 評估需求 製作原型終點 評估原型
  19. 19. 反覆制作原型,不斷進化http://www.youtube.com/watch?v=-9Psqkq1nwU
  20. 20. 從低⾵風險的開始http://www.youtube.com/watch?v=OLC9C5A0u-8
  21. 21. 原型的形式和⼯工具
  22. 22. 紙⾯面原型
  23. 23. ⼿手⼯工打造的HTML
  24. 24. ⼯工具輸出的HTMLhttp://www.userxper.com/samples/zh/Prototypes/demo_TravelSite/index.html
  25. 25. 影⽚片http://www.youtube.com/watch?v=Y6295G425X8
  26. 26. 互動的FLASH
  27. 27. 簡報http://cvil.ly/2010/05/16/creating-ipad-prototypes-on-the-ipad/
  28. 28. 可點擊的PDFhttp://www.joydeepsg.com/2009/10/tour-planner/
  29. 29. 上線環境http://ca.rroll.net/2008/02/05/ruby-on-rails-development-with-gedit/http://www.plaidsoftware.com/
  30. 30. ⽴立體模型http://www.joystiq.com/2007/12/31/wii-prototype-auction-is-disappointing/
  31. 31. PROTOTYPING的形式 紙⾯面原型 81% ⼿手⼯工打造的HTML 58% ⼯工具輸出 (Axure, Fireworks...) 39% ⽤用HTML做的可點擊的螢幕截圖 34% Flash, Flex, AIR或Blend 27% Keynote或PowerPoint 24% 可點擊的PDF 21%上線環境 (Rails, Java, XCode...) 9% ⽴立體模型3%
  32. 32. DOUBLE DIAMOND設計流程 點⼦子 願景 成果 時間 Discover Define Develop DeliverDesign Council, 2005
  33. 33. ⽤用原型驅動設計 戰略 戰術 點⼦子 願景 成果 時間 Discover Define Develop DeliverDesign Council, 2005
  34. 34. PROTOTYPING的⼯工具 紙和筆 77% Visio 59%Dreamweaver 47% PowerPoint 43% Axure 30% OmniGraffle 30% Illustrator 23% Flash 21% Acrobat 19% Fireworks 18% InDesign 12% Photoshop 10%
  35. 35. PROTOTYPING⼯工具選擇 互動 上線環境 多媒體軟體 各種⽂文具⽤用品 原型設計軟體 簡報軟體敏捷 精細 紙、筆 繪圖軟體 靜態
  36. 36. 原型設計原則
  37. 37. 了解原型會給誰看http://www.jasmine.com.tw/wiki/show-1754.aspxhttps://www.house123.com.tw/group/project/26
  38. 38. 設定你要探索的範圍incredibleshttp://www.coroflot.com/Artmonkeys/Animation-Character-Illustrationhttp://thelongestdayhasanend.blogspot.tw/2010/11/grammar-of-ornament-colour-and-pattern.htmlhttp://salemwitchtales.wordpress.com/
  39. 39. 選擇適合的⼯工具http://www.flickr.com/photos/frankieroberto/2904690694/http://dschool.stanford.edu/blog/2010/10/27/user-testing-with-kids-lessons-from-the-field/
  40. 40. 剛好夠的精細度 視覺 草圖 ⾵風格設定 功能 按這裡開 載⼊入中 始載⼊入 靜態 互動 內容 假字 真實⽂文字http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/
  41. 41. 不⼀一定要⾃自⼰己做Sketching user experience (Bill Buxton, 2007)
  42. 42. 精細度⾜足夠就好http://www.flickr.com/photos/rohdesign/3307873748/
  43. 43. 誰說紙不能動
  44. 44. 混合應⽤用⾼高科技與低科技
  45. 45. 只作需要的部分
  46. 46. 及早開始作原型Palm Pilot wooden form factor prototype (Hawkins, Jeff, 1995)
  47. 47. 重點回顧• 了解原型會給誰看• 選擇適合的⼯工具• 精細度⾜足夠就好• 不⼀一定要⾃自⼰己做• 只作需要的部分• 越早做越常做,⾵風險越低
  48. 48. HAVE FUN!http://www.youtube.com/watch?v=WuP78X6H5JU
  49. 49. Q&A
  50. 50. 謝謝指教! 阿修 ·•台灣使用者經驗設計協會(UiGathering) 創會成員與工作小組理事 ·•www.lis186.com ·•lis186@gmail.com ·•twitter: @lis186
  51. 51. ⽤用紙⽚片原型作使⽤用性測試https://www.youtube.com/watch?v=9wQkLthhHKA
  52. 52. 營造測試環境http://www.youtube.com/watch?v=4wuyFF0OGrU
  • Vincent2020

    Aug. 2, 2017
  • vince78718

    Oct. 12, 2016
  • YiBinLi2

    Feb. 2, 2016
  • leo424y

    May. 25, 2015
  • chiehjenc

    Mar. 19, 2015
  • IfLin

    Feb. 10, 2015
  • AaronKing6

    Dec. 3, 2014
  • HuangDustin

    Dec. 25, 2013
  • allensph

    Dec. 22, 2013
  • muhaha03

    Oct. 4, 2013
  • ssuser0f1d45

    Aug. 13, 2013
  • ssuserffe72c

    Aug. 8, 2013
  • shunz

    Jul. 21, 2013
  • jjroox

    Jul. 17, 2013
  • chisenchiou

    Jul. 12, 2013
  • hiiamjy

    Jul. 9, 2013
  • sunwingman

    Jun. 9, 2013
  • mshchc

    May. 10, 2013
  • steven.hy.tseng

    May. 1, 2013
  • benuxwei

    Apr. 26, 2013

原型是網站或App開發過程當中,不可或缺的一項實用技巧。原型能夠讓我們用更少的成本、更短的時間,驗證某項設計的可行性,進而提高最終產品的品質。也能夠促進不同職能團隊成員間的溝通,避免想像與成果間的落差。本議程介紹基本的原型設計工具與其應用時機。

Views

Total views

11,598

On Slideshare

0

From embeds

0

Number of embeds

5,595

Actions

Downloads

309

Shares

0

Comments

0

Likes

75

×