本文的英文原標題是「10 Rules of Dashboard Design」，其中 Dashboard 如果翻譯成儀表盤的話，總覺得不大容易理解，所以我在這里把它翻譯為數據可視化。數據展示方面的設計，相信大家會經常用到，這篇文章有很多簡單直接，立馬就能用上的干貨，一起來學習吧！

為什么數據可視化設計非常重要？

數據可視化的目的是以一種用戶更容易理解的形式呈現復雜信息。

一個優秀的數據可視化界面包含以下幾個關鍵要素：

• 清晰：一個好的數據可視化界面一定是能夠清晰的展現用戶所需要的信息。當用戶看到界面內容時，應該能在 5 秒內了解到它的用途，而不是花費至少幾分鐘才能理解各個數據的含義。
• 有意義： 一個有用的數據可視化界面上的每一條信息都應該是有意義的。這些有意義的信息能準確傳達設計師想要表達的內容。每一條數據的背后，用戶都是可以讀懂的。
• 一致性：優秀的數據可視化界面，會有一套非常嚴謹一致的版面。這里的一致性需要考慮到布局，結構和內容。
• 簡單： 復雜的界面違背了數據可視化設計的初衷。如果一個信息呈現不夠簡單直接，那么肯定是在設計上出現了問題。

如何設計一個數據可視化界面？

數據可視化界面設計最重要的步驟是需要了解目標用戶是誰，能為他們提供什么價值。了解目標受眾的知識背景和理解水平能幫助你做出對他們有價值的設計。

在了解目標用戶時，有必要了解受眾感興趣的數據類型。

「專注于用戶的需求，更容易產生他們喜歡使用的結果。」

目標用戶級別可能會在一級和另一級之間變化，這是一個挑戰性的點。與其他任何設計項目一樣，可以細分受眾并將信息相應地分為基本內容和高級內容。

在界面中表示一組信息有多種方法，選擇正確的數據指標是設計數據可視化的另一個關鍵元素。這也與目標用戶的偏好有關，即他們希望看到什么樣的信息。

「根據需要設計數據可視化界面，為不同的業務使用不同類型的展示方式?！?

下面是為目標用戶設計數據可視化界面時需要考慮的一些重要規則。

1. 區分層級

一個常見的錯誤就是設計師沒有對信息區分層級，所有的內容看起來都一樣重要。

可以嘗試使用組件的大小和位置來區分數據的層次結構。

• 通過定義信息層級，讓用戶清楚什么是最重要的
• 在左上角顯示更重要的信息，沿著對角線方向，信息的重要程度應該依次減弱，右下角的信息重要性最弱
• 還可以將信息劃分為不同類別，并在不同的視圖中顯示它們

2. 簡單易懂

數據可視化的真正目的是用一種更方便理解，更簡單的形式來傳達復雜信息。

• 不要放一些大多數用戶都難以理解的信息
• 使用更少的列來顯示信息
• 刪除冗余內容來減少混亂

3. 一致性

使用一致性布局設計的數據可視化界面看起來更好。

• 為了使界面更容易閱讀，可以在信息組之間使用類似的可視化效果。
• 把相關的信息放的更近一些
• 對相關內容進行可視化分組

4. 臨近原則

在界面中把相近的信息放在一起可以幫助用戶快速理解。

• 把相關的信息放的更近一些
• 不要將相關信息分散在界面上
• 對相關內容進行可視化分組

想更深入了解接近原則，看這篇：

5. 對齊

可視化組件元素需要在視覺上對齊，并保持視覺平衡。

• 將可視化組件元素在視覺上進行對齊，可以將界面組織的更好
• 嘗試將組件元素進行網格布局設計
• 不對齊的界面會給用戶帶來糟糕的體驗

6. 留白

留白是為了讓界面有呼吸感，它使得用戶在使用你的界面時能夠有喘息的空間。

• 當用戶查看需要的信息時，界面中的留白能夠吸引用戶的目光，提升用戶體驗。
• 減少留白會使用戶的界面變得混亂
• 使用留白能對信息進行可視化分組

△ 留白太少簡直就是在鼓勵你的用戶盡快離開

7. 顏色

使用有效的配色方案來吸引用戶的注意力，幫助他們輕松地瀏覽信息。

• 仔細選擇顏色，目標是使內容易于閱讀
• 使用大對比度來顯示背景上的視覺元素

△ 避免使用低對比度和低效的漸變

8. 字體

標準字體是可視化界面中的最佳字體，除非有特別的理由，一般不要用其他字體。

• 使用標準字體，因為它們更容易閱讀和掃描
• 特別和美術字體可能看起來不錯，但很難理解
• 避免所有的大寫字母文字，因為它很難閱讀，人類的大腦需要時間來消化它。
• 使用合適的字體大小和風格，有效地傳達信息

△ 不要使用影響可讀性的字體

9. 數字排版

顯示精度超過要求的數字使它們難以閱讀和理解。

• 必要時使用整數，因為長數字會使用戶混淆
• 省去不必要的信息
• 讓用戶能夠容易地比較簡單的差異細節

10. 標簽

使用能夠快速有效地向用戶傳達所需信息的標簽。

• 避免使用帶旋轉的標簽，因為很難閱讀
• 盡可能的使用標準的縮寫

△ 避免旋轉標簽

總結

數據可視化旨在節省時間和精力，將復雜和抽象的數據以更簡單的形式表示，目的是以用戶能夠理解的方式將關鍵信息傳達給他們，確保自己理解用戶所需，并給他們需要的信息。

文章來源：優設

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

電視 UI 算得上是一個偏冷門的界面設計，因為它的交互比較特殊，同時有一些限制，比如交互限制，焦點原則等等。以下就自己的項目經驗為電視 UI 設計原則做一個總結。

智能電視的特性

對于現在家庭智能電視而言，技術在不斷的進步，但是其飽和度和對比度有的還是很強，還會遇到大紅碰到大紫的色塊對比。但是信息變得簡約了，都是以 tab 導航為主，下面是幾個卡片信息瀑布流顯示。語音提示很重要，會隨著焦點的移動發出提示聲響，提示用戶電視焦點的移動狀態。

小米電視商城全新改版，在接到需求后，一定要模擬用戶來體驗一下購物流程還有用電視購物的環境，環境應該是固定的，那就是在家里。電視和手機購物體驗是不一樣的，電視是要用遙控器來控制，所以每一步的操作流程都很珍貴，如果界面跳轉太多，會給用戶一種煩躁的感覺，所以盡量同一層級的信息要在同一界面填寫完畢，避免二次跳轉。

第二點說的就是焦點問題，焦點不能層次不齊，跳動太大會引起視覺不適。以小米電視商城詳情為例，焦點盡量在同一水平線上，同行的焦點移動，視覺感受上會舒服很多。

設計尺寸

智能電視的分辨率和大家平常在 app 看電影的時候差不多，如上圖所示，目前 1080p 最常見，2k 和 4k 基本都是資源類節目。設計尺寸以小米電視為例，通常做 1920*1080 的視覺稿就可以了，開發會適配比 1920*1080 小的電視屏幕，這樣下來，如果小分辨率的電視沒問題了，大的分辨率也就沒問題了。

我們知道在設計 app 的時候，都有左右間距的控制，移動端一般常見的控制在 28px 或者 32px，電視端因為是大屏設計，所以預留的空間也要大一些，基本左右留出 120px，上面留出 90px 就可以了。一般我設計的時候左右是固定的 120px，上面可以隨設計內容來自定義，90px 或者 100px，都是可以的，只要視覺舒服即可。

焦點在電視端 UI 設計里顯得尤為重要，因為它就是你的視覺焦點，焦點會隨著遙控器上下左右確認而改變。焦點的設計不能是扁平的，因為那樣不能夠提醒用戶焦點狀態的位置，焦點的設計應該是放大的、夸張的、可以帶邊框，也可以使用投影外發光的方式來設計，確保能夠給用戶足夠的清晰位置。

焦點放大我這里建議放大 1.1 倍或者 1.2 倍就可以了，再大就顯得過于大了。

交互設計

如上圖所示，我在設計焦點的時候，就用了放大+外邊框的形式，這樣焦點移動起來可以讓用戶足夠看到位置所在。電視端的交互也是很簡單的，基本屬于十字交互，即自上而下，從左到右的交互方式。紅色剪頭屬于禁區，所有的電視交互，沒有斜 45 度的交互，這樣是錯誤的。

大家可以看到，在 app 里，常見的彈窗和浮窗可以壓蓋在可點擊功能上，比如美團的紅包，愛奇藝的一鍵關注，即使是這樣，也不會影響功能的正常使用。但是電視端的設計，如果兩個可點擊功能壓蓋在一起，焦點是無法獲取的，因為它沒法判斷你想要選的那個功能，所以在電視上，一定要將兩個功能分開來布局最為合適。

露出屏外的內容，和移動端設計是一樣的。如果有多個卡片內容，我們需要將露出屏外的那張卡片做一些邊界化處理，控制好間距，也就是說我們要將一個完整的卡片漏出來一些，讓用戶知道，后面還有內容；反之，用戶可能不知道后面還有內容，就不會按遙控器右鍵查看了。

電視端 UI 設計忌諱控件隱藏，比如上圖，如果有很多文字的時候，左邊的設計是錯誤的，因為隱藏了 button 按鈕。改為右邊的設計是比較好的，我們可以選擇焦點選中文字給一個彈窗狀態或者其它，將 button 功能位露出來，如果一個界面可選功能位較少，我們設計的時候盡量在第一屏展示。如果實在不行，可以選擇吸底吸邊來設計。

視覺設計

顏色的選擇運用是重中之重，因為這個會直接影響到用戶的視覺體驗。因為用戶環境大多數是晚上的時候回去看電視，分開燈和關燈的情況，開燈的情況其實還好。如果關燈，顏色太刺眼的話，飽和度較高的顏色會直接影響到眼睛，這個危害是很大的，而且不一樣顏色的色塊，會增加用戶的視覺負擔，這樣就得不償失了。所以我們要避免大面積的使用單一純色或者漸變色。

電視 UI 設計中，白色謹慎使用。因為白色過多實在是太刺眼了，我們可以選中較為灰一些的接近白色的顏色來代替。

背景的運用這里也建議使用深色的背景，原因和上述講的一樣，還有一個就是深色背景可以更好地襯托出界面的主要內容。反之如果用淺色的背景，有的卡片如果需求方要求設計成淺色，那么這樣淺色的背景+淺色的卡片疊在一起，主要內容就特別難區分了。

我們在設計電視端 UI 的時候，要真實的先去體驗一下特殊的場景，電視端每個 tab 是一個頻道，每個頻道的設計風格也是不同的，比如少兒頻道，購物頻道和電影電視劇頻道，設計風格肯定不同，體驗模擬流程可以讓我們更快地了解電視特性。

字體的選擇默認思源黑體，因為這個字體是開源字體，可以免費使用，沒有版權之分，以上列入的字體是小米電視商城改版的字號，具體的字體和間距可以根據自己的設計需求變化。

關于字體的選擇，當然你也可以選用其它字體，或者一些特殊字體，好看的字體，但是這樣的話，字體包應該會很大，會影響一些加載速度。

字體顏色的選擇盡量用白色或者亮色，深色背景上選用白色是最好的，這樣更易于閱讀。

字體的粗細大小，這里標題建議加粗選擇，其余選擇常規字體就好，避免太粗或者太細的字體。

更好的智能家居體驗

電視的設計只是其中的一部分，未來我們的電視可能比現在的體驗更加好，比如會出現實景商城，單一的圖片形式已經不能滿足我們對購物的需求，一些視頻類，動效類的體驗會更加合適。想讓電視擁有好的體驗并不是一件簡單的事情，想必大家已經從諸多「電視盒子」上體驗到了這一點。我們曾經熟悉的電視已經發生改變，而我們適應的手機、平板和電腦和新的電視還有著巨大的差別，我們需要忘掉之前熟悉的模式，未來五年、十年、甚至更久。電視、電燈、冰箱洗衣機等智能家具的體驗，正是我們設計師需要在未來幾年所做的事情，這很重要。

小米電視商城全新改版是我接觸的第一個電視端 UI 設計項目，第一期的優化還有很多不足，根據項目經驗總結了上面的規范。以上的基本設計規范掌握后，那么做電視 UI 基本問題不大，大的錯誤肯定不會有了，但是每個公司的設計規范肯定也有所差別。電視端的設計是個偏冷門的 UI 設計，多掌握一些另類項目經驗也是設計師必備的技能。

文章來源：優設網

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

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

寫在前面

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、轉化率、日活、滿意度這些和產品體驗相關聯的指標，滿足絕大多數互聯網用戶的訴求是我們首要去解決的問題?，F在做 To B、To G 領域的設計，我們更多思考的是如何包裝我們現有的業務能力，能夠通過更加簡單、直接、有效的方式觸達給我們的客戶，讓他們更容易理解像騰訊這樣擁有海量數據和算法能力的互聯網公司如何幫助他們進一步提升他們的業務效率和產出，給這個社會創造更多的價值，這也是騰訊多年來想要承擔的社會責任之一。

文章來源：優設

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

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

文章來源：UI中國

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