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
😡
許多人在彼此防備的狀況下
討論，取得共識品質不佳
建立參與者的連結，產出更高品質的想法
工作坊工具

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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