大綱： UI / UX 在數位環境中的功用。 思考：以使用者為主的 UI / UX 設計。 從「核心資訊與路徑」出發進行 UI / UX 模型規劃。 實戰與提醒。

1. UI＆UX

2. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

3. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

4. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116
User InterfaceUser Interface

5. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20140116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

6. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20140116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

7. UsereXperienceUsereXperience
UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

8. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20140116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

9. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

10. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

11. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

12. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

13. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116
• Start with needs.* （從需求出發）
• Do less.（簡單化）
• Design with data. （針對資料/資訊做設計）
• Do the hard work to make it simple. （花點⼼心思讓它變簡單）
• Iterate. Then iterate again. （檢視再檢視）
• Build for inclusion. （為使⽤用者設計）
• Understand context. （了解設計⺫⽬目標的本質）
• Build digital services, not websites. （做數位化服務，⽽而不只是個網站）
• Be consistent, not uniform. （⼀一致，但⾮非古板）
• Make things open: it makes things better.（讓所做的事開放，會讓所有事更好）
來源：https://www.gov.uk/design-principles

14. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116
• Start with needs.* （從需求出發）
• Design with data. （針對資料 / 資訊做設計）
• Build for inclusion. （為使⽤用者設計）
• Understand context. （了解設計⺫⽬目標的本質）
• Do less. （簡單化）
• Do the hard work to make it simple. （花點⼼心思讓它變簡單）
• Iterate. Then iterate again. （檢視再檢視）
• Be consistent, not uniform.（⼀一致，但⾮非古板）
• Build digital services, not websites.（做數位化服務,⽽而不只是個網站）
• Make things open: it makes things better.（讓所做的事開放，會讓所有事更好）

15. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

16. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

17. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116
現在的使⽤用者通常是透過連結(搜尋、推薦、社群或廣告等)進⼊入他們想要看的內容。
( 引⽤用⾃自：Are Halland： Core and Paths: Designing Findability from the Inside and Out (2007) )

18. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116
SEARCH “How to make a pizza” : http://bit.ly/1CroAgD

19. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116
mouseflow: http://mouseflow.com/

20. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

21. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

22. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

23. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

24. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116
STEP - 1

25. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116
1
4
2 3
56

26. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

27. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

28. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

29. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

30. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

31. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116
STEP - 2

32. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116
1
2

33. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

34. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

35. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

36. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

37. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116
STEP - 3

38. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

39. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

40. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116
STEP - 4

41. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

42. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

43. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

44. UI

45. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

46. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

47. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

48. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116

49. UI
本簡報製作引⽤用與延伸於 Ken Tsai（2014/01/16） 【MMdc 分享】關鍵數位學堂 L.7 UI/UX_20130116_蔡柏⽂文⽼老師
http://www.slideshare.net/Minmaxdc/l7-uiux20130116