手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

首頁

Material Design數(shù)據(jù)可視化指南

資深UI設(shè)計者

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

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


全文章節(jié)目錄:

原則

類型

選擇圖表

樣式

行為

儀表板




數(shù)據(jù)可視化

數(shù)據(jù)可視化就是用圖形描繪信息。




原則

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


數(shù)據(jù)可視化可以表達(dá)不同類型和規(guī)模的數(shù)據(jù),包括從幾個數(shù)據(jù)點(diǎn)到有大量變量的數(shù)據(jù)集。

Image title





類型

數(shù)據(jù)可視化可以以不同的形式表達(dá)。圖表是表達(dá)數(shù)據(jù)的常用方式,因?yàn)樗鼈兡軌蛘故竞蛯Ρ榷喾N不同的數(shù)據(jù)。


圖表類型的選擇主要取決于兩點(diǎn):要表現(xiàn)的數(shù)據(jù)和表現(xiàn)該數(shù)據(jù)的用意。該指南描述各種類型的圖表及其用例。


圖表類型


1. 隨時間變化

隨時間變化的圖表顯示一段時間的數(shù)據(jù),例如多個類別之間的趨勢或比較。


常見用例包括:

股價表現(xiàn)、衛(wèi)生統(tǒng)計、年表

Image title



2. 類別比較

類別比較圖表是多個不同類別數(shù)據(jù)之間的比較。

常見用例包括:

不同國家的收入、熱門場地時間、團(tuán)隊(duì)分配

Image title



3. 排名

排名圖表顯示項(xiàng)目在有序列表中的位置。

常見用例包括:

選舉結(jié)果、性能統(tǒng)計

Image title



4. 占比

占比類圖表顯示了局部與整體的關(guān)系。

常見用例包括:

產(chǎn)品類別的綜合收入、預(yù)算

Image title



5. 關(guān)聯(lián)

關(guān)聯(lián)類圖表顯示兩個或以上變量之間的關(guān)系。

常見用例包括:

收入和預(yù)期壽命

Image title



6. 分布

分布類圖表顯示每個值在數(shù)據(jù)集中出現(xiàn)的頻率。

常見用例包括:

人口分布、收入分布

Image title



7. 流程

流程類圖表顯示了多個狀態(tài)之間的數(shù)據(jù)移動。

常見用例包括:

資金轉(zhuǎn)移、投票計數(shù)和選舉結(jié)果

Image title



8. 關(guān)系

關(guān)系圖表顯示多個項(xiàng)目之間的關(guān)系。

常見用例包括:

社交網(wǎng)絡(luò)、詞圖

Image title






選擇圖表

面對多種類型的圖表,以下指南提供了關(guān)于如何選擇合適的圖表見解。



顯示隨時間的變化

可以使用時間序列圖表來表示隨時間的變化,就是按時間順序表示數(shù)據(jù)點(diǎn)的圖表。表示隨時間變化的圖表包括:折線圖,柱狀圖(條形圖)和面積圖。


Image title

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



柱狀圖(條形圖)和餅圖

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

· 柱狀圖(條形圖)使用共同的基線,通過條形長度表示數(shù)量

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


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

Image title



面積圖

面積圖有多種類型,包括堆疊面積圖和層疊面積圖:

· 堆疊面積圖顯示多個時間序列(在同一時間段內(nèi))堆疊在一起

· 層疊面積圖顯示多個時間序列(在同一時間段內(nèi))重疊在一起


層疊面積圖建議不要使用超過兩個時間序列,因?yàn)檫@樣做會使數(shù)據(jù)模糊不清。取而代之,應(yīng)當(dāng)使用堆疊面積圖來比較一個時間間隔內(nèi)的多個值(橫軸表示時間)。

Image title





樣式

數(shù)據(jù)可視化使用自定義樣式和形狀,使數(shù)據(jù)更容易理解,以適合用戶需求。


圖表可以從以下方面進(jìn)行優(yōu)化:

· 圖形元素

· 文字排版

· 圖標(biāo)

· 軸和標(biāo)簽

· 圖例和注釋



不同類型數(shù)據(jù)的樣式設(shè)計

可視化編碼是將數(shù)據(jù)轉(zhuǎn)換為可視形式的過程。獨(dú)特的圖形屬性可應(yīng)用于定量數(shù)據(jù)(如溫度,價格或速度)和定性數(shù)據(jù)(如類別,風(fēng)味或表達(dá)式)。


這些圖形屬性包括:

· 形狀

· 顏色

· 大小

· 面積

· 體積

· 長度

· 角度

· 位置

· 方向

· 密度



不同屬性的表現(xiàn)

多個視覺處理方法可以綜合應(yīng)用于數(shù)據(jù)點(diǎn)的多個方面。例如,在條形圖中,條形顏色可以表示類別,而條形長度可以表示值(如人口數(shù)量)。

Image title

形狀可用于表示定性數(shù)據(jù)。在此圖表中,每個類別由特定形狀(圓形,正方形和三角形)表示,這樣可以在一張圖表中輕松實(shí)現(xiàn)特定范圍的比較,同時也可以進(jìn)行類別之間比較。



1. 形狀

圖表可以運(yùn)用形狀,以多種方式展示數(shù)據(jù)。形狀的設(shè)計可以是有趣的、曲線的,或者和高保真的等等。


形狀程度

圖表可以展示不同精度程度的數(shù)據(jù)。用于細(xì)致研究的數(shù)據(jù)應(yīng)該用適合交互的形狀(在觸摸大小和功能可見性方面)展示。而旨在表達(dá)一般概念或趨勢的數(shù)據(jù)可以使用細(xì)節(jié)較少的形狀。

Image title



2. 顏色

顏色可用于以四種主要方式區(qū)分圖表數(shù)據(jù):

· 區(qū)分類別

· 表示數(shù)量

· 突出特定數(shù)據(jù)

· 表示含義


顏色區(qū)分類別

Image title

例:圓環(huán)圖中,顏色用于表示類別。



顏色表示數(shù)量

Image title

例:地圖中,顏色用于表示數(shù)據(jù)值。



顏色突出數(shù)據(jù)

Image title

例:散點(diǎn)圖中,顏色用于突出特定數(shù)據(jù)。



重點(diǎn)區(qū)域

在不濫用的情況下,顏色可以突出焦點(diǎn)區(qū)域。不建議大量使用高亮顏色,因?yàn)樗鼈儠稚⒂脩糇⒁饬?,影響用戶的專注力?

Image title



顏色表示含義

Image title



無障礙

為了適應(yīng)看不到顏色差異的用戶,您可以使用其他方法來強(qiáng)調(diào)數(shù)據(jù),例如高對比度著色,形狀或紋理。

將文本標(biāo)簽應(yīng)用于數(shù)據(jù)還有助于說明其含義,同時消除對圖例的需求。



3. 線

圖表中的線可以表示數(shù)據(jù)的特性,例如層次結(jié)構(gòu),突出和比較。線條可以有多種不同的樣式,例如點(diǎn)劃線或不同的不透明度。


線可以應(yīng)用于特定元素,包括:

· 注釋

· 預(yù)測元素

· 比較工具

· 可靠區(qū)間

· 異常


Image title



4. 文字排版

文本可用于不同的圖表元素,包括:

· 圖表標(biāo)題

· 數(shù)據(jù)標(biāo)簽

· 軸標(biāo)簽

· 圖例



圖表標(biāo)題通常是具有最高層次結(jié)構(gòu)的文本,軸標(biāo)簽和圖例具有級別的層次結(jié)構(gòu)。

Image title



字重

標(biāo)題和字重的變化可以表達(dá)內(nèi)容在層次結(jié)構(gòu)中的重要程度。但是應(yīng)該保持克制,使用有限的字體樣式。

Image title



5. 圖標(biāo)

圖標(biāo)可以表示圖表中不同類型的數(shù)據(jù),并提高圖表的整體可用性。


圖標(biāo)可用于:

· 分類數(shù)據(jù):用于區(qū)分組或類別

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

· 狀態(tài):例如錯誤,空狀態(tài),完成狀態(tài)和危險


在圖表中使用圖標(biāo)時,建議使用通用可識別符號,尤其是在表示操作或狀態(tài)時,例如:保存,下載,完成,錯誤和危險。

Image title




6. 坐標(biāo)軸

一個或多個坐標(biāo)軸顯示數(shù)據(jù)的比例和范圍。例如,折線圖沿水平和垂直坐標(biāo)軸顯示一系列值。

Image title



柱狀圖(條形圖)基線

柱狀圖(條形圖)應(yīng)從為零的基線(y軸上的起始值)開始。從不為零的基線開始可能導(dǎo)致數(shù)據(jù)被錯誤地理解。

Image title



坐標(biāo)軸標(biāo)簽

標(biāo)簽的設(shè)計應(yīng)體現(xiàn)圖表中最重要的數(shù)據(jù)。應(yīng)根據(jù)需要使用標(biāo)簽,并在UI中保持一致性。他們的出現(xiàn)不應(yīng)該妨礙查看圖表。

Image title



文字方向

為便于閱讀,文本標(biāo)簽應(yīng)水平放置在圖表上。


文字標(biāo)簽不應(yīng)該:

· 旋轉(zhuǎn)

· 垂直堆疊

Image title



7. 圖例和注釋

圖例和注釋描述了圖表的信息。注釋應(yīng)突出顯示數(shù)據(jù)點(diǎn),數(shù)據(jù)異常值和任何值得注意的內(nèi)容。

Image title

1. 注釋

2. 圖例


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



標(biāo)簽和圖例

在簡單圖表中,可以使用直接標(biāo)簽。在密集的圖表(或更大的圖表組的一部分)中,可以用圖例。

Image title



8. 小顯示屏

可穿戴設(shè)備(或其他小屏幕)上顯示的圖表應(yīng)該是移動端或PC端圖表的簡化版本。

Image title





行為

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


以下推薦的交互模式,樣式和效果(如觸覺反饋)可以提高用戶對圖表數(shù)據(jù)的理解:

漸進(jìn)式披露

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

直接操作

允許用戶直接對UI元素進(jìn)行操作,最大限度地減少屏幕上所需的操作數(shù)量,包括:縮放和平移,分頁和數(shù)據(jù)控件。

改變視角

使一種設(shè)計可以適用于不同的用戶和數(shù)據(jù)類型,例如數(shù)據(jù)控件和動效。


1. 漸進(jìn)式披露

使用漸進(jìn)式披露顯示圖表詳細(xì)信息,允許用戶根據(jù)需要查看特定數(shù)據(jù)點(diǎn)。

Image title


2. 縮放和平移

縮放和平移是常用的圖表交互,會影響用戶對圖表數(shù)據(jù)深入的研究和探索。


縮放

縮放改變界面顯示的遠(yuǎn)近。設(shè)備類型決定了如何執(zhí)行縮放。

· 在PC端,通過單擊、拖動或滾動進(jìn)行縮放

· 在移動端,通過捏合進(jìn)行縮放


當(dāng)縮放不是主要操作時,可以通過單擊和拖動(在PC端)或雙擊(在移動端)來實(shí)現(xiàn)。


平移

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

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

· 在移動端,平移通常通過手勢實(shí)現(xiàn),例如單指滑動。

Image title



3. 分頁

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

Image title

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



4. 數(shù)據(jù)控制

可以使用切換控件,選項(xiàng)卡和下拉菜單篩選或改變數(shù)據(jù)。

用戶調(diào)節(jié)控件時,這些控件還可以顯示指標(biāo)。

Image title

切換控件,選項(xiàng)卡和下拉菜單可以更改或篩選數(shù)據(jù)。



5. 動效

動效可以強(qiáng)化數(shù)據(jù)之間的聯(lián)系,提升交互體驗(yàn)。應(yīng)該有目的地使用運(yùn)動(不是裝飾性地),表達(dá)不同狀態(tài)和空間之間的聯(lián)系。

運(yùn)動應(yīng)該是合理,平穩(wěn),反應(yīng)靈敏,不會妨礙用戶的使用。

Image title在此示例中,圖表數(shù)據(jù)從按天顯示動態(tài)切換到按周顯示。轉(zhuǎn)換期間不會顯示所選日期范圍之外的數(shù)據(jù),從而降低了復(fù)雜性。



Image title動畫能夠體現(xiàn)兩個不同圖表的相關(guān)性。



6. 空狀態(tài)

圖表數(shù)據(jù)為空的情況下,可以提供相關(guān)數(shù)據(jù)的預(yù)期。

在合適的情況下,可以展示角色動畫創(chuàng)造愉悅和鼓勵。



Image title有特色的動畫提升了空狀態(tài)的效果。







儀表板

在稱為儀表板的UI界面中,數(shù)據(jù)可視化通過一系列圖表實(shí)現(xiàn)。多個獨(dú)立的圖表有時可以比一個復(fù)雜的圖表更好地表達(dá)故事。



儀表板設(shè)計

儀表板的目的應(yīng)在其布局,樣式和交互模式中體現(xiàn)。無論是用來制作演示文稿還是深入研究數(shù)據(jù),它的設(shè)計應(yīng)該適合它的使用方式。


儀表板應(yīng)該:

· 突出最重要信息(使用布局)

· 根據(jù)信息層級確定信息的焦點(diǎn)(使用顏色,位置,大小和視覺權(quán)重)


Image title

應(yīng)根據(jù)對數(shù)據(jù)的需求確定信息的優(yōu)先級并進(jìn)行安排。在此示例中設(shè)計儀表板,考慮了以下用戶問題:

1. 需要注意的問題
2. 發(fā)生問題的時間

3.發(fā)生問題的位置

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



1. 分析類儀表板

分析儀類表板讓用戶能夠研究多組數(shù)據(jù)并發(fā)現(xiàn)趨勢。通常,這些儀表板包含能夠深入洞察數(shù)據(jù)的復(fù)雜圖表。


用例包括:

· 隨時間變化的突出趨勢

· 回答“為什么”和“假設(shè)”的問題

· 預(yù)測

· 創(chuàng)建有深度的報告


分析類儀表板示例:

· 跟蹤廣告活動的收效

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

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

· 跟蹤隨時間變化氣候數(shù)據(jù)


Image title

分析類儀表板顯示氣候數(shù)據(jù)



2. 操作類儀表板

操作類儀表板旨在回答一組預(yù)設(shè)的問題。它們通常用于完成與監(jiān)控相關(guān)的任務(wù)。

在大多數(shù)情況下,這些類型的儀表板具有一系列關(guān)于當(dāng)前信息的簡單圖表。


用例包括:

· 跟蹤目標(biāo)的當(dāng)前進(jìn)度

· 實(shí)時跟蹤系統(tǒng)性能


操作類儀表板示例:

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

· 監(jiān)控在云端應(yīng)用程序的運(yùn)行狀況

· 顯示股市情況

· 監(jiān)控賽車上的遙測數(shù)據(jù)


Image title

操作類儀表板顯示設(shè)備存儲指標(biāo)



3. 演示類儀表板

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

這些儀表板通常包括一些小圖表或數(shù)據(jù)卡片,用動態(tài)標(biāo)題描述每個圖表的趨勢和見解。


用例包括:

· 提供關(guān)鍵績效指標(biāo)的總覽

· 創(chuàng)建高級執(zhí)行情況的概要


演示類儀表板示例:

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

· 提供產(chǎn)品銷售和市場份額數(shù)據(jù)的概要


Image title演示類儀表板顯示網(wǎng)站使用數(shù)據(jù)

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

數(shù)據(jù)可視化大屏設(shè)計經(jīng)驗(yàn)分享

資深UI設(shè)計者

 

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

前言 



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


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

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


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



 案例解析 


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


undefined


問題

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

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

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

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


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


undefined


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


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


問題一:

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


undefined


注解:

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


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



問題二:

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



undefined


注解:

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


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


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



undefined


注解:

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




undefined


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



問題三:

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


undefined


注解:

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



undefined


注解:

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

undefined


注解:

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



undefined


注解:

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



undefined


注解:

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



問題四:

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


undefined


注解:

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


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


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



undefined


注解:

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


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


總結(jié):

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


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

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


第二步:確定使用圖表。

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

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


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

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




 最后 


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


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

想做大數(shù)據(jù)可視化?來看高手的實(shí)戰(zhàn)案例!

資深UI設(shè)計者

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

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

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

一、項(xiàng)目背景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本地端引擎

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

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

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

色彩基調(diào)

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

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

呈現(xiàn)方式

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

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

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

△ 北京場景

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

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

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

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

△ 柱狀圖

△ 散點(diǎn)圖

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

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

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

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

組件庫搭建

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

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

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

橫線:各個監(jiān)管維度

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

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

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

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

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

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

結(jié)語

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

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

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

可視化數(shù)據(jù)大屏應(yīng)該如何設(shè)計

資深UI設(shè)計者

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

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

可視化數(shù)據(jù)大屏應(yīng)該如何設(shè)計可視化數(shù)據(jù)大屏應(yīng)該如何設(shè)計



可視化數(shù)據(jù)大屏應(yīng)該如何設(shè)計

文章來源:UI中國

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

大屏ui設(shè)計系列之十三:阿里巴巴三萬億大屏項(xiàng)目

藍(lán)藍(lán)設(shè)計的小編

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


大屏ui設(shè)計系列之三:某地區(qū)地鐵1號線大屏幕控制中心應(yīng)用案例

藍(lán)藍(lán)設(shè)計的小編

2.jpg

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

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

大屏ui設(shè)計系列之二:大屏數(shù)據(jù)可視化設(shè)計項(xiàng)目心得

藍(lán)藍(lán)設(shè)計的小編

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

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

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

大屏UI設(shè)計系列之一:與太極合作,設(shè)計中國國家應(yīng)急廣播大屏預(yù)警系統(tǒng) 界面設(shè)計

藍(lán)藍(lán)設(shè)計的小編

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

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


日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com

存檔