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
UX 策略
UX 策略
Loading in …3
×
1 of 41

UI UX 概論

9

Share

Download to read offline

基本了解 UI UX 的差異以及了解在 UCD 中 UX 方法與工具在什麼時機點使用

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

UI UX 概論

  1. 1. UI UX 概論 WHAT’S UI UX? RUBY KUAN 1
  2. 2. Ruby Kuan 關芸如 台灣赫斯特媒體 Digital Director 數位總監 ELLE / 柯夢波丹丹 / Harper’s Bazaar Linkedin Proficient in: User Research, User Experience, Persona & Scenarios, Products Development, Project Management, Internet Marketing, Community Marketing, 2004 匯通數位/無名⼩小站 > 2007 痞客邦 > 2009 李奧⾙貝納 > 2010 創業 > 2012 痞客邦 >2016 赫斯特 資歷14年,著重在網路服務開發、User research、社群⾏銷操作,開發過無數 網路服務 無名小站網誌地圖、音樂、投票、照片上傳、投稿系統以及娛樂名人堂等, 以及痞客邦使用者後台、新手上路、註冊流程、全站管理系統、三大首頁、 電影、娛樂、美妝頻道、7Headlines 等
  3. 3. UX UI WHAT’S UI UX? 對UI(使用者介面)與UX(使用者經驗)有初步的了解 認識使用者經驗之設計原則與常用方法論
  4. 4. 線上投票 線上即時問答
  5. 5. UI 是系統和用戶之間進行互動和資訊交換的媒介,它實 作資訊的內部形式與人類可以接受形式之間的轉換。 介於使用者與硬體設計彼此之間互動溝通相關介面, 目的在使得使用者能夠方便有效率地去操作以達成雙 向互動。 USER INTERFACE 使用者介面/用戶介面
  6. 6. UX 涉及到一個人使用一個特定產品或系統或服務的有關 行為、態度、與情緒。 用戶體驗,包括實際、體驗、情感、有意義、有價值的人機 交流、和產品所有權方面的問題。 USER EXPERIENCE 使用者經驗/用戶體驗
  7. 7. UI UX Design trends specification Platforms and tools Multi-device experience Flow and process User Experience Design Multi-device design
  8. 8. UI INTERFACE
  9. 9. EXPERIENCEUX
  10. 10. UI INTERFACE 亨氏番茄醬 https://goo.gl/3cMuUH
  11. 11. EXPERIENCEUX
  12. 12. UI INTERFACE
  13. 13. UX EXPERIENCE 會發出聲音嗶嗶嗶
  14. 14. UX EXPERIENCE 1956年年 《冰箱安全法案》
  15. 15. UI UX
  16. 16. UX UI
  17. 17. via: Jayan Narayanan
  18. 18. https://www.youtube.com/watch?v=Q5763pPchvw
  19. 19. Navigation bar mail box Profile thumbnail Content image/video Clickable text Button Tab bar UI IS WHAT
  20. 20. Why is this page the homepage Why are we displaying user faces Why is the content this size/long Why those name need to be clickable Why are we allowing to do those Why 5 tabs UX IS WHY
  21. 21. ALL ABOUT PEOPLE
  22. 22. UX researcher UI designer User Experience Research Usability Expert Analytics Visual Design
 *視覺化過程,透過互動設計後所做出的最後結果 Interaction Design *針對 usefulness, usability, emotional 做設計,比較 像是⽅方法,⽽而非結果 找出病灶、確診-⾨門診醫師 Patient doctor UX designer 決定治療⽅方法-主任醫師 Chief Physician 進⾏行行治療-外科醫師 Surgeons Strategy Product Design Information Design
  23. 23. UX BEFORE UIUX UI
  24. 24. User Experience Research “when marketing research is needed, and user experience research is needed!” 讓產品設計決策更更具備共識 減少規格的變動 ⾏行行銷了了解切入⾓角度 有可以依據的⽅方向加速產品的開發
  25. 25. INVOLVEUX
  26. 26. Experience Designer Information Architecture User research practices Visual design Interaction design Editing & curatingCopy writing Design process management Information design Agile methods Analytics User cases Domain knowledge ROI Business knowledge Technology Marketing Social Networks Ethnography Storytelling Sketching Presenting Facilitating Critiquing *直接關聯聯性:紅⾊色>藍藍⾊色>⿊黑⾊色
  27. 27. User Experience Research 使⽤用者體驗研究 Marketing Research 市場研究 Interaction Design 互動設計 Visual Design 視覺設計 Product Design 產品設計 Usability Expert 易易⽤用性研究 Anthropology Research ⼈人類學研究 Web Develop 網⾴頁開發 Front to End Engineer 前端⼯工程 UX
  28. 28. Visual Design Interaction Design Product Design Usability Expert User Experience Research UI designer UX designer UX researcher 不同⾓角⾊色的領域交集 FE engineer Visual designer
  29. 29. Service Blueprint Consumer Journey Map Personas Ecosystem Map Competitive Audit Value Proposition Stakeholders Interviews Key Performance Indicators Brainstorming Moodboards Storyboards User Flow Task Analysis Taxonomies Content Audit Heuristic Analysis Sitemap Use Cases and Scenarios Metrics Analysis User Interview / Focus Group Quantitative Survey Usability Testing Card Sorting A/B Test Eyetracking Accessibility Analysis Sketches Wireframe METHODS AND TOOLSUX
  30. 30. Service Blueprint Consumer Journey Map Personas Ecosystem Map Competitive Audit Value Proposition Stakeholders Interviews Key Performance Indicators Brainstorming Moodboards Storyboards User Flow Task Analysis Taxonomies Content Audit Heuristic Analysis Sitemap Use Cases and Scenarios Metrics Analysis User Interview Focus Group Quantitative Survey Usability Testing Card Sorting A/B Test Eyetracking Accessibility Analysis Sketches Wireframe METHODS AND TOOLSUX questionnaire survey
  31. 31. Who are the Users? What are users trying to do? What will the interface look like How will it be organized ? What problems are users having Deploym ent and Release Project start Concept design Detailed design Product launch USER CENTERED DESIGN user centered design is a process
  32. 32. Who are the Users? What are users trying to do? What will the interface look like How will it be organized? What problems are users having Deployme nt and Release Project start Concept design Detailed design Product launch • Persona / Market Segmentation • Competitive Analysis • Contextual Inquiry • Stakeholder Interviews • Quality Function Deployment User Interview Focus Group
  33. 33. Who are the Users? What are users trying to do? What will the interface look like How will it be organized? What problems are users having Deployme nt and Release Project start Concept design Detailed design Product launch • Journey Map • Use Cases and Scenarios • Task Analysis User Interview Focus Group questionnaire survey
  34. 34. Who are the Users? How will it be organized? What problems are users having Deployme nt and Release Project start Concept design Detailed design Product launch • Sketches • Wireframing • Prototyping • Lean UX What are users trying to do? What will the interface look like
  35. 35. Who are the Users? What problems are users having Deployme nt and Release Project start Concept design Detailed design Product launch What are users trying to do? How will it be organized ? What will the interface look like • Card Sorting • Tree Testing • First Click Testing • Keystroke Level Modeling • Heuristic Evaluations
  36. 36. Who are the Users? Deployme nt and Release Project start Concept design Detailed design Product launch What are users trying to do? What will the interface look like How will it be organized? What problems are users having • Unmoderated Remote Usability Testing
  37. 37. Who are the Users? Project start Concept design Detailed design Product launch What are users trying to do? What will the interface look like How will it be organized? What problems are users having Deploym ent and Release •Usability Testing •Comparative Benchmark Study •A/B Testing
  38. 38. https://www.youtube.com/watch?v=Ovj4hFxko7c What the #$%@ is UX Design? via:UX Mastery
  39. 39. Do the design behind the visual UX
  40. 40. THANK YOU!! #LTUX_TP #LTUX facebook.Me: rubykuan418

×