數(shù)據(jù)可視化不再是僅停留在把繁雜的數(shù)據(jù)圖形化出來，更多的是結(jié)合真實(shí)的場景加上交互等處理手段，更精準(zhǔn)的傳達(dá)數(shù)據(jù)信息。

項目背景

城市化進(jìn)程快速發(fā)展，帶來了人口管理、交通擁堵、環(huán)境保護(hù)、安全等諸多問題，通過運(yùn)用信息和通信技術(shù)手段感測、分析、整合城市運(yùn)行核心系統(tǒng)的各項關(guān)鍵信息，從而對包括交通、民生、環(huán)保、公共安全、城市服務(wù)等在內(nèi)的各種需求做出智能響應(yīng)，并給出相應(yīng)的結(jié)果與解決方案。連通各部門平臺數(shù)據(jù)，在指揮大廳統(tǒng)一監(jiān)控。特殊事件可以做到及時發(fā)現(xiàn)，及時分發(fā)處理。

先來一張效果圖，更多設(shè)計稿在后面。

智慧城市數(shù)據(jù)可視化

對于頁面設(shè)計最大的要求就是信息層級準(zhǔn)確、精準(zhǔn)易讀、高效操作?？紤]到大屏的使用場景和不同的觀看人群以及操作人員的長時間觀看等情況。色調(diào)上不能特別活躍，布局和展示上數(shù)據(jù)邏輯、層級關(guān)系要非常明確，易于操作，屏幕中顯示的數(shù)據(jù)不能過多，避免數(shù)據(jù)之間的影響。不同人群對數(shù)據(jù)又不同的需求，不同的數(shù)據(jù)又不能同時堆疊出來，滿足不同用戶對數(shù)據(jù)要求的同時，如何減少對用戶的干擾。也是本次大屏設(shè)計的一個難點(diǎn)。

結(jié)合上面實(shí)際情況，下面做進(jìn)一步分析。

可視化大屏分析

痛點(diǎn)：

“信息孤島”嚴(yán)重，各部門各平臺數(shù)據(jù)信息無法實(shí)現(xiàn)融合、信息共享。不能進(jìn)行相關(guān)系統(tǒng)的系統(tǒng)聯(lián)動，使之在日常工作效率難以提高。

大屏建設(shè)目標(biāo)

建設(shè)智慧城市管理平臺，通過集成建設(shè)，使得數(shù)據(jù)共享交換更加便捷，并可實(shí)現(xiàn)集中指揮調(diào)度、預(yù)案及輔助決策以及服務(wù)。

目標(biāo)用戶群

指揮大廳環(huán)境

室內(nèi)采用日常燈光，屏幕無各類光線光照直射情況。刺激光對屏幕影響較小，屏幕采用高清拼接屏。

大屏可視化的一些共性：

屏幕大：大屏一般都是多屏拼接，整體屏幕面積大。

觀距遠(yuǎn)：用戶需要站遠(yuǎn)處觀看屏幕，要保證數(shù)據(jù)文字清晰可見。

交互弱：通過電腦已經(jīng)無法滿足大屏交互需求，現(xiàn)在也有部分開始采用ipad、手機(jī)、激光筆等方式。

視覺強(qiáng)：背景色多采用重色，襯托凸顯數(shù)據(jù)，更好的為觀者傳達(dá)數(shù)據(jù)信息。

一屏一內(nèi)容：一屏內(nèi)容，說明一件主要事，統(tǒng)計好它的相關(guān)數(shù)據(jù)，避免其他的干擾。

設(shè)計目標(biāo)

1、符合實(shí)際場景的結(jié)構(gòu)布局，更快、更直觀、更高效，提升工作人員的效率。

2、采用真實(shí)的三維場景設(shè)計，使事件處理定位更精準(zhǔn)，引起觀看人員的體驗(yàn)共鳴。

3、數(shù)據(jù)歸類處理，減少信息干擾。

顏色+字體

整體色調(diào)色系的定義

整體色調(diào)我們選擇的是冷色系，純度、明度、飽和度并沒有選擇太高，一方面是為了觀者長時間使用避免視覺疲勞，同時也是為了讓整個畫面保持平穩(wěn)，有助于突發(fā)事件、數(shù)據(jù)統(tǒng)計更加明顯易讀，不至于整個屏幕的所有信息都往外跳，喧賓奪主搶過了主要數(shù)據(jù)的閱讀性。定義色系時有幾方面的考慮

1、根據(jù)用戶的使用場景(室內(nèi)正常光線)，整體顏色與整個室內(nèi)環(huán)境有一定反差，把視覺關(guān)注點(diǎn)引入大屏區(qū)域內(nèi)。

2、考慮到大屏面對的用戶年齡段跨度大，不同年齡段對顏色的接受程度不同，所以我們選擇了藍(lán)色、綠色。這兩類顏色也是適應(yīng)人群比較廣的色。

3、觀者長時間使用，突發(fā)事件緊盯屏幕，對應(yīng)我們采用暗色調(diào)，降低純度、明度、飽和度、減少對觀者眼睛的刺激。

4、采用日常認(rèn)知顏色，通過不同的顏色與現(xiàn)實(shí)環(huán)境中傳達(dá)的信息概念吻合，降低用戶學(xué)習(xí)成本

5、在一個暗色調(diào)省電。

頁面布局

采用左中右布局形式，左側(cè)為整體的統(tǒng)計信息，中部為城市的實(shí)時動態(tài)展示區(qū)域，這個區(qū)域也是項目的重點(diǎn)區(qū)域(視覺中心、交互中心)。右側(cè)為數(shù)據(jù)分析區(qū)域，數(shù)據(jù)的更細(xì)分信息。如下圖

地圖的設(shè)計

地圖圖像向三維發(fā)展是必然趨勢，從二維到2.5維再到三維。

三維場景更容易讓觀者有代入感，提升處理效率，縮短反應(yīng)時間

世界萬物皆有三維組成，通過平面或2.5維所表現(xiàn)出來的三維，因?yàn)椴皇钦鎸?shí)世界的再現(xiàn)，失去了立體信息，我們的大腦必需從二維圖像中重構(gòu)事物原本的形態(tài)，容易產(chǎn)生思維錯覺，限制了我們對圖像處理的效率。三維圖像屬于真實(shí)世界的再現(xiàn)，是我們看到的真實(shí)場景，更接近于真實(shí)的世界。所以也是我們這次采用三維的一個出發(fā)點(diǎn)。

設(shè)計-城市道路監(jiān)控

大致的需求是針對城市道路監(jiān)控有整體的監(jiān)控和預(yù)測、控制等能力。以充分保障交通安全，提升交通系統(tǒng)運(yùn)行效率和管理水平。分析用戶需求并結(jié)合當(dāng)?shù)亟煌顩r大概整理情況如下：

1、對城市的整個交通情況有一個更直觀全面的展示。我們做了三維地形，有助于快速定位路段。并通過該路段的地理環(huán)境，給出下一步解決方案。

2、效緩解交通擁堵，快速響應(yīng)突發(fā)狀況，精準(zhǔn)定位事件問題所在路段。

3、通過對城市全路段的統(tǒng)計展示，來輔助相關(guān)部門對交通優(yōu)化處理，及信息下發(fā)輔助車輛選擇最優(yōu)路線，緩解城市擁堵。

4、交通用色也是沿用大家對交通的認(rèn)知色，方便觀者快速認(rèn)知，減少學(xué)習(xí)成本。

設(shè)計-事件處理

事件處理

這個頁面主要是為用戶解決事件統(tǒng)計和突發(fā)性事件高效快速處理。

開始由于各部門“信息孤島”嚴(yán)重，各部門各平臺數(shù)據(jù)信息無法實(shí)現(xiàn)融合、信息共享，不能進(jìn)行相關(guān)系統(tǒng)的系統(tǒng)聯(lián)動，當(dāng)信息最后打通后我們做了以下設(shè)計處理：

1、我們把城市事件分類處理，并且把相關(guān)部門一一對應(yīng)。為了方便不同的事件智能分發(fā)處理。

2、相關(guān)單位優(yōu)選，會根據(jù)不同的事件優(yōu)選處理單位智能分發(fā)指派，極大的節(jié)省事件提升效率。

3、當(dāng)事件突發(fā)時，會定位的相應(yīng)位置，同時右側(cè)顯示事件周邊監(jiān)控等情況。

4、同時可以對相關(guān)人員、網(wǎng)格管理員進(jìn)行一對一，多對多通話視頻等。

設(shè)計上我們對突發(fā)事件做了強(qiáng)化處理，把事件需要配合的部門突出顯示，并把它們到現(xiàn)場的規(guī)劃路線進(jìn)行了處理，對事件的處理有一個全面的統(tǒng)攬展示，通過三維地圖與音視頻結(jié)合，使得指揮人員如同親臨現(xiàn)場，為每一步指揮組出更精準(zhǔn)的判斷。

處理突發(fā)事件時，三維地圖有更好的場景感，處理突發(fā)事件需要對事件周邊環(huán)境有更好的了解，才可以更高效精準(zhǔn)的去處理，我們采用三維地圖的設(shè)計，不單單是在視覺效果上的一次提升，更是一種高效的應(yīng)用。同時提升了用戶使用的興趣感又解決二維地圖所無法表達(dá)的信息。

這事整體的一個思路吧，很多東西沒有展開更細(xì)的分支去寫。不多說了上圖!

數(shù)據(jù)可視化設(shè)計圖