大資料視覺化大屏設計經驗分享
前言
大資料產業正在用一個超乎我們想象的速度蓬勃發展，大資料時代的來臨，越來越多的公司開始意識到資料資源的管理和運用，大資料視覺化大屏展示被更多的企業青睞，身為UI設計師的我們，也要緊跟時代的步伐學習這方面的設計。
今天要跟大家分享我一年多設計大資料視覺化大屏的經驗和觀點，下面從UI設計、互動設計、動效設計三個方面來分享。
UI設計
設計大屏一樣要謹記要以展示資料為核心，在任何炫酷屌炸天表現都要建立在不影響資料的有效展示上！
下圖是天貓視覺化大屏設計，圖中屌炸天的3D地球圍繞粒子效果，這篇文章將教你怎麼實現，而且是資料視覺化的呈現，不是動效或者視訊！
天貓雙十一視覺化大屏
拼接大屏：大屏幾乎都是拼接屏，UI設計時不用考慮螢幕縫隙影響內容的呈現，內容不會丟失，但有可能影響視覺的表現，例如一個很大的人物影象被縫隙正中“劈成”兩半，或者“劈中”了眼睛，看起來很不舒服，所以設計時可以建立縫隙位置的參考線避免類似情況發生。（現在企業常用的有無縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏，縫隙越小越貴）
設計尺寸：拼接的每塊小屏一般是16:9的高清屏，設計尺寸可以把上下高度設定為1080px，長度按照拼接屏的數量比例得出長度的設計尺寸。例如3乘5的一塊大螢幕，高度3塊屏設為1080，每塊高就是360，360除9乘16等640，640就是一塊螢幕的長度，640乘5塊屏＝3200最後得出設計稿尺寸就是：高1080px乘寬3200px
拼接屏設計尺寸圖解
視覺設計：首先了解需求，整合資料，分析出主要資料次要資料、總量資料細分資料、各資料的維度等等，通過了解這些可以先設計出一個佈局模版，也可以在紙上畫出來，佈局可以在設計過程中隨時調整。
設計的風格，背景色一般用深色調，深色調緊張感強，讓視覺更好的聚焦，大屏暗色調看上去更柔和舒服不刺眼，也會較省電。
大屏設計跟網頁不一樣，頁面不能有滾動條，大屏的長寬都是固定的。
字號跟網頁設計一樣不小於12號字，可以用於圖表的標註，資料資訊建議14號字以上，大屏觀者遠距離才能看全內容，所以字號可以稍大一點。字型不一定只用一種，可以用到一些科技感強的字型，這裡要注意，記得把字型給開發一份。
設計完成先去大屏上看一下效果，大屏的品質不一樣色調也會有很大的差別，要根據自家的大屏呈現效果做調整。
下面分享一個開源的jquery外掛庫網站，裡面有很多很棒的動態效果！
ofollow,noindex" target="_blank">http://www.jq22.com/
外掛庫其中的一個效果
大屏設計會給設計師很大的想象設計空間，盡情發揮你的能力吧！
互動設計
我把大資料視覺化大屏分為兩種，一種“純展示型”另一種“展示＋功能型”，具體怎麼區分！
純展示型幾乎沒有互動，後臺錄入資料，在大屏上展示就行了。
展示＋功能型，例如實時監控資料、採集資料、資料對比功能、雲端計算資料、分析與預警等等。
這裡就著重說一下帶有功能型的大屏產品的結構層（資訊架構）。一切功能結構都要圍繞核心資料主頁面來架構，因為大屏展示的核心就是將一些業務的關鍵指標資料以資料視覺化的方式展示出來。
功能型大資料視覺化大屏結構層（資訊架構）
大屏的互動，區別於網頁和app，首先要清楚一點，大屏使用群體可能就是公司內部的幾個人，而非面向廣大使用者群體，從這個維度上考慮，互動就可以弱化一些引導性的元素，例如一個可點選的資料元件，就可以不加“點選進入”按鈕。
也可以設計隱藏式的互動方式，例如滑鼠左移動、上移動、出來控制面板（Mac電腦就有這樣的互動方式），有控制檯是觸控式螢幕也可以結合手勢來設計互動方式。
為了讓使用者感知到一直停留在主頁面上，互動上跳轉頁面能用“關閉”按鈕就不用“返回”按鈕！
動效設計
大資料視覺化大屏設計少不了動效，動效是視覺化重要的組成部分，動效的增加能讓大屏看上去是活的，增加觀感體驗。但過分的動效極其容易喧賓奪主，讓觀看者的眼球不知道往哪裡聚焦，反而弱化了資料的展示。
什麼是過度的動效設計？這個度又該怎麼把握？
看下圖動效設計過度的一個案例，當你試著去看圖表的內容，你的眼球一次一次的被閃動的邊框抓走，這就是過度的動效設計！
圖片來源網路
把握動效設計這個度其實並不難，只要看的舒服不影響資料清晰展示就可以，有資料展示的頁面最好動的地方不易過多，如果要多，幾個動畫就得有節奏的變化，例如一個動畫表現的視覺強，另一個就表現稍弱化，有強有弱、有主有次節奏才會舒服，同時動效能結合資料的變化而變化最好，這樣就不容易看資料內容被動畫抓走眼球。
動效怎麼實現？
我習慣用AE的外掛Bodymovin生成json檔案實現，具體怎麼操作之前寫過一篇教程 《UI設計師大殺器來了！程式猿愛上設計師的強技能！》 ，點選可以去這裡瞭解。
json檔案
Bodymovin這個工具在AE中有些預設效果和透視功能是不支援的，所以再教大家另一種方法，就是把動畫渲染成視訊，把格式轉換為ogg或者webm網頁視訊格式，網頁格式視訊載入是非常快的，之後把下面的檔案給開發就可以了。
html5網頁視訊格式
3D動效怎麼實現？
3D動畫
先說下用到的軟體C4D+AE+PS
步驟1：找個模型也可以用C4D自帶的模型，還可以自己建模，有了模型在C4D中把模型變成晶格狀，做個旋轉360度動畫，渲染出png序列幀。
步驟2：把ps設計好的視覺稿和序列幀圖片匯入AE中，如果要用Bodymovin外掛實現，就得把全部序列幀每張分開匯入，不然Bodymovin不能識別序列幀，只能用網頁視訊格式實現！
大概就是這樣流程，可能說的不是很詳細請見諒，有不明白的地方可以隨時問我！
3D地球視覺化
開篇給大家留個懸念，怎麼設計3D地球動畫，下面就教你。
天貓雙十一阿里的3D地球是有專門人員設計的，阿里也有這方面的元件庫。我們可以用開源網站類似元件來實現，大資料頁面用到的圖表這個網站幾乎都有，且免費。
網址：http://echarts.baidu.com/index.html
echarts元件效果
最終的效果是用兩個元件拼合在一起實現的，左邊就是程式碼，後臺錄入資訊可以讓粒子效果匹配資料，最終實現資料的視覺化。
echarts網站
再推薦一個元件網站：https://www.hcharts.cn/
Highcharts網站
同樣的很多圖表元件，兩個網站都可以用，下面介紹一下兩個網站的優缺點。
Echarts：
優點：免費、開源、效果炫酷、原生全中文。
缺點：相容性差、經常報錯、文件不夠詳情。
Highcharts：
優點：文件例項很詳細、易懂易學、相容性強可相容到IE6。
缺點：收費。
總結
大屏設計是一個長期跟進的過程，有很多問題會在資料真正進來時，放在大屏上才能發現，所以等產品做到落地時設計方面要積極跟進改進。