數(shù)據(jù)可視化大屏案例分析

寫在前面

隨著大數(shù)據(jù)產(chǎn)業(yè)的蓬勃發(fā)展趾牧,很多企業(yè)都開始應(yīng)用數(shù)據(jù)可視化检盼。所以數(shù)據(jù)可視化設(shè)計(jì),如今絕對是熱門的設(shè)計(jì)之一翘单。很多UI設(shè)計(jì)師突然會接到公司數(shù)據(jù)可視化設(shè)計(jì)的需求吨枉,如果不了解數(shù)據(jù)可視化設(shè)計(jì),肯定是一頭霧水哄芜,不知從何入手貌亭。我嘗試簡要的把我近期做過的案例進(jìn)行記錄分享,不足之處歡迎大家隨時(shí)交流认臊。

正文

首先放的是項(xiàng)目改版前的頁面:

需求介紹

某某應(yīng)用云圃庭,分為五大云平臺模塊:云端綜合調(diào)度、數(shù)據(jù)查詢通道美尸、數(shù)據(jù)應(yīng)用處理冤议、數(shù)據(jù)查詢通道、管理理運(yùn)行維護(hù)师坎。每個(gè)大模塊下?面有若干個(gè)子系統(tǒng)恕酸。

可視化?屏首頁需要展示的內(nèi)容包括:

1.?全局?jǐn)?shù)據(jù)

云平臺的數(shù)據(jù)總量,以及?4?個(gè)重要關(guān)注數(shù)據(jù)項(xiàng)胯陋,2?個(gè)次要關(guān)注數(shù)據(jù)項(xiàng)蕊温。?

2.?云平臺的五?大模塊

???1.?云端綜合調(diào)度

???2.?數(shù)據(jù)查詢通道

???3.數(shù)據(jù)應(yīng)用處理理

???4.?數(shù)據(jù)存儲管理

???5.?管理理運(yùn)行維護(hù)(只有兩個(gè)tab切換鏈接)?

3.?搜索功能

?搜索類型分為?6?個(gè)類型,默認(rèn)選中“綜合”類型進(jìn)行搜索;?

4.?重點(diǎn)關(guān)注數(shù)據(jù)信息按指標(biāo)分多維度展示

原始圖上的維度包括:指標(biāo)遏乔、地圖义矛、地域排名、部?門盟萨、類別;?

5.?云導(dǎo)航

需求分析

分析大屏可視化的一些共性:

屏幕大:大屏一般都是多屏拼接凉翻,整體屏幕面積大。

觀距遠(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ù)肤无,避免其他的干擾

結(jié)合大屏的一些共性特點(diǎn)針對看到的線上舊版本設(shè)計(jì)侧巨,分析存在的問題舅锄。

1.布局混亂鞭达,導(dǎo)致視覺不平衡司忱,看不出頁面層次。

2.藍(lán)色為主色調(diào)?黃色點(diǎn)綴顏色顯得比較單一沒有規(guī)則畴蹭。

3.圖表比較單一坦仍,不能有效傳達(dá)數(shù)據(jù)信息。

結(jié)合這些問題進(jìn)行視覺改版叨襟,首先優(yōu)化頁面布局繁扎,通過分析對頁面重新布局,如下圖:

采用柵格化對稱布局?讓整體視覺左右平衡糊闽。

視覺設(shè)計(jì):

了解需求梳玫,整合數(shù)據(jù),分析出主要數(shù)據(jù)次要數(shù)據(jù)右犹、總量數(shù)據(jù)細(xì)分?jǐn)?shù)據(jù)提澎、各數(shù)據(jù)的維度等等,通過了解這些可以先設(shè)計(jì)出一個(gè)布局模版念链,也可以在紙上畫出來盼忌,布局可以在設(shè)計(jì)過程中隨時(shí)調(diào)整。

設(shè)計(jì)的風(fēng)格掂墓,一提到數(shù)據(jù)可視化大家往往能想到科技谦纱、數(shù)據(jù)、藍(lán)色等一些普遍關(guān)鍵詞君编。跟客戶溝通之后跨嘉,了解到客戶需求是:想做一個(gè)科技感強(qiáng)比較炫酷的視覺效果?,這也貼合以上這些關(guān)鍵詞吃嘿,針對這些關(guān)鍵詞的提煉祠乃,另外結(jié)合大屏的使用場景,背景色一般會選用暗色調(diào)唠椭,數(shù)據(jù)變化一般會選擇高亮色調(diào)跳纳,讓視覺更好地聚焦數(shù)據(jù)的變化,也會較省電贪嫂。

主題風(fēng)格構(gòu)思階段寺庄;?

原圖:中國地圖主圖模塊缺乏層次感,如圖

改版后:地圖主色調(diào)改為科技藍(lán),在原有地圖上增加外發(fā)光和多層陰影疊加斗塘,使其增加地圖的立體感赢织,地圖上增加科技線條上升的效果代表每個(gè)城市數(shù)據(jù)變化的提升,地圖背景采用比較弱化的轉(zhuǎn)動線條圓形馍盟,襯托地圖主體于置,時(shí)的畫面更加豐富。

數(shù)據(jù)圖表拆分:

在選定數(shù)據(jù)圖表之前贞岭,首先要確定圖表之間的關(guān)系八毯,可以從以下四個(gè)維度進(jìn)行思考分析:

1.聯(lián)系:數(shù)據(jù)之間的相關(guān)性;

2.分布:指標(biāo)里的數(shù)據(jù)主要集中在什么范圍瞄桨、表現(xiàn)出怎樣的規(guī)律话速;

3.比較:數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面芯侥;

4.構(gòu)成:指標(biāo)里的數(shù)據(jù)都由哪幾部分組成泊交、每部分占比如何;

?

當(dāng)確定好分析維度后柱查,事實(shí)上我們所能選用的圖表類型也就基本確定了廓俭。接下來我們只需要從少數(shù)幾個(gè)圖表里篩選出最能體現(xiàn)我們設(shè)計(jì)意圖的那個(gè)就好了。


傳統(tǒng)的圖表比如echarts上圖表在視覺上展示可能不是很美觀好看唉工,可根據(jù)選擇的圖表在其基礎(chǔ)之上進(jìn)行美化設(shè)計(jì)研乒,總之選定圖表最重要的兩個(gè)點(diǎn)就是:易理解、可實(shí)現(xiàn)酵紫。


易理解:就是要考慮最終用戶告嘲,可視化結(jié)果應(yīng)該是一看就懂,不需要思考和過度理解奖地,因而選定圖表時(shí)要理性橄唬,避免為了視覺上的效果而選擇一些對用戶不太友好的圖形及元素。


可實(shí)現(xiàn):主要是跟開發(fā)前期溝通好實(shí)現(xiàn)方式参歹,一般都采用開源組件庫的居多比如echarts組件庫仰楚,我們設(shè)計(jì)的圖形圖表,要開發(fā)能夠?qū)崿F(xiàn)犬庇。實(shí)際工作中僧界,一些可視化效果開發(fā)用代碼寫很容易實(shí)現(xiàn),效果也不錯(cuò)臭挽,但這些效果設(shè)計(jì)師用Ps/Ai/Ae這些工具模擬時(shí)會發(fā)現(xiàn)比較困難捂襟;同樣的,某些效果設(shè)計(jì)師用設(shè)計(jì)工具可以輕易實(shí)現(xiàn)欢峰,但開發(fā)要用代碼落地卻非常困難葬荷,所以大屏設(shè)計(jì)中跟開發(fā)常溝通非常重要涨共,我們需要明確哪些地方設(shè)計(jì)師可以盡情發(fā)揮,哪些地方需要謹(jǐn)慎設(shè)計(jì)宠漩!一個(gè)項(xiàng)目總有周期與預(yù)算限制举反,不會無限期的修改迭代,所以設(shè)計(jì)師在這里需要抓住重點(diǎn)扒吁,有取舍火鼻,不鉆牛角尖、死磕不放雕崩。

城市排名影響視覺數(shù)據(jù)多了魁索,會對地圖展示造成影響,跟客戶溝通需優(yōu)化城市排名個(gè)數(shù)晨逝,只展示前五個(gè)蛾默,打破傳統(tǒng)條形圖的展示形式采用電池晶格的展示形式懦铺。

從頁面的整體看一下捉貌,已經(jīng)有三處用到了條形圖,柱狀圖冬念,如果這里還是條形圖趁窃,那么頁面看起來會很單調(diào),圖表也沒有表現(xiàn)出多樣性急前,所以現(xiàn)在設(shè)計(jì)要體現(xiàn)圖表的多樣性也能夠有排名的直觀呈現(xiàn)醒陆。以下圖表采用科技圓盤的形式,運(yùn)用科技線條的上升狀態(tài)代表排名的先后順序裆针,所有圖表都采用數(shù)據(jù)降序來展示排名更加直觀刨摩。

最后附上:最終視覺和動態(tài)效果圖



某某應(yīng)用云案例

總結(jié)

大屏設(shè)計(jì)的基本步驟:

1、需求分析

2世吨、優(yōu)化布局

3澡刹、定義設(shè)計(jì)關(guān)鍵詞

4、確立主圖展示風(fēng)格

以上是我對數(shù)據(jù)可視化大屏的案例總結(jié)耘婚,巴拉巴拉這么多罢浇,終于寫完了,希望能幫助到你沐祷。除此之外還有很多地方?jīng)]有涉及到嚷闭,包括具體設(shè)計(jì)的操作方式、選取圖形元素的具體方法赖临,以及在各種大屏中所需要的相對應(yīng)的組件等胞锰,在龐大的可視化大屏設(shè)計(jì)系統(tǒng)中,還有很多值得學(xué)習(xí)參考和優(yōu)化的知識兢榨,歡迎各位大佬指正嗅榕,大家一起努力挠进。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市誊册,隨后出現(xiàn)的幾起案子领突,更是在濱河造成了極大的恐慌,老刑警劉巖案怯,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件君旦,死亡現(xiàn)場離奇詭異,居然都是意外死亡嘲碱,警方通過查閱死者的電腦和手機(jī)金砍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來麦锯,“玉大人恕稠,你說我怎么就攤上這事》鲂溃” “怎么了鹅巍?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長料祠。 經(jīng)常有香客問我骆捧,道長,這世上最難降的妖魔是什么髓绽? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任敛苇,我火速辦了婚禮,結(jié)果婚禮上顺呕,老公的妹妹穿的比我還像新娘枫攀。我一直安慰自己,他們只是感情好株茶,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布来涨。 她就那樣靜靜地躺著,像睡著了一般忌卤。 火紅的嫁衣襯著肌膚如雪扫夜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天驰徊,我揣著相機(jī)與錄音笤闯,去河邊找鬼。 笑死棍厂,一個(gè)胖子當(dāng)著我的面吹牛颗味,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播牺弹,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼浦马,長吁一口氣:“原來是場噩夢啊……” “哼时呀!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起晶默,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤谨娜,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后磺陡,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體趴梢,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年币他,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了邮绿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片誊酌。...
    茶點(diǎn)故事閱讀 38,654評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖稻轨,靈堂內(nèi)的尸體忽然破棺而出吗垮,到底是詐尸還是另有隱情偷崩,我是刑警寧澤贴妻,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布缴阎,位于F島的核電站,受9級特大地震影響倦微,放射性物質(zhì)發(fā)生泄漏妻味。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一欣福、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧焦履,春花似錦拓劝、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至屑宠,卻和暖如春厢洞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背典奉。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工躺翻, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人卫玖。 一個(gè)月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓公你,卻偏偏與公主長得像,于是被迫代替她去往敵國和親假瞬。 傳聞我的和親對象是個(gè)殘疾皇子陕靠,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評論 2 349

推薦閱讀更多精彩內(nèi)容