大數(shù)據(jù)產(chǎn)業(yè)正以超乎我們想象的速度蓬勃發(fā)展。 隨著大數(shù)據(jù)時代的到來，越來越多的企業(yè)開始實現(xiàn)對數(shù)據(jù)資源的管理和利用。 大數(shù)據(jù)可視化、大屏展示受到更多企業(yè)青睞。 作為UI設(shè)計師，我們一定要跟上時代的步伐，學習這方面的設(shè)計。

今天想和大家分享一下我一年多來設(shè)計大數(shù)據(jù)可視化屏幕的經(jīng)驗和看法。 下面我從UI設(shè)計、交互設(shè)計、動效設(shè)計三個方面來給大家分享一下。

1. 界面設(shè)計

在設(shè)計大屏幕時，請記住將重點放在顯示數(shù)據(jù)上。 任何炫酷的表現(xiàn)都必須建立在不影響數(shù)據(jù)的有效展示之上！

下圖是天貓可視化的大屏設(shè)計。 圖中3D地球環(huán)繞粒子效果。 本文將教你如何實現(xiàn)，而且是數(shù)據(jù)可視化的呈現(xiàn)，不是動畫視頻！

天貓雙11視覺大屏

1、拼接大屏

大屏幾乎都是拼接屏。 在設(shè)計UI時，無需考慮屏幕縫隙會影響內(nèi)容的呈現(xiàn)。 內(nèi)容不會丟失，但可能會影響視覺表現(xiàn)。 例如，一個大字符圖像被間隙“分裂”成兩半。 或“撞”眼，看著不舒服

因此，在設(shè)計時可以為間隙位置建立一條參考線，避免類似情況的發(fā)生。 （目前企業(yè)常用無縫、1.7mm縫隙、3.5mm縫隙、三種拼接大屏，縫隙越小越貴）

2.設(shè)計尺寸

每個要拼接的小屏幕一般都是16:9的高清屏幕。 設(shè)計尺寸可設(shè)置上下高度，長度可根據(jù)拼接屏數(shù)比例得出。

例如3乘5的大屏，3屏高設(shè)置為1080，每屏高為360，360除以9乘16等于640，640就是一屏的長度, 640 x 5 = 3200, 最后得到設(shè)計稿尺寸為：高乘以寬（這里感謝我的數(shù)學老師）

拼接屏設(shè)計尺寸圖

3.視覺設(shè)計

先了解需求，整合數(shù)據(jù)，分析主要數(shù)據(jù)和次要數(shù)據(jù)，總數(shù)據(jù)的細分數(shù)據(jù)，每個數(shù)據(jù)的維度等。了解這些，就可以先設(shè)計一個布局模板，或者畫在紙上. 布局可以在設(shè)計過程中隨時調(diào)整。

設(shè)計的風格，背景色一般采用深色調(diào)，深色調(diào)有很強的張力感，使視覺能夠更好的聚焦，大屏的深色調(diào)看起來更柔和，更舒適，不那么刺眼，而且還省電。

大屏幕的設(shè)計不同于網(wǎng)頁。 頁面不能有滾動條，大屏的長寬是固定的。

字號不小于網(wǎng)頁設(shè)計的12字號，可用于圖表標注。 數(shù)據(jù)信息建議使用14號或以上字體。 大屏幕的觀眾只能在遠處看到完整的內(nèi)容，所以字體可以稍微大一點。 不一定只使用一種字體，可以使用一些科技感很強的字體。 這里要注意，記得開發(fā)一份字體。

設(shè)計完成后，先到大屏幕上看效果。 大屏的畫質(zhì)在色調(diào)上也會有較大的差異，需要根據(jù)自己大屏的渲染效果進行調(diào)整。

分享一個開源的插件庫網(wǎng)站，里面有很多很棒的動效！

插件庫中的效果之一

大屏的設(shè)計給了設(shè)計師很大的想象空間和設(shè)計空間，盡情發(fā)揮吧！

2.交互設(shè)計

我把大數(shù)據(jù)可視化大屏分為兩種，一種是“純展示型”，一種是“展示+功能型”。 具體如何區(qū)分：

純展示型幾乎沒有交互，只是在后臺輸入數(shù)據(jù)，顯示在大屏上。

展示+功能型，如實時監(jiān)控數(shù)據(jù)、數(shù)據(jù)采集、數(shù)據(jù)對比功能、云計算數(shù)據(jù)、分析預(yù)警等。

這里著重介紹具有功能的大屏產(chǎn)品的結(jié)構(gòu)層（信息架構(gòu)）。 所有功能結(jié)構(gòu)都必須圍繞核心數(shù)據(jù)主頁面來構(gòu)建，因為大屏展示的核心是將一些關(guān)鍵的業(yè)務(wù)指標數(shù)據(jù)與可視化展示的數(shù)據(jù)結(jié)合起來。

功能大數(shù)據(jù)可視化大屏結(jié)構(gòu)層（信息架構(gòu)）

大屏的交互不同于網(wǎng)頁和網(wǎng)頁的交互。 首先必須明確，大屏用戶群體可能是公司內(nèi)部的少數(shù)人，而不是一般的用戶群體。 從這個維度考慮，交互可以弱化一些引導(dǎo)元素，比如一個可點擊的數(shù)據(jù)組件不需要添加“點擊進入”按鈕。

也可以設(shè)計隱藏的交互方式，比如鼠標左移、上移、從控制面板出來（Mac電腦都有這樣的交互方式）。 如果控制臺是觸摸屏，還可以結(jié)合手勢設(shè)計交互方式。

為了讓用戶感覺一直停留在主頁面，跳轉(zhuǎn)到交互頁面時可以使用“關(guān)閉”按鈕代替“返回”按鈕！

3.動態(tài)設(shè)計

大數(shù)據(jù)可視化大屏設(shè)計中，動效是必不可少的，動效是可視化的重要組成部分。 動態(tài)效果的增加可以讓大屏幕看起來栩栩如生，增加視覺體驗。 但是，過多的動效極易讓客人不知所措，使觀看者的眼睛不知該聚焦哪里，弱化了數(shù)據(jù)的展示。

什么是過度動效設(shè)計？ 這個度怎么把握？

看看下圖中的過度運動設(shè)計案例。 當你試圖查看圖表內(nèi)容時，你的眼球一次次被閃爍的邊框吸引。 這是過度的運動設(shè)計！

（圖源網(wǎng)絡(luò)）

掌握動態(tài)設(shè)計的程度其實并不難，只要看著舒服，不影響數(shù)據(jù)的清晰顯示即可。 有數(shù)據(jù)展示的頁面最好動的地方不要太多。 如果動畫比較多，幾個動畫一定要有節(jié)奏變化。 例如，一個動畫表現(xiàn)出很強的視覺表現(xiàn)，而另一個則表現(xiàn)出稍弱的表現(xiàn)。 有強有弱，有主次節(jié)奏，你才會舒服。 同時，動態(tài)性能可以與數(shù)據(jù)變化相結(jié)合。 而且變化是最好的，這樣就不容易看數(shù)據(jù)內(nèi)容被動畫卡住了。

1.如何實現(xiàn)動態(tài)效果？

習慣用AE插件生成json文件來實現(xiàn)。 之前有寫過怎么做，這里就不說了。

json文件

本工具不支持AE中的一些預(yù)設(shè)效果和透視功能，所以我教大家另一種方法，就是將動畫渲染成視頻，將格式轉(zhuǎn)換為ogg或webm網(wǎng)絡(luò)視頻格式。 Web 格式的視頻加載非常容易。 得了吧，后面的文件交給開發(fā)就好了。

html5網(wǎng)絡(luò)視頻格式

2、如何實現(xiàn)3D動畫？

3D動畫

先說說C4D+AE+PS用的軟件

步驟1：

找模型也可以用C4D自帶的模型，也可以自己建模。 有了模型，可以在C4D中把模型變成點陣，做360度旋轉(zhuǎn)動畫，渲染png序列幀。

第2步：

將ps設(shè)計好的視覺稿和序列幀圖片導(dǎo)入到AE中。 如果要用插件實現(xiàn)，就得單獨導(dǎo)入所有的 frame，否則無法識別 ，只能實現(xiàn)web video格式！

大概流程就是這樣，可能我說的不是很詳細，還請見諒，有不懂的可以隨時問我！

3. 3D地球可視化

文章開頭，給大家留個懸念，如何設(shè)計3D地球動畫，下面教大家。

阿里在天貓雙十一上的3D地球是有專門人員設(shè)計的，阿里也有這方面的組件庫。 我們可以使用開源網(wǎng)站的類似組件來實現(xiàn)這一點。 幾乎所有大數(shù)據(jù)頁面使用的圖表都可以在這個網(wǎng)站上找到，而且是免費的。

組件效果

最終效果是通過組合兩個組件來實現(xiàn)的。 左邊是代碼。 后臺輸入的信息可以讓粒子效果與數(shù)據(jù)匹配，最終實現(xiàn)數(shù)據(jù)的可視化。

網(wǎng)站

推薦另一個組件網(wǎng)站：

網(wǎng)站

許多相同的圖表組件可以在兩個網(wǎng)站上使用。 以下是這兩個網(wǎng)站的優(yōu)缺點。

(1) :

優(yōu)點：免費、開源、炫酷特效、原生全中文。

缺點：兼容性差，經(jīng)常報錯，文檔不夠。

(2) :

優(yōu)點：文檔示例非常詳細，易懂易學，兼容性強，兼容IE6。

缺點：收費。

四。 概括

大屏設(shè)計是一個長期跟進的過程。 很多問題只有在數(shù)據(jù)真正進來的時候，才會在大屏幕上發(fā)現(xiàn)。因此，在產(chǎn)品上線的時候，一定要積極跟進設(shè)計，不斷完善。

好了，就這些了，感謝閱讀，希望這篇文章對你有所幫助！