與其他相對成熟的設計領域（UI、插畫等）相比，數據可視化尚顯小眾，在一個細分、小眾、不成熟的領域里做設計，「怎么去找靈感」確實是一些小伙伴經常遇到的問題。本文以本人工作經驗為基礎，系統性分析了該問題及對應的解決方法，并將其整理成文與大家分享，這在數據可視化行業內尚屬首次。當然了，本文雖面向數據可視化設計師群體，但其中的方法是通用的，運用在其他設計領域也完全事半功倍。

本文結構概覽

本文圍繞「搜什么——去哪兒搜——怎么搜——素材的整理——靈感的迭代與更新」 五大板塊展開。

靈感庫建立的基礎

靈感庫的建立大體上分主動與被動兩種。主動，是我們有意識地收集、整理相關作品素材形成靈感庫的過程；被動，指通過朋友圈好友分享、同行推薦等獲取靈感的方法。因為后者更不可控，影響因素較多，比如你所處的圈子、社交網絡使用習慣等都會影響被動獲取的質量。所以今天，我跟大家分享的主要是第一種主動建立靈感庫的方法，而這個方法的核心我把它歸納為兩個字 ：搜索。

搜索是現在這個時代我們主動獲取信息的最主要手段，每天我們通過各類關鍵詞在各類 APP 上獲取各樣的服務、產品和資源。靈感的主動收集就是一個通過關鍵詞搜索，然后分類、整理、研究、再利用的過程。所以影響靈感收集的主要因素其實就是我們能不能用好搜索。不同的搜索方法、渠道、關鍵詞極大地影響著我們獲取到的信息質量，這也是本篇文章為何以搜索核心展開的原因。

如下圖所示，同樣的關鍵詞在不同的搜索渠道，得到的內容質量是不一樣的。

靈感庫建立的第一步：搜什么？

互聯網很大，如果沒有明確的目標，找靈感的過程就跟刷抖音一樣，恍恍惚惚幾個小時，好像點了不少贊，收藏了不少干貨，回頭看其實并沒有什么特別有價值的東西，所以找靈感要有目標，有 KPI 才行，有目標就有標準，有標準才有方向和效率。

如上圖所示，我對數據可視化這個行業術語做了分析和拆解，這樣做的目的是為之后搜索關鍵詞的提取做思路的拓展。很多小伙伴在搜索可視化相關內容時，思路總是局限在「可視化」這個關鍵詞上，但是直接使用這個關鍵詞搜索，大多數時候并不能找到我們心理預期的結果，或者搜索多次后，看到的都是之前見過的作品，很難突破邊界，獲取更多新的靈感。造成的這個結果的原因顯而易見，就是關鍵詞的匱乏，不知道搜什么。而對「大屏數據可視化」進行解析之發現，以往的搜索，我們只使用了四個方向里的其中一個，其它三個方向并沒有很好的利用。現在，我們以每個方向上的核心關鍵詞為基礎，去豐富它的下一級關鍵詞，這樣就會像枝芽新生一樣，在各個節點延伸出豐富的詞匯。

媒介就是指數據可視化設計最終落地在什么平臺，一般來講，大屏數據可視化設計落地的媒介當然就是大屏了，以它為核心做關鍵詞的發散，可以產生其它幾個二級關鍵詞。

數據類型是主要數據的特征或來源，不同的數據類型，在可視化設計時有不同的視覺特征。比如地理信息的數據可視化，一般會與道路、河流、人造建筑、某區域內地標等一起出現，會有豐富的 3D 場景、動效，而圖表信息相對較少；報表類信息的數據可視化，則主要以更好地展示報表內大量數據為主，所以強調信息的層級、主次，設計的目標是要減少用戶認知負擔、引起用戶閱讀興趣，促進數據內容的有效傳達，因而會較少使用動畫，其次，因數據較多，也很難對應到某個具體的物理場景，故 3D 模型等也較少使用。

所以以數據類型為核心，拓展的二級關鍵詞會讓搜索結果更精準，更有針對性。

設計風格就是視覺設計整體上給人的想象和感受，好的設計就跟一個人一樣，一定是有自己鮮明的個性和氣質，能夠引起人的共鳴和向往，唯有如此，設計才能吸引人，從而影響人，并最終傳遞自己的觀點給觀者。所以設計風格的定義是視覺設計中最重要的一環，也是最需要靈感和創造力的部分。

作為數據可視化設計師，我們想要找到的參考是那些具有數據可視化風格的作品，但這些作品本身并不一定是在講數據可視化的內容，只要作品某部分的設計有我們想要的那種「感覺」，就可以了，而這個作品可能是某段影片、某個動效、某種圖形、某個元素或聲音。基于這樣的思路，我歸納了一些具有數據可視化風格但不一定都是數據可視化作品的關鍵詞。這就是一個特別有意思的點，我們想要找到某個內容，但當我們用最貼切它的那個名字去找時，卻不一定能找到最能代表它風格的作品。所以當我們跳出數據可視化這樣一個具體的點，而從更抽象的設計風格這個層面去看待它的時候，就能更好地發散思維、拿到了更多好的關鍵詞，找到更多的刺激點。

以設計風格為例，我們從它的節點上找到任意一個關鍵詞：SCI-FI，然后搜索這個關鍵詞，我們看看搜索到的結果。

業務場景簡單理解就是在什么情況下要解決什么問題，它是數據可視化的落腳點，也是數據可視化的商業價值所在。每個公司或團隊，都會有自己專注的業務方向，所以在工作中找這方面的靈感，從業務場景入手效果最好。

簡單回顧下，通過上部分文章的分析，我們從媒介、數據類型、設計風格、業務場景四個方面形成了一個數據可視化的關鍵詞的矩陣。這個矩陣是建立靈感庫的基礎，之后每當我們有新的關鍵詞要加入，或者有效果不好的關鍵詞需要剔除，只需修改、迭代這個關鍵詞矩陣即可。有了這個關鍵詞矩陣后，我們如何利用它完成一次基于實際需求的靈感搜集？下面給大家舉個小例子來看一下怎么用。

一句話描述業務需求

首先用盡可能簡短的一句話描述業務方訴求。

一句話描述業務訴求后，我們把業務需求帶到關鍵詞矩陣中，就會獲得如下圖的結果：

可以看到，帶入需求后，按樹狀結構去匹配與需求相吻合的關鍵詞，就可拿到明確的搜索指引目錄，然后我們按搜索指引，開始靈感收集即可。

這里有個小小的點，就是為什么要盡可能用簡短的一句話來描述業務方訴求，

• 這樣做可以把那些優先級低的干擾因素都過濾掉，留下真正核心的訴求，越是能簡短的概括，越能真正把握需求的核心。我個人一直以來與業務方溝通需求后，都會嘗試用一句話概括，若需求方認可，開始設計工作；不認可，則繼續溝通。
• 對于數據可視化設計師來講，明確自己在工作流中的角色、承擔的責任、要解決的問題以及最終交付怎樣的產出尤為重要，因為只有清楚了這些，我們才能有效分配自己的時間、確定跟上下游的協作策略，避免盲目地沒有 KPI 的設計。

靈感庫建立的第二步：去哪兒搜？

合適的關鍵詞是第一步，它保證了我們搜索結果的有效性，而去哪兒搜決定了我們搜索結果的質量。如下圖，針對數據可視化設計師，我對「去哪兒搜」這個問題按我自己的從業經驗做了梳理。

從我的歸納里大家可以發現，我把數據可視化設計師的靈感來源分為了四大塊（其它行業的設計也大體上就這四塊），分別是：設計網站、產品或服務提供方、獨立設計師或工作室、視頻網站。

第一部分：設計網站

設計網站部分列出的都是設計師們都熟悉的幾個站點，在之前，大多數靈感的收集都可在花瓣完成，但花瓣最近幾次改版之后，已經沒有以前那么好用了。對數據可視化方面的素材搜索，個人經驗上，強烈推薦大家去 behance，雖然 behance 訪問方面也面臨一些困難，但是，但凡你想真的了解一些好的設計，這個網站，是你一定要想辦法去經常逛逛的。至于為啥不推薦其它幾個網站，倒并不是說其它網站不能用，只是搜索的結果相對局限。針對這塊的具體分析，我會在文末的 Q&A 里進行。

第二部分：產品或服務提供方

我們知道，任何商業設計，一定是有一個業務或應用場景來支撐的，一定程度上設計就是在圍繞業務場景提供視覺、交互、用戶體驗、品牌等方面的解決方案，也就是說設計是服務于業務場景的，反過來講，服務于這個業務場景的就只有設計師么？當然不是。在市場條件下，服務的提供方除了像設計師這樣的個體外，更多的是我們熟悉的另一個機構（組織），這個組織的名字叫「公司」。公司把大量專業的人員組織在一起，通過優勢互補、強力協作，提供服務、解決需求方問題。對于數據可視化設計來講，企業當然也參與其中。所以我們找靈感去服務提供方也是一個的方法。企業要證明自己的實力、要讓潛在客戶了解自己，必然會花大量的資源做營銷做推廣，而最常見的推廣的落腳點就是企業官網。很多做數據可視化的公司，會在官網展示一些能體現自己業務特點、業務實力的案例，而這些案例就是這些企業最好的數據可視化設計作品了，沒有人會在自己的臉上放垃圾上去，對不？ 所以但凡有案例展示的官網，案例基本都是最典型最好的設計，所以從這些案例中找靈感，也是一個有意思且有效的方法和途徑。

△ 阿里DataV

△ Hightopo

△ Tob.Design

第三部分：獨立設計師或工作室

獨立設計師一般給人的感覺是什么呢？就是在自己垂直的領域內牛逼，近乎神一樣的存在。獨立設計師要能順利「獨立」，當然是在設計能力、個人品牌建設、客戶維護、運營管理等方面都有比較硬核的水準，所以這部分設計師作品一般不會差。而工作室一般都是一個或者幾個知名設計師組成的團隊，在管理方面更「公司化」一些，這樣的工作產出也會比較穩定，水平較高。就可視化（包括類可視化）領域來講，個人比較認可和喜歡的工作室有以下幾個（歡迎大家評論里補充，或參與文末問卷調查），Ta 們的作品風格鮮明，找靈感也是不錯的參考

△ dennisschafer

△ huds+guis

以上對于「去哪兒搜」的分析，我相信可以給大家很好的啟發：我們設計師尋找好的作品并不一定要通過設計相關網站進行，你看大家都能看到的東西，即使有突破，那也是大家所熟悉的樣子，你只有從圈子里跳出去，看 80% 的人看不到的東西，你的靈感才有機會與眾不同，標新立異。

靈感庫建立的第三步：怎么搜？

前面兩部分，我們介紹了搜什么（關鍵詞的定義），去哪兒搜（合適的素材來源），接下來以 behance 為例跟大家聊聊怎么搜，介紹一些具體的方法。我們的目標是盡可能少的點擊搜索按鈕，且盡可能多的找到符合自己預期的有質量的作品。要做到這點，首先我改掉自己以往的不好的搜索習慣。

我知道很多小伙伴都是輸入一個關鍵詞，然后看結果頁，沒有滿意的就換一個關鍵詞繼續，這樣做很低效，容易漏掉結果頁中符合你預期的好作品，并且也容易造成關鍵詞的浪費，通過第一部分關鍵詞矩陣的介紹，大家都知道，關鍵詞是被定位推導而來的，若不停的換關鍵詞，很快就會出現關鍵詞用完了但是依然沒有找到好靈感的囧局，所以榨干每一個關鍵詞是搜索的重要手段，具體怎么做到這一點，我個人有以下思路給大家參考：

1. 直搜關鍵詞

快速瀏覽、標記自己感興趣的項目，稍后再做整理

通過這個結果頁面我們看到，搜索結果包含「所有結果、項目、人物、情緒板」四個選項，默認顯示所有結果，但這個意義不大，重點在項目跟情緒板。

項目

切換到項目標簽，項目標簽下展示的都是完整的項目作品，這是可以快速瀏覽，看到感興趣的內容就把它標記到新的頁面，等所有瀏覽查看結束后再細看每個項目，并對項目做進一步的分類和整理。

項目標簽下提供的篩選項很實用，分類依據推薦「好評最多+本月」的組合，以月為單位既可選到大家都比較認可的新作品也避免了因數據波動造成部分作品質量差的情況。「已策展」類似站酷或 UI 中國的首頁推薦，是被官方編輯認可和推薦的作品，一般都會有很高的質量，但時間上可能會比較久遠。

在篩選器里面，有另一個比較實用的功能叫做「按色彩篩選」，如果客戶或者業務方對主色調有要求，就可以通過色彩的篩選，找到更符合我們業務需求的相關作品借鑒，或者設計師自己對某類顏色的搭配總是調整不好，也可以通過篩選，看看其它同行是如何處理這類色彩的，這也是一個有針對性訓練和學習的方法。

情緒版

情緒版就是花瓣里的畫板，它是其 Ta 設計師采集的同類主題的作品合集，用法也跟花瓣一模一樣，唯一的不同是花瓣可以采集站外的內容到畫板，而behance 只能采集站內的內容，其余兩者完全一致。

情緒版默認是按時間的先后順序排列，所以可以通過篩選項，將排列順序調整為「關注人數最多」，正常來講，關注人數越多的情緒版收集的作品質量也越高。

2. 利用作品標簽聚合同一主題作品，并集中瀏覽

我們知道，像站酷、UI 中國等平臺，用戶上傳作品時，都需要給作品添加一些標簽，這些標簽的作用就是幫助網站做人工的作品分類，我們點擊某一標簽就能看到使用了同一標簽的所有作品，可以說標簽是比搜索關鍵詞的內容檢索手段。每一個作品下，都顯示了作者上傳作品時填寫的標簽，通過點擊這些標簽我們將搜索結果引入到了另一個更純粹有效的內容領域。

更有趣的是，標簽同樣支持項目、情緒版這兩個層面的進一步分類，同時也支持之前介紹過得分類篩選功能。也就是說，在最開始搜索時找準一個關鍵詞，之后通過情緒板、作品標簽等方式就能關聯起來海量的內容。

3. 按圖索驥：Ta推薦的作品

通過前兩步，我們已找到了一些比較不錯的作品，而優秀作品的背后當然是優秀的設計師或團隊。所以點進作者的主頁看，一般都會有驚喜的。除了能看到作者自己的作品外，我想說的是另一個標簽「好評」，好評這個標簽其實體現了作者的審美和職業方向，如果作者本人在領域內已經足夠專業，那么能被 Ta 欣賞和點贊的作品大概率也不會差，所以好評這個按鈕，是借助行業大咖的手幫我們做了一次作品的篩選和收集，點這個標簽進去大多數時候是不會讓你失望的，一般都驚喜滿滿。

4. Ta關注的設計師：順藤摸瓜，串起一個行業的大咖

在今天，每個設計師離自己領域里最頂尖的大咖，只隔著 3.75 個人，通過點擊作者的「正在關注」，你可以看到設計師本人還關注了行業里的哪些設計師，通過這樣的操作 3 到 4 次，你會發現總有那么幾個人，會在這個略顯復雜的網絡中被不同的大咖同時關注，那么 Ta 就是這個行業里比較頂尖的人才了。

在「正在關注」下面會顯示作者所在團隊，因為好多項目其實一個人是很難完成的，大都是好幾個設計師協作的結果，所以如果你找到的這個設計師作品足夠牛逼，那說明他的團隊也是很不錯的，順便關注一波就好。

當你習慣這樣摸瓜，一段時間后這個行業里幾乎的大咖就都在你的關注列表里了，做到這一步后你就會有一個新的收獲，這點我們后面再聊。

搜索結果的整理與優化

利用前面的搜索方式，我們已經找到了不少較為滿意的作品，接下來我們需要再對這些作品做簡單的篩選整理，把真正符合我們需求的作品整理出來。

我習慣用網站自帶的收藏功能及部分精品資源本地收藏的方式來整理自己的靈感庫。網站的情緒板我把它看作是一個各個終端通用的網盤。behance 提供了兩個收藏作品的功能：點贊與保存到情緒版。站酷跟 ui 中國也有同樣的功能。

點贊的作品，會統一收集到個人主頁「點贊」標簽下，所有作品按時間排列，比較亂，所以推薦把喜歡的作品收集到情緒板。建立情緒板可以按類別將作品整理到不同畫板，由于情緒板是可以分享和被搜索的，所以使用情緒板整理靈感，不僅方便了自己，也益于同行。目前來看，情緒板在 behance 這個產品中已經跟花瓣中的畫板非常像了，不僅可以采集一個完整的作品到情緒板，也可以采集作品中某個單獨的圖片或視頻到情緒板，這樣的靈活性跟花瓣完全一致，且 behance 將情緒板被放到了用戶非常容易觸達的位置，所以在大家的共同努力下，各類情緒板會越來越豐富，這個功能也會更有價值。

資源的自我更新與迭代

1. 資源的自我更新

經常玩抖音的小伙伴都知道，抖音會根據你的點贊、瀏覽等行為，為你推薦符合個人口味的視頻，而這樣的推薦功能在 behance 也有，behance 會根據你點贊收藏的作品、你關注的人，給你推薦相應作品，并且推薦作品是直接顯示在首頁的，每次打開 behance，你都會在網站最直觀的位置看到 behance 為你推薦的內容，這里的內容大體上分為兩類，一類是你關注的設計師的作品更新，另一部分基于已經關注的作者推薦相似的作品給你，就我個人使用體驗來講，推薦還是相當準確的。

behance 的推薦功能是資源自我更新的一個重要手段，你關注的同一領域作者越多，收藏的作品越多，它的推薦就越準確，這樣就節省了一些資源搜索的時間成本。要想獲得好的推薦結果，我建議你的 behance 上只關注一個領域的作者和作品，以我自己為例，我只關注數據可視化方向的作者和作品，雖然我也喜歡攝影、插畫等，但我主業是數據可視化，所以為了提高首頁推薦作品質量，其它兩類我會去 500px 等更垂直的網站瀏覽，而不會在 behance 上關注。當然，網站只是個工具，你也可以有自己的用法，于我而言，我關注的核心是效率。

2. 資源的迭代

如果把我們收藏的內容比作是云盤里的資源，那么資源并不是越多越好，無論哪種類型的內容，當內容很多的時候找起來都會比較麻煩的。我們需要堅持做一些工作來不斷減少資源的數量提高資源的質量，少而精是最好的狀態，如此我們就不需要花很多時間去找某個內容，而已有的內容又都能很好的滿足需求。要做到這點，我們需要給資源做迭代，所謂迭代就是去掉舊的過時的內容，添加新的更好的。每隔一段時間，回來翻一翻自己之前收藏的作品，會發現有些作品自己已經看不上了，因為在做靈感收集的過程中，我們的審美會自然有所提高，當輸入的作品樣本越來越多，我們對作品評價的維度也會更多，之前那些覺得好的作品，現在看來也就會有缺陷和不滿，這是一個很正向的結果，成長就是一個不斷剔除的過程。刪掉那些自己覺得不滿意的作品，添加更符合自己當前審美的作品到各個情緒版。

迭代還意味著我們需要對那些情緒版的標簽做維護，對那些命名跟內容不大匹配的情緒板，要及時更新更恰當的命名。同時，也要對情緒板內容的類別做維護，比如動畫、視頻類素材最好不要跟圖片類素材放一起，因為列表的封面圖并不能體現作品詳情里是否包含視頻等內容，所以作品很多時找起來就比較麻煩，按內容的不同類型把內容分別收納進不同的情緒版可以給我們后續的應用節省不少時間。

總結

1. behance在國內訪問受限，為何要以它為例做靈感收集的方法介紹？

首先，Behance 國內訪問不暢，并不影響它是世界范圍最優秀的設計師聚集平臺的事實。對于數據可視化而言，并不是一個新興的領域，在國外早已有之，并且相對成熟，而國內相關作品、經驗尚少，所以從獲取知識的角度來看，behance 上你能獲取到的數據可視化相關作品或內容，不管是數量還是質量上，都要比國內的好。

其次，正如文章剛開始我說的那樣，文中介紹的方法對國內的大部分設計網站同樣適用，尤其是關鍵詞的定義、標簽的使用、收藏及情緒板（畫板）的使用技巧。綜上，我當然是要介紹「更好」的靈感獲取網站給大家，而不是揪著大家熟悉的聊。

2. 我自己也收集研究了不少優秀作品，為何做的時候還是不知道如何下手？

毋庸置疑，優秀的作品建立在良好的審美基礎之上，好的作品看多了審美自然會有提升，但審美有了為啥還是做不出符合自己期望的作品來。這塊有兩個問題，一個是刻意練習的度沒到，另一個是不會分析別人好的作品?？桃饩毩暵犆志椭朗鞘裁匆馑?，而作品分析就是我們要知道一個作品之所以讓人眼前一亮，它「亮」在什么地方，就是要具體到細節，我們越是能夠細致的指出那些讓你覺得好的點，就越能模仿和借鑒，之后再輔以大量的刻意練習，才會有效果明顯的提升。

文章來源：優設

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

文章來源：優設

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