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

項(xiàng)目背景

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

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

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

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

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

可視化大屏分析

痛點(diǎn)：

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

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

建設(shè)智慧城市管理平臺(tái)，通過集成建設(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)計(jì)好它的相關(guān)數(shù)據(jù)，避免其他的干擾。

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

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

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

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

顏色+字體

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

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

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

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

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

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

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

頁面布局

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

地圖的設(shè)計(jì)

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

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

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

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

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

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

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

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

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

設(shè)計(jì)-事件處理

事件處理

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

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

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

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

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

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

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

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

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

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