整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
數(shù)據(jù)產(chǎn)業(yè)正在用一個超乎我們想象的速度蓬勃發(fā)展，大數(shù)據(jù)時代的來臨，越來越多的公司開始意識到數(shù)據(jù)資源的管理和運用，大數(shù)據(jù)可視化大屏展示被更多的企業(yè)青睞，身為UI設計師的我們，也要緊跟時代的步伐學習這方面的設計。
今天要跟大家分享我一年多設計大數(shù)據(jù)可視化大屏的經(jīng)驗和觀點，下面從UI設計、交互設計、動效設計三個方面來分享。
設計大屏一樣要謹記要以展示數(shù)據(jù)為核心，在任何炫酷屌炸天表現(xiàn)都要建立在不影響數(shù)據(jù)的有效展示上！
下圖是天貓可視化大屏設計，圖中屌炸天的3D地球圍繞粒子效果，這篇文章將教你怎么實現(xiàn)，而且是數(shù)據(jù)可視化的呈現(xiàn)，不是動效或者視頻！
天貓雙十一可視化大屏
大屏幾乎都是拼接屏，UI設計時不用考慮屏幕縫隙影響內(nèi)容的呈現(xiàn)，內(nèi)容不會丟失，但有可能影響視覺的表現(xiàn)，例如一個很大的人物圖像被縫隙正中“劈成”兩半，或者“劈中”了眼睛，看起來很不舒服
所以設計時可以建立縫隙位置的參考線避免類似情況發(fā)生。（現(xiàn)在企業(yè)常用的有無縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏，縫隙越小越貴）
拼接的每塊小屏一般是16:9的高清屏，設計尺寸可以把上下高度設定為1080px，長度按照拼接屏的數(shù)量比例得出長度的設計尺寸。
例如3乘5的一塊大屏幕，高度3塊屏設為1080，每塊高就是360，360除9乘16等640，640就是一塊屏幕的長度，640乘5塊屏＝3200最后得出設計稿尺寸就是：高1080px乘寬3200px（在這里感謝我的數(shù)學老師）
拼接屏設計尺寸圖解
首先了解需求，整合數(shù)據(jù)，分析出主要數(shù)據(jù)次要數(shù)據(jù)、總量數(shù)據(jù)細分數(shù)據(jù)、各數(shù)據(jù)的維度等等，通過了解這些可以先設計出一個布局模版，也可以在紙上畫出來，布局可以在設計過程中隨時調(diào)整。
設計的風格，背景色一般用深色調(diào)，深色調(diào)緊張感強，讓視覺更好的聚焦，大屏暗色調(diào)看上去更柔和舒服不刺眼，也會較省電。
大屏設計跟網(wǎng)頁不一樣，頁面不能有滾動條，大屏的長寬都是固定的。
字號跟網(wǎng)頁設計一樣不小于12號字，可以用于圖表的標注，數(shù)據(jù)信息建議14號字以上，大屏觀者遠距離才能看全內(nèi)容，所以字號可以稍大一點。字體不一定只用一種，可以用到一些科技感強的字體，這里要注意，記得把字體給開發(fā)一份。
設計完成先去大屏上看一下效果，大屏的品質(zhì)不一樣色調(diào)也會有很大的差別，要根據(jù)自家的大屏呈現(xiàn)效果做調(diào)整。
下面分享一個開源的jquery插件庫網(wǎng)站，里面有很多很棒的動態(tài)效果！
http://www.jq22.com/
插件庫其中的一個效果
大屏設計會給設計師很大的想象設計空間，盡情發(fā)揮你的能力吧！
我把大數(shù)據(jù)可視化大屏分為兩種，一種“純展示型”另一種“展示＋功能型”，具體怎么區(qū)分：
純展示型幾乎沒有交互，后臺錄入數(shù)據(jù)，在大屏上展示就行了。
展示＋功能型，例如實時監(jiān)控數(shù)據(jù)、采集數(shù)據(jù)、數(shù)據(jù)對比功能、云計算數(shù)據(jù)、分析與預警等等。
這里就著重說一下帶有功能型的大屏產(chǎn)品的結(jié)構(gòu)層（信息架構(gòu)），一切功能結(jié)構(gòu)都要圍繞核心數(shù)據(jù)主頁面來架構(gòu)，因為大屏展示的核心就是將一些業(yè)務的關(guān)鍵指標數(shù)據(jù)以數(shù)據(jù)可視化的方式展示出來。
功能型大數(shù)據(jù)可視化大屏結(jié)構(gòu)層（信息架構(gòu)）
大屏的交互，區(qū)別于網(wǎng)頁和。首先要清楚一點，大屏使用群體可能就是公司內(nèi)部的幾個人，而非面向廣大用戶群體。從這個維度上考慮，交互就可以弱化一些引導性的元素，例如一個可點擊的數(shù)據(jù)組件，就可以不加“點擊進入”按鈕。
也可以設計隱藏式的交互方式，例如鼠標左移動、上移動、出來控制面板（Mac電腦就有這樣的交互方式），有控制臺是觸摸屏也可以結(jié)合手勢來設計交互方式。
為了讓用戶感知到一直停留在主頁面上，交互上跳轉(zhuǎn)頁面能用“關(guān)閉”按鈕就不用“返回”按鈕！
大數(shù)據(jù)可視化大屏設計少不了動效，動效是可視化重要的組成部分，動效的增加能讓大屏看上去是活的，增加觀感體驗。但過分的動效極其容易喧賓奪主，讓觀看者的眼球不知道往哪里聚焦，反而弱化了數(shù)據(jù)的展示。
什么是過度的動效設計？這個度又該怎么把握？
看下圖動效設計過度的一個案例，當你試著去看圖表的內(nèi)容，你的眼球一次一次的被閃動的邊框抓走，這就是過度的動效設計！
（圖片來源網(wǎng)絡）
把握動效設計這個度其實并不難，只要看的舒服不影響數(shù)據(jù)清晰展示就可以，有數(shù)據(jù)展示的頁面最好動的地方不易過多。如果要多，幾個動畫就得有節(jié)奏的變化，例如一個動畫表現(xiàn)的視覺強，另一個就表現(xiàn)稍弱化，有強有弱、有主有次節(jié)奏才會舒服，同時動效能結(jié)合數(shù)據(jù)的變化而變化最好，這樣就不容易看數(shù)據(jù)內(nèi)容被動畫抓走眼球。
我習慣用AE的插件Bodymovin生成json文件實現(xiàn)，具體怎么操作之前寫過，這里就不多講了。
json文件
Bodymovin這個工具在AE中有些預設效果和透視功能是不支持的，所以再教大家另一種方法，就是把動畫渲染成視頻，把格式轉(zhuǎn)換為ogg或者webm網(wǎng)頁視頻格式，網(wǎng)頁格式視頻加載是非常快的，之后把下面的文件給開發(fā)就可以了。
html5網(wǎng)頁視頻格式
3D動畫
先說下用到的軟件C4D+AE+PS
步驟1：
找個模型也可以用C4D自帶的模型，還可以自己建模，有了模型在C4D中把模型變成晶格狀，做個旋轉(zhuǎn)360度動畫，渲染出png序列幀。
步驟2：
把ps設計好的視覺稿和序列幀圖片導入AE中，如果要用Bodymovin插件實現(xiàn)，就得把全部序列幀每張分開導入，不然Bodymovin不能識別序列幀，只能用網(wǎng)頁視頻格式實現(xiàn)！
大概就是這樣流程，可能說的不是很詳細請見諒，有不明白的地方可以隨時問我！
開篇給大家留個懸念，怎么設計3D地球動畫，下面就教你。
天貓雙十一阿里的3D地球是有專門人員設計的，阿里也有這方面的組件庫。我們可以用開源網(wǎng)站類似組件來實現(xiàn)，大數(shù)據(jù)頁面用到的圖表這個網(wǎng)站幾乎都有，且免費。
網(wǎng)址：http://echarts.baidu.com/index.html
echarts組件效果
最終的效果是用兩個組件拼合在一起實現(xiàn)的，左邊就是代碼，后臺錄入信息可以讓粒子效果匹配數(shù)據(jù)，最終實現(xiàn)數(shù)據(jù)的可視化。
echarts網(wǎng)站
再推薦一個組件網(wǎng)站：https://www.hcharts.cn/
Highcharts網(wǎng)站
同樣的很多圖表組件，兩個網(wǎng)站都可以用，下面介紹一下兩個網(wǎng)站的優(yōu)缺點。
（1） Echarts：
優(yōu)點：免費、開源、效果炫酷、原生全中文。
缺點：兼容性差、經(jīng)常報錯、文檔不夠詳情。
（2） Highcharts：
優(yōu)點：文檔實例很詳細、易懂易學、兼容性強可兼容到IE6。
缺點：收費。
大屏設計是一個長期跟進的過程，有很多問題會在數(shù)據(jù)真正進來時，放在大屏上才能發(fā)現(xiàn)，所以等產(chǎn)品做到落地時設計方面要積極跟進改進。
好了就這么多感謝閱讀，希望這篇文章對你有一點用！
作者：吳星辰，微信公眾號：互聯(lián)網(wǎng)設計幫
本文由 @吳星辰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
移動端中我們經(jīng)常碰到橫屏豎屏的問題，那么我們應該如何去判斷或者針對橫屏、豎屏來寫不同的代碼呢。
豎屏引用
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
@media screen and (orientation: portrait) {
/*豎屏 css*/
}
@media screen and (orientation: landscape) {
/*橫屏 css*/
}
前言
在大數(shù)據(jù)盛行的現(xiàn)在，大屏數(shù)據(jù)可視化也已經(jīng)成為了一個熱門的話題。大屏可視化可以運用在眾多領域中，比如工業(yè)互聯(lián)網(wǎng)、醫(yī)療、交通、工業(yè)控制等等。將各項重要指標數(shù)據(jù)以圖表、各種圖形等形式表現(xiàn)在一個頁面上，各種數(shù)據(jù)一目了然。隨著瀏覽器不斷發(fā)展完善，使用 Web 做大屏展示也已經(jīng)不是新鮮的事了。市面上已有不少的大屏解決方案，大部分是以放各種圖表的形式呈現(xiàn)，基本是 2D 的呈現(xiàn)。有些是根據(jù)投放屏幕的比例設計出來的，并不能自適應于其它的屏幕比例。最近學習了 Hightopo 的 HT for Web 產(chǎn)品，特有的矢量，在各種比例下不失真，加上布局機制，解決了不同屏幕比例下的展示問題，加上 3D 的呈現(xiàn)部分，可以做出別具一格的大屏系統(tǒng)。在這里與大家分享學習，先來張整體效果圖：
本文主要介紹內(nèi)容如下，文章中以 HT 作為 HT for Web 的簡稱：
一、頁面搭建
在這個系統(tǒng)中，我們需要創(chuàng)建 ht.graph.GraphView 和 ht.graph3d.Graph3dView 來呈現(xiàn) 2D 和 3D 的內(nèi)容。設計師給到的 display.json 是 2D 圖紙的內(nèi)容，主要是使用矢量繪制呈現(xiàn)，有一些圖表是用了 Echarts，HT 也有機制可以讓我們使用它們。scene.json 是 3D 場景的內(nèi)容，大部分模型都是通過 3dMax 建模生成的，該建模工具可以導出 obj 與 mtl 文件，在 HT 中可以通過解析 obj 與 mtl 文件來生成 3d 場景中的所有復雜模型，簡單的模型也可以通過 HT 來建模。關(guān)鍵代碼如下：
二、數(shù)據(jù)對接
頁面加載出來后，就可以與后臺通訊，請求相關(guān)數(shù)據(jù)對接到對應的元素上了。HT 一大強項是作為 Web 組態(tài)，所以有很友好的數(shù)據(jù)綁定方式，我們可以輕松將數(shù)據(jù)展示到各個節(jié)點上。我們這個案例采用隨機數(shù)模擬的方式模擬展示數(shù)據(jù)，在 json 中對相應的節(jié)點設置唯一標識 tag，在反序列化完成后，通過 g2d.dm().getDataByTag(tag) 來獲得相應節(jié)點，再根據(jù)這個節(jié)點的數(shù)據(jù)綁定來將數(shù)據(jù)展示到改節(jié)點上。
以上表格是一個用 ht 定義的矢量節(jié)點，矢量由一個個組件組成，組件不僅可以預定義的矩形，文本等內(nèi)容，也可以引用其它定義好的矢量，甚至可以自定義繪制邏輯，這個表格就由此而來。矢量不僅可以用在 2D 圖紙里，還可以用在 3D 貼圖中，在我們 3D 場景中，以下截圖的幾個面板也是使用矢量實現(xiàn)，
HT 中數(shù)據(jù)都由 DataModel 驅(qū)動，所以 3D 對接數(shù)據(jù)也是一樣的，這里就不再贅述。
三、動畫效果實現(xiàn)
這個案例中最明顯的動畫應該就是鐵水罐車的動畫了，我們先來聊聊它的實現(xiàn)。基本流程是這樣的
如上，我們依然是在反序列化完成后，通過 car=g3d.dm().getDataByTag('car'); 得到鐵水罐車的節(jié)點對象。
通過 car.s('3d.visible', true | false); 就可以控制它的顯隱。
通過不斷修改節(jié)點的 3D 坐標就可以實現(xiàn)位移效果 car.setPosition3d(x, y, z);
至于鐵水罐車上的面板，也是個矢量，將它吸附于鐵水罐車節(jié)點，它就會跟隨車移動，不需要單獨控制它的坐標來實現(xiàn)動畫。
這部分動畫效果，只要不斷修改貼圖的 uv 值就可以實現(xiàn)，以下是示例代碼，node 還是由 getDataByTag 得來
總結(jié)
通過 2D 3D 結(jié)合的方式的大屏展示，可以非常直觀的看到數(shù)據(jù)呈現(xiàn)，比如在履帶出的上料數(shù)據(jù)，通過它的位置，不需要太多文字描述就知道這里是要展示什么內(nèi)容。HT 非常輕量，可以結(jié)合 2D 3D 呈現(xiàn)數(shù)據(jù)，矢量在各種屏幕下不失真，還可以適應各種屏幕大小進行展示，用來做大屏可視化再合適不過了。除了在大屏上，電腦上可以展示良好，移動端同樣支持，最后放上一張移動端的效果圖。
作者：勤勞的搬運工
鏈接：https://juejin.im/post/5d6c57b1f265da03cd0a97ef
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
