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.

Digital product design process

147 views

Published on

數位產品設計懶人包,工程師該知道的基礎設計。

Published in: Design
  • Be the first to comment

Digital product design process

  1. 1. 2019.08.21 ⼯程師該知道的基礎設計 產品設計懶⼈包
  2. 2. Zoe |八年業務經驗 |轉職 |現任UX/UI設計師 「許多東⻄都因不發問⽽喪失。」
  3. 3. Agenda • 產品設計 • 實際經驗分享 • 關於設計
  4. 4. 先了解產品流程 分享產品設計之前
  5. 5. 定義需求 了解使⽤者 介⾯設計評估 使⽤者測試 資訊架構 Wireframes prototype 前端開發 深入研究 及探討 技術開發 功能技術⽀持 數位產品流程
  6. 6. ⼀個專案要思考的事 使⽤者需求 商業⽬標 技術限制
  7. 7. 客⼾/老闆這樣說⋯⋯ • 可以⽤FB註冊吧?Line也可以吧? • 步驟越少越好• 那個XXX app的功能很好我們也要 • 介⾯越簡單越好 • 風格要活潑、有質感⼀點 • 顏⾊要⽤我的公司的顏⾊ • 我們有⼀個原本的系統,可 以直接給你們資料
  8. 8. 解決___問題,需要___服務/功能/設計。
  9. 9. 深入研究&探討 了解市場上商品的優缺點 研究 產業概況 定義 產品價值 分析 競品現況
  10. 10. 介⾯設計與調整 將想法轉換成實際畫⾯ 視覺設計 使⽤測試
  11. 11. 以解決問題為⽬標 視覺設計 風格配⾊
  12. 12. 將想法落實到視覺畫⾯ 提案範例
  13. 13. 以解決問題為⽬標 視覺設計 版型字體
  14. 14. 以解決問題為⽬標 視覺設計 表現⼿法 元素 留⽩空間 流體、漸變⾊彩 層次設計 視頻影片 Free %123 13,68512,003 200,000 Free %123
  15. 15. 將線稿變成畫⾯-Web 視覺設計
  16. 16. 將線稿變成畫⾯-App 視覺設計
  17. 17. 溝通往往是最⼤的挑戰 每個⼈的想法都不同,完成數位產品的挑戰在於快速集結所有想法,找出可解決的⽅法 我要給⼩明 💰1,000 密碼登入好⿇煩 ❗ 我什麼資料都想看 🤩 ⼀般⽤⼾思考規劃設計思考 轉帳的⽅式?需要的資訊? FB登入?google登入? 資料有什麼資料?怎麼呈現?
  18. 18. ⼯具只是輔助,重點還是怎麼使⽤ 專案溝通⼯具 User Story Functional Map Flow Chart UI Flow Prototype Wireframe Mockup Guideline 需求釐清 畫⾯產出 ⽂件交付
  19. 19. www.sharmedesign.com 實例分享 • 傳統產業數位轉型 • 新創產品
  20. 20. |原有內部資訊系統 |敏捷式開發 |數位部⾨窗⼝ 快速開發,專案時程緊湊 傳統產業數位轉型
  21. 21. 時間這麼短怎麼做得完?
  22. 22. 優先順序很重要
  23. 23. |相似的產品系統 |瀑布式開發 |創業主 釐清專案需求,完成專案⽬標 新創產品
  24. 24. 需求改來改去?
  25. 25. 陪業主⼀起釐清
  26. 26. 建立共通的語⾔ 產品⽬標策略⼀致 使⽤的名詞彼此是否理解 讓資訊隨時透明與同步
  27. 27. www.sharmedesign.com 關於設計 • 對比 • 重複 • 對⿑ • 關聯性
  28. 28. 利⽤⾊彩、尺⼨、紋理、形狀的差異來凸顯 對比(Contrast) 主要動作(Primary action)、次要動作(Secondary action)、第三級動作(tertiary action)。 Yes! Yes! Yes!
  29. 29. 如果不知道顏⾊怎麼選 那就從⿊⾊、⽩⾊開始
  30. 30. 最基本的對比⾊ ⿊⽩對比 Yes! Yes! Yes!
  31. 31. 進階⼀點 把⿊⾊換成另⼀個顏⾊
  32. 32. 保持⼀致性,讓產品更容易使⽤跟被記住 重複(Repetition)
  33. 33. 中⽂兩⼤字型介紹 字型(fonts) 明體 ⿊體 休閒 明亮、年輕 辨識度⾼、強⽽有⼒ 有品味、優雅 嚴謹、正式 縮小也容易閱讀
  34. 34. 採⽤閱讀者良好體驗 字型(fonts) 可辨識性 (legibility) 易讀性 (readability) 城市 針對在地⽣活與⽂化適應性,提出以設計思 考的⾓度,推廣城市。 Facebook | Twitter | Youtube 城市 針對在地⽣活與⽂化適應性,提出 以設計思考的⾓度,推廣城市。 Facebook | Twitter | Youtube VS VS
  35. 35. 如果不知道字型怎麼選 那就從系統字開始
  36. 36. Web Android iOS 蘋⽅-繁思源⿊體 Roboto 思源⿊體 SF Pro台北⿊體
  37. 37. 可以讓項⽬有所連結、相互關聯、和諧⼀致的視覺效果 對⿑(Alignment)
  38. 38. 對⿑(Alignment) • 邊界與邊界對⿑ • ⽂字與⽂字對⿑ • 區塊與區塊對⿑ • ⽂字與區塊對⿑
  39. 39. 對⿑(Alignment) • 邊界與邊界對⿑ • ⽂字與⽂字對⿑ • 區塊與區塊對⿑ • ⽂字與區塊對⿑
  40. 40. 對⿑(Alignment) • 邊界與邊界對⿑ • ⽂字與⽂字對⿑ • 區塊與區塊對⿑ • ⽂字與區塊對⿑
  41. 41. 對⿑(Alignment) • 邊界與邊界對⿑ • ⽂字與⽂字對⿑ • 區塊與區塊對⿑ • ⽂字與區塊對⿑
  42. 42. ⼤腦會把靠近的事物看成⼀體 關聯性(Proximity) 採取能⼀⽬了然的⽅式
  43. 43. 關聯性(Proximity) 關聯性較低的內容要放在較遠的位置 ⼤腦會把靠近的事物看成⼀體
  44. 44. www.sharmedesign.com 設計資源 • 推薦網站-awwwards. webdesignclip • 設計作品-behance. dribbble. Pinterest, sketchappsources • 版型網站-format. wix • 其他資源-flaticon. myfonts. pexels
  45. 45. 各地的網站分享,主題多元 網⾴設計參考 awwwards webdesignclip
  46. 46. 設計師們的作品集散地 設計分享平台 Behance dribbble Pinterest
  47. 47. 設計師們的作品集散地 設計分享平台 sketchappsources
  48. 48. 專⾨提供版型給⼀般使⽤者 版型網站 Format Wix
  49. 49. 常⽤設計元素 其他設計資源 flaticon myfonts pexels Icon 字型 圖片
  50. 50. 看不出字形沒關係! myfonts-照片尋找字型 WhatTheFont
  51. 51. Thank You!

×