資料視覺化Data Visualization：圖表設計 - 政府網站營運交流平台

更著重視覺化的呈現，需要較深的繪畫設計技巧。

資料視覺化與資訊圖像化差異圖. 圖1. Data Visualization v.s. Infographics. 以下舉幾個Infographics的例子，讓 ... 跳到主要內容區塊 手機版選單 search 搜尋 社群媒體 資訊圖像 進階搜尋 分享 Facebook google+ Plurk Twitter line Email 最新消息 網路趨勢與社群應用分享 常見問題 相關連結熱門關鍵字 社群媒體 資訊圖像 上方連結 首頁 網站導覽 English 下方連結 網站導覽 關於本站 相關連結 政府網站資料開放宣告 隱私權及安全政策 客服信箱 :::政府網站營運交流平台 上方連結 首頁 網站導覽 English 字級 小 中 大 search 搜尋 社群媒體 資訊圖像 進階搜尋 熱門關鍵字 社群媒體 資訊圖像 最新消息 網路趨勢與社群應用分享 常見問題 相關連結::: 首頁 網路趨勢與社群應用分享 網路趨勢與社群應用分享 網頁功能 列印內容 分享 Facebook google+ Plurk Twitter line Email 資料視覺化DataVisualization：圖表設計 本文轉載自臉書UX四神湯粉絲專頁，Mediumuxeastmeetswest   【本文著重視覺設計方法，而非辨別、提取資料的正確性】 DataVisualization資料視覺化是指運用視覺的方式呈現數據，有效的圖表可以將繁雜的數據簡化成為易於吸收的內容。

這次的文章將帶大家認識DataVisualization的基本觀念、圖表設計步驟到實際演練。

不論是學校作業，或是工作報告，圖表設計可以很有趣、很有成就感，希望大家學習這些技巧後可以運用到生活中。

以下是這篇文章的架構： 1.Introduction基本介紹 1a.WhatisDataVisualization什麼是資料視覺化？ 1b.Whyisitimportant為什麼資料視覺化很重要？ 2.Steps 步驟 2a.UnderstandYourGoal — Selecttherightchart了解目的，選擇有效圖表 2b.OrganizeDatainaLogicalOrder編排數據 2c.KeepitSimple — RemoveUnnecessaryElements移除不必要元素 2d.TryOutDifferentVariations(Advanced)嘗試不同變化(進階版) 3.Examples 工作實例 3a.CaseStudyHighlights案例焦點 3b.ProductRoadmap產品時程 4.Conclusions結論 5.References參考資料 1.Introduction基本介紹 1a. WhatisDataVisualization 什麼是資料視覺化？ DataVisualization資料視覺化是指運用視覺的方式呈現數據，有效的圖表可以將繁雜的數據簡化成為易於吸收的內容。

透過圖像化的方式，我們更容易辨別數據的規律(Patterns)、趨勢(Trends)及關聯(Correlations)。

最早的資料視覺化溯及17世紀時，人們繪製地圖；而在18世紀初，人類發明的圓餅圖(PieChart)。

資料視覺化時時刻刻出現在我們的生活中，雜誌文章、新聞媒體、學術報告、公共交通指示等等。

Infographic資訊圖表是我們常聽到的另個名詞，他與資料視覺化有相同的目的 — 運用圖像化的方式簡化複雜的資訊。

但Infographic是較主觀且質性的資訊，表達創作人的觀點、故事。

更著重視覺化的呈現，需要較深的繪畫設計技巧。

圖1.DataVisualizationv.s.Infographics 以下舉幾個Infographics的例子，讓大家更可以理解Infographics與DataVisualization不同之處： 圖2. Leftvs.Right(US),DavidMcCandless 是典型的Infographics，解釋了美國政府左右派的區別。

作者說明了故事，質性的資料與輔助插畫。

圖3. TypesofCoffee 簡單的圖示讓人一目瞭然咖啡的種類 圖4. LAMapOfAttractions 可愛的漫畫風，這張圖說明了WestLA的景點(名稱、距離、內容) 說到Infographics，不得不介紹個人非常喜歡的大師DavidMcCandless，他曾自己為數據新聞記者(data-journalist)及資訊設計師(informationdesigner) 對DataVisualization有興趣的朋友，強烈建議看他的TedTalk及Blog—InformationisBeautiful，看完會振奮人心啊！ 由於這次的篇幅有限，我們有機會再好好聊聊Infographics：）   影片1. TheBeautyofDataVisualization,DavidMcCandless 1b.Whyisitimportant為什麼資料視覺化很重要？ 數據驅動了決策，在資訊爆炸的時代，有效並快速吸收資訊是人們渴望的能力，不僅節省時間，並能加速學習效率。

在寫文章時，我也常常在想用什麼呈現方式，能夠讓讀者更有效地吸收。

根據研究指出， 人類大腦吸收圖像的速度是文字的60,000倍 90%的資訊是透過視覺傳達到大腦 人類能吸收80%的圖像，但只能吸收20%的文字 有圖像的網站比只有文字內容的網站多了94％的瀏覽率。

看了這些數據，是不是更想學習資料視覺化的方法呢？ 2.Steps步驟 如何有效地傳達資訊，製作整齊美觀的圖表？接下來篇幅，我整理網路的資訊與個人的設計流程，大家可以斟酌參考。

2a.了解目的，選擇有效圖表Choosetheright chart 大家可以參考這張Dr.AndrewAbela整理非常詳盡的圖表，將常見的不同圖表歸納出四種目的：比較(Comparison),分佈(Distribution),組成(Composition)及關係(Relationship)。

依照使用用途及目的，選擇正確的圖表，可以清楚傳達訊息。

圖5.ChartChooseDiagram(Dr. AndrewAbela ,2009) 除此之外，姐特別製作以下這張圖表，讓大家了解常用的英文圖表名詞，下次有機會遇到外國人舌頭就不用擔心打結啦！ 圖6.一般常見圖表 容易混淆的BarChart&Histogram，最大差別在於劃分種類的方式。

BarChart屬於比較不同類別間的差異，例如不同城市的房價比較、產品家族的銷售情形；而Histogram可表示同一種類用數字劃分的族群，例如美國人不同歲數間薪水的差異、同班考試分數的分佈情形等frequencydistribution。

另外，BarChart的柱狀間有明顯的空隙，而Histogram並沒有。

圖7.BarChart與Histogram的比較 在設計上，長條圖(BarChart)有直立式及橫式兩種表現方式。

橫式較常出現在比較排名(Ranking)的情形，若有較長的標題(longcategoriylabels)，建議使用橫式可以讓畫面有更多的空間。

常見的圓餅圖(PieChart)近來被人詬病的原因有： 1. 無法清楚的傳達數據：人類的眼睛不擅長辨別角度的大小及比例 2.不適合多項目間的比較：用BarChart更適合 3.佔版面空間 因此，近來流行DonutChart的格式，將一般的圓餅圖中間挖空(cutout)，有下列優點： 1.視覺上較清爽 2.容易將焦點放在長度上，更專注在於項目間的比例(與StackedBar相似) 3.中間的空白可以有更多的發揮空間 圖8.DonutChart基本上是StackedBar Chart的變形 圖9.製作圖表時的注意事項 2b.編排數據OrganizeDatainaLogical Order 編排數據的目的即是讓讀者能夠更易吸收資訊。

在BarChart常見的排版有兩種：按照字母及數據大小。

圓餅圖則是運用順時鐘或是逆時鐘，由比例大到小的編排。

這些原則看似簡單，卻容易忽略。

若是在設計時時時刻刻提醒自己注意這些小細節，不僅在視覺上更為清晰，同時默默地提昇自己的設計能力。

圖10.圖表的編排順序，可以影響觀看者的易讀性 2c.移除不必要元素KeepitSimple — RemoveUnnecessaryElements 在設計時，盡可能用最少的元素，呈現完整的訊息。

遞交最終版本前，可再三確認是否需要這些元素： 背景格線BackgroundLines 標籤Labels 顏色Colors 漸層色Gradient 陰影Shadows 更多例子請看：8WAYSTOMAKEBEAUTIFULFINANCECHARTSINEXCEL 圖11. 透過去除隔線與漸層色，觀看者可以更清楚地比較資訊內容 2d.嘗試不同變化(進階版)TryOutDifferentVariations(Advanced) 最後一步驟，我們可以在視覺上嘗試不同的變化，包含顏色、質地與圖示，增添畫面的趣味與和諧。

顏色Colors 顏色可以表達情緒及感受。

製作圖表時，可以根據你想營造的氣氛、公司的品牌，決定畫面的色調。

有時候我喜歡到Pinterest搜尋ColorPalette，就可以找到許多有趣的顏色組合。

圖12.根據公司的品牌、特性，決定圖表的色調 質地Textures 厭倦了單一色調嗎？同樣的形狀，我們可以試試看不同的質地。

在InVisionProductDesignIndustryReport2016裡有許多有趣、大膽的圖表設計，不論是用線條、圖案或是圖片，原來圖表也可以有這麼多變化！ 圖13. InvisionDesignReport2016 圓餅圖利用線條表現未填滿的一半，並放大強調數字；柱狀圖以虛線表示 圖14. InvisionDesignReport2016 用圖片當作圓餅圖背景，加上公司品牌的粉紅色，大膽又強烈的設計 圖示Icons 簡單的圖示，可以引導觀看者的情感與共鳴。

越複雜的圖案，就會偏向Infographics。

在這段落，我找到一些大家可以輕鬆嘗試看看的變化，根據主題及目的，尋找相關連的圖示，運用在圖表中，就可以有放大的效果。

圖15. Why2017IstheYeartoTakeSnapchatSeriously 以SnapLogo代替圓餅圖，更貼近主題 圖16. ThirstyEnergy 以人的圖示傳達缺少資源的人口比例，比起冰冷的圓餅圖，更讓人感同身受 3.Examples 工作實例 看完以上這些方法，是不是躍躍欲試呢？在公司裡，我的職稱是產品設計師，不過除了與產品開發部的工程師合作外，也會接觸商業開發部門(BusinessDevelopment)，或是收到客服人員(ClientSuccess)的需求。

因此有機會接觸到產品成效、業務數據等，必須以視覺化的方式呈現給公司內部成員、客戶或是投資人。

接下來，想跟大家分享工作實例，帶大家一步步走過從原始數據到資訊視覺化的過程。

3a.CaseStudyHighlights案例焦點 目的：將產品成效數據呈現給客戶，說明產品價值 時限：兩天 格式：PDF 使用工具：Sketch、計算機(計算比例) 表1.CaseStudyHighlights — OriginalSpreadsheet原始表格 沒錯！以上你看到的就是BD部門給我的GoogleSpreadsheet，亮黃色、沒有對齊。

想認識怎麼設計表格的朋友，請參考上篇文章：【提升易讀性 — 如何有效運用空白WhiteSpace】。

身為設計師的我們，職責就是將硬邦邦的數字，讓眼睛能夠沒有負擔、舒舒服服的吸收。

Step1：了解目的 由於是要呈現產品價值，因此在表格中最重要的資訊即是Lift，透過我們的產品，讓這些球隊票務銷售增加了幾個百分比(%)。

以及在第二大項重點是我們在社交銷售中，有多少層級的購買者。

表2.整理過後的表格 Step2：選擇有效圖表＆ 編排數據 這步驟很重要很重要的一點是：先不要添加顏色！！！ 顏色讓我們的視覺分心，這步驟的主要目的是讓讀者能夠清晰的了解圖表內容，確保圖表是正確的，排版是合理的，再加上顏色豐富畫面。

先從理性的角度切入，再來追求美觀。

下圖完整呈現我初步的草稿： 在表格裡，有兩排不同的數據，分別代表去年及使用Fevo後的銷售情形。

因為目的是比較(Comparison) ，我們選擇BarChart，並用粗體及較大的字體強調Lift的百分比。

同時嘗試用橫式(Horizontal)的長條圖，讓說明文字可以延展、易於閱讀，但也佔了版面空間。

數據的編排上，從左至右，數字漸增，讓讀者不會迷失。

最後，我決定採用直式(Vertiacal)，又以V2&V3的排版較為合理。

Step3：排放所有資訊，移除不必要元素 接下來，加上了Fevo Branding的漸層色，嘗試不同的顏色組合。

同時運用GestaltPrinciples的Closure，利用虛線，而非實線呈現去年的數據。

去除元素的部分，我沒有把表單的所有標題呈現出來，例如SalesInitiative誒Event,Highlight等，因為就算沒有這些標題，讀者也可以明白其中的關係。

在第二份資料(MeasurableSocialSharing)中，沒有刻意加上圖表，因為重點是單純的數字，不需為了圖表設計而設計圖表。

圖18.試著加上顏色的效果 Step4：嘗試不同變化 嘗試用弧線的方式呈現SocialLevel增添玩味，但在視覺上稍嫌凌亂，最後我跟PM選擇了右邊直立的排版。

圖19.最終兩種編排方式 燈燈燈燈燈～～～過程中不斷的微調間距、對齊，及嘗試各種的排版、顏色，最終的PDF就完成啦！不但與最初的目標一致，也透過視覺化的技巧，讓資料變得清晰易懂。

視覺上從左至右，首先會被強烈的飽和藍吸引，再看到各球隊的Logo，於是注意到百分比以及說明文字。

這樣的排版類似圖表+表格，但由於去除了實線，視覺上清爽許多。

右排訊息強調LayersofInvites的數字，運用陰影，讓數字跳脫背後的訊息。

與其使用文字，用實際Logo更讓人興奮。

為填補上右的空白，我加上Fevo的Logo，延伸到資訊內容，讓視覺上與左邊標題平衡(Balance)。

圖20.CaseStudyHighlights最終成果 3b.ProductRoadmap 產品時程 目的：向投資人與公司內部說明產品時程、計畫及所需人力 時限：半天 格式：PPT 使用工具：PPT、計算機(計算比例) 以下是PM給我的GoogleDoc，說明了項目、人力以及預計完成時間，是典型的ProductRoadmap。

由於公司保密協定，我模糊了項目內容。

表3.典型的ProductRoadmap，說明項目、預計時程及人力 常見的甘特圖(GanttChart)非常適合做ProductRoadmap。

橫軸表示時間，縱軸表示活動(項目)，線條表示在整個期間上計劃和實際的活動完成情況。

它直觀地表明任務計劃在什麼時候進行，及實際進展與計劃要求的對比。

圖21.市面上的Ganttchart/Roadmap 以下是最終成品，由於專案項目並沒有很多，我是直接用PPT製作： 移除不必要的格線 利用人頭的圖示表示人力 確保顏色、字體與公司品牌一致 調整間距 經過這四個步驟，就可以設計出簡單俐落的甘特圖，也歡迎大家討論！ 圖22.ProductRoadmap的最終成果 4.Conclusion總結 非常感謝大家耐心、仔細地看完這篇長文！從資料視覺化介紹、圖表設計步驟到實際操作，希望大家能夠對DataVisualization有近一步的認識，並且可以運用在生活中。

不論你是學生，或是上班族，圖表出現在我們的生活周遭。

製作圖表可以發揮創意、很有成就感，將冰冷冷的文字數字轉化成有趣、美麗的圖表。

希望大家喜歡這次的內容，有任何想法歡迎大家討論！我們下個月見：） 圖23.製作圖表可以很有趣！喜歡這次的內容嗎？請多多分享喔！ 5.References參考資料 *DataVisualization101:HowtoDesignChartsandGraphs(Recommended) *DATAVISUALIZATIONVS.INFOGRAPHICS (Recommended) *11DESIGNTIPSFORVISUALIZINGSURVEYRESULTS (Recommended) PrincipleofDataVisualization VisualAnalysisBestPractices WhatdoyoumeanI’mnotsupposedtousePieCharts?! 10DesignTipstoCreateBeautifulExcelChartsandGraphsin2017 ShandyTsai 臺灣清大畢業的UX海外工作者 原文出處UX四神湯；政府網站營運交流平台授權轉載 相關圖片 上版日期：107-07-02 回上一頁 回最上面 ::: 下方連結 網站導覽 關於本站 相關連結 政府網站資料開放宣告 隱私權及安全政策 客服信箱 更新日期111-08-04版權所有©2018國家發展委員會 10020臺北市中正區寶慶路3號 如對本站有任何意見，請洽客服專線：02-25533988#361、02-25533988#626 傳真：02-25531319    電子郵件信箱：[email protected] 本網站設計支援IE、Firefox及Chrome，最佳瀏覽解析度為1024x768 backtotopbacktotop