如何平衡數據可視化的美感和實用

A. 如何設計成功而有價值的數據可視化

[what]什麼是數據可視化？

塔夫特所說，「圖形表現數據。實際上比傳統的統計分析法更加精確和有啟發性。」對於廣大的編輯、設計師、運營分析師、大數據研究者等等都需要從不同維度、不同層面、不同粒度的數據處理統計中，藉助圖表和信息圖的方式為用戶（只獲得信息）、閱讀者（消費信息）及管理者（利用信息進行管理和決策）呈現不同於表格式的分析結果。數據可視化技術綜合運用計算機圖形學、圖像、人機交互等，將採集、清洗、轉換、處理過的符合標准和規范的數據映射為可識別的圖形、圖像、動畫甚至視頻，並允許用戶與數據可視化進行交互和分析。而任何形式的數據可視化都會由豐富的內容、引人注意的視覺效果、精細的製作三個要素組成，概括起來就是新穎而有趣、充實而高效、美感且悅目三個特徵。

[why]為什麼要進行數據可視化？

無論是哪種職業和應用場景，數據可視化都有一個共同的目的，那就是准確而高效、精簡而全面地傳遞信息和知識。可視化能將不可見的數據現象轉化為可見的圖形符號，能將錯綜復雜、看起來沒法解釋和關聯的數據，建立起聯系和關聯，發現規律和特徵，獲得更有商業價值的洞見和價值。並且利用合適的圖表直截了當且清晰而直觀地表達出來，實現數據自我解釋、讓數據說話的目的。而人類右腦記憶圖像的速度比左腦記憶抽象的文字快100萬倍。因此，數據可視化能夠加深和強化受眾對於數據的理解和記憶。

[how] 如何實現可靠的數據可視化

數據可視化包括數據的採集、分析、治理、管理、挖掘在內的一系列復雜數據處理，然後由設計師設計一種表現形式，或許是二維圖表、三維立體視圖，不管是什麼樣的信息圖，最後由前端工程師創建對應的可視化演算法及前端渲染和展現的實現。如果僅僅是能夠將數據轉化成漂亮的圖表，設計出固定維度、不同式樣的圖表來解釋你的觀點，並不說明這樣的結局就足夠好。這只是一個簡單的開始，只是一個美好願望的萌芽。如果要成功報告結果，將你所分析的度量和數據有效地轉化為有商業價值的見解，使其能夠為基於事實所做的決策提供支持，那麼還需要做更多的功課。

色彩提升信息可視化的視覺效果。在信息可視化通過造型元素明確傳達信息及敘述的基礎上，把握好視覺元素中色彩的運用，使圖形變得更加生動、有趣，信息表達得更加准確和直觀。色彩可以幫助人們對信息進行深入分類，強調和淡化、生動而有趣的可視化作品的表現形式，常常給受眾帶來視覺效果上的享受。當然，視覺效果要將企業品牌的色調融合進去，和企業的品牌文化保持高度的一致，這是一個最基本的常識。比如，如果企業的品牌色調比較熱衷紅色，你設計的可視化效果，就要有意識地朝著這個基調靠攏。但沒有必要吻合，因為紅色的可視化效果，通常都包含警示的韻味，所以，紅色適合做預警、提醒和突出信息的功能。

排版布局增強信息可視化的敘事性。我有酒，你有故事嗎？排版布局四大基本原則：

（1）對比（Contrast）： 如果兩個項不完全相同，就應當使之不同，而且應當是截然不同。

（2）重復（Repetition）：設計的某些方面在整個作品中重復。

（3）對齊（Alignment）：任何元素都不能在頁面上隨意安放。每一項都應當與頁面上的某個內容存在某種視覺聯系。

（4）親密性（Proximity）：將相關的項組織在一起，使它們的物理位置相互靠近相關的項將被看作凝聚為一體的一個組。

動態增加信息可視化的視覺體驗。在信息可視化的視覺表達中，動態地將相互分離的各種信息傳播形式有機地融合在一起，進行有關聯、有節奏的信息處理、傳輸和實現。最終的目的是，為了實現數據之間的聯動，解釋數據表現之間驅動和聯系的關系。通過圖表樣式和色彩的運動，滿足受眾的視覺感受，同時將信息內容更加深刻而精簡地傳達給閱讀者，使整個信息傳達的過程更加輕松便捷。對於數據可視化有諸多工具，如：ECharts、iCharts、D3js、Flot、Raphaël等功能都十分強大，但對於非專業可視化而又經常與圖表打交道的職場人士來說，一款輕便易學而又實用的可視化軟體則顯得十分重要。比如cognos、tebleue等。如果需要展現的數據結構不是特別復雜，而又要把數據展現的絢麗多彩，而且具有交互性，那麼水晶易表是不二之選。

1．誰是你的閱讀者？

無論你是否在做一份傳統的報表還是新式的信息圖，首先問問自己有哪些閱讀者看到這份報告？他們對將要討論的事項了解多少？他們需要什麼？、還有，他們會如何利用你要展示的信息和數據呢？而我在 《一份靠譜的數據分析報告都有什麼套路？》 里講過，明確清晰的分析目標和方法會有多重要，因為只有明確分析目標，才能有一個良好的驅動過程。無論是目標驅動還是分析過程驅動，後續的數據分析工作和分析報告里所要呈現的全部內容事項都是緊緊圍繞著這個目標主題而服務的。

2．規劃數據可視化方案

數據可視化方案，是一定是能夠解決用戶特定問題的。既然是能夠解決用戶特定的問題，那麼這樣的高度，是在基於你在深入地理解了這些數據的現象和本質的基礎之上。簡單來說，就是你的可視化方案，不僅懂得並且能夠很好地解釋數據分析的結論、信息和知識。並且管理者能夠沿著你規劃的可視化路徑能夠迅速地找到和發現決策之道。

舉例來說，當企業的業績不達標時（企業的業績是否達標，關繫到企業最關鍵的利益和存亡。）可視化方案的設計路徑應該是這樣的：

Step1，從整體運營出發，明確有哪些關鍵因素會影響成交和業績。

比如：有效名單、demo品質、客服服務、產品屬性等，相應地去看這些關鍵因素對應的KPI的表現，對整體的業績來講，這些因素都會是驅動因素，這些因素對應的KPI都會是對STV有直接驅動和影響作用的。這些驅動數據的可視化是基礎，也是尋找解決方案最終的出發點和落腳點。因為，這些數據的表現，是關乎運營成功與否的最直接視圖。

Step2，對關鍵因素深入分析確定是什麼因素導致了業績沒達成，發現和挖掘導致業績未達標的根本原因和問題。

比如：

1、對比分析，逐一觀測201601月-201612月全部關鍵因素對應的KPI的表現，對比成交業績最高的月份和成交業績最差月份的關鍵因素對應的KPI差異在哪裡，能夠快速定位出哪些方面、哪些因素導致業績未達標。然後能夠有針對性地驅動和幫助業務部門去改善。

2、追蹤對成交和業績有驅動和改善的行動方案的落地和實施進度，存在什麼樣的問題，是否存在行動方案的執行不力影響了業績達標。

Step3，針對這些問題因素，有的放矢地去做改善和探索提升業績之道。

否則，設計再商業絢麗的可視化圖表，如果不能快速地得到信息和商業決策建議和方案就毫無意義。可視化僅僅成了虛假和欺騙，華麗而不務實的結果。基於准備好的全部的這些問題所得出的答案，就要開始定製你的數據可視化方案以滿足每個決策者的特定要求。數據可視化始終都應該是為其受眾專門定製的，這樣的報告里只應包括受眾需要知道的信息，且應將這些信息置於和他們有關並對他們有意義的背景下。

3．給數據可視化一個清晰的標題。

當你的報告像一份報紙、雜志的新聞一樣。從這個標題，就能給閱讀者強烈的沖擊。一個清晰的標題是能夠很好地闡釋報告和故事的主題，是對整個報告和故事概括的信息。當然，並不是鼓勵運營分析人員去做「標題黨」。好的標題，既不要模稜兩可，也不要畫蛇添足，只要解釋清楚圖表即可。這有助於幫受眾直接進入主題。這樣能讓讀者大致瀏覽文件，並能快速抓住核心所在。盡量讓你的標題突出。

4．將數據可視化和你的策略、方案聯系起來

如果數據可視化的目的在於介紹能解決具體的、可衡量的、可執行的、有相關性和時效性問題的數據，那就在開場白里加上這些問題。稍後再和你的策略連接起來以理清這些數據的定位，因此，讀者便能立刻明白可視化數據的相關性和價值。最終，他們便能更好地參與進來，並能夠更明智地利用這些信息。數據可視化，最終時為了企業良好的運營而服務的，這是它的商業價值。如果你不關注企業的戰略和行動方案，很難建立起具有聯動價值的信息圖。比如，企業執行的行動方案，通常是為了達成和實現企業的戰略目標，通過這樣的手段實現精益管理和精益運營。所以，可視化的解決方案要能夠做到，行動方案對戰略目標的驅動效果、個體、團隊對部門整體指標、KPI的驅動和影響效果。只有建立起來具有聯系的信息視圖，才會獲得有價值的數據可視化。

5．明智地選擇你的展示圖表。

不管使用哪一類圖表，bar圖、折線圖、雷達圖等等，每一種圖表都有它自身的優點和局限性。你無法找到完美的可視化圖表。但你可以通過嘗試混合展現方式讓可視化表現再人性化一點點。所以的可視化效果，都應該盡可能簡單精準地傳達訊息。這就意味著：不論有多新潮、多好看或者多絢麗，這都不是設計數據可視化的初衷。誠然，我們在持續地並且永不滿足地追求數據之美。但最佳的平衡點在於，用合適的數據可視化開闡釋恰到好處的信息和知識的價值之美。

• 只用有關聯能傳達重要信息的且為你的受眾所需要的圖形。

•無需填滿頁面的所有空白——太多雜亂的內容只會干擾對重要信息的接收，會讓人太難記住，又太容易忽略。

• 恰當運用色彩，增加信息深度。同時要注意有些色彩具備潛在含義。舉例來說，紅色被認為是代表警告或危險的顏色。適合預警額。

• 不要使用太多不同類的圖表、表格和圖形。如果需要對比各種圖表，要確保你闡述數據時使用的是同類的圖表，這樣才能便於互相比較。

6．在恰當處備注文字說明

文字說明有助於用語言解釋數據，並能在情境化圖表的同時增加內容的深度。數字和表格或許僅能提供快照，而文字說明則讓人對關鍵處了解更多，加以評論並強調其內涵。引導觀看者去思考圖形的主題，而不是方法論、圖形設計、圖形生成或其他東西。

• 避免歪曲數據原本的意圖。

• 讓龐大的數據集連貫一致。

• 吸引讀者將不同的數據片段進行比對和比較，突出重點和優劣。

• 主旨要相當明確：描述、挖掘、作表、可視化自我解讀。

B. 教育數據可視化四大特徵

把龐雜的大數據直觀的展現到決策的面前，才能更加節省時間，使工作變得更加高效，利用數據更好的分析用戶，針對性的為用戶提供服務，增加數據背後與用戶的互動性，在數據爆炸增長時代，只有很好的把握時效，才能更好敏銳的掌握機遇。

對於數據可視化最有代表的場景應用之一，不得不提的就是大屏了。其中典型的就雙十一購物狂歡節採用實時數據大屏，帶給觀眾更加准確、震撼和清晰的體驗。

(2)如何平衡數據可視化的美感和實用擴展閱讀：

注意事項：

數據可視化只要能夠做到簡單、充實、高效、兼具美感，這樣的就是數據可視化。成功的可視化，雖表面簡單卻富含深意，可以讓觀察者一眼就能洞察事實並產生新的理解，管理者能夠沿著規劃的可視化路徑能夠迅速地找到和發現決策之道。

一份數據分析報告或者解釋清楚一個問題，很少是單一一個的圖表能夠完成的，都需要多個指標或者同一指標的不同維度相互配合佐證分析結論。而美感則分為兩個層次，第一層是整體協調美，沒有多餘元素，圖表中的坐標軸、形狀、線條、字體、標簽、標題排版等元素是經過合理安排的。

C. 信息可視化整理

無論數據總量和復雜程度如何，數據間的關系大多可分為三類： 比較 / 構成 / 分布&聯系。

基於分類 / 時間的數據對比，通常需用到比較型圖表。 比較條目較少時 ，如5個地區收件量的對比，可選用 柱狀圖 表示。

條形圖 當條目較多， 如大於12 條 ，移動端上的柱狀圖會顯得擁擠不堪，更適合用 條形圖 。 一般數據條目不超過 30 條 ，否則易帶來視覺和記憶負擔。 柱形圖還有許多豐富的應用。例如堆積柱形圖，瀑布圖，橫向條形圖，橫軸正負圖等。

看趨勢 – 折線圖 當X軸為 連續數值 （如時間）且 注重變化趨勢 時，則適用折線圖。

擴大差異 – 南丁格爾玫瑰圖 。由於扇形的半徑和面積是平方的關系，南丁格爾玫瑰圖會將數值之間的差異放大， 適合對比大小相近的數值 。玫瑰圖也適於表示 周期 / 時間 概念，比如星期、月份。依然建議 數據量不超過 30 條 ，超出可考慮條形圖。

當 比較正反兩類 甚至更多維度的數據時，可試嘗試雙向條形圖。用顏色區分大區，空心/實心區分收件量和派件量， 既能整體比較大區，又能詳細對比地區的情況 。

打怪升級，再加點難度。 在雙向圖上再增加一個維度 ，如下表，比較 5 個地區的利潤及相應的收入和成本。請先思考一下，再下滑看推薦圖表。

通過圖形一眼就能看出深圳區的利潤低於廣州區，即使它的收入高於廣州區，但成本相對來說高於廣州區。

目標達成 – 子彈圖 考察指標的達成情況，如 收入達標情況及所處區間 （優、良、差）。

子彈圖，因為像子彈射後帶出的軌道。相較於儀表盤，它能夠在狹小的空間中表達豐富的數據信息，在信息傳遞上有更大的效能優勢。

若還要比較4個季度的收入情況，只需用不同顏色區分。如下圖，一眼便知第二季度表現較好，而第一季度則不佳。

性能 – 雷達圖。多維的性能數據 ，如綜合評價，常用雷達圖表示。 在游戲中看到它比較多 。 它在商務、財務領域應用較大，適合用在固定的框架內表達某種已知的結果。常見於經營狀況，財務健康程度。

指標得分接近圓心，說明處於較差狀態 ，應分析改進； 指標得分接近外邊線，說明處於理想狀態 。 比如我對企業財務進行分析，劃分出六大類：銷售、市場、研發、客服、技術、管理。通過雷達圖繪制出預算和實際開銷的維度對比 ，會很清晰。如下圖：

以上就是「比較」類的常用圖表，歸納如下：

一個整體被分成幾個部分。這類情況會用到構成型圖表 ，如五大區的收件量佔比、公司利潤的來源構成等。

單層 – 餅狀圖

第1關中，對比5個地區的收件量時用到了柱狀圖。若看 佔比情況 ，餅狀圖更合適。餅圖是有缺陷的，它擅長表達某一佔比較大的類別。 但是不擅長對比。30%和35%在餅圖上憑肉眼是難以分辨出區別的 。當 類別過多，也不適宜在餅圖上表達 。

如果變成 17 個地區，會怎樣？餅圖分類一般 不超過 9 個 ，超過建議用條形圖展示。

除餅圖外， 環形圖（甜甜圈圖）亦可表示佔比，其差異是將餅圖的中間區域挖空 ，在 空心區域顯示文本信息 ，比如標題，優勢是其 空間利用率更高 。

分層 – 環形圖、旭日圖

對於管理層而言，需先把握大局和重點。比如大區負責人需一眼看到重點地區及重點分部的情況（如下圖），如何展示？

這個叫旭日圖，逐層下鑽看數據，大區的重點地區及相應分部的構成情況一目瞭然。

累計趨勢 – 堆疊面積圖

看數值構成隨時間變化的案例：第一大區（包含四個重點地區）近 四年收入構成的趨勢 要如何可視化？

推薦方案是 堆疊面積圖，可以展現分量（地區）對於總量（大區）的貢獻 ，並 顯示總量（大區）的變化過程 。需要說明的是，地區收入的起點並非從 y=0 開始，而是在下面的地區基礎上逐層疊加，最後組成一個整體。

面積圖最佳設計指南：波動較大的類別放在最上面、使用透明色、不要超過4個類別，y軸從0開始，不要用面積圖展示離散數據，只有連續數據有中間值。

累計比較 – 堆疊柱狀圖

如果將上圖X軸的標簽文字（即年份）和圖例（即地區）互換（如下圖A），用來看 每個地區近四年的收入構成 ，用哪個圖更合適？

堆疊面積圖 A 方案和堆疊柱狀圖 B 方案都可以表現累加值。差別在於， 堆疊面積圖的 x 軸是連續數據（如時間），堆疊柱狀圖的 x 軸是分類數據 。此案例中的 x 軸是非連續的分類數據，因此用 B 方案更適合。

累計增減 – 瀑布圖

若想表達兩個數據點間數量的演變過程，可使用瀑布圖。 開始的一個值，在經過不斷的加減後，得到一個值 。瀑布圖將這個過程圖示化，常用來展現財務分析中的收支情況。

通過分布 & 聯系型圖表能看到數據的分布情況，進而找到某些聯系， 如相關性、異常值和數據集群 。

兩個變數 – 散點圖

仍以業務為例，下圖為全國網點的單票成本/收入分布情況。

單單這樣看，可能看不出什麼，如果加兩條平均線就不一樣了。

加了平均線，就知道哪些網點高於平均線，哪些低於平均線。但網點那麼多， 總不能逐個點擊查看是哪個大區的 ， 給散點加上顏色後 ，就很有意義了。

通過此圖，可以看出哪些大區單票利潤較低，急需提升，比如 廣泛聚集於右下角的第四大區，單票收入低於平均線，單票成本卻高於平均線 。

三個變數 – 氣泡圖

大家都知道，網點 總利潤除了和單票利潤有關，還和體量（即收件量）有關 ，用散點的 面積大小 表示收件量，就變成了氣泡圖。

一切和空間屬性有關的分析都可以用到地理圖 。比如 各地區銷量 ，或者 某商業區域店鋪密集度 等。氣泡圖與地圖結合可演變為熱力圖。通過熱力圖，能看到哪些網點收派件量較多，需進行資源調配。

地理圖一定需要用到 坐標維度 。可以是 經緯度 、也可以是 地域名稱 （上海市、北京市）。坐標 粒度即能細到具體某條街道 ，也能寬到 世界各國范圍 。POI是很重要的要素。POI是「Point of Information」的縮寫，可以翻譯成信息點，每個POI包含四方面信息，名稱、類別、經度緯度、附近的酒店飯店商鋪等信息。藉助POI，才能按地理維度展現數據

最佳設計指南：一、使用細的地圖輪廓線；選擇合適的配色；少用填充圖案；選擇合適的數據區間。

用戶行為分析，將瀏覽、點擊、訪問頁面的操作以高亮的可視化形式表現。下圖就是用戶在Google搜索結果的點擊行為。

總結：當我們拿到數據後，先提煉關鍵信息， 明確數據關系及主題 ， 再選擇合適的圖表進行可視化 。

好的可視化是會講故事的，它向我們揭示了數據背後的規律。對可視化的使用認知或許來源於下面這張圖。雖然結構清晰，但它只針對Excel圖表，不夠豐富。

數據分析中經常會提及維度。維度是觀察數據的角度和對數據的描述。 我們可以說地區是一種維度，這個維度包含上海北京這些城市。也可以認為銷售額是一個維度，裡面有各類銷售數據。維度可以用時間、數值表示，也可以用文本，文本常作為類別。 數據分析的本質是各種維度的組合

維度主要是三大類的數據結構：文本、時間、數值。地區的上海、北京就是文本維度（也可以稱為類別維度），銷售額度就是數值維度，時間就是世界

數值維度可以通過其他維度加工計算得出，例如按地區維度，count出有多少是上海的，有多少是北京的。維度可以互相轉換。比如 年齡原本是數值型的維度，但是可以通過對年齡的劃分，將其分類為小孩、青年、老年三個年齡段，此時就轉換為文本維度。

1.箱線圖

箱線圖一般人了解的不多， 它能准確地反映數據維度的離散（最大數、最小數、中位數、四分數）情況。凡是離散的數據都適用箱線圖。

下圖就是箱線圖的典型應用。線的上下兩端表示某組數據的最大值和最小值。箱的上下兩端表示這組數據中排在前25%位置和75%位置的數值。箱中間的橫線表示中位數。

2.關系圖

展現 事物相關性和關聯性的圖表 ，比如 社交關系鏈、品牌傳播、或者某種信息的流動 。

有一條微博，現在想研究它的傳播鏈：它是經由哪幾個大V分享擴散開來，大V前又有誰分享過等，以此為基礎可以繪制出一幅發散的網狀圖，分析病毒營銷的過程。關系圖依賴大量的數據，它本身沒有維度的概念。

3.矩形樹圖

上文說過， 柱形圖不適合表達過多類目 （比如上百）的數據，那應該怎麼辦? 矩形樹圖出現了。它直觀地以面積表示數值，以顏色表示類目 。

下圖中 各顏色系代表各個類目維度，類目維度下又有多個二級類目 。如果用柱形圖表達，簡直是災難。用矩形樹圖則輕輕鬆鬆。

電子商務、產品銷售等涉及大量品類的分析，都可以用到矩形樹圖。

4.桑基圖

比較冷門的圖表，它常表示信息的變化和流動狀態。

5.0 漏斗圖

大名鼎鼎的轉化率可視化 ，它 適用在固定流程的轉化分析 ，你也可以認為它是 桑基圖的簡化版。 轉化率也可以用幾組數字表示，不一定做成漏斗圖。

可讀性**

圖表的 首要功能是解釋 ，而不是設計，尤其大部分圖表都會落入到 過度設計 的陷阱。

客觀性

數據的解讀因為每個人的觀點和視角不同，可以呈現諸多的結果。這也是我們常說統計學會撒謊的原因。

下圖是一張銷售額柱形圖，看來銷售額沒有啥特大變化嘛。

換另外一種圖表展示。就看到了變化的增長趨勢。

實際上兩張圖表的數據沒有任何差異，為什麼呢？ 區別只在坐標軸。第一張圖的Y坐標軸起始為0，第二張圖起始是2.45 。第二張是截取了部分的柱形圖。

統一性

如果圖表整體顏色是冷色調，那麼就不要再加入暖色。

如果圖表文字是雅黑，就不要再加入宋體。

如果某地區數據，用了柱形圖對比，其他地區也遵循柱形圖樣式。

如果某圖表，女性使用紅色，男性使用藍色，那麼這一規范應該在所有圖表體現。除了顏色，其他設計元素同理。

如果有多張圖表，圖表元素應該統一，如標題、坐標軸刻度、坐標軸位置等。

用戶為啥會有「將數據轉化成圖表」的需求？

最終的答案一定是回歸到 企業管理的「第一性原理」——開源節流 。企業需要 數據去分析如何才能節省更多錢，如何才能賺更多錢。 未來的 BI 的產品不能將自己定位為「工具」，而是應該定位為「服務」。

1.0 從流程來看，探索性可視化是這樣的：

此類可視化集中在圖表的微觀功能上 ，像 輔助線、預警、各種圖表類型 等。

2.0 解釋性可視化需求

一般集中在完成了數據探索，並且 形成一定數據洞察後的 story-telling 場景 。大家在網上看到的一些「 一張圖搞懂 XXX 」、「一張圖了解 XXX」就屬於解釋性可視化 。

此類集中在整體的圖表可視化上，比如將多個圖表組合起來， 製作成一份報告或者故事版，所以會提供類似標題編輯器、排版編輯器等功能 。目前市面上的 BI 產品，像網易有數、BDP、Tableau、PowerBI 都是採取這種模式

1. 這種偏業務型的產品框架，並不太適合國內市場 。

因為這類產品面向的用戶基本上是專業用戶（數據分析師），而忽略了一個事實—— 大部分中國企業並沒有設立專門的數據分析崗位 。有能力配備數據分析師的企業一般都是中大型企業，他們付費能力可能比較強，但是也意味著用戶量會較少。

專業用戶對應的是數據分析師，而 半專業用戶則對應的是類似財務、銷售、HR 等，在業務上專業但數據分析上不專業的用戶。這類用戶的 日常工作一般集中在解釋性可視化上面，比如年終總結、年度規劃、每月匯報 中都需要利用到數據可視化。這類用戶的流程是這樣的：

[圖片上傳失敗...(image-e6e0b4-1556103840929)]

用戶導入數據，無需太復雜的操作，即可直接生成圖表。 存在問題：

可視化的理解： 信息可視化就是用圖形正確的表現復雜的信息和邏輯關系 ，

•通過圖片特有的美觀和趣味性，吸引讀者 •通過最優表現形式，使內容更易懂

•拉近讀者與產品的距離，提升品牌認知度

作品一：安全產品首頁展示

創作靈感：從需求文檔中看到這些子產品名字有御前衛、八卦陣、御城河……當時就覺得非常有意思，腦海中立刻浮現出一個古城的畫面，古城周圍有士兵、有八卦 陣、有御城河等。跟視覺設計師表達這個想法後大家一拍即合，最終產出了這個方案。 中間的城樓最開始是紅色的，有點太搶眼，為了避免喧賓奪主又體現出數據被 保護的感覺，就把它改成了這種半透明的、很數據化的虛擬感覺 。

作品二：產品結構圖

創作靈感：通過競品分析發現國內外同行在這方面都非常下功夫，所以我們也要力求用一張圖來把產品結構和關系描述清楚。下篇文章會講具體的設計過程。

作品三：使用流程示意圖

創作靈感：產品經理給出的這個圖很嚴謹，但是對於用戶來說理解起來比較困難，因此先用線框圖把它簡化為單向的流程圖，但這樣又不夠美觀和直觀。心靈手巧的視覺設計師經過圖形的美化，巧妙解決了這個問題。

修改中（局部）：

改良後：

作品四：方案描述示意圖

也是先梳理信息邏輯，用更易懂的方式去表現，再通過視覺設計師美化。

改良圖：

把一件事情做好，首先要知道做好的標準是什麼。把這些失敗的作品放到一起，就可以大概得出失敗的原因是什麼，而好的標准又是什麼。

[圖片上傳失敗...(image-cf4898-1556103840928)]

從表現形式的角度「信息圖表」作為視覺工具應包括以下六類：圖表、圖解、圖形、表格、地圖、列表。

按照形式特點我們常把圖表分為關系流程圖、敘事插圖型、樹型結構圖、時間分布類及空間解構類五種類型。

1、關系流程類圖表

2、敘事插圖型圖表

敘事性圖表就是強調時間維度，並隨著時間的推移，信息也不斷有變化的圖表。

3、樹狀結構示意圖

把繁復的數據通過分支梳理的方式表達清楚。運用分組，每組再次分類的主體框架表示主從結構。

4、時間表述類示意圖

時間表述類示意圖只要以時間軸為中心加入文字數據即可。從設計的角度來看，將主題融入圖形設計中，挑選重要事件點解讀，就可以使畫面精美，加深理解力度。

5、空間結構類示意圖

運用設計語言把繁雜結構模型化、虛擬化是空間結構示意圖存在的意義

這個流程需要協作完成， 數據需要篩選和整理 ，精準是首要條件 ， 其次是梳理。找出出主線邏輯 ，篩選次要內容從而進行精心的設計。

1、基礎圖形創意

柱狀圖和餅狀圖是最常用的兩種基礎圖形，但是簡單的幾何形態很難給人設計感。 對基礎圖形的創意來突出設計主題 ，就可以取得一舉多得、事半功倍的效果

上面圖片中左右的內容是完全一致的，但右圖即使讀者不詳細關注也可心領神會。

2、高吸引度與視覺亮點

從傳統網頁到社交微博，用戶對信息的瀏覽速度也越來越快，高吸引度便是最寶貴的財富點。

3、畫面簡潔明了

4.象徵圖示

在設計的上要注重保持風格的統一，這樣才能讓人視覺連貫、賞心悅目。

1、餅圖順序不當

餅圖是一種非常簡單的可視化工具，但他們卻常常過於復雜。份額應該直觀排序，而且不要超過5個細分。有兩種排序方法都可以讓你的讀者迅速抓取最多的重要信息

方法一：將份額最大的那部分放在12點方向，逆時針放置第二大份額的部分，以此類推。

方法二： 最大部分放在12點，然後順時針放置

2、在線狀圖中使用虛線

虛線會讓人分心，而是用實線搭配合適的顏色更容易彼此區分

3、數據擺放不直觀

你的內容應該符合邏輯並於直觀的方式引導讀者閱讀數據。對類目進行按字母，次數或數值大小進行排序

4、數據模糊化

確保數據不會因為設計而丟失或被覆蓋。例如在面積圖中使用透明效果來確保用戶可以看到全部數據

5、耗費讀者更多的精力

要通過輔助的圖形元素來使數據更易於理解，比如在散點圖中增加趨勢線

6、錯誤呈現數據

確保任何呈現都是准確的，比如，氣泡圖的大小應該跟數值一樣，不要隨便標注

7、在熱圖中使用不同顏色

一些顏色比其他顏色突出，賦予了數據不必要的重元素。反而你應該使用單一顏色，然後通過顏色的深淺來表達

8、柱狀過寬或過窄

柱子與柱子之間的間隔最好調整為寬的1/2

9、數據對比困難

對比是呈現差異的有效方式，但如果你的讀者不易對比時，效果就大打折扣了。確保數據的呈現方式一致，可以讓你的讀者對比

10、使用三維圖

盡管這些圖看來讓人振奮，但3D圖也容易分散預期和擾亂數據，堅持2D是王道

數值可視化的本質就是用各種視覺屬性來表達數據值的大小。視覺屬性有這么幾類：位置、長短、面積、顏色。對應視覺設計的點，線、面和色值。

其可視化的核心思想在於根據上下文用擬物的方式，將其與我們現世界中數值的事物聯系在一起。

如果是奔跑的速度15km/h，那麼可以畫一個運動員跑步的圖來表達這個數字。如果是奔跑的速度70km/h，那麼就可以畫一隻獵豹奔跑，通過模糊的背景來表達奔跑的速度快。如果要描述山的高度5km，就可以畫以座聳入雲霄的山，給人一種高山的直觀形象，更多的創意設計都可以圍繞想像展開

汽車行駛的速度，分為慢速、中等和超速，如下左圖所示。在表達評價信息時，你需要根據背景 展開聯想 。比如說：降水量50毫米，我們可能想像到的就是用一個試管接了50毫米深的水。

一維表格如下圖所示，數據表格中只有一行或者一列數據。我們需要對數據可視化的目標進行分析，跟進目標可將數據分為以下幾類:

•強調絕對數值的數據；

•強調趨勢的數據；

•百分比數據；

•不同類型的數據。

3.1.1 柱狀圖

收入10000元的就是收入5000元的2倍，GDP一萬億就是五千億的兩倍，這種數據稱之為等比數據。柱狀圖的閱讀者一般視覺會被柱子本身所吸引，不會去注意縱軸的起點，用戶往往會默認柱子的長度代表絕對數值的大小。所以柱狀圖的縱軸的起點必須從零開始。

3.1.2 直方圖

直方圖數據本質的區別在於表達 連續的區間上數量的分布 。統計學中，直方圖的縱軸要求是計數數據，也就是說，直方圖是用於統計某個區間內的對象個數。

3.1.3 柱狀圖變式：條形圖

條形圖還有一個很大的排版優勢，能將文字和條形在一側顯示，能夠對分類附加說明。在中國，如果不是因為排版的原因，請慎用這種橫向的條形圖。

3.1.4 柱狀圖變式：計數條形圖

3.1.5 柱狀圖變式：徑向柱狀圖、徑向條形圖、螺旋圖

為了適應排版的區域，或者增加圖形的趣味性，會對柱形圖進行扭曲變形。

3.1.6 柱形圖變式：用擬物代替柱子

在平面設計，海報宣傳頁面中，一般會添加擬物的元素，使得數據的表達更加生動。其 基本的思路都是圍繞著數據主體展開聯想，用擬物的對象代替柱子 。

示例1 ：如果描述的是足球相關的內容，那麼可以用踢球的形象代替柱子。

示例2 ：如果描述的是星體相關的內容，那麼可以用星體的形象代替柱子。

示例3 ：如果描述的是男女差異，那麼可以用男女的形象代替柱子。

示例4 ：如果是抽煙相關的數據，正好用煙頭的形狀代替柱子。

示例5 ：如果是山的高度，那麼可以用山的形態。

3.1.7 柱形圖變式：按某些維度展開重組設計

上一節中，用擬物代替柱子的思路仍然是在柱狀圖的框架下的。但是很多時候，甚至可以拋開柱狀圖的束縛，根據關鍵詞展開聯想。在聯想的過程中，我們只需要記住第一章中提到的數據可視化的本質：通過位置、長短、大小、顏色四個視覺元素來表示數據大小。

示例2 ：城市和省份PM2.5值（假設數據）

這種數據只能以地點為關鍵詞展開，以地圖的方式呈現 。

PM2.5是一個沒有形象的概念，所以可視化的時候，不太可能在PM2.5上面展開。 那麼這種數據只能以地點為關鍵詞展開，以地圖的方式呈現 。

省份在地圖上本身就是一個形狀大小固定的面，可以通過顏色熱力圖來表示數值（下圖，左）。

示例3 ：各網站訪問量

例4 ：遷徙地圖

單個城市的遷徙圖的數據原型仍然是一維數組。以地圖為維度展開設計時，需要表達的是各個城市與北京的連線。連線的長簡訊息已經被城市到北京的距離所用，於是只能用連線的顏色來表示數值。

3.2 強調趨勢的數據

3.2.2 折線圖的變式：曲線圖

3.2.3 折線圖的變式：均線圖

3.2.4 折線圖的變式：面積圖

3.2.5 折線圖的變式：股指走勢圖

一般來說，百分比的數據使用餅圖（或環形圖）的方式表達，這是最常規的。

環形圖與餅圖不同點在於環形圖可以將主題與圖更好地融合。

3.3.2 餅圖變式：將餅形轉化成對象擬物形態。

示例一 ：如果是描述人體的成分，那麼可視化可以圍繞人形展開，將餅的形狀變成人的形狀。

示例二 ：如果你想描述各類行業人群佔比，那麼你可以考慮畫出100個人，各類行業的人用不用樣式的圖形，如左下圖所示；而當你想描述各類槍殺案件槍支的來源，下右圖所示。

STEP1：確定表意正確

「正確」是信息圖最基本的要求，所以這里首先要確保信息圖的內容是正確的。

對於業務比較復雜難理解的產品，可以讓產品經理先根據自己的理解畫一個圖，設計師和產品經理進行溝通，確認雙方的理解是一致的。

《淘寶技術這十年》里有一句話說的好「好的架構圖充滿美感」。淘寶工程師用十年的時間證明了這件事。而其實不僅是技術架構圖，好的流程圖、結構圖、信息圖 等都充滿美感。

怎樣優化信息圖的表達形式呢？如果是一個邏輯比較復雜的結構圖，可以這樣：

雖然邏輯沒有錯誤，但是箭頭有交叉，看起來不美