|
好萊塢大片《摩天營救》中有這么一個(gè)場景： 你可以看見反派大boss在屏幕上隨便點(diǎn)點(diǎn),，就能看到每個(gè)角落的具體情況，不禁讓人驚呼：滿滿的高科技,！ 其實(shí)這背后就是咱們今天要講的數(shù)據(jù)可視化：把相對復(fù)雜,、抽象的數(shù)據(jù)通過可視的方式以人們更易理解的形式展示出來的一系列手段，數(shù)據(jù)可視化是為了使用戶快速讀懂?dāng)?shù)據(jù)背后的含義,。 像電影里的這種叫做大屏數(shù)據(jù)可視化,，也是可視化的一種，通過大屏為數(shù)據(jù)展示載體,，特點(diǎn)是“大面積,、炫酷動(dòng)效、豐富色彩”,，并且在企業(yè)中有很多豐富的應(yīng)用場景： 最近剛接觸了一個(gè)大屏項(xiàng)目,，借此總結(jié)了一些可視化大屏制作經(jīng)驗(yàn)與大家分享。文章寫的比較細(xì),，請耐心閱讀 可視化大屏從制作到最后的展現(xiàn),，一般包含這5個(gè)步驟： 需求調(diào)研 大屏布局 可視化設(shè)計(jì) 大屏調(diào)試 上線運(yùn)營 1 這一階段分為4個(gè)部分，是大屏上線前的準(zhǔn)備,。 1,、硬件調(diào)研 大屏大屏，肯定得先有硬件,，才能將數(shù)據(jù)展示出來,。我們需要確定：大屏是否已買，大屏分辨率，大屏顯卡所支持的分辨率輸出,，顯卡是否支持自定義分辨率,，HDMI 線支持的分辨率。 同時(shí)我們還要確定設(shè)計(jì)稿尺寸,，既不能太大讓人感覺突兀,，也不能太小看不清數(shù)據(jù)指標(biāo)。 2,、業(yè)務(wù)需求調(diào)研 即大屏里要展示的內(nèi)容是什么,，和下面要講的排版布局是分不開的。當(dāng)然,，為了最大化數(shù)據(jù)對業(yè)務(wù)幫助,，我們要確定一些概括性詞語，是對一組或者一系列數(shù)據(jù)的統(tǒng)稱,，也就是關(guān)鍵指標(biāo),。 根據(jù)業(yè)務(wù)場景抽取關(guān)鍵指標(biāo) 一般情況下，一個(gè)指標(biāo)在大屏上獨(dú)占一塊區(qū)域,，所以通過關(guān)鍵指標(biāo)定義,，我們就知道大屏上大概會(huì)顯示哪些內(nèi)容以及大屏?xí)环譃閹讐K。 確定關(guān)鍵指標(biāo)后,，根據(jù)業(yè)務(wù)需求擬定各個(gè)指標(biāo)展示的優(yōu)先級(jí)（主,、次、輔）,。
樣例如下： 確定可視化圖表類型 確定關(guān)鍵指標(biāo)之后,，根據(jù)分析目標(biāo)確定指標(biāo)分析維度，可以從聯(lián)系,、分布,、比較、構(gòu)成四個(gè)角度去考慮我們想通過可視化表達(dá)什么樣的信息,，從而確定數(shù)據(jù)之間的關(guān)系 聯(lián)系：數(shù)據(jù)之間的相關(guān)性 分布：指標(biāo)里的數(shù)據(jù)主要集中在什么范圍,、表現(xiàn)出怎樣的規(guī)律 比較：數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面 構(gòu)成：指標(biāo)里的數(shù)據(jù)都由哪幾部分組成,、每部分占比如何 然后就可以根據(jù)數(shù)據(jù)之間的關(guān)系選擇相對應(yīng)的展示圖表,，這邊給一張圖表選擇指南： 以一份購物城數(shù)據(jù)為例： 3,、數(shù)據(jù)質(zhì)量調(diào)研 數(shù)據(jù)來源：填報(bào),、讀業(yè)務(wù)庫、讀中間庫 數(shù)據(jù)單位：單位,、小數(shù)位 數(shù)據(jù)更新頻率：實(shí)時(shí),、準(zhǔn)實(shí)時(shí) 4、功能調(diào)研 包括很多：是否需要下鉆、輪播,、自定義地圖,、擴(kuò)展圖表等，就拿圖表來舉例吧,，當(dāng)確定了某個(gè)數(shù)據(jù)關(guān)系類型后,，就可以根據(jù)該數(shù)據(jù)的使用場景查找出相對應(yīng)的圖表和使用建議，并在其中進(jìn)行選擇,。 2 1,、布局排版 俗話說得好，長得好看的人底子肯定好,，那對于大屏來說,，它的底子就是排版布局，如果排版布局都不行,，就算后面的可視化再酷炫,，給人的整體感覺也是一團(tuán)糟。 那怎么布局排版呢,？還是按照主,、次、輔的順序：
一般把有關(guān)聯(lián)的指標(biāo)讓其相鄰或靠近，把圖表類型相近的指標(biāo)放一起,，這樣能減少觀者認(rèn)知上的負(fù)擔(dān)并提高信息傳遞的效率,。 這里給大家舉例幾種常見的排版布局： 2、大屏制作 開發(fā)可視化大屏,，一般有兩種方式,，一是用代碼開發(fā)，還有一種是用現(xiàn)成的可視化工具制作,。 用的比較多的就是JS+Echarts,，但數(shù)據(jù)量支撐、后臺(tái)響應(yīng),、實(shí)時(shí)更新,、平臺(tái)運(yùn)維等應(yīng)該還要調(diào)用更多的技術(shù)，非?？简?yàn)技術(shù)水平,，所以我推薦直接用可視化工具制作,，比如FineReport，簡單又方便,，自帶的圖表插件可視化效果很炫酷,。下面就以FineReport為例子，演示一下如何制作下面這樣一張可視化大屏 2.1,、新建決策報(bào)表 FineReport有三種報(bào)表模式,，普通報(bào)表適合用來做一些常規(guī)類型的統(tǒng)計(jì)報(bào)表，聚合報(bào)表主要用來做中國式的復(fù)雜表,，決策報(bào)表適合用來制作大屏或者駕駛艙,。 因此，我們選擇決策報(bào)表來制作一張大屏,，打開FineReport設(shè)計(jì)器的決策報(bào)表模式,，新建決策報(bào)表： 設(shè)置自適應(yīng)屬性點(diǎn)擊菜單模板>表單報(bào)表塊自適應(yīng)屬性，取消勾選使用全局配置,，選擇字體不自適應(yīng),、表格雙向自適應(yīng)，如下圖所示： 設(shè)置布局方式選中 body,，選擇屬性,，設(shè)置布局方式為絕對布局、縮放邏輯為適應(yīng)區(qū)域,。如下圖所示：
2.2,、新建數(shù)據(jù)集 新建數(shù)據(jù)集：
2.3、設(shè)計(jì)報(bào)表 我們按照之前設(shè)計(jì)好的布局,，將圖表組建拖拽到對應(yīng)位置,，然后分別定義好數(shù)據(jù)鏈接，大屏雛形就完成了：
3 定義設(shè)計(jì)風(fēng)格 每個(gè)公司的風(fēng)格是不一樣的,，所以要先考慮大屏的定位,，用戶群體，公司品牌,，年齡層,，這樣設(shè)計(jì)出來的大屏才是符合公司特點(diǎn)且讓管理層滿意的。 配色 大屏背景最好使用深色暗色背景,，因?yàn)樯钌瞪尘翱蓽p少拼縫帶來的不適感,，而且還能夠減少屏幕色差對整體表現(xiàn)的影響；同時(shí)暗色背景更能聚焦視覺,，也方便突出內(nèi)容,、做出一些流光、粒子等酷炫的效果 給大家?guī)讉€(gè)推薦的配色方案：
背景不一定要用顏色,，也可以采用深色系的圖片,，可以搭配其他一些現(xiàn)實(shí)特性可以讓整體看著更有科技感,。推薦使用一些帶有星空,、條紋,、漸變線、點(diǎn)綴效果之類的圖片等,。 統(tǒng)一圖表系列,、標(biāo)簽配色
點(diǎn)綴 在大屏展現(xiàn)上，細(xì)節(jié)會(huì)極大的影響整體效果,，需要通過適當(dāng)給元素,、標(biāo)題、數(shù)字等添加一些諸如邊框,、圖畫等在內(nèi)的點(diǎn)綴效果,，能幫助提升整體美觀度。
動(dòng)態(tài)效果 到上一步,，其實(shí)一張大屏就完成的差不多了,，如果你覺得不夠炫酷，還可以使用一些3D動(dòng)效的圖表插件,，增加科技感,，F(xiàn)ineReport提供很多這樣的插件可以使用：
最后保存，點(diǎn)擊預(yù)覽,，一張完美的可視化大屏就制作完成了：
4 1,、大屏調(diào)試的流程：
2、大屏要調(diào)試哪些,？ （1）視覺方面地測試 關(guān)鍵視覺元素,、字體字號(hào)、頁面動(dòng)效,、圖形圖表等是否按預(yù)期顯示,、有無變形、錯(cuò)位等情況,。 （2）性能與數(shù)據(jù)方面地測試 圖形圖表動(dòng)畫是否流暢,、數(shù)據(jù)加載、刷新有無異常,；頁面長時(shí)間展示是否存在奔潰,、卡死等情況；后臺(tái)控制系統(tǒng)能否正常切換前端頁面顯示,。 5 主要檢測有沒有熄屏問題和播放周期是否符合,，如果符合就可以上線運(yùn)行了。
|
|
|
