数据可视化系列-04数据大屏基础知识
文章目錄
- 5.銷售數(shù)據(jù)看板
- 5.1 了解數(shù)據(jù)大屏基礎(chǔ)知識(shí)
- 1.數(shù)據(jù)大屏簡(jiǎn)介：
- 2.數(shù)據(jù)大屏使用場(chǎng)景
- 3.數(shù)據(jù)大屏分類
- 5.2 數(shù)據(jù)大屏的設(shè)計(jì)：
- 1.大屏前端設(shè)計(jì)流程
- 2.數(shù)據(jù)大屏設(shè)計(jì)尺寸解析
- 3.可視化視覺設(shè)計(jì)
- 5.3 大屏開發(fā)工具DataV：
- 1.DataV數(shù)據(jù)可視化簡(jiǎn)介
- 2.優(yōu)勢(shì)
- 3.DataV數(shù)據(jù)可視化特性
- 4.DataV數(shù)據(jù)可視化案例展示
5.銷售數(shù)據(jù)看板
參考：深度好文：一文掌握數(shù)據(jù)大屏設(shè)計(jì)與制作
5.1 了解數(shù)據(jù)大屏基礎(chǔ)知識(shí)
1.數(shù)據(jù)大屏簡(jiǎn)介：
可視化數(shù)據(jù)大屏是以數(shù)據(jù)可視化的方式在一個(gè)或多個(gè)LED大屏幕上、液晶顯示屏上顯示業(yè)務(wù)的一些關(guān)鍵指標(biāo)，以大屏幕為主要顯示載體的數(shù)據(jù)可視化設(shè)計(jì)。
2.數(shù)據(jù)大屏使用場(chǎng)景
可視化大屏在政府、商業(yè)、金融、制造等行業(yè)的業(yè)務(wù)場(chǎng)景中出現(xiàn)較多。例如
城市智能運(yùn)營(yíng)中心
應(yīng)急指揮中心
公安監(jiān)控中心
電力調(diào)度中心
金融交易大廳
可視化大屏具有日常監(jiān)測(cè)、分析判斷、展示匯報(bào)等多種功能，
3.數(shù)據(jù)大屏分類
一、展示類
展示類的場(chǎng)景一般是指企事業(yè)單位為了展示其核心經(jīng)營(yíng)理念、核心的公司戰(zhàn)略/公司品牌理念，業(yè)務(wù)亮點(diǎn)、主要對(duì)外展示的整體公開數(shù)據(jù)等。目的是對(duì)外呈現(xiàn)企業(yè)的整體宏觀數(shù)據(jù)，向領(lǐng)導(dǎo)匯報(bào)業(yè)務(wù)成果，向業(yè)界展示業(yè)務(wù)實(shí)力。
例如，某大型集團(tuán)展示其員工總數(shù)、納稅總額、分支結(jié)構(gòu)、在建項(xiàng)目等，主要展示其公司的整體實(shí)力。主要用于領(lǐng)導(dǎo)或同行的參觀介紹、對(duì)外形象展示等。
展示類場(chǎng)景大部分采用平鋪的方式來布局展現(xiàn)信息，風(fēng)格符合企業(yè)整體的UI，美觀大氣。配套數(shù)據(jù)大屏需要有相關(guān)的講解腳本，突出業(yè)務(wù)亮點(diǎn)。
展示類大屏對(duì)大屏的交互性一般要求不是很高，主要側(cè)重美觀度和震撼力。
二、監(jiān)控類
監(jiān)控類數(shù)據(jù)大屏的關(guān)注重點(diǎn)是在業(yè)務(wù)方監(jiān)控關(guān)鍵點(diǎn)上，實(shí)時(shí)跟蹤業(yè)務(wù)數(shù)據(jù)變化，對(duì)異常數(shù)據(jù)及時(shí)告警，從而保證業(yè)務(wù)正常運(yùn)行。例如，生產(chǎn)制造型企業(yè)需要對(duì)整個(gè)生產(chǎn)過程的數(shù)據(jù)進(jìn)行監(jiān)控，如果發(fā)現(xiàn)運(yùn)行異常，便需要及時(shí)通知到產(chǎn)線人員，及時(shí)排查原因，解除故障，保證生產(chǎn)作業(yè)正常進(jìn)行。
監(jiān)控類數(shù)據(jù)大屏根據(jù)不同業(yè)務(wù)和使用場(chǎng)景中需要監(jiān)控的內(nèi)容類型不同，需要對(duì)IOT、設(shè)備、視像頭都硬件數(shù)據(jù)進(jìn)行采集跟蹤，通過圖像、視頻、可視化圖表等多種可視化手段結(jié)合使用，數(shù)據(jù)狀態(tài)變化表現(xiàn)要明顯、及時(shí)。
大屏設(shè)計(jì)時(shí)要保證數(shù)據(jù)的高度實(shí)時(shí)性，同時(shí)，要充分考慮監(jiān)控使用人員認(rèn)知習(xí)慣，監(jiān)控痛點(diǎn)，被監(jiān)控事物關(guān)鍵狀態(tài)及傳統(tǒng)展現(xiàn)形式。
三、分析類
分析類數(shù)據(jù)大屏主要用于展示和分析企業(yè)實(shí)際具體的業(yè)務(wù)數(shù)據(jù)，并通過對(duì)數(shù)據(jù)的鉆取、聯(lián)動(dòng)、透視等交互性操作，挖掘出數(shù)據(jù)背后的原因，通過數(shù)據(jù)可視化為管理決策提供科學(xué)的數(shù)據(jù)支持。例如，企業(yè)經(jīng)營(yíng)管理的財(cái)務(wù)數(shù)據(jù)的營(yíng)業(yè)收入、利潤(rùn)、現(xiàn)金流、應(yīng)付賬款等財(cái)務(wù)指標(biāo)發(fā)生變化，需要按照不同的業(yè)務(wù)單元、時(shí)間等維度，分析其變化的原因。
分析類數(shù)據(jù)大屏要求對(duì)數(shù)據(jù)邏輯和業(yè)務(wù)了解比較深入，設(shè)計(jì)出的可視化元素需要時(shí)具體的分析結(jié)果的展示，對(duì)數(shù)據(jù)的規(guī)范性、關(guān)聯(lián)性、邏輯性要求較高，對(duì)大屏設(shè)計(jì)人員的業(yè)務(wù)能力和數(shù)據(jù)分析能力要求也比較高，所以設(shè)計(jì)難度較大。
同時(shí)，分析類大屏?xí)唤?jīng)常用于企業(yè)經(jīng)營(yíng)分析會(huì)議，需要基于大屏成果進(jìn)行深度分析，鉆取、聯(lián)動(dòng)、切片、篩選、透視等交互分析能力要求很高。
5.2 數(shù)據(jù)大屏的設(shè)計(jì)：
參考:小白必讀！大屏數(shù)據(jù)可視化設(shè)計(jì)的原則和流程
數(shù)據(jù)可視化大屏設(shè)計(jì)步驟，有3步流程
大屏可視化設(shè)計(jì)尺寸高級(jí)指南
1.大屏前端設(shè)計(jì)流程
1. 根據(jù)業(yè)務(wù)需求分定優(yōu)先級(jí)
關(guān)鍵指標(biāo)是一些概括性詞語，是對(duì)一組或者一系列數(shù)據(jù)的統(tǒng)稱。通過規(guī)定主，次，輔，三個(gè)指標(biāo)的關(guān)鍵詞來概念性的清晰大屏的主要展示內(nèi)容，例如我們做的一個(gè)照明的監(jiān)測(cè)項(xiàng)目，我們可以歸類成這三種：
主：主要指標(biāo)位于屏幕中央，為地圖展現(xiàn)照明區(qū)域使用數(shù)據(jù)。
次：次要指標(biāo)位于屏幕兩側(cè)以圖表的形式展現(xiàn)。
輔：主要指標(biāo)的補(bǔ)充信息鼠標(biāo)點(diǎn)擊或懸停展示以及交互動(dòng)效展示。
2. 通過指標(biāo)分析維度確定圖表類型
同一個(gè)指標(biāo)的數(shù)據(jù)，從不同維度分析就有不同結(jié)果。如果分析的維度沒有找準(zhǔn)或定義的比較混亂，就會(huì)使可視化圖表無法清晰的看清楚含義，使人困惑。這里我們引用Stephen Few 的文章 《Visual Business Intelligence》的四項(xiàng)維度-比較，聯(lián)系，分布，構(gòu)成，來分析數(shù)據(jù)的邏輯性。
聯(lián)系：數(shù)據(jù)之間的相關(guān)性
分布：指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律
比較：數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面
構(gòu)成：指標(biāo)里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何
3. 根據(jù)大屏尺寸，規(guī)劃頁面布局，確立交互稿
確立圖表類型后，下一步要進(jìn)入到布局具體的信息位置，確立交互稿的步驟。確立交互稿的第一步就是要確定大屏的尺寸。
尺寸確立后，接下來要對(duì)設(shè)計(jì)稿進(jìn)行布局和頁面的劃分。布局這里就要參考第一項(xiàng)的業(yè)務(wù)需求優(yōu)先級(jí)來布局畫面分割面積。核心業(yè)務(wù)指標(biāo)安排在中間位置、占較大面積;其余的指標(biāo)按優(yōu)先級(jí)依次在核心指標(biāo)周圍展開。
一般把有關(guān)聯(lián)的指標(biāo)讓其相鄰或靠近，把圖表類型相近的指標(biāo)放一起，這樣能減少觀者認(rèn)知上的負(fù)擔(dān)并提高信息傳遞的效率。視覺上要盡量規(guī)避文字羅列或圖表羅列，注意方圓圖表的面積比例問題等，也是布局期間需要注意的事項(xiàng)。
4. 確定設(shè)計(jì)風(fēng)格
很多小伙伴也許沒接觸過大屏設(shè)計(jì)工作，但大多數(shù)人都應(yīng)該有APP或者Web風(fēng)格定義的經(jīng)驗(yàn)。大屏雖酷炫，但實(shí)際上也是運(yùn)行在瀏覽器里的Web頁面。
5. 可視化設(shè)計(jì)
根據(jù)定義好的設(shè)計(jì)風(fēng)格與選定的圖表類型進(jìn)行合理的可視化設(shè)計(jì)。目前來講大屏可視化主要有指標(biāo)類信息點(diǎn)和地理類信息點(diǎn)兩大可視化數(shù)據(jù)。指標(biāo)類信息點(diǎn)可視化效果相對(duì)簡(jiǎn)單易實(shí)現(xiàn)，而地理類信息點(diǎn)一般可視化效果酷炫，但是開發(fā)相對(duì)困難，需要設(shè)計(jì)師跟開發(fā)多溝通的。地理類信息一般具有很強(qiáng)的空間感、豐富的粒子、流光等動(dòng)效、高精度的模型和材質(zhì)以及可交互實(shí)時(shí)演算等特點(diǎn)，所以對(duì)于被投電腦、大屏拼接器等硬件設(shè)備的性能會(huì)有要求，硬件配置不夠的情況下可能出現(xiàn)卡頓甚至崩潰的情況，所以這點(diǎn)也是需要提前溝通評(píng)估的。
6. 樣圖溝通確認(rèn)
這里的溝通分三個(gè)層面：設(shè)計(jì)師對(duì)內(nèi)溝通、設(shè)計(jì)師對(duì)外溝通、設(shè)計(jì)師與大屏的“溝通”。
樣圖溝通環(huán)節(jié)，最初的樣圖不需要十分精致，我們可以把它理解為一個(gè)“低保真”原型，然后通過不斷溝通修改，讓它逐步完善精致起來，也就是小步快跑，避免那種一下子走到終點(diǎn)，然后又大修大改的情況。
因?yàn)槲覀冊(cè)谇皫撞揭呀?jīng)分別確定了頁面布局、圖表類型、頁面風(fēng)格特點(diǎn)，所以這一步我們需要用盡可能簡(jiǎn)單的方法 ，把之前幾步的成果在頁面上快速體現(xiàn)出來，然后根據(jù)樣圖效果嘗試確定五方面內(nèi)容：
之前確立的布局在放入設(shè)計(jì)內(nèi)容后是否依然合適
確立的圖表類型帶入數(shù)據(jù)后是否仍然客觀準(zhǔn)確
根據(jù)關(guān)鍵元素、色彩、結(jié)構(gòu)、質(zhì)感打造出的頁面風(fēng)格是否基本傳達(dá)出了預(yù)期的氛圍和感受
已有的樣式、數(shù)據(jù)內(nèi)容、動(dòng)效等在開發(fā)實(shí)現(xiàn)方面是否存在問題
大屏是否存在色差、文字內(nèi)容是否清晰可見、頁面是否存在變形拉伸等現(xiàn)象
跟大屏“溝通”是比較重要也是個(gè)特殊的環(huán)節(jié)，這也是我覺得大屏設(shè)計(jì)跟其它設(shè)計(jì)不一樣的地方，大屏有它自己獨(dú)特的分辨率、屏幕組成、色彩顯示以及運(yùn)行、展示環(huán)境，這里的很多問題只有設(shè)計(jì)稿投到大屏上才能夠被發(fā)現(xiàn)，所以這一步在樣圖溝通確認(rèn)環(huán)節(jié)非常重要，有時(shí)候需要開發(fā)出demo，反復(fù)測(cè)試多次。
7. 頁面定稿、開發(fā)
事實(shí)上頁面開發(fā)階段并不是到了這一步才進(jìn)行，這里說的頁面開發(fā)僅指前端樣式的實(shí)現(xiàn)，實(shí)際上后臺(tái)數(shù)據(jù)準(zhǔn)備工作在定義好分析指標(biāo)后就已經(jīng)開始進(jìn)行了，而我們當(dāng)前的工作是把數(shù)據(jù)接入到前端，然后用設(shè)計(jì)的樣式呈現(xiàn)出來。
8. 優(yōu)化調(diào)節(jié)與測(cè)試
這部分是指頁面開發(fā)完成后，將真實(shí)頁面投放到大屏進(jìn)行的測(cè)試與優(yōu)化。這里主要有兩部分工作。
視覺方面的測(cè)試(有點(diǎn)像APP的UI走查)：關(guān)鍵視覺元素、字體字號(hào)、頁面動(dòng)效、圖形圖表等是否按預(yù)期顯示、有無變形、錯(cuò)位等情況。
性能與數(shù)據(jù)方面的測(cè)試：圖形圖表動(dòng)畫是否流暢、數(shù)據(jù)加載、刷新有無異常;頁面長(zhǎng)時(shí)間展示是否存在奔潰、卡死等情況;后臺(tái)控制系統(tǒng)能否正常切換前端頁面顯示。
2.數(shù)據(jù)大屏設(shè)計(jì)尺寸解析
我們?cè)O(shè)計(jì)的可視化大屏通常可以分為兩類：
一類是拼接屏，由46-55寸的液晶顯示屏拼接而成，有一定的縫隙。
一類是LED屏無縫隙，是由成千上萬個(gè)LED燈構(gòu)成像素點(diǎn)，發(fā)光像素點(diǎn)之間的距離是LED顯示屏的規(guī)格，用P值表示，P值越小成像越優(yōu)秀細(xì)膩，對(duì)大屏類別的了解，有助于計(jì)算設(shè)計(jì)尺寸及比例。
大屏成像原理幾乎都是投屏，也就是把電腦屏幕通過有線信號(hào)投放到大屏上，電腦上呈現(xiàn)什么內(nèi)容，大屏上就會(huì)呈現(xiàn)什么內(nèi)容。
16:9（1920*1080）
16:9（3840*2160）
16:10（1920*1200）
21:9（3440*1440）
可拼接
3.可視化視覺設(shè)計(jì)
參考:小白必讀！大屏數(shù)據(jù)可視化設(shè)計(jì)的原則和流程
“清晰有效”是數(shù)據(jù)大屏的重點(diǎn)。
構(gòu)圖突出重點(diǎn)
在主要信息和次要信息的布局和所占面積上進(jìn)行調(diào)整
明確層級(jí)關(guān)系和流向，使觀者獲取信息時(shí)也能獲得視覺平衡感。
5.3 大屏開發(fā)工具DataV：
1.DataV數(shù)據(jù)可視化簡(jiǎn)介
DataV數(shù)據(jù)可視化是使用可視化應(yīng)用的方式來分析并展示龐雜數(shù)據(jù)的產(chǎn)品。DataV旨在讓更多的人看到數(shù)據(jù)可視化的魅力，幫助非專業(yè)的工程師通過圖形化的界面輕松搭建專業(yè)水準(zhǔn)的可視化應(yīng)用，滿足您會(huì)議展覽、業(yè)務(wù)監(jiān)控、風(fēng)險(xiǎn)預(yù)警、地理信息分析等多種業(yè)務(wù)的展示需求。
2.優(yōu)勢(shì)
高性能的三維渲染引擎
DataV將游戲級(jí)三維渲染的能力引入地理場(chǎng)景，借助GPU計(jì)算能力實(shí)現(xiàn)海量數(shù)據(jù)渲染，提供低成本、可復(fù)用的三維數(shù)據(jù)可視化方案，適用于智慧城市、智慧交通、安防監(jiān)控和商業(yè)智能等場(chǎng)景。
海量的炫酷圖表組件
DataV支持各類基礎(chǔ)圖表，接入ECharts、AntV-G2等第三方圖表庫，即便沒有設(shè)計(jì)師，也能搭建出高水準(zhǔn)的可視化應(yīng)用。
專業(yè)級(jí)地理信息可視化應(yīng)用
DataV支持地理軌跡、網(wǎng)格聚合、矢量散點(diǎn)、地理飛線、熱力分布、3D地球等效果，并支持同一個(gè)地理數(shù)據(jù)多層疊加。
多種數(shù)據(jù)源接入
DataV支持接入包括阿里云分析型數(shù)據(jù)庫、關(guān)系型數(shù)據(jù)庫、本地CSV上傳和在線API等多種數(shù)據(jù)源，并支持動(dòng)態(tài)請(qǐng)求。
多種行業(yè)模板
DataV定制了能源、電力、醫(yī)療、零售、制造、氣象、教育、旅游、物流、互聯(lián)網(wǎng)等多個(gè)行業(yè)數(shù)據(jù)模板，用戶簡(jiǎn)單修改即可使用，業(yè)務(wù)全景一目了然。
工業(yè)級(jí)數(shù)據(jù)可視化項(xiàng)目。
DataV新推出的專業(yè)版，面向軟件開發(fā)商和開發(fā)者，提供更靈活的項(xiàng)目權(quán)限管理方案、自定義組件開發(fā)工具和強(qiáng)大的交互配置能力。
易上手
DataV提供圖形化編輯頁面，使用簡(jiǎn)單拖拽的方式即可完成多種樣式和數(shù)據(jù)配置，無需編程就能輕松搭建。
安全性高
DataV支持加密發(fā)布，為您的數(shù)據(jù)安全保駕護(hù)航。
3.DataV數(shù)據(jù)可視化特性
4.DataV數(shù)據(jù)可視化案例展示
總結(jié)
以上是生活随笔為你收集整理的数据可视化系列-04数据大屏基础知识的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UVa1646Edge Case
- 下一篇： ZCMU-1646-盒子游戏