資料視覺化是複雜資訊的解決辦法，即使是很龐大可怕的資訊，也能成為美麗的視覺，讓人快速理解。

1. Data Visualization and User Experience
資料視覺化與使⽤用體驗
卡米爾股份有限公司 專案經理理 彭其捷
foxfirejack@gmail.com
2017/7/11
國泰⾦金金控 企業內訓課程

2. 2
為什什麼來來？ ”
“
Question

3. 3
關於視覺化，最常⾒見見的視覺報表

4. 4
h"p://
theinspira-onroom.com/
daily/2012/the-cnn-
ecosphere-project/

5. 5
UK 24 – A typical day of UK Airspace visualised h"ps://www.youtube.com/watch?v=_jr6Ly7RBZg

6. 6
其實主要是使⽤用情境不同
沒有哪個真的比較好，長條圖也很棒棒的

7. 7
商務分析 視覺展現

8. 8
SUCCESS
今⽇日⽬目標：希望⼤大家能夠帶回⾄至少⼀一個可執⾏行行的 Ac-on
Data
Visualization

9. • 中正經濟系 > 中正資管系
• 交⼤大資管所
• 資策會 前端⼯工程師
• 卡米爾 專案經理理
• 天地⼈人⽂文創 UI/UX 講者
• 科智企業 資料視覺化 講者
• 創樂趣公司 資訊顧問
• 榮總醫院 講師
卡米爾股份有限公司 專案經理理 彭其捷

10. 我的著作

11. PM - PROJECT MANAGER
專案 / 產品經理理
網站經驗設計
APP設計
系統維護
數據管理理
數據分析
資料視覺化

12. 外交部全球120 個駐外館網站 跨時區、跨國家、跨語⾔言的⾼高難度專案

13. 鄭愁予詩⼈人網站 科技 X ⽂文學 X 古⼈人

14. 經濟部 FINDIT平台 群眾募資 X 股權募資 X 視覺化

15. 環保署 物聯聯網 IOT 數據分析平台

16. 專案：翻⽩白眼吧！溫蒂妮⼩小姐動感紅包
科技 X 設計跨界合作

17. 從⼤大數據到資料視覺化
Big data to data visualization

18. 18
Question
⼤大數據？ ”
“

19. 數據量量逐年年成長
根據思科（Cisco）的研究，全
世界的資料量已經到達ZB的層級
（10億TB），而且還以每個月
100EP（0.1 ZB） 以上的速度指數
成長當中。

20. 20

21. ⼤大數據 BUZZWORD
雲端
物聯聯網
FinTech

22. 22
⼤大數據的 3V 特性

23. 23
讓數據產⽣生價值
能夠找出
⼈人類所不知道的特
徵、規格、邏輯
能夠幫助⼈人們⽤用
⽅方便便的⽅方式解讀
龐⼤大的資料
重點1 重點2
⼈人⼯工智慧 資料視覺化

24. 24
重點1 能夠找出⼈人類不知道的特徵
柯潔0-3輸給
AlphaGo
網友：別哭，你
已經很棒了了！
⼈人⼯工智慧

25. 25
⼈人⼯工智慧的難題：巨量量資料
Excel 上限：1048576 列列

26. 26
幫助⼈人們⽤用⽅方便便的⽅方式
解讀龐⼤大的資料
重點2 資料視覺化

27. 27
Question
為何要視覺化？平
常會將哪些資料視
覺化呢？
”
“

28. 28
重新整理理碎片化的資料重點2 資料視覺化

29. 29
美國南部各州奴
隸⼈人⼝口分佈情況
圖，1860年年繪製
幫助林林肯打贏南
北戰爭的重要資
訊圖
資料視覺化
並不是全新
的概念念

30. 30
Q：為什什麼資料
視覺化有⽤用？

31. 31
()
⼤大數據與⼩小數據

32. 32
透過資料視覺化，提煉⼤大數據的價值

33. 33
資料視覺化讓
左右腦協作

34. 34

35. 35
政府資料視覺化

36. 36

37. • 、
http://www.bloomberg.com/
graphics/hottest-year-on-
record/

38. 視覺化互動網⾴頁3D NASDAQ http://graphics.wsj.com/3d-nasdaq/

39. 視覺化與⼤大
腦結構有關

40. 視覺化與⼤大
腦結構有關

41. 左邊是右邊
的幾倍⼤大？

42. 斯蒂⽂文
斯定律律
Steven’s Power Law

44. 要⼩小⼼心
絕對數字與
相對數字

45. 45
賈賈伯斯這樣說故事

46. 46

47. h"ps://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualiza-on?language=zh-tw
推薦影片

48. 資料視覺化與使⽤用者經驗
Data visualization & UX

49. 49
有⼈人聽過
使⽤用者經驗嗎？
”
“
Question

50. 關於喝咖啡

52. 52
Q：資料視覺化
與UX的關聯聯性？

53. 瘋狂的
圓餅圖

54. 就算不懂，
還是要假裝
好像懂了了...

55. 怎樣才是創造美好經驗的
視覺圖表呢？

56. 根據選⽤用技術的不同，將影響視
覺成果的呈現與設計流程
使⽤用合適的⼯工具
將分析結果視覺化，搭配簡
報進⾏行行呈現，讓⽬目標對象更更
容易易讀懂，引導執⾏行行正確的
決策
根據使⽤用者想看到的資料趨
勢，挑選合適的視覺圖表，
避免錯誤的呈現⽅方式
UX與
資料視
覺化
達成商業⽬目標
滿⾜足使⽤用者期待

57. 滿⾜足使⽤用者的視覺期待
根據使⽤用者想看到的資料趨勢，挑選合適的視覺圖表，
避免錯誤的呈現⽅方式
Visualization Demand

58. 58
Q：怎樣選擇合適的圖表？

59. 59
看哪個比較合適？

60. 每個圖表有他的個性
要先確認，想要傳達的是什什麼訊息？

61. http://www.datavizcatalogue.com/index.html
挑選合適的圖表

62. 誰擅長比對少量量類別數據⼤大⼩小？
長條圖

63. 不過，⼤大量量類別就不⼀一定適⽤用了了

64. 橫的直條圖有時更更好⽤用

65. 誰擅長表達連續型資料時間的變化？
折線圖

66. LESS IS MORE
可讀性比華麗
重要
Q：覺得這張
圖表好嗎？

67. 誰適合表達資料分布狀狀況？ 直⽅方圖（HISTOGRAM）

68. 適合同時比
較許多資料
的⼤大⼩小
泡泡圖
⽽而且
很美

69. 雷達圖：擅長比較不同單位的多維度資料
https://en.wikipedia.org/wiki/Radar_chart

70. 地圖
擅長表達地
理理空間差異異

71. h"p://
extremepresen
ta-on.typepad.
com/blog/
2006/09/
choosing_a_go
od.html

72. 當然圖表還有很多很多
但更更多⼈人熟悉的可能是較好的
熟悉
長條圖
折線圖
⼀一般表格
圓餅圖
⼀一般
歷史圖表
泡泡圖
熱點圖
地圖
網路路關係圖
較少⼈人熟悉
玫瑰圖
甜甜圈圖
桑基圖
⼦子彈圖

73. 73
Q：『表格』是⼀一個好
的視覺化嗎？

74. 表格適合呈現⼤大量量數據（不需切換畫⾯面）

75. 表格也可
以美美的

77. 不可或缺的
⽉月曆表格

78. 78
Q：都怎樣選擇顏⾊色呢？

80. 連續與
離散資料

81. 選⽤用正確的顏⾊色組合，能夠說不同的故事
強調變化
強調有/沒有 強調邊界
強調趨勢
往兩兩旁擴散

82. 體貼⾊色盲者的
閱讀體驗

83. 達成商業⽬目標：數據呈現技巧
Visualization Presentation
將分析結果視覺化，搭配簡報進⾏行行呈現，讓⽬目標對象更更容易易
讀懂，引導執⾏行行正確的決策

84. 84
通常都是如何把
視覺圖表放進簡
報中？
”
“
Question

85. 85
放 Google 的案例例圖
有沒有放過類似這樣的表格呢？

86. 86
案例例⼀一：⾦金金融機構國內總、分⾏行行歷年年存款餘額資料

87. 87
愛將，比較⼀一下『外匯存款餘額』與『活期存款餘額』的趨勢
PhotoCredit：我是⾺馬克

88. 88
比較
『外匯存款餘額』與
『活期存款餘額』的
趨勢

89. 89
⽂文字改為橫向閱讀

90. 90
變成線
圖看看

91. 91
增加數字
與配⾊色
加入質感

92. 92
加入故事
性⽂文字，
更更好看！

93. 93
未來來趨勢
預測

94. 94
極簡版
重點強調這 10 年年
的改變

95. 95
⼀一模⼀一樣的數據，有多種呈現⽅方式

96. 96
當然還有許多空間可持續優化
只要我們把聽眾放在⼼心上，再花⼀一些⼼心思
就能夠逐步優化視覺化圖表

97. 97
案例例⼆二：Forbes 全球前 2000 ⼤大公司資料

98. 98
簡報直接放這張表有點無趣，可不可以做⼀一些變化呢？
PhotoCredit：我是⾺馬克

99. 99將 Header 上⾊色 & 中間橫列列交叉 & 對⿑齊，就可提升質感

100. 100⽤用⾯面積與⾊色彩飽和度來來幫助⼤大腦做出排序⾏行行為（銷售數據）

101. 101⽤用地圖呈現各國銷售數據

102. 102
公司類別利利
潤與市場價
值分布圖

103. 103
可⽤用熱度圖呈現各國熱⾨門類別

104. 104
過濾器
是⼀一個
貼⼼心設
計

105. 105
儀表板
能夠⽅方便便同
時查看多樣
數據

106. 106
如何呈現少量量數據？

107. 107
如果數據量量少，可放⼤大關鍵數據

108. 使⽤用合適的視覺化⼯工具
Data visualization Tool & DIY
根據選⽤用技術的不同，將影響視
覺成果的呈現與設計流程

109. http://www.slideshare.net/fitc_slideshare/the-future-of-data-visualization?qid=8c32b48d-7823-41c9-8c61-c81bae8af88f&v=&b=&from_search=1
彈性與複雜度成正比。價格與好⽤用度成正比

110. 資料視覺化⼯工具市佔率
http://www.randalolson.com/2016/03/11/what-data-visualization-tools-do-rdataisbeautiful-oc-creators-use/

111. 不⽤用寫程式
不⽤用寫程式

112. D3.JS
較進階但是彈性很⼤大

113. D3.js 案例例

114. TABLEAU：商業分析的利利器
不⽤用寫程式也可以做出各種好⽤用的互動圖表

115. 本次使⽤用版本
Tableau Public 10.3
(無法本地儲存)

116. 實作時間
Tableau Public DIY

117. 下載資料包：
⾦金金融機構國內總、分⾏行行存款餘額
h"p://design2u.me/course/finance_deposit.csv

118. 118
練習⼀一：資料載入與檢視
① 載入資料
② 資料格式轉換
③ 列列表
④ 排序
⑤ 資料型態

119. 119
練習⼆二：製作時間長條圖
① 熟悉畫⾯面配置
② 了了解 Dimension
③ 了了解 Measure
④ 放置 Column
⑤ 放置 Row

120. 120
練習三：超好⽤用的 SHOW ME
① ⾃自由變換不同圖表類型
② 查看不同圖表所需要的資
料屬性

121. 121
練習四：圖表軸功能
① 排序功能
② 改變寬度
③ 排除功能
④ 參參考線功能
⑤ X軸Y軸互換功能

122. 122
練習五：複製 Tab 與 Marks (標記功能)
① 命名並複製Tab
② 拖拉 Measure 進 Marks 區
③ 更更改形狀狀
④ 更更改顏⾊色
⑤ 更更改 Size
⑥ 顯⽰示 Label
⑦ 編輯Tooltip

123. 下載資料包：
富比世前2000強公司
design2u.me/course/Forbes2000.csv

124. 124
練習六：資料 Filter
① 設定Dimension filter
② 設定Measure filter
③ 查看 filter 選項
④ 開啟右邊 filter 視窗

125. 125
練習七：地圖
① 雙擊地理理維度
② 透過國家產⽣生銷售地圖
③ 透過經緯度產⽣生銷售地圖
④ 透過 Mark 調整相關格式
⑤ 產⽣生符號 Map
⑥ 產⽣生填滿 Map

126. 126
練習八：標註與格式調整
① 資訊標註功能
② 格式調整功能
③ 插入變數

127. 127
練習九：儀表板
① 新增儀表板
② 放入圖表
③ 拖拉改變佈局
④ 回原本的圖表調整
⑤ 改變 Size
⑥ 設備預覽功能
⑦ 更更改 filter 適⽤用範圍

128. 128
練習⼗十：故事
① 新增⼀一個故事
② 編輯標題
③ 講演模式
④ 發佈

129. 129
練習⼗十⼀一：發布到網路路上
① 儲存到網路路上
② 發布出去
③ ⽤用瀏覽器檢視
④ ⽤用⼿手機檢視
⑤ 取得網⾴頁嵌入碼

130. 130
免費超讚線上學習課程
h"ps://www.tableau.com/learn/training

131. 131
David McCandless
資料視覺化是複雜資訊
的解決辦法，即使是很
龐⼤大可怕的資訊，也能
成為美麗的視覺，讓⼈人
快速理理解。

132. Q & A
有問題也可與我聯聯絡 / 加入我的 FB / Email 給我
foxfirejack@gmail.com