於 MOPCON 的演講，聊 UI/UX 工具應用於專案的關係；嘗試從工程視角切入，將相關的設計工具定義出 Input/Output，來作為未來導入時的情境參考。UI/UX 工具很適合幫助視覺化設計溝通常見的需求資訊，例如透過人物誌建立使用者的代理人、或是透過顧客旅程將服務流程視覺化等等，值得相關服務設計（軟體設計/體驗設計等) 的工作者進行參考。

1. 彭其捷
http://visualization.tw/
巧用 UI/UX 工
具，提升設計溝
通品質

2. source
https://www.facebook.com/phot
o.php?fbid=4991781420855661

3. 3

4. http://digitalfractal.com/2016/
10/mobile-app-ui-user-
interface-ux-user-experience/
4

5. 5
https://www.interaction-design.org/
UI/UX
工具箱

6. 版權所有：彭其捷
ABOUT ME
6

7. （Copyright © 2022 ：彭其捷｜版權所有）
I like writing books
UI/UX Data / Visualization

8. 個人網站
https://www.visualization.tw/
8

9. （Copyright © 2022 ：彭其捷｜版權所有）
設計 程式 管理
DESIGN CODING MANAGEMENT
About Me
9

10. https://cameo.tw/tw/

11. 公司的常見工作場景，便利貼是我們的好夥伴！

12. 版權所有：彭其捷
UIUX 不是設計技巧嗎？
跟工具的關係 ?
12

13. （Copyright © 2022 ：彭其捷｜版權所有）
Input > Process > Output
1+1 = 2

14. （Copyright © 2022 ：彭其捷｜版權所有）
Input > (What happened?) > Output
對於 UI 設計
沒有共識
對於 UI 設計
產生共識

15. （Copyright © 2022 ：彭其捷｜版權所有）
Input > (tool) Wireframe > Output
對於 UI 設計
沒有共識
對於 UI 設計
產生共識

16. （Copyright © 2022 ：彭其捷｜版權所有）
Input > (tool) 5 Whys > Output
無法從使用
者問到服務
的關鍵痛點
原來使用者
最在意的是....

17. （Copyright © 2022 ：彭其捷｜版權所有）
UI/UX Toolbox
很多關於 UI/UX 的工作挑戰
都有對應的：方法/工具/最佳實踐
Blackbox

18. （Copyright © 2022 ：彭其捷｜版權所有）
Cheatsheet？
突發奇想，有沒有可能 UI/UX 方法也能有一張好參照的 Cheatsheet 呢？

19. （Copyright © 2022 ：彭其捷｜版權所有）
製作中 ～ 有興趣的人可留下您的 Mail，我完成後會分享喔！
Python
Cheatsheet
MySQL
Cheatsheet
UI/UX
Cheatsheet
AWS
Cheatsheet

20. 版權所有：彭其捷
關於「設計溝通」
20

21. 21

22. https://www.facebook.com/joejoeyourmoney/p
hotos/a.10150326769327276/1015292525271
7276/?type=3

23. Type A Type B
Q：是否曾遇過不好的經驗，關於設計風格的主觀偏好？

24. （Copyright © 2022 ：彭其捷｜版權所有）
視覺會不會，我們常常沒有找到合適的溝通「方法」
https://www.uxdesigninstitute.com/blog/5-elements-of-ux-design/
[L5.Surface] 較容易討論，有各
種的設計方法與視覺技法
[L1.Stategy] 基礎溝通工作超重
要，由於相對抽象，所以很容易
被忽視，或被以為很簡單

25. 版權所有：彭其捷
持續彙整能夠提升
溝通品質的 UI/UX 工具
25

26. （Copyright © 2022 ：彭其捷｜版權所有）
1. 專案階段
[持續彙整中] 專案過程常見的 個艱難溝通痛點 ＆ 應對工具
2. 溝通痛點
3. 對應工具

27. 六個 UI/UX
溝通工具範例 工作坊
模式
關係人地圖
沈浸式腦
力激盪法
決策
貼紙法
人物誌
方法
Postit
APP
#1 #2 #3
#4 #5 #6

28. 版權所有：彭其捷
#1：工作坊模式
28
Workshop

29. （Copyright © 2022 ：彭其捷｜版權所有）
使用情境 > 成果展示
Idea 1 Idea 2 Idea 3
😡
許多人在彼此防備的狀況下
討論，取得共識品質不佳
建立參與者的連結，產出更高品質的想法
工作坊工具

31. 版權所有：彭其捷
#2：關係人地圖
31
Stakeholder Mapping

32. （Copyright © 2022 ：彭其捷｜版權所有）
使用情境 > 成果展示
模糊不清的「使用者」想像 有團隊共識，被排序過優先權的使用者對象
我們想做一個旅遊
的服務！！讓大家
都覺得很好用！
關係人地圖工具

33. （Copyright © 2022 ：彭其捷｜版權所有）
使用情境 > 成果展示
我們想做一個旅遊
的服務！！讓大家
都覺得很好用！
重要對象
次最要
最終目標

34. 版權所有：彭其捷
#3：人物誌
34
Persona

35. （Copyright © 2022 ：彭其捷｜版權所有）
使用情境 > 成果展示
被團隊人員，慣性的主觀並
且錯誤代理的使用者需求
以真實使用者為核心，所建立的使用者履歷
我覺得背包客
都喜歡 xxx 吧
！
才不是，我覺
得背包客是一
群 xxx 的人！
https://compose.ly/strategy/user-persona-guide/

36. （Copyright © 2022 ：彭其捷｜版權所有）
使用情境 > 成果展示
確立符合重要關係人的
使用者族群
Step1
若能有真實的某個人
為調查基礎為最佳
Step2
嘗試寫一段需求故事
（任務目標）
Step3
寫下此人的
期待（Gain）與挫折（Pain）
Step4

38. 版權所有：彭其捷
#4：靜默腦力激盪法
38
Silent Brainstorming

39. （Copyright © 2022 ：彭其捷｜版權所有）
使用情境 > 成果展示
明明是腦力激盪，但都在比
拳頭與位階大小
讓更多人願意分享，且分享的品質更好，並
同時建立團隊彼此的同理心

40. （Copyright © 2022 ：彭其捷｜版權所有）
使用情境 > 成果展示
Step1：確認靜默撰寫的題目 Step2：宣布本輪有多少時間
Step3：靜默撰寫 ing（通常抓 5-10 分鐘） Step4：宣布本輪有多少時間

41. 版權所有：彭其捷
#5：決策貼紙法
41

42. Question
點子很多時，如何決定採
用哪一個呢？

43. https://divergentthinking.design/why-
divergent-thinking

44. （Copyright © 2022 ：彭其捷｜版權所有）
使用情境 > 成果展示
想法很多，難以收斂與決定 在相對民主的框架下，可視覺化團隊點子熱
區，讓討論更快聚焦！

45. （Copyright © 2022 ：彭其捷｜版權所有）
使用情境 > 成果展示
Vision
A
Vision
B
Vision
C
Vision
D
Vision
C
Vision
D
撰寫
點子
建立
分類
同時
投票
Step1 Step2 Step3

46. 版權所有：彭其捷
#6：PostIt APP
46

47. （Copyright © 2022 ：彭其捷｜版權所有）
使用情境 > 成果展示
便利貼好多，數位化很麻煩！ 快速將便利貼數位與物件化，很方便！

48. （Copyright © 2022 ：彭其捷｜版權所有）
使用情境 > 成果展示
Step1 Step2 Step3
輕鬆數位化
歸檔

49. 版權所有：彭其捷
結論
49

50. 大部分的設計溝通問題
都可能透過合適的工具或
是方法，來提升討論與決
策的品質

51. （Copyright © 2022 ：彭其捷｜版權所有）
推薦書籍：設計的方法
有非常豐富的設計
方法與工具介紹，
但較缺少實務操作
的流程說明

52. Q & A
彭其捷
http://visualization.tw/