大數據可視化大屏設計經(jīng)驗（干貨教給你( ?▽?)）

大數據產(chǎn)業(yè)正在用一個(gè)超乎我們想象的大數大屏速度蓬勃發(fā)展，大數據時(shí)代的據可經(jīng)驗教來(lái)臨，越來(lái)越多的視化設計公司開(kāi)始意識到數據資源的管理和運用，大數據可視化大屏展示被更多的干貨企業(yè)青睞，身ˉ\_(ツ)_/ˉ為UI設計師的大數大屏我們，也要緊跟時(shí)代的?據可經(jīng)驗教步伐學(xué)習這方面的設計。

今天要跟大家分享我一年多設計大數ヽ(′ー｀)ノ據可視化大屏的視化設計經(jīng)驗和觀(guān)點(diǎn)，下面從UI設計、干貨交互設計、大數大屏動(dòng)效設計(ji)三個(gè)方面來(lái)分享。據可經(jīng)驗教

設計大屏一樣要謹記要以展示數據為核心，??干貨在任何炫酷屌炸天表現都要建立在不影響數據的大數大屏有(′?ω?`)效展示上！

下圖是據可經(jīng)驗教天貓可視化大屏設計，圖(tu)中屌炸天的??視化設計3D地球圍繞粒子效果，這篇文章將教你怎么實(shí)現，而且是數據可視化的呈現，不是動(dòng)效或者視頻！

天貓雙十一可視化大屏

1. 拼接大屏

大屏幾乎都是拼接屏，UI設計時(shí)不用考慮屏幕縫隙影響內容的呈現，內(nei)容不會(huì )丟失，但有可能影響視覺(jué)的表現，例如一個(gè)很大的人物圖像被縫隙正中“劈成”兩半，或者“劈中”了眼睛，看起來(lái)很不舒服

所以設計時(shí)可以ヽ(′ー｀)ノ建立縫隙位置的參考線(xiàn)避免類(lèi)似情況發(fā)生。（現在企業(yè)常用的有無(wú)縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏，縫隙越小越貴）

2. 設計尺寸

拼接的每塊小屏一般是16:9的高清屏，設計尺寸可以把上下高度設定為1080px，長(cháng)度按照拼接屏的數量比例得出長(cháng)度的設計尺寸。

例如3乘5的一塊大屏幕，高度3塊屏設為1080，每塊高就是360，360除9乘16等640，640就是一塊屏幕的長(cháng)度，640乘5塊屏＝3200最后得出設計稿尺寸就是：高1080px乘寬3200p(′ω｀)x（在這里感謝我的數學(xué)老師）

拼接屏設計尺寸圖解

3. 視覺(jué)設計

設計ヾ(＾-＾)ノ的風(fēng)格，背景色一般用深色調，深色調(′ω｀)緊張感強，讓視覺(jué)更好的聚焦，大屏暗色調看上去更柔和舒服不刺眼，也會(huì )較省電。

大屏設計跟網(wǎng)頁(yè)不一樣，頁(yè)面不能有滾動(dòng)條，大屏的長(cháng)寬都是(╬?益?)固定的。

字號跟網(wǎng)頁(yè)設計一樣不小于12號字，可以用于圖表的標注，數據信息建議14??號字以上，大屏觀(guān)者遠距離才能看全內容，所以字號可以稍大一點(diǎn)。字體不一定只用一種，可以用到一些科技感強的字體，這里要注意，記得把字體給開(kāi)發(fā)一份。??

設計完成先去大屏上看(kan)一下效果，大屏的品質(zhì)不一樣色調也會(huì )有很大的差別，??要根據自家的大屏呈現效果做調整。

下面分享一個(gè)開(kāi)源的j??query插件庫網(wǎng)站，里面有很多很棒的動(dòng)態(tài)效果！

http://w??ww.jq22.com/

插件庫其中的一個(gè)效果

大屏設計??會(huì )給設計師很大的想象設計空間，盡情發(fā)揮你的能力吧！

二、交互設計

我把大數據可視化大屏分為兩種，一種“純展示型”另一種“展示＋功能型”，( ?° ?? ?°)具體怎么區分：

展示＋功能型，例如實(shí)時(shí)監控數據、采集數據、數據對比功能、云計算數據、分析與預警等等。

功能型大數據可視化大屏結構層（信息架構）

也可以設計隱藏式的交互方式，例如鼠標左移動(dòng)、上移動(dòng)、出來(lái)控制面板（Mac電腦就有這樣的交互方式），有??控制臺是觸摸屏也可以結合手勢??來(lái)設計交互方式。

為了讓用戶(hù)感知到一直停留在主頁(yè)面上，交互上跳轉頁(yè)面能用“關(guān)閉”按鈕就不用“返回(╯‵□′)╯”按鈕！

大數據可視化大屏設計少不了動(dòng)效，動(dòng)效是可視化重要的組成部分，動(dòng)效的增加能讓大屏看上去是活的，增加觀(guān)感體驗。但過(guò)分的動(dòng)效極其容易喧賓奪主，讓觀(guān)看者的眼球不知道往哪里聚焦，反而弱化了數據的展示。

什么是過(guò)度的動(dòng)效設計？這個(gè)度又該怎么把握？

看下圖動(dòng)效??設計過(guò)度的一個(gè)案例，當你試著(zhù)去看圖表的內容ヽ(′ー｀)ノ，你的眼球一次一次??的被閃動(dòng)的邊框抓走，這就是過(guò)度的動(dòng)效設計！

（圖片來(lái)源網(wǎng)絡(luò )）

把握動(dòng)效設計這個(gè)度其實(shí)并不難，只要看的舒服不影響(′?_?`)數據清晰展示就可以，有數??據展示的頁(yè)面最好動(dòng)的地方(fang)不易過(guò)多(duo)。如(ru)果(guo)要多，幾個(gè)動(dòng)畫(huà)就得有節奏的變化(′?｀)，例??如一個(gè)動(dòng)ヾ(′ω｀)?畫(huà)表現的視覺(jué)強，另一個(gè)就表現稍弱化，有強有弱、(???)有主有次節奏才會(huì )舒服，同時(shí)動(dòng)效能結合數據的變化而變化最好，這樣就不容易看數據內容被動(dòng)畫(huà)抓走眼球。

1. 動(dòng)效怎么(me)實(shí)現？

我習慣用AE的插件Bodymovin生成j??son文件實(shí)現，具體怎么操作之前寫(xiě)過(guò)，這里就不多講了。

json文件

Bodymovin這個(gè)工具在A(yíng)E中有些預設效果和透視功能是不支持的，所以再教大家另一種方法，就是把動(dòng)畫(huà)渲染成視(?????)頻，把格式轉換為ogg或者webm網(wǎng)頁(yè)視頻格式，網(wǎng)頁(yè)格式視頻加??載是非?？飑d(′?｀)?的，之后把下面的文件(jian)給開(kāi)發(fā)(fa)就可以了。

html5網(wǎng)頁(yè)視頻格式(shi)

2. 3D動(dòng)效怎么實(shí)現？

3D動(dòng)畫(huà)

先說(shuō)下用到的軟件C4D+AE+PS

步驟1：

找個(gè)模型也可以用C4D自帶的模型，還可以自己建模，有了模型在C4D中把模型變成晶格狀，做個(gè)旋轉360度動(dòng)畫(huà)，渲染出png序列幀。

步驟2：

把ps設計好的視覺(jué)稿和序列幀圖(tu)片導入AE中，如果要用Bodymovin插件實(shí)現，就得把全部序列幀每張分開(kāi)導入，不然Bodymovin不能識別序列幀，只能用網(wǎng)頁(yè)視頻格式實(shí)現！

大概就是這樣流程，可能說(shuō)的不是很詳細請見(jiàn)諒，有不明白的地方可以隨時(shí)問(wèn)我！

3. 3D┐(′д｀)┌地球可視化

開(kāi)篇給大家留個(gè)懸念，怎么設計3D地球動(dòng)畫(huà)，下面就教你。

天貓雙十一阿里的3D地球是(°o°)有專(zhuān)門(mén)人員設計的，阿里也有這方面的組件庫。我們可以用開(kāi)源網(wǎng)站類(lèi)似組件來(lái)實(shí)現，大數據頁(yè)面用到的圖表這個(gè)網(wǎng)站幾乎都有，且免費。

網(wǎng)址：http://echarts.baidu.com/index.html

echarts組件效果

最終的效果是用兩個(gè)組件拼合在一起實(shí)現的，左邊就是代碼，后臺錄入信息可以讓粒子效果匹配數據，最終(?_?;)實(shí)現數據的可視化。

echarts網(wǎng)站

再推薦一個(gè)組件網(wǎng)站：h(′ω｀)ttp??s://www.hcharts.??cn/

Highcharts網(wǎng)站

同樣的很多圖表(biao)組┐(′?｀)┌件，兩個(gè)網(wǎng)站都可以用，下面介紹一下兩個(gè)網(wǎng)站的優(yōu)缺點(diǎn)。

（1） Echarts：

優(yōu)點(diǎn)：免費、開(kāi)源、效果炫酷、原生全中文。

缺點(diǎn)：兼容性差、經(jīng)常報錯、ヽ(′▽?zhuān)?/文檔不夠詳情。

（2） Highcharts：

優(yōu)點(diǎn)：文檔實(shí)例很詳細、易懂易學(xué)??、(′?｀)兼容性強可兼容到IE6。

缺點(diǎn)：收費。

大屏設計是一個(gè)長(cháng)期跟進(jìn)(jin)的過(guò)程，有很多問(wèn)題會(huì )在數據真正進(jìn)來(lái)時(shí)，放在大屏上才能發(fā)現，所以等(╯°□°）╯產(chǎn)品做到落地時(shí)設計方面要積極跟進(jìn)改進(jìn)。