中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

今天要跟大家分享我一年多設(shè)計(jì)大數(shù)據(jù)可視化大屏的經(jīng)驗(yàn)和觀點(diǎn)，下面從UI設(shè)計(jì)、交互設(shè)計(jì)、動(dòng)效設(shè)計(jì)三個(gè)方面來(lái)分享。

一、UI設(shè)計(jì)

設(shè)計(jì)大屏一樣要謹(jǐn)記要以展示數(shù)據(jù)為核心，在任何炫酷表現(xiàn)都要建立在不影響數(shù)據(jù)的有效展示上！

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

天貓雙十一可視化大屏

1. 拼接大屏

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

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

2. 設(shè)計(jì)尺寸

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

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

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

3. 視覺設(shè)計(jì)

首先了解需求，整合數(shù)據(jù)，分析出主要數(shù)據(jù)次要數(shù)據(jù)、總量數(shù)據(jù)細(xì)分?jǐn)?shù)據(jù)、各數(shù)據(jù)的維度等等，通過(guò)了解這些可以先設(shè)計(jì)出一個(gè)布局模版，也可以在紙上畫出來(lái)，布局可以在設(shè)計(jì)過(guò)程中隨時(shí)調(diào)整。

設(shè)計(jì)的風(fēng)格，背景色一般用深色調(diào)，深色調(diào)緊張感強(qiáng)，讓視覺更好的聚焦，大屏暗色調(diào)看上去更柔和舒服不刺眼，也會(huì)較省電。

大屏設(shè)計(jì)跟網(wǎng)頁(yè)不一樣，頁(yè)面不能有滾動(dòng)條，大屏的長(zhǎng)寬都是固定的。

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

設(shè)計(jì)完成先去大屏上看一下效果，大屏的品質(zhì)不一樣色調(diào)也會(huì)有很大的差別，要根據(jù)自家的大屏呈現(xiàn)效果做調(diào)整。

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

http://www.jq22.com/

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

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

二、交互設(shè)計(jì)

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

純展示型幾乎沒有交互，后臺(tái)錄入數(shù)據(jù)，在大屏上展示就行了。

展示＋功能型，例如實(shí)時(shí)監(jiān)控?cái)?shù)據(jù)、采集數(shù)據(jù)、數(shù)據(jù)對(duì)比功能、云計(jì)算數(shù)據(jù)、分析與預(yù)警等等。

這里就著重說(shuō)一下帶有功能型的大屏產(chǎn)品的結(jié)構(gòu)層（信息架構(gòu)），一切功能結(jié)構(gòu)都要圍繞核心數(shù)據(jù)主頁(yè)面來(lái)架構(gòu)，因?yàn)榇笃琳故镜暮诵木褪菍⒁恍I(yè)務(wù)的關(guān)鍵指標(biāo)數(shù)據(jù)以數(shù)據(jù)可視化的方式展示出來(lái)。

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

大屏的交互，區(qū)別于網(wǎng)頁(yè)和。首先要清楚一點(diǎn)，大屏使用群體可能就是公司內(nèi)部的幾個(gè)人，而非面向廣大用戶群體。從這個(gè)維度上考慮，交互就可以弱化一些引導(dǎo)性的元素，例如一個(gè)可點(diǎn)擊的數(shù)據(jù)組件，就可以不加“點(diǎn)擊進(jìn)入”按鈕。

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

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

三、動(dòng)效設(shè)計(jì)

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

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

看下圖動(dòng)效設(shè)計(jì)過(guò)度的一個(gè)案例，當(dāng)你試著去看圖表的內(nèi)容，你的眼球一次一次的被閃動(dòng)的邊框抓走，這就是過(guò)度的動(dòng)效設(shè)計(jì)！

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

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

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

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

json文件

Bodymovin這個(gè)工具在AE中有些預(yù)設(shè)效果和透視功能是不支持的，所以再教大家另一種方法，就是把動(dòng)畫渲染成視頻，把格式轉(zhuǎn)換為ogg或者webm網(wǎng)頁(yè)視頻格式，網(wǎng)頁(yè)格式視頻加載是非常快的，之后把下面的文件給開發(fā)就可以了。

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

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

3D動(dòng)畫

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

步驟1：

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

步驟2：

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

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

3. 3D地球可視化

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

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

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

echarts組件效果

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

echarts網(wǎng)站

再推薦一個(gè)組件網(wǎng)站：https://www.hcharts.cn/

Highcharts網(wǎng)站

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

（1） Echarts：

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

缺點(diǎn)：兼容性差、經(jīng)常報(bào)錯(cuò)、文檔不夠詳情。

（2） Highcharts：

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

缺點(diǎn)：收費(fèi)。

四、總結(jié)

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

好了就這么多感謝閱讀，希望這篇文章對(duì)你有一點(diǎn)用！

作者：吳星辰，微信公眾號(hào)：互聯(lián)網(wǎng)設(shè)計(jì)幫

本文由 @吳星辰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議