如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

寫在前面

2019年6月18日Material Design更新了設計指南中數據可視化部分，這是谷歌數據可視化團隊形成的一套全面的數據可視化指南， 涵蓋了設計原則、圖表分類、圖表的選用、樣式設計、交互設計、儀表板設計等方面。個人閱讀后進行了翻譯，希望能夠分享給更多對數據可視化有興趣的設計同學！

全文章節目錄：

原則

類型

選擇圖表

樣式

行為

儀表板

數據可視化

數據可視化就是用圖形描繪信息。

原則

數據可視化是一種以圖形描繪密集和復雜信息的表現形式。數據可視化的視覺效果旨在使數據容易對比，并用它來講故事，以此來幫助用戶做出決策。

數據可視化可以表達不同類型和規模的數據，包括從幾個數據點到有大量變量的數據集。

類型

數據可視化可以以不同的形式表達。圖表是表達數據的常用方式，因為它們能夠展示和對比多種不同的數據。

圖表類型的選擇主要取決于兩點：要表現的數據和表現該數據的用意。該指南描述各種類型的圖表及其用例。

圖表類型

1. 隨時間變化

隨時間變化的圖表顯示一段時間的數據，例如多個類別之間的趨勢或比較。

常見用例包括：

股價表現、衛生統計、年表

2. 類別比較

類別比較圖表是多個不同類別數據之間的比較。

常見用例包括：

不同國家的收入、熱門場地時間、團隊分配

3. 排名

排名圖表顯示項目在有序列表中的位置。

常見用例包括：

選舉結果、性能統計

4. 占比

占比類圖表顯示了局部與整體的關系。

常見用例包括：

產品類別的綜合收入、預算

5. 關聯

關聯類圖表顯示兩個或以上變量之間的關系。

常見用例包括：

收入和預期壽命

6. 分布

分布類圖表顯示每個值在數據集中出現的頻率。

常見用例包括：

人口分布、收入分布

7. 流程

流程類圖表顯示了多個狀態之間的數據移動。

常見用例包括：

資金轉移、投票計數和選舉結果

8. 關系

關系圖表顯示多個項目之間的關系。

常見用例包括：

社交網絡、詞圖

選擇圖表

面對多種類型的圖表，以下指南提供了關于如何選擇合適的圖表見解。

顯示隨時間的變化

可以使用時間序列圖表來表示隨時間的變化，就是按時間順序表示數據點的圖表。表示隨時間變化的圖表包括：折線圖，柱狀圖（條形圖）和面積圖。

*基線值是y軸上的起始值。

柱狀圖（條形圖）和餅圖

柱狀圖（條形圖）和餅圖都可用于顯示比例，表示部分與總體的對比。

· 柱狀圖（條形圖）使用共同的基線，通過條形長度表示數量

· 餅圖使用圓的圓弧或角度表示整體的一部分

柱狀圖（條形圖），折線圖和堆疊面積圖在顯示隨時間的變化方面比餅圖更有效地。由于這三個圖表都是使用相同的基線，因此可以更輕松地根據條形長度比較值的差異。

面積圖

面積圖有多種類型，包括堆疊面積圖和層疊面積圖：

· 堆疊面積圖顯示多個時間序列（在同一時間段內）堆疊在一起

· 層疊面積圖顯示多個時間序列（在同一時間段內）重疊在一起

層疊面積圖建議不要使用超過兩個時間序列，因為這樣做會使數據模糊不清。取而代之，應當使用堆疊面積圖來比較一個時間間隔內的多個值（橫軸表示時間）。

樣式

數據可視化使用自定義樣式和形狀，使數據更容易理解，以適合用戶需求。

圖表可以從以下方面進行優化：

· 圖形元素

· 文字排版

· 圖標

· 軸和標簽

· 圖例和注釋

不同類型數據的樣式設計

可視化編碼是將數據轉換為可視形式的過程。獨特的圖形屬性可應用于定量數據（如溫度，價格或速度）和定性數據（如類別，風味或表達式）。

這些圖形屬性包括：

· 形狀

· 顏色

· 大小

· 面積

· 體積

· 長度

· 角度

· 位置

· 方向

· 密度

不同屬性的表現

多個視覺處理方法可以綜合應用于數據點的多個方面。例如，在條形圖中，條形顏色可以表示類別，而條形長度可以表示值（如人口數量）。

形狀可用于表示定性數據。在此圖表中，每個類別由特定形狀（圓形，正方形和三角形）表示，這樣可以在一張圖表中輕松實現特定范圍的比較，同時也可以進行類別之間比較。

1. 形狀

圖表可以運用形狀，以多種方式展示數據。形狀的設計可以是有趣的、曲線的，或者和高保真的等等。

形狀程度

圖表可以展示不同精度程度的數據。用于細致研究的數據應該用適合交互的形狀（在觸摸大小和功能可見性方面）展示。而旨在表達一般概念或趨勢的數據可以使用細節較少的形狀。

2. 顏色

顏色可用于以四種主要方式區分圖表數據：

· 區分類別

· 表示數量

· 突出特定數據

· 表示含義

顏色區分類別

例：圓環圖中，顏色用于表示類別。

顏色表示數量

例：地圖中，顏色用于表示數據值。

顏色突出數據

例：散點圖中，顏色用于突出特定數據。

重點區域

在不濫用的情況下，顏色可以突出焦點區域。不建議大量使用高亮顏色，因為它們會分散用戶注意力，影響用戶的專注力。

顏色表示含義

無障礙

為了適應看不到顏色差異的用戶，您可以使用其他方法來強調數據，例如高對比度著色，形狀或紋理。

將文本標簽應用于數據還有助于說明其含義，同時消除對圖例的需求。

3. 線

圖表中的線可以表示數據的特性，例如層次結構，突出和比較。線條可以有多種不同的樣式，例如點劃線或不同的不透明度。

線可以應用于特定元素，包括：

· 注釋

· 預測元素

· 比較工具

· 可靠區間

· 異常

4. 文字排版

文本可用于不同的圖表元素，包括：

· 圖表標題

· 數據標簽

· 軸標簽

· 圖例

圖表標題通常是具有最高層次結構的文本，軸標簽和圖例具有級別的層次結構。

字重

標題和字重的變化可以表達內容在層次結構中的重要程度。但是應該保持克制，使用有限的字體樣式。

5. 圖標

圖標可以表示圖表中不同類型的數據，并提高圖表的整體可用性。

圖標可用于：

· 分類數據：用于區分組或類別

· UI控件和操作：例如篩選，縮放，保存和下載

· 狀態：例如錯誤，空狀態，完成狀態和危險

在圖表中使用圖標時，建議使用通用可識別符號，尤其是在表示操作或狀態時，例如：保存，下載，完成，錯誤和危險。

6. 坐標軸

一個或多個坐標軸顯示數據的比例和范圍。例如，折線圖沿水平和垂直坐標軸顯示一系列值。

柱狀圖（條形圖）基線

柱狀圖（條形圖）應從為零的基線（y軸上的起始值）開始。從不為零的基線開始可能導致數據被錯誤地理解。

坐標軸標簽

標簽的設計應體現圖表中最重要的數據。應根據需要使用標簽，并在UI中保持一致性。他們的出現不應該妨礙查看圖表。

文字方向

為便于閱讀，文本標簽應水平放置在圖表上。

文字標簽不應該：

· 旋轉

· 垂直堆疊

7. 圖例和注釋

圖例和注釋描述了圖表的信息。注釋應突出顯示數據點，數據異常值和任何值得注意的內容。

1. 注釋

2. 圖例

在PC端，建議在圖表下方放置圖例。在移動端，將圖例放在圖表上方，以便在交互過程中保持可見。

標簽和圖例

在簡單圖表中，可以使用直接標簽。在密集的圖表（或更大的圖表組的一部分）中，可以用圖例。

8. 小顯示屏

可穿戴設備（或其他小屏幕）上顯示的圖表應該是移動端或PC端圖表的簡化版本。

行為

圖表具有交互模式，使用戶可以控制圖表數據。這些模式可以使用戶專注于圖表的特定值或范圍。

以下推薦的交互模式，樣式和效果（如觸覺反饋）可以提高用戶對圖表數據的理解：

漸進式披露

提供了按需求逐步展示詳細信息的明確途徑。

直接操作

允許用戶直接對UI元素進行操作，最大限度地減少屏幕上所需的操作數量，包括：縮放和平移，分頁和數據控件。

改變視角

使一種設計可以適用于不同的用戶和數據類型，例如數據控件和動效。

1. 漸進式披露

使用漸進式披露顯示圖表詳細信息，允許用戶根據需要查看特定數據點。

2. 縮放和平移

縮放和平移是常用的圖表交互，會影響用戶對圖表數據深入的研究和探索。

縮放

縮放改變界面顯示的遠近。設備類型決定了如何執行縮放。

· 在PC端，通過單擊、拖動或滾動進行縮放

· 在移動端，通過捏合進行縮放

當縮放不是主要操作時，可以通過單擊和拖動（在PC端）或雙擊（在移動端）來實現。

平移

平移讓用戶能夠看到屏幕之外的界面。它應該合理的展示數據的價值。例如，如果圖表的一個維度比另一個維度更重要，則平移的方向可以僅限于該維度。

· 平移通常與縮放功能同時使用。

· 在移動端，平移通常通過手勢實現，例如單指滑動。

3. 分頁

在移動端，分頁是一種常見模式，讓用戶通過向右或向左滑動來查看上一個或下一個圖表。

在移動端，用戶可以向右滑動以查看前一天。

4. 數據控制

可以使用切換控件，選項卡和下拉菜單篩選或改變數據。

用戶調節控件時，這些控件還可以顯示指標。

切換控件，選項卡和下拉菜單可以更改或篩選數據。

5. 動效

動效可以強化數據之間的聯系，提升交互體驗。應該有目的地使用運動（不是裝飾性地），表達不同狀態和空間之間的聯系。

運動應該是合理，平穩，反應靈敏，不會妨礙用戶的使用。

在此示例中，圖表數據從按天顯示動態切換到按周顯示。轉換期間不會顯示所選日期范圍之外的數據，從而降低了復雜性。

動畫能夠體現兩個不同圖表的相關性。

6. 空狀態

圖表數據為空的情況下，可以提供相關數據的預期。

在合適的情況下，可以展示角色動畫創造愉悅和鼓勵。

有特色的動畫提升了空狀態的效果。

儀表板

在稱為儀表板的UI界面中，數據可視化通過一系列圖表實現。多個獨立的圖表有時可以比一個復雜的圖表更好地表達故事。

儀表板設計

儀表板的目的應在其布局，樣式和交互模式中體現。無論是用來制作演示文稿還是深入研究數據，它的設計應該適合它的使用方式。

儀表板應該：

· 突出最重要信息（使用布局）

· 根據信息層級確定信息的焦點（使用顏色，位置，大小和視覺權重）

應根據對數據的需求確定信息的優先級并進行安排。在此示例中設計儀表板，考慮了以下用戶問題：

1. 需要注意的問題
2. 發生問題的時間

3.發生問題的位置

4.受問題影響的其他變量

1. 分析類儀表板

分析儀類表板讓用戶能夠研究多組數據并發現趨勢。通常，這些儀表板包含能夠深入洞察數據的復雜圖表。

用例包括：

· 隨時間變化的突出趨勢

· 回答“為什么”和“假設”的問題

· 預測

· 創建有深度的報告

分析類儀表板示例：

· 跟蹤廣告活動的收效

· 跟蹤產品在其整個生命周期中的銷售額和收入

· 隨時間變化的城市人口趨勢

· 跟蹤隨時間變化氣候數據

分析類儀表板顯示氣候數據

2. 操作類儀表板

操作類儀表板旨在回答一組預設的問題。它們通常用于完成與監控相關的任務。

在大多數情況下，這些類型的儀表板具有一系列關于當前信息的簡單圖表。

用例包括：

· 跟蹤目標的當前進度

· 實時跟蹤系統性能

操作類儀表板示例：

· 跟蹤呼叫中心的活動，例如呼叫音量，等待時間，呼叫長度或呼叫類型

· 監控在云端應用程序的運行狀況

· 顯示股市情況

· 監控賽車上的遙測數據

操作類儀表板顯示設備存儲指標

3. 演示類儀表板

演示類儀表板是為感興趣的主題提供的展示視圖。

這些儀表板通常包括一些小圖表或數據卡片，用動態標題描述每個圖表的趨勢和見解。

用例包括：

· 提供關鍵績效指標的總覽

· 創建高級執行情況的概要

演示類儀表板示例：

· 提供投資賬戶績效的總覽

· 提供產品銷售和市場份額數據的概要

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

「元辰」數據概念控制中心，基于真實的使用場景和概念的表現手法，打造的企業及個人后臺數據管理系統。

主要分為首頁概覽、作品編輯、信息收集、數據統計和常規配置等，簡單的動效使操作回饋有了更好的交互體驗，且真實可依。

-

「元辰」注重真實的數據體驗，致力把數據信息通過大屏實時簡潔、有效的傳達給使用者。針對精準用戶“迅速獲取信息、簡化操作流程、減少學習成本”，我們將這些問題作為傳達的核心要素，一直貫穿始終。

-

歡迎溝通探討、合作交流。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

前言 

注解：

新聞的標題跟轉發數才是觀者關注的，而來源和時間就是次要關注信息，所以視覺上要為觀者分出層級，這樣不僅能夠使觀者看著更舒適，視覺上也很有層次，不雜亂。

舊版標題、來源、時間、轉發數、都是相對于內容居中的狀態，這種排版是不符合表格排版規則的，簡單的做法就是文字左對齊，數字右對齊，數字右對齊能夠更快速識別數據量大小，跟其他數據的對比，文字左對齊則是根據人從左到右的閱讀習慣。

之前專門總結過一篇數據表格如何排版的文章，想了解的朋友，文章下面有數據可視化系列文章鏈接。

注解：

設計數據可視化大屏時一定要考慮用戶瀏覽數據的優先級的構架，例如要遵循先總后分，先具體后抽象的邏輯，上圖舊版把趨勢放到了頁面的第一視覺位置，就有點宣兵奪主了，根據先具體后抽象，改版后具體數據放到第一視覺位置，趨勢信息排后。

舊版大屏沒有標題，我是誰？我在干什么？我要去哪里？所以標題務必得有。

總結：

說了這么多設計要點，新手可能還是不知道設計的切入點在哪里，所以總結一個數據可視化設計分三步走法。

第一步：了解數據要表達的本質。

拿到一組數據，先分析主次，這組數據要表達什么？是展示數據，還是對比數據，或是實時監控數據，從而確定展示的優先級。

第二步：確定使用圖表。

通過了解數據要表達的本質后，選擇適合他的圖表，這時候就需要打開幾個開源的圖表網站找圖表，記住你的圖表用的是網站的哪一個，開發如果找不到就丟給他網址。

網站有：Fusion Design、螞蟻數據可視化-AntV、ECharts Examples、Highcharts

第三步：整體效果調整

功能性的數據展示都沒問題，還要看下整體效果，例如用了過于多的柱狀圖，可能就會影響了整體的美感，圖表盡可能多樣性，數據表達信息就要用不同的圖表展示。

 最后 

數據可視化設計核心就是，通過美學設計形式把數據精準和的分析和表達。

數據可視化設計是目前較為熱門的設計工種，通過本文分享的項目迭代案例，希望能夠讓你對數據可視化有些許了解。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

（編者注：由于本文動圖太大，將近100M，為了不影響移動端讀者的閱讀體驗，本文圖片都是靜態截圖，動圖文章鏈接戳：https://docs.qq.com/doc）

一、項目背景

在過去一年中，潘洛斯（Penrose）團隊參與了「靈鯤」態勢感知系統、「麒麟」系統、「鷹眼」反電話詐騙系統等14個大數據可視化產品的設計。隨著產品不斷的探索和迭代，積累了一些行之有效的大數據可視化設計的心得和方法。基于「靈鯤」這個案例，分享一下我們在大數據可視化方向的設計和思考，希望能夠給對大數據可視化感興趣的同學提供一些思路。

「靈鯤」是 MIG 安全云部門與潘洛斯（Penrose）團隊合作的，基于潘洛斯大數據可視化引擎衍生出的一款金融風險監控可視化產品。應北京與深圳金融辦的需求，搭建靈鯤金融風險態勢感知系統，實現事中風險控制，減少網絡欺詐損失。

著手設計之前，我們需要了解：大數據市場規模和各行業投入有多大， 政企客戶的大數據可視化產品的痛點是什么？對比深耕多年的競品，我們設計的突破口在哪？——挖掘我們的機遇和發力點。

二、我們的客戶，目標群體

數據顯示，2017年中國大數據產業規模為4700億元。隨著一系列政策的出臺，大數據國家戰略正在加速落地，大數據行業將持續增長，預計2018年中國大數據產業規模將達到6200億元，增幅達32%。需求層面，預計2020年大數據應用市場需求中，僅政府需求就占比35%，另外包括醫療、交通、金融等多個行業在大數據和信息化建設投入也將持續增加。

除了旺盛的需求以外，我們還注意到很多政企內部數據基礎很好，以宜昌為例，宜昌智慧辦匯集了來自32個部門、60個系統的大量詳盡的實施城市數據。與這些政企單位合作，易形成行業燈塔，便于規模復制。另外，針對大數據可視化，目前政企已不滿足于「面子工程」，更多的希望大數據可視化與 AI 結合，呈現更復雜多樣的數據，以輔助決策。

基于以上的市場潛在規模的考察和典型客戶研究，在進行「靈鯤」產品能力規劃時，我們主要考慮以下三類使用場景： 政府機構決策、展會展臺及參觀視察。

在金融局等相關政府機構的日常工作中，決策層和相關工作人員會基于實時金融平臺數據，針對日常事務或緊急事件進行決策管理，監控大廳也就應運而生?；谶@種工作方式，我們可以發現潘洛斯的產品特性非常契合監控大廳的使用場景。在監控大廳中，用戶是通過兩種不同的信息界面進行工作的，分別是綜合數據可視化大屏（總屏）以及工作人員獨立使用的電腦屏幕（分屏）。其中，在總屏上，呈現的內容通常是一些對于決策者來說至關重要的信息：正在發生的事件的狀態和可能趨勢（發生了什么）、值得注意的風險（需要團隊做什么）以及風險的處理進度（團隊做的怎么樣）；而在分屏上，主要為工作人員提供數據分析及風險事件處理功能，幫助團隊對事件迅速作出響應，協作。

不同于工作場景，靈鯤產品在展會中展臺的主要受眾是參會人士，除了一般民眾外，更有價值的觀眾主要來自于媒體和潛在客戶等。所以在這個場景中展示的內容與實際工作中的數據可視化內容有一定的區別，更多的是對產品能力的展示、產品的宣傳以及社會價值的呈現。如何直觀的呈現產品的能力，并使觀眾快速獲得有價值的信息并留下深刻印象非常重要。這也決定了在這個場景中，用戶不僅包括觀眾，也包括演講者。我們需要考慮如何通過控制端讓講演者而流暢的完成產品介紹。

在金融局等政府機構，經常會有上級領導視察參觀的接待活動。這些來訪的貴賓往往希望了解關于機構更全面和具體的信息，包括但不限于工作流程、工作成績等，所以我們認為這個場景綜合了以上兩種場景的主要特點。這里的用戶包括來訪人員，演示人員以及工作人員，展示的內容也往往不局限于金融風險大數據的可視化，還會包括工作方式和流程本身。

三、行業競品對比，反觀自身發力點

通過對阿里 DataV，AntV、360、帆軟的大數據可視化產品的體驗，我們從產品呈現、產品體驗、產品技術、部署方式和商業模式幾個維度的橫向對比。阿里的技術對可視化效果的局限性很大，優點是產品實現模板化、系統實時可交互，用戶可以快速搭建自己的可視化產品；360產品可視化呈現3D化，數據呈現效果和數據感知度較2D更優，但是系統非實時可交互，而且搭建周期長，成本較高；帆軟的可視化是傳統報表型，可視化效果呈現缺乏競爭力。

經過對比，我們不難發現3D化數據呈現能力和數據感知度是最高的。但是局限于目前的技術，項目成本高、研發周期長、難以滿足業務的發展速度。

四、我們的機遇和挑戰

基于市場需求和競品分析，我們從以下三個方面分別分析了產品的機會和突破點：

• 可視化：數據和場景的呈現3D化，滿足更多維度的數據呈現，支持云+本地實時大數據呈現能力；
• 產品化：場景、組件、數據、圖表全部實現可云端動態更新和配置的模塊化，降低維護成本、提高服用率、縮短項目周期，無縫打包接入業務數據，提供豐富可自定義的可擴展接口；
• 大數據+AI：基于公司多領域多業務線的大數據融合以及 AI 能力提供豐富的基于時間、空間、數據的預測預警、統計表達能力。

1. 產品架構規劃

基于對靈鯤態勢感知系統的使用場景、用戶需求以及機會點的考慮，我們規劃了未來產品的整體架構，包括大屏端、云端、客戶管理端、小屏端以及虛屏端。大屏端基于本地端引擎進行大數據可視化呈現。客戶管理端包括報表和配置管理等工具，幫助用戶進行分析數據和策略管理。小屏端主要考慮操作控制和移動辦公等移動使用場景，提供大屏控制、移動審批、監管、公眾號等功能。以上三個端由云端拉取和更新數據。虛屏則提供差異化的大數據可視化體驗，如增強現實等新奇有趣的玩法。由于大屏端在我們的規劃里是態勢感知系統的核心，且落地到合作方的模塊，以下分享的內容將主要圍繞大屏的內容設計展開，未來如果產品規劃中的其他模塊陸續上線，我們再做分享。

2. 大屏內容設計

本地端引擎

早期我們設計的「麒麟」系統、「鷹眼」反電話詐騙系統在對外在大屏上展示主要是通過 web 端的方式去實現，雖然適配性尚可，但很多設計效果無法完全還原。我們也嘗試性用 webGL 和 three.js 的方式把設計效果再做進一步提升，但迫于研發周期和實際性能的壓力，最后也只能作罷。中期我們嘗試使用3D工具輸出視頻的方式做過一些過渡，輸出效果是沒有問題，但如果在展會上遇到媒體采訪，事情就會變得異常尷尬。媒體會詢問展示內容的真實性，數據的實效性，甚至采訪的時候需要停留在某一個畫面，我方參會人員配合起來非常麻煩。后來我們也研究過競品使用的工具，例如 Ventuz，工具最終輸出的效果是不錯，但是界面、操作極其復雜，相關教程和素材在網絡上極少，授權費用也相當昂貴。最終經過我們內部商討和研究，也請教了一些 IEG 專家的意見，決定使用游戲引擎作為本地端的顯示引擎。

Unity 和 Unreal 我們也糾結過許久，甚至 Unity 上我們也出過可交互的 Demo，但最終選擇了 Unreal 的原因主要有以下幾個點：

• 基于前面我們提到的產品架構，我們的核心是在大屏，而大屏部署主要依賴 PC 做為計算平臺，相較于 Unity，Unreal 在 PC 端的技術積累要更加深厚，實時渲染出來的光影效果和質感表現要更穩定于 Unity 的輸出；
• Unreal 自帶藍圖-可視化腳本系統，這對于設計團隊出身，零代碼開發經驗的我們來說上手、學習起來更快更方便；
• 線上有大量的視頻教程，各種插件和美術素材也比Unity更豐富；
• 有《蝙蝠俠:阿卡姆騎士》、《最終幻想15》和《絕地求生》這些3A沙盤游戲作為先例，Unreal 對于大規模的場景渲染能力是可被預期的，而 Unity 目前還沒有可以拿得出手的案例。

色彩基調

為了打造靈鯤產品的可視化，在競品中脫穎而出，我們從產品功能、用戶、愿景三個維度發散，提煉出設計指南的關鍵詞：智能、直觀、未來，塑造獨特的大數據可視化風格體系。

靈鯤金融態勢感知系統內容架構分為數據維度和場景維度，數據是核心，場景是大數據呈現的承載體；場景使用具有金屬質感的深青灰，符合理性的、冷靜的、智能化產品的個性；數據色彩使用透明、發光、具有未來感的高亮色，和場景形成強對比，使數據更為突顯、更具吸引力；為了強化客戶對于風險的感知，通過顏色區分數據的風險等級，更直觀的傳達數據的含義。如：高風險的使用紅色，紅色讓人聯想到危險、警報。

呈現方式

在現有的產品和傳統認知中，大數據產品內容是各種樣式的圖形和圖表，主要以平面為主。我們從游戲、科幻電影中收集了一輪大數據可視化內容相關的案例，從視覺維度上看，主要有這幾個特點：一、具有很強的空間感，支持多種數據同屏呈現，可交叉分析對比，承載性強；二、高精度的模型和材質，豐富的粒子、動效，更加貼近現實的光影呈現；三、互動性強，可交互，實時演算。

從大數據可視化的內容維度上看，梳理的3D架構，主要包括：數據維度>基礎建設>交通運輸>行政分區>自然條件。

數據維度層是最核心的部分，位于場景上方最突出的位置，能夠更清晰的展示風險數據的分布、量級；行政區域和交通層是城市場景最基礎的數據維度，方便用戶進行區域的數據對比和分析；基礎建設層包括城市的建筑、標志性建筑、照明、橋梁、等，還原城市獨特風貌；通過突出城市的標志性建筑，強化城市、區域的識別性，輔助數據傳達；自然條件層包括地形、河流、植被、展示真實的環境特征，用戶更有代入感。

△ 北京場景

△ 鳥瞰視角、漫游視角自由切換，滿足全局、街道、建筑的不同顆粒度的數據呈現，方便用戶進行縱向的數據對比。

△ 場景整體風格圖

數據表現

靈鯤的3D數據樣式有柱狀圖和散點圖。如何把司空見慣的數據樣式，設計出產品的個性，是我們重點要解決的問題。為了體現大數據的力量感，使用科幻電影中的聚合能量、發光的能量石作為柱狀圖的主圖形；同時把數據采集、融合、分析的過程具象為動態粒子網絡，作為輔助圖形。數據圖形和結構中都融合了品牌 DNA 的三角圖形，數據樣式更具有品牌的個性。

△ 柱狀圖

△ 散點圖

預見未來的功能創新

時間線：3D的維度基礎上，我們增加了時間的維度，通過拖動時間線查看不同時間點的數據的變化趨勢，由此對未來數據進行預測。為了強化用戶對于時間感知，設計了白天和晚上兩種風格，白天和夜晚隨著時間變化而變化。

天氣系統：天氣是未來數據分析極其重要的一個因子，它會直接影響交通（例如人流、物流、航空）、醫療(例如疾病傳播、醫院就診）等領域。所以我們設計了通用的天氣系統組件，呈現實時天氣情況，以輔助用戶進行數據分析。

控制端：符合大屏使用場景和用戶操作習慣，同時小屏控制端支持更復雜更精準的操作。

組件庫搭建

為了提升產品搭建的效率，降低了研發周期和成本，產品功能模塊實現了組件化，分為3D場景組件、3D數據組件、2D數據組件。任何一位設計師都可以根據產品需求，搭配組件模塊，快速搭建大數據可視化產品。

數據內容的包裝

通過該產品，一方面能夠輔助金融局等政府機構領導把控整體金融平臺風險、輔助做出平臺整改指導決策意見，展示金融工作成績；另一方面體現出騰訊大數據能力和公司的社會責任；最后，通過從更長遠的眼光去包裝產品，打造智慧監管標桿產品，從而推動與政府客戶更深入廣泛的合作。具體內容通過以下兩條線進行組織：

橫線：各個監管維度

靈鯤金融風險態勢感知系統專注于呈現金融風險數據的呈現，主要分為公司層面和用戶層面，綜合體現潛在的風險趨勢和實際影響的范圍。除了靈鯤用于監管金融數據，整個監管平臺還負責展示包括政治、生態、電信、消費在內的多個監管維度，這些維度與金融監管維度為同一個內容層級。我們考慮到騰訊的大數據能力可以幫助更多城市綜合管理者了解整個網絡社會的全局性風險，所以每個維度都是智慧監管必不可少的一部分，并且每個維度之間的橫向交叉對比能夠使智慧監管平臺發揮出更大的社會價值。

縱線：監管顆粒度

靈鯤系統中觀眾可以從全局數據一直下鉆到個體數據，實現不同顆粒度的監管目的。

具體來講，全國的安全風險最終是以加權平均后的指數形式體現出來；再到具體的省份和城市，內容細化到具體風險事件的發生情況，如電信安全監管維度，呈現電信詐騙使用的偽基站的位置，以及發送詐騙短信的數量等；最后細化到城市中的機構和建筑，呈現具體機構的運行情況和具體高風險企業所在建筑進行實時監控。

3. 產品演示視頻

https://v.qq.com/x/page/d0742kep4k1.html

結語

潘洛斯團隊是基于 DNA 設計中心下的大數據可視化團隊，成員來自于 MIG 安全和醫療部門，早期專注于 To C 端的產品設計，過去一年里隨著公司戰略的變化和部門業務方向的變化，我們逐漸開始把產品設計的重心和思考放在了 To B、To G 領域，不斷做著嘗試和探索。以前做 To C 的時候我們關注的更多是 DAU、轉化率、日活、滿意度這些和產品體驗相關聯的指標，滿足絕大多數互聯網用戶的訴求是我們首要去解決的問題。現在做 To B、To G 領域的設計，我們更多思考的是如何包裝我們現有的業務能力，能夠通過更加簡單、直接、有效的方式觸達給我們的客戶，讓他們更容易理解像騰訊這樣擁有海量數據和算法能力的互聯網公司如何幫助他們進一步提升他們的業務效率和產出，給這個社會創造更多的價值，這也是騰訊多年來想要承擔的社會責任之一。

文章來源：優設

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

文章來源：UI中國

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

2016年3月，阿里巴巴中國零售交易市場2016財年商品交易即時總額即將突破三萬億，這是阿里歷史性的一刻，也見證了消費的力量， 為了記錄這一歷史時刻，三萬億大屏項目應運而生。這是阿里UED的一些文章。

交通類大屏幕界面設計應用案例欣賞 

統計圖表類大數據可視化界面設計

相關負責人介紹，大屏幕最上方一個個顯示著列車、車站景象的小窗口是1號線各個站點的實時監控圖像，可以清晰看見地鐵內發生的情況。下面有著紫色綠色條紋的一幅幅圖像就是地鐵的信號系統，哪輛車行到哪里，間隔多少，是否有情況需要停車……這里一目了然，調度人員就是在同步的電腦屏幕上進行調度，保證地鐵正常運營。最下面的是供電系統，停電、變電、送電等操作都在這上面完成。

（藍藍注：轉載這篇文章，是為了讓設計師和產品經理們了解到客戶平時的業務和工作方法）