如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

前言 

說起數(shù)據(jù)可視化設(shè)計(jì)，如今絕對(duì)是熱門的設(shè)計(jì)之一，而真正懂?dāng)?shù)據(jù)可視化設(shè)計(jì)的設(shè)計(jì)師卻不多，隨著大數(shù)據(jù)產(chǎn)業(yè)的蓬勃發(fā)展，很多企業(yè)都開始應(yīng)用數(shù)據(jù)可視化。很多UI設(shè)計(jì)師突然會(huì)接到公司數(shù)據(jù)可視化設(shè)計(jì)的需求，如果不了解數(shù)據(jù)可視化的設(shè)計(jì)，那么肯定是一頭霧水，不知從何入手。

什么是數(shù)據(jù)可視化？

數(shù)據(jù)可視化主要旨在借助于圖形化手段，清晰有效地傳達(dá)與溝通信息。簡(jiǎn)而言之就是把枯燥無味的數(shù)據(jù)，通過圖形化設(shè)計(jì)表現(xiàn)，達(dá)到一種更加精準(zhǔn)和的數(shù)據(jù)分析和表達(dá)。

下面要跟大家分享的是，我經(jīng)手的一個(gè)真實(shí)數(shù)據(jù)可視化大屏項(xiàng)目改版，接下來會(huì)分享給大家一套全面的數(shù)據(jù)可視化技法，包括科學(xué)的運(yùn)用圖表、運(yùn)用色彩、把控?cái)?shù)據(jù)層級(jí)以及視覺層級(jí)，達(dá)到美學(xué)形式與功能需要齊頭并進(jìn)。

 案例解析 

首先看下線上舊版的設(shè)計(jì)，分析存在的問題。

問題

1、左側(cè)大面積文字導(dǎo)致視覺不平衡，且密集

2、整體用色暗淡，圖表用色沒有規(guī)則

3、圖表運(yùn)用不恰當(dāng)，不能有效傳達(dá)數(shù)據(jù)信息

4、缺標(biāo)題，數(shù)據(jù)信息優(yōu)先級(jí)排列不恰當(dāng)

結(jié)合這些問題作出了改版，

因?yàn)槭歉陌嫠阅軌蚩吹骄€上真實(shí)的數(shù)據(jù)信息，這樣舊版的數(shù)據(jù)呈現(xiàn)就能給到重要的設(shè)計(jì)參考價(jià)值，例如能夠知道TOP10熱門關(guān)鍵字大概是幾個(gè)字，在設(shè)計(jì)圖表時(shí)就會(huì)依據(jù)字?jǐn)?shù)的長(zhǎng)短來參考設(shè)計(jì)，也可以知道是否有極端數(shù)據(jù)，從而運(yùn)用更適合的圖表呈現(xiàn)等等。

下面依次對(duì)照新改的版本，解決舊版出現(xiàn)的問題。

問題一：

1、左側(cè)大面積文字導(dǎo)致視覺不平衡，且密集

注解：

由于左半部分有大篇幅的文字，視覺上會(huì)顯得密集，容易視覺疲勞，右半部分大面積的色塊圖表使得整個(gè)界面視覺上不平衡。

解決方案就是在把文字用排行榜圖形分開，放到文字中間部分，這樣就豐富了只有文字的單調(diào)設(shè)計(jì)，整體視覺較為平衡和諧，并且這樣還能夠突出強(qiáng)調(diào)重要數(shù)據(jù)信息。

問題二：

2、整體用色暗淡，圖表用色沒有規(guī)則

注解：

提取舊版的顏色，色彩很暗淡，對(duì)于深色背景來說，這樣的配色方式并不會(huì)有好的視覺表現(xiàn)。

暗色背景通常用高飽和高明度的顏色，對(duì)比暗色背景更能聚焦視覺，突出數(shù)據(jù)可視化的表現(xiàn)，亮麗的色彩能夠讓數(shù)據(jù)可視化設(shè)計(jì)的更加絢麗。

數(shù)據(jù)可視化大屏設(shè)計(jì)慎用大面積的漸變色，小面積可嘗試，一般大屏都是拼接屏，品牌不一樣色差會(huì)表現(xiàn)不一，所以初稿出來后可以先去大屏上看下效果。

注解：

圖表用色沒有規(guī)則，上圖三個(gè)圖表都表現(xiàn) “正面” “中立” “負(fù)面” 三個(gè)維度數(shù)據(jù)信息，但在用色上沒有一個(gè)統(tǒng)一的規(guī)則，例如三個(gè)圖表中黃色分別代表不同的維度信息，這樣就無法建立觀者的認(rèn)知。

“負(fù)面”有警示的作用，運(yùn)用紅色調(diào)較為合理，“中立”色彩情緒上適合黃色調(diào)，黃色會(huì)給人中性的感受，例如馬路上的等待的黃燈，例如一片樹葉從綠色到黃色再到枯萎灰色，給人一種過程中的中立情緒感受等，“正面”就是給人積極的一面，所以綠色或者主題色藍(lán)色都是很恰當(dāng)?shù)摹?

問題三：

3、圖表運(yùn)用不恰當(dāng)，不能有效傳達(dá)數(shù)據(jù)信息

注解：

同一個(gè)界面中左側(cè)文字TOP10屬性類似的“核心媒體TOP10”展示形式最好能有共性。舊版運(yùn)用了柱狀圖并不恰當(dāng)，尤其是標(biāo)題字?jǐn)?shù)過多時(shí)候并不推薦使用柱狀圖文字傾斜的展示方式，改版后加上相同的排行榜圖標(biāo)，數(shù)據(jù)直接展示出來，TOP10的效果會(huì)更好。

注解：

數(shù)據(jù)需要對(duì)比分析，顯然這個(gè)玫瑰圖表并不能很好的說明對(duì)比，每個(gè)維度大小排列沒有規(guī)律，實(shí)際數(shù)據(jù)分布不均勻，導(dǎo)致沒有對(duì)比的效果，改版后突出總的數(shù)據(jù)，用條形圖從大到小依次排列各維度數(shù)據(jù)，數(shù)據(jù)上有對(duì)比，視覺上更有主次。

注解：

首先是舊版用色不恰當(dāng)，最嚴(yán)重的問題是圖表上沒有任何數(shù)據(jù)，因?yàn)檎故拘偷拇笃?，很少有交互行為，這樣的設(shè)計(jì)是不可取的，不能讓觀者去猜百分比數(shù)據(jù)，數(shù)據(jù)可視化就要用圖表數(shù)據(jù)的形式展示出來最直接的信息，除非是展示趨勢(shì)并不是準(zhǔn)確的數(shù)據(jù)。

注解：

舊版用的條形堆積圖，其實(shí)更適合百分比數(shù)據(jù)的對(duì)比呈現(xiàn)，一個(gè)維度下面有若干個(gè)子項(xiàng)，比較適合分組柱狀圖（新改版為分組柱狀圖）或者分組條形圖更為恰當(dāng)。

注解：

舊版色彩搭配不和諧，趨勢(shì)圖需要突出趨勢(shì)線，而不是體現(xiàn)數(shù)據(jù)的面積，紅框注釋不夠直接尤其在顏色過多時(shí)，更不好分辨各個(gè)顏色指向的維度，新版的設(shè)計(jì)則能夠準(zhǔn)確指出各個(gè)維度的趨勢(shì)線。

問題四：

4、缺標(biāo)題，數(shù)據(jù)信息優(yōu)先級(jí)排列不恰當(dāng)

注解：

新聞的標(biāo)題跟轉(zhuǎn)發(fā)數(shù)才是觀者關(guān)注的，而來源和時(shí)間就是次要關(guān)注信息，所以視覺上要為觀者分出層級(jí)，這樣不僅能夠使觀者看著更舒適，視覺上也很有層次，不雜亂。

舊版標(biāo)題、來源、時(shí)間、轉(zhuǎn)發(fā)數(shù)、都是相對(duì)于內(nèi)容居中的狀態(tài)，這種排版是不符合表格排版規(guī)則的，簡(jiǎn)單的做法就是文字左對(duì)齊，數(shù)字右對(duì)齊，數(shù)字右對(duì)齊能夠更快速識(shí)別數(shù)據(jù)量大小，跟其他數(shù)據(jù)的對(duì)比，文字左對(duì)齊則是根據(jù)人從左到右的閱讀習(xí)慣。

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

注解：

設(shè)計(jì)數(shù)據(jù)可視化大屏?xí)r一定要考慮用戶瀏覽數(shù)據(jù)的優(yōu)先級(jí)的構(gòu)架，例如要遵循先總后分，先具體后抽象的邏輯，上圖舊版把趨勢(shì)放到了頁(yè)面的第一視覺位置，就有點(diǎn)宣兵奪主了，根據(jù)先具體后抽象，改版后具體數(shù)據(jù)放到第一視覺位置，趨勢(shì)信息排后。

舊版大屏沒有標(biāo)題，我是誰？我在干什么？我要去哪里？所以標(biāo)題務(wù)必得有。

總結(jié)：

說了這么多設(shè)計(jì)要點(diǎn)，新手可能還是不知道設(shè)計(jì)的切入點(diǎn)在哪里，所以總結(jié)一個(gè)數(shù)據(jù)可視化設(shè)計(jì)分三步走法。

第一步：了解數(shù)據(jù)要表達(dá)的本質(zhì)。

拿到一組數(shù)據(jù)，先分析主次，這組數(shù)據(jù)要表達(dá)什么？是展示數(shù)據(jù)，還是對(duì)比數(shù)據(jù)，或是實(shí)時(shí)監(jiān)控?cái)?shù)據(jù)，從而確定展示的優(yōu)先級(jí)。

第二步：確定使用圖表。

通過了解數(shù)據(jù)要表達(dá)的本質(zhì)后，選擇適合他的圖表，這時(shí)候就需要打開幾個(gè)開源的圖表網(wǎng)站找圖表，記住你的圖表用的是網(wǎng)站的哪一個(gè)，開發(fā)如果找不到就丟給他網(wǎng)址。

網(wǎng)站有：Fusion Design、螞蟻數(shù)據(jù)可視化-AntV、ECharts Examples、Highcharts

第三步：整體效果調(diào)整

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

 最后 

數(shù)據(jù)可視化設(shè)計(jì)核心就是，通過美學(xué)設(shè)計(jì)形式把數(shù)據(jù)精準(zhǔn)和的分析和表達(dá)。

數(shù)據(jù)可視化設(shè)計(jì)是目前較為熱門的設(shè)計(jì)工種，通過本文分享的項(xiàng)目迭代案例，希望能夠讓你對(duì)數(shù)據(jù)可視化有些許了解。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

在大數(shù)據(jù)時(shí)代，數(shù)字化轉(zhuǎn)型已經(jīng)成為行業(yè)迫切的需求。2016-2018年金融、醫(yī)療、政府、安全等行業(yè)在大數(shù)據(jù)方向上的投入持續(xù)增加，大數(shù)據(jù)可視化的需求呈現(xiàn)爆發(fā)式增長(zhǎng)，相關(guān)產(chǎn)品也紛紛推出：阿里 DataV 的「雙十一的天貓可視化大屏」、360的數(shù)博會(huì)企業(yè)安全大屏、帆軟的 BI系統(tǒng)。面對(duì)井噴式的市場(chǎng)需求和部門業(yè)務(wù)在 To G、To B 的拓展需求，需要快速儲(chǔ)備大數(shù)據(jù)可視化的能力，作為一個(gè) To C 的設(shè)計(jì)團(tuán)隊(duì)面臨的挑戰(zhàn)和責(zé)任都是巨大的。

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

一、項(xiàng)目背景

在過去一年中，潘洛斯（Penrose）團(tuán)隊(duì)參與了「靈鯤」態(tài)勢(shì)感知系統(tǒng)、「麒麟」系統(tǒng)、「鷹眼」反電話詐騙系統(tǒng)等14個(gè)大數(shù)據(jù)可視化產(chǎn)品的設(shè)計(jì)。隨著產(chǎn)品不斷的探索和迭代，積累了一些行之有效的大數(shù)據(jù)可視化設(shè)計(jì)的心得和方法?；凇胳`鯤」這個(gè)案例，分享一下我們?cè)诖髷?shù)據(jù)可視化方向的設(shè)計(jì)和思考，希望能夠給對(duì)大數(shù)據(jù)可視化感興趣的同學(xué)提供一些思路。

「靈鯤」是 MIG 安全云部門與潘洛斯（Penrose）團(tuán)隊(duì)合作的，基于潘洛斯大數(shù)據(jù)可視化引擎衍生出的一款金融風(fēng)險(xiǎn)監(jiān)控可視化產(chǎn)品。應(yīng)北京與深圳金融辦的需求，搭建靈鯤金融風(fēng)險(xiǎn)態(tài)勢(shì)感知系統(tǒng)，實(shí)現(xiàn)事中風(fēng)險(xiǎn)控制，減少網(wǎng)絡(luò)欺詐損失。

著手設(shè)計(jì)之前，我們需要了解：大數(shù)據(jù)市場(chǎng)規(guī)模和各行業(yè)投入有多大， 政企客戶的大數(shù)據(jù)可視化產(chǎn)品的痛點(diǎn)是什么？對(duì)比深耕多年的競(jìng)品，我們?cè)O(shè)計(jì)的突破口在哪？——挖掘我們的機(jī)遇和發(fā)力點(diǎn)。

二、我們的客戶，目標(biāo)群體

數(shù)據(jù)顯示，2017年中國(guó)大數(shù)據(jù)產(chǎn)業(yè)規(guī)模為4700億元。隨著一系列政策的出臺(tái)，大數(shù)據(jù)國(guó)家戰(zhàn)略正在加速落地，大數(shù)據(jù)行業(yè)將持續(xù)增長(zhǎng)，預(yù)計(jì)2018年中國(guó)大數(shù)據(jù)產(chǎn)業(yè)規(guī)模將達(dá)到6200億元，增幅達(dá)32%。需求層面，預(yù)計(jì)2020年大數(shù)據(jù)應(yīng)用市場(chǎng)需求中，僅政府需求就占比35%，另外包括醫(yī)療、交通、金融等多個(gè)行業(yè)在大數(shù)據(jù)和信息化建設(shè)投入也將持續(xù)增加。

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

基于以上的市場(chǎng)潛在規(guī)模的考察和典型客戶研究，在進(jìn)行「靈鯤」產(chǎn)品能力規(guī)劃時(shí)，我們主要考慮以下三類使用場(chǎng)景： 政府機(jī)構(gòu)決策、展會(huì)展臺(tái)及參觀視察。

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

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

在金融局等政府機(jī)構(gòu)，經(jīng)常會(huì)有上級(jí)領(lǐng)導(dǎo)視察參觀的接待活動(dòng)。這些來訪的貴賓往往希望了解關(guān)于機(jī)構(gòu)更全面和具體的信息，包括但不限于工作流程、工作成績(jī)等，所以我們認(rèn)為這個(gè)場(chǎng)景綜合了以上兩種場(chǎng)景的主要特點(diǎn)。這里的用戶包括來訪人員，演示人員以及工作人員，展示的內(nèi)容也往往不局限于金融風(fēng)險(xiǎn)大數(shù)據(jù)的可視化，還會(huì)包括工作方式和流程本身。

三、行業(yè)競(jìng)品對(duì)比，反觀自身發(fā)力點(diǎn)

通過對(duì)阿里 DataV，AntV、360、帆軟的大數(shù)據(jù)可視化產(chǎn)品的體驗(yàn)，我們從產(chǎn)品呈現(xiàn)、產(chǎn)品體驗(yàn)、產(chǎn)品技術(shù)、部署方式和商業(yè)模式幾個(gè)維度的橫向?qū)Ρ?。阿里的技術(shù)對(duì)可視化效果的局限性很大，優(yōu)點(diǎn)是產(chǎn)品實(shí)現(xiàn)模板化、系統(tǒng)實(shí)時(shí)可交互，用戶可以快速搭建自己的可視化產(chǎn)品；360產(chǎn)品可視化呈現(xiàn)3D化，數(shù)據(jù)呈現(xiàn)效果和數(shù)據(jù)感知度較2D更優(yōu)，但是系統(tǒng)非實(shí)時(shí)可交互，而且搭建周期長(zhǎng)，成本較高；帆軟的可視化是傳統(tǒng)報(bào)表型，可視化效果呈現(xiàn)缺乏競(jìng)爭(zhēng)力。

經(jīng)過對(duì)比，我們不難發(fā)現(xiàn)3D化數(shù)據(jù)呈現(xiàn)能力和數(shù)據(jù)感知度是最高的。但是局限于目前的技術(shù)，項(xiàng)目成本高、研發(fā)周期長(zhǎng)、難以滿足業(yè)務(wù)的發(fā)展速度。

四、我們的機(jī)遇和挑戰(zhàn)

基于市場(chǎng)需求和競(jìng)品分析，我們從以下三個(gè)方面分別分析了產(chǎn)品的機(jī)會(huì)和突破點(diǎn)：

• 可視化：數(shù)據(jù)和場(chǎng)景的呈現(xiàn)3D化，滿足更多維度的數(shù)據(jù)呈現(xiàn)，支持云+本地實(shí)時(shí)大數(shù)據(jù)呈現(xiàn)能力；
• 產(chǎn)品化：場(chǎng)景、組件、數(shù)據(jù)、圖表全部實(shí)現(xiàn)可云端動(dòng)態(tài)更新和配置的模塊化，降低維護(hù)成本、提高服用率、縮短項(xiàng)目周期，無縫打包接入業(yè)務(wù)數(shù)據(jù)，提供豐富可自定義的可擴(kuò)展接口；
• 大數(shù)據(jù)+AI：基于公司多領(lǐng)域多業(yè)務(wù)線的大數(shù)據(jù)融合以及 AI 能力提供豐富的基于時(shí)間、空間、數(shù)據(jù)的預(yù)測(cè)預(yù)警、統(tǒng)計(jì)表達(dá)能力。

1. 產(chǎn)品架構(gòu)規(guī)劃

基于對(duì)靈鯤態(tài)勢(shì)感知系統(tǒng)的使用場(chǎng)景、用戶需求以及機(jī)會(huì)點(diǎn)的考慮，我們規(guī)劃了未來產(chǎn)品的整體架構(gòu)，包括大屏端、云端、客戶管理端、小屏端以及虛屏端。大屏端基于本地端引擎進(jìn)行大數(shù)據(jù)可視化呈現(xiàn)。客戶管理端包括報(bào)表和配置管理等工具，幫助用戶進(jìn)行分析數(shù)據(jù)和策略管理。小屏端主要考慮操作控制和移動(dòng)辦公等移動(dòng)使用場(chǎng)景，提供大屏控制、移動(dòng)審批、監(jiān)管、公眾號(hào)等功能。以上三個(gè)端由云端拉取和更新數(shù)據(jù)。虛屏則提供差異化的大數(shù)據(jù)可視化體驗(yàn)，如增強(qiáng)現(xiàn)實(shí)等新奇有趣的玩法。由于大屏端在我們的規(guī)劃里是態(tài)勢(shì)感知系統(tǒng)的核心，且落地到合作方的模塊，以下分享的內(nèi)容將主要圍繞大屏的內(nèi)容設(shè)計(jì)展開，未來如果產(chǎn)品規(guī)劃中的其他模塊陸續(xù)上線，我們?cè)僮龇窒怼?

2. 大屏內(nèi)容設(shè)計(jì)

本地端引擎

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

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

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

色彩基調(diào)

為了打造靈鯤產(chǎn)品的可視化，在競(jìng)品中脫穎而出，我們從產(chǎn)品功能、用戶、愿景三個(gè)維度發(fā)散，提煉出設(shè)計(jì)指南的關(guān)鍵詞：智能、直觀、未來，塑造獨(dú)特的大數(shù)據(jù)可視化風(fēng)格體系。

靈鯤金融態(tài)勢(shì)感知系統(tǒng)內(nèi)容架構(gòu)分為數(shù)據(jù)維度和場(chǎng)景維度，數(shù)據(jù)是核心，場(chǎng)景是大數(shù)據(jù)呈現(xiàn)的承載體；場(chǎng)景使用具有金屬質(zhì)感的深青灰，符合理性的、冷靜的、智能化產(chǎn)品的個(gè)性；數(shù)據(jù)色彩使用透明、發(fā)光、具有未來感的高亮色，和場(chǎng)景形成強(qiáng)對(duì)比，使數(shù)據(jù)更為突顯、更具吸引力；為了強(qiáng)化客戶對(duì)于風(fēng)險(xiǎn)的感知，通過顏色區(qū)分?jǐn)?shù)據(jù)的風(fēng)險(xiǎn)等級(jí)，更直觀的傳達(dá)數(shù)據(jù)的含義。如：高風(fēng)險(xiǎn)的使用紅色，紅色讓人聯(lián)想到危險(xiǎn)、警報(bào)。

呈現(xiàn)方式

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

從大數(shù)據(jù)可視化的內(nèi)容維度上看，梳理的3D架構(gòu)，主要包括：數(shù)據(jù)維度>基礎(chǔ)建設(shè)>交通運(yùn)輸>行政分區(qū)>自然條件。

數(shù)據(jù)維度層是最核心的部分，位于場(chǎng)景上方最突出的位置，能夠更清晰的展示風(fēng)險(xiǎn)數(shù)據(jù)的分布、量級(jí)；行政區(qū)域和交通層是城市場(chǎng)景最基礎(chǔ)的數(shù)據(jù)維度，方便用戶進(jìn)行區(qū)域的數(shù)據(jù)對(duì)比和分析；基礎(chǔ)建設(shè)層包括城市的建筑、標(biāo)志性建筑、照明、橋梁、等，還原城市獨(dú)特風(fēng)貌；通過突出城市的標(biāo)志性建筑，強(qiáng)化城市、區(qū)域的識(shí)別性，輔助數(shù)據(jù)傳達(dá)；自然條件層包括地形、河流、植被、展示真實(shí)的環(huán)境特征，用戶更有代入感。

△ 北京場(chǎng)景

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

△ 場(chǎng)景整體風(fēng)格圖

數(shù)據(jù)表現(xiàn)

靈鯤的3D數(shù)據(jù)樣式有柱狀圖和散點(diǎn)圖。如何把司空見慣的數(shù)據(jù)樣式，設(shè)計(jì)出產(chǎn)品的個(gè)性，是我們重點(diǎn)要解決的問題。為了體現(xiàn)大數(shù)據(jù)的力量感，使用科幻電影中的聚合能量、發(fā)光的能量石作為柱狀圖的主圖形；同時(shí)把數(shù)據(jù)采集、融合、分析的過程具象為動(dòng)態(tài)粒子網(wǎng)絡(luò)，作為輔助圖形。數(shù)據(jù)圖形和結(jié)構(gòu)中都融合了品牌 DNA 的三角圖形，數(shù)據(jù)樣式更具有品牌的個(gè)性。

△ 柱狀圖

△ 散點(diǎn)圖

預(yù)見未來的功能創(chuàng)新

時(shí)間線：3D的維度基礎(chǔ)上，我們?cè)黾恿藭r(shí)間的維度，通過拖動(dòng)時(shí)間線查看不同時(shí)間點(diǎn)的數(shù)據(jù)的變化趨勢(shì)，由此對(duì)未來數(shù)據(jù)進(jìn)行預(yù)測(cè)。為了強(qiáng)化用戶對(duì)于時(shí)間感知，設(shè)計(jì)了白天和晚上兩種風(fēng)格，白天和夜晚隨著時(shí)間變化而變化。

天氣系統(tǒng)：天氣是未來數(shù)據(jù)分析極其重要的一個(gè)因子，它會(huì)直接影響交通（例如人流、物流、航空）、醫(yī)療(例如疾病傳播、醫(yī)院就診）等領(lǐng)域。所以我們?cè)O(shè)計(jì)了通用的天氣系統(tǒng)組件，呈現(xiàn)實(shí)時(shí)天氣情況，以輔助用戶進(jìn)行數(shù)據(jù)分析。

控制端：符合大屏使用場(chǎng)景和用戶操作習(xí)慣，同時(shí)小屏控制端支持更復(fù)雜更精準(zhǔn)的操作。

組件庫(kù)搭建

為了提升產(chǎn)品搭建的效率，降低了研發(fā)周期和成本，產(chǎn)品功能模塊實(shí)現(xiàn)了組件化，分為3D場(chǎng)景組件、3D數(shù)據(jù)組件、2D數(shù)據(jù)組件。任何一位設(shè)計(jì)師都可以根據(jù)產(chǎn)品需求，搭配組件模塊，快速搭建大數(shù)據(jù)可視化產(chǎn)品。

數(shù)據(jù)內(nèi)容的包裝

通過該產(chǎn)品，一方面能夠輔助金融局等政府機(jī)構(gòu)領(lǐng)導(dǎo)把控整體金融平臺(tái)風(fēng)險(xiǎn)、輔助做出平臺(tái)整改指導(dǎo)決策意見，展示金融工作成績(jī)；另一方面體現(xiàn)出騰訊大數(shù)據(jù)能力和公司的社會(huì)責(zé)任；最后，通過從更長(zhǎng)遠(yuǎn)的眼光去包裝產(chǎn)品，打造智慧監(jiān)管標(biāo)桿產(chǎn)品，從而推動(dòng)與政府客戶更深入廣泛的合作。具體內(nèi)容通過以下兩條線進(jìn)行組織：

橫線：各個(gè)監(jiān)管維度

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

縱線：監(jiān)管顆粒度

靈鯤系統(tǒng)中觀眾可以從全局?jǐn)?shù)據(jù)一直下鉆到個(gè)體數(shù)據(jù)，實(shí)現(xiàn)不同顆粒度的監(jiān)管目的。

具體來講，全國(guó)的安全風(fēng)險(xiǎn)最終是以加權(quán)平均后的指數(shù)形式體現(xiàn)出來；再到具體的省份和城市，內(nèi)容細(xì)化到具體風(fēng)險(xiǎn)事件的發(fā)生情況，如電信安全監(jiān)管維度，呈現(xiàn)電信詐騙使用的偽基站的位置，以及發(fā)送詐騙短信的數(shù)量等；最后細(xì)化到城市中的機(jī)構(gòu)和建筑，呈現(xiàn)具體機(jī)構(gòu)的運(yùn)行情況和具體高風(fēng)險(xiǎn)企業(yè)所在建筑進(jìn)行實(shí)時(shí)監(jiān)控。

3. 產(chǎn)品演示視頻

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

結(jié)語(yǔ)

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

文章來源：優(yōu)設(shè)

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

2018年如自己所愿，終于有機(jī)會(huì)可以嘗試下數(shù)據(jù)大屏的可視化設(shè)計(jì)，但是想象總歸是美好的，新手上崗第一次總是那么不太如意，陌生而又熟悉著。在做過幾次嘗試后，自己又私下里翻閱了一些關(guān)于數(shù)據(jù)大屏方面的設(shè)計(jì)文章，好的設(shè)計(jì)圖片。有很多不足，也有很多剛開始做的時(shí)候沒有注意到的點(diǎn)，這次整理作品，也順便把大概的設(shè)計(jì)流程整理了一下。給自己的一個(gè)復(fù)盤總結(jié)，也是一次設(shè)計(jì)分享。

文章來源：UI中國(guó)

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

2016年3月，阿里巴巴中國(guó)零售交易市場(chǎng)2016財(cái)年商品交易即時(shí)總額即將突破三萬億，這是阿里歷史性的一刻，也見證了消費(fèi)的力量， 為了記錄這一歷史時(shí)刻，三萬億大屏項(xiàng)目應(yīng)運(yùn)而生。這是阿里UED的一些文章。

交通類大屏幕界面設(shè)計(jì)應(yīng)用案例欣賞 

統(tǒng)計(jì)圖表類大數(shù)據(jù)可視化界面設(shè)計(jì)

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

（藍(lán)藍(lán)注：轉(zhuǎn)載這篇文章，是為了讓設(shè)計(jì)師和產(chǎn)品經(jīng)理們了解到客戶平時(shí)的業(yè)務(wù)和工作方法）

藍(lán)藍(lán)設(shè)計(jì)經(jīng)常會(huì)接到大屏設(shè)計(jì)的項(xiàng)目，比如中國(guó)移動(dòng)互聯(lián)網(wǎng)監(jiān)控大屏可視化設(shè)計(jì)及開發(fā)、太極集團(tuán)承接的中央臺(tái)應(yīng)急指揮中心大屏可視化設(shè)計(jì)、交大思源承接的北京地鐵軌道批揮中心大屏可視化設(shè)計(jì)、數(shù)碼視訊展廳大屏可視化設(shè)計(jì)，在積累了一定經(jīng)驗(yàn)的同時(shí)，也在不斷的學(xué)習(xí)和豐富關(guān)于大屏設(shè)計(jì)的特點(diǎn)及數(shù)據(jù)可視化的表達(dá)方式。

1.面積巨大——用戶站遠(yuǎn)才能看全內(nèi)容（所以字也不能設(shè)計(jì)很小）。
2.深色背景——緊張感強(qiáng)，讓視覺更好的聚焦，省電。
3.不可操作——大屏主要用來給來賓觀看的。來賓一般不會(huì)直接操作大屏。
4.空間局限——大屏不像網(wǎng)頁(yè)有滾動(dòng)條，它的長(zhǎng)寬都是固定的。
5.單獨(dú)主題——每塊大屏都有具體想給來賓表達(dá)某個(gè)主題

知道了這些，如果我們遇到一個(gè)具體的大屏項(xiàng)目，要怎么來設(shè)計(jì)呢？

今天上午參觀了太極上周剛搬的新家，5000多人的新辦公樓群，不知不覺聊到12:43，匆匆離去。聽到我們參與的項(xiàng)目要評(píng)國(guó)家科技進(jìn)步一等獎(jiǎng)，聽到設(shè)計(jì)界面得到多方全國(guó)范圍內(nèi)的認(rèn)可，聽到客戶贊比同行業(yè)設(shè)計(jì)公司做的好，聽到客戶由項(xiàng)目經(jīng)理升總監(jiān)，還是蠻開心的。作為外包方，我們是弱勢(shì)群體，有時(shí)候覺得很辛酸，這個(gè)客戶沒有用高人一等的優(yōu)越感和我們交流，而是用卓越的交流方式讓我們感受到這件事的價(jià)值和意義，被尊重，我們也回報(bào)以高優(yōu)先級(jí)，卓越的作品，不惜加班加點(diǎn)去工作。

這次，還有之前幾次和客戶、朋友的交流讓我非常受益，感受到不同的人做事，換位思考，打動(dòng)人心說話的方式，項(xiàng)目管理方式，視野的廣闊性和方法，教我許多。信息量太大，恨不得記下來。

藍(lán)藍(lán)設(shè)計(jì)經(jīng)常會(huì)接到大屏設(shè)計(jì)的項(xiàng)目，比如中國(guó)移動(dòng)互聯(lián)網(wǎng)監(jiān)控大屏可視化設(shè)計(jì)及開發(fā)、太極集團(tuán)承接的中央臺(tái)應(yīng)急指揮中心大屏可視化設(shè)計(jì)、交大思源承接的北京地鐵軌道批揮中心大屏可視化設(shè)計(jì)、數(shù)碼視訊展廳大屏可視化設(shè)計(jì)，在積累了一定經(jīng)驗(yàn)的同時(shí)，也在不斷的學(xué)習(xí)和豐富關(guān)于大屏設(shè)計(jì)的特點(diǎn)及數(shù)據(jù)可視化的表達(dá)方式。

數(shù)據(jù)可視化過濾了非常多的冗余信息，濃縮了最重要的信息，它的魅力就在于將枯燥的數(shù)據(jù)組織在一起，把最需要的那些編輯成一個(gè)故事。目前大數(shù)據(jù)那么流行，但是其實(shí)大家并不是需要那么多的數(shù)據(jù)，而是需要整合的數(shù)據(jù)，恰當(dāng)?shù)膶⒖蛻糇铌P(guān)注的數(shù)據(jù)挖掘展示出來才是最重要的。

一、要做好大屏的界面設(shè)計(jì)，首先需要了解大屏的硬件特點(diǎn)。

二、了解大屏的使用場(chǎng)景和用戶群體

三、了解大屏上專用的軟件

四、了解大屏通常顯示的內(nèi)容

五、大屏界面的設(shè)計(jì)語(yǔ)言