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

1. 2019.08.21
⼯程師該知道的基礎設計
產品設計懶⼈包

2. Zoe
｜八年業務經驗
｜轉職
｜現任UX/UI設計師
「許多東⻄都因不發問⽽喪失。」

3. Agenda
• 產品設計
• 實際經驗分享
• 關於設計

4. 先了解產品流程
分享產品設計之前

5. 定義需求
了解使⽤者
介⾯設計評估
使⽤者測試
資訊架構
Wireframes
prototype
前端開發
深入研究
及探討
技術開發
功能技術⽀持
數位產品流程

6. ⼀個專案要思考的事
使⽤者需求
商業⽬標
技術限制

7. 客⼾/老闆這樣說⋯⋯
• 可以⽤FB註冊吧？Line也可以吧？
• 步驟越少越好• 那個XXX app的功能很好我們也要
• 介⾯越簡單越好
• 風格要活潑、有質感⼀點
• 顏⾊要⽤我的公司的顏⾊
• 我們有⼀個原本的系統，可
以直接給你們資料

8. 解決＿＿＿問題，需要＿＿＿服務/功能/設計。

9. 深入研究&探討
了解市場上商品的優缺點
研究
產業概況
定義
產品價值
分析
競品現況

10. 介⾯設計與調整
將想法轉換成實際畫⾯
視覺設計 使⽤測試

11. 以解決問題為⽬標
視覺設計
風格配⾊

12. 將想法落實到視覺畫⾯
提案範例

13. 以解決問題為⽬標
視覺設計
版型字體

14. 以解決問題為⽬標
視覺設計
表現⼿法 元素
留⽩空間 流體、漸變⾊彩
層次設計 視頻影片
Free
%123
13,68512,003
200,000 Free
%123

15. 將線稿變成畫⾯-Web
視覺設計

16. 將線稿變成畫⾯-App
視覺設計

17. 溝通往往是最⼤的挑戰
每個⼈的想法都不同，完成數位產品的挑戰在於快速集結所有想法，找出可解決的⽅法
我要給⼩明 💰1,000
密碼登入好⿇煩 ❗
我什麼資料都想看 🤩
⼀般⽤⼾思考規劃設計思考
轉帳的⽅式？需要的資訊？
FB登入？google登入？
資料有什麼資料？怎麼呈現？

18. ⼯具只是輔助，重點還是怎麼使⽤
專案溝通⼯具
User
Story
Functional
Map
Flow
Chart
UI
Flow
Prototype
Wireframe
Mockup
Guideline
需求釐清 畫⾯產出 ⽂件交付

19. www.sharmedesign.com
實例分享
• 傳統產業數位轉型
• 新創產品

20. ｜原有內部資訊系統
｜敏捷式開發
｜數位部⾨窗⼝
快速開發，專案時程緊湊
傳統產業數位轉型

21. 時間這麼短怎麼做得完？

22. 優先順序很重要

23. ｜相似的產品系統
｜瀑布式開發
｜創業主
釐清專案需求，完成專案⽬標
新創產品

24. 需求改來改去？

25. 陪業主⼀起釐清

26. 建立共通的語⾔
產品⽬標策略⼀致
使⽤的名詞彼此是否理解
讓資訊隨時透明與同步

27. www.sharmedesign.com
關於設計
• 對比
• 重複
• 對⿑
• 關聯性

28. 利⽤⾊彩、尺⼨、紋理、形狀的差異來凸顯
對比(Contrast)
主要動作(Primary action)、次要動作(Secondary action)、第三級動作(tertiary action)。
Yes! Yes! Yes!

29. 如果不知道顏⾊怎麼選
那就從⿊⾊、⽩⾊開始

30. 最基本的對比⾊
⿊⽩對比
Yes! Yes! Yes!

31. 進階⼀點
把⿊⾊換成另⼀個顏⾊

32. 保持⼀致性，讓產品更容易使⽤跟被記住
重複(Repetition)

33. 中⽂兩⼤字型介紹
字型(fonts)
明體 ⿊體
休閒
明亮、年輕
辨識度⾼、強⽽有⼒
有品味、優雅
嚴謹、正式
縮小也容易閱讀

34. 採⽤閱讀者良好體驗
字型(fonts)
可辨識性
（legibility）
易讀性
（readability）
城市
針對在地⽣活與⽂化適應性，提出以設計思
考的⾓度，推廣城市。
Facebook | Twitter | Youtube
城市
針對在地⽣活與⽂化適應性，提出
以設計思考的⾓度，推廣城市。
Facebook | Twitter | Youtube
VS
VS

35. 如果不知道字型怎麼選
那就從系統字開始

36. Web Android iOS
蘋⽅-繁思源⿊體
Roboto
思源⿊體
SF Pro台北⿊體

37. 可以讓項⽬有所連結、相互關聯、和諧⼀致的視覺效果
對⿑(Alignment)

38. 對⿑(Alignment)
• 邊界與邊界對⿑
• ⽂字與⽂字對⿑
• 區塊與區塊對⿑
• ⽂字與區塊對⿑

39. 對⿑(Alignment)
• 邊界與邊界對⿑
• ⽂字與⽂字對⿑
• 區塊與區塊對⿑
• ⽂字與區塊對⿑

40. 對⿑(Alignment)
• 邊界與邊界對⿑
• ⽂字與⽂字對⿑
• 區塊與區塊對⿑
• ⽂字與區塊對⿑

41. 對⿑(Alignment)
• 邊界與邊界對⿑
• ⽂字與⽂字對⿑
• 區塊與區塊對⿑
• ⽂字與區塊對⿑

42. ⼤腦會把靠近的事物看成⼀體
關聯性(Proximity)
採取能⼀⽬了然的⽅式

43. 關聯性(Proximity)
關聯性較低的內容要放在較遠的位置
⼤腦會把靠近的事物看成⼀體

44. www.sharmedesign.com
設計資源
• 推薦網站-awwwards. webdesignclip
• 設計作品-behance. dribbble. Pinterest, sketchappsources
• 版型網站-format. wix
• 其他資源-flaticon. myfonts. pexels

45. 各地的網站分享，主題多元
網⾴設計參考
awwwards webdesignclip

46. 設計師們的作品集散地
設計分享平台
Behance dribbble Pinterest

47. 設計師們的作品集散地
設計分享平台
sketchappsources

48. 專⾨提供版型給⼀般使⽤者
版型網站
Format Wix

49. 常⽤設計元素
其他設計資源
flaticon myfonts pexels
Icon 字型 圖片

50. 看不出字形沒關係！
myfonts-照片尋找字型
WhatTheFont

51. Thank You！