關(guān)于可視化大屏的制作，帆軟君了解到許多朋友關(guān)于數(shù)據(jù)可視化大屏的痛點(diǎn)問(wèn)題，如缺少美工素材、不知如何構(gòu)建數(shù)據(jù)可視化大屏場(chǎng)景、可視化細(xì)節(jié)調(diào)整困難、可視化多屏自適應(yīng)問(wèn)題等等。

為了幫大家快速上手可視化大屏的開(kāi)發(fā)，今天用FineReport為例詳細(xì)講解一下：

場(chǎng)景規(guī)劃

大屏場(chǎng)景的需求規(guī)劃，必定是大屏開(kāi)發(fā)的第一步。我們可以把大屏場(chǎng)景需求分?jǐn)?shù)據(jù)需求和風(fēng)格需求兩部分，同時(shí)兼顧大屏展示需求。

1、數(shù)據(jù)需求

在大屏開(kāi)發(fā)前，必須確定清楚需要展示的數(shù)據(jù)具體有哪些內(nèi)容，同時(shí)探明每部分?jǐn)?shù)據(jù)對(duì)實(shí)時(shí)性的要求，從而一一確定數(shù)據(jù)對(duì)應(yīng)的可視化元素。

以這張公司綜合展示大屏為例，大屏數(shù)據(jù)展示的內(nèi)容可分為“公司簡(jiǎn)介”、“產(chǎn)品介紹”、“經(jīng)營(yíng)狀況”和“人力資源”4個(gè)部分，每個(gè)部分對(duì)應(yīng)的數(shù)據(jù)實(shí)時(shí)性要求可能各不相同，例如公司和產(chǎn)品簡(jiǎn)介需要半年或者一年以上才需要手動(dòng)更新，而公司規(guī)模、銷售額等數(shù)據(jù)可能以月份甚至更大的頻率刷新，公司新簽單用戶等數(shù)據(jù)，則可能每日更新。

對(duì)簡(jiǎn)介信息，我們用報(bào)表塊里的圖片結(jié)合文字展示；對(duì)公司規(guī)模、銷售額，我們用指標(biāo)卡展示；對(duì)公司新簽單用戶，我們則用了可監(jiān)控刷新的表格；市場(chǎng)占有率、項(xiàng)目完成狀態(tài)等涉及百分比的數(shù)據(jù)，我們使用儀表盤(pán)或者水球圖展示……

2、風(fēng)格

在明確數(shù)據(jù)需求后，我們還需要規(guī)劃大屏風(fēng)格。

在色系風(fēng)格方面，首先給大家的第一條建議是“大屏盡量使用深色調(diào)”，除了深色比淺色用在大屏上更具科技感、更酷炫外，還有以下原因：

1.深色比淺色造成的視覺(jué)疲勞更少，更容易形成視覺(jué)聚焦；

2.深色可減少屏幕色差、拼接屏縫隙帶來(lái)的影響；

3.深色大屏比淺色大屏耗費(fèi)的能源更少，更環(huán)保。

對(duì)于大屏主色調(diào)的選擇，我們最常用的是藍(lán)色系，其次是青色，再次是紅、黃、綠等偏亮的顏色，其它色系并非不可用，但對(duì)新手而言是很難把控的。

除此之外，色調(diào)還需要考慮使用場(chǎng)景和行業(yè)屬性，例如IT、公安、水利行業(yè)重藍(lán)色調(diào)，電網(wǎng)、能源、環(huán)保行業(yè)重青綠色調(diào)，零售、電商行業(yè)的購(gòu)物節(jié)數(shù)據(jù)大屏多用歡快的紅黃色調(diào)，黨建主題大屏多用紅色調(diào)等等。

在布局排版方面，我們常見(jiàn)的布局方式有以下幾種。主要信息可以居中、居左、居右或者偏上展示，次要信息環(huán)繞主要信息。其中用大屏的“中心呈現(xiàn)主要信息、周圍對(duì)稱分布次要信息”是最穩(wěn)定、最好上手的結(jié)構(gòu)，也是最推薦剛上手大屏的用戶使用的布局方式。

大屏開(kāi)發(fā)工具

我所用的FineReport大屏依托決策報(bào)表制作，先新建一張決策報(bào)表，并選擇大屏常用的「絕對(duì)布局」方式；緊接著設(shè)置畫(huà)布大小，使之符合場(chǎng)景規(guī)劃中的大屏模板比例；然后就可以拖拽需要的組件到畫(huà)布中了。

大屏實(shí)踐開(kāi)發(fā)

1、選取模板：

進(jìn)入帆軟大屏官方demo系統(tǒng)，從大屏業(yè)務(wù)場(chǎng)景、數(shù)據(jù)指標(biāo)、整體風(fēng)格上綜合評(píng)估你需要的大屏模板。

2、下載模板：

進(jìn)入帆軟市場(chǎng)-模板庫(kù)下載選中的模板，在設(shè)計(jì)器中打開(kāi)這個(gè)模板，你可以另存為并基于這個(gè)模板的框架改造出你需要的大屏，或者參考這個(gè)模板的結(jié)構(gòu)、內(nèi)容重制一張大屏。

效果打磨

對(duì)于通過(guò)復(fù)用的方式制作好的大屏模板，我們需要經(jīng)歷更換數(shù)據(jù)源、調(diào)整圖表樣式、調(diào)整所有組件、補(bǔ)充特效4個(gè)步驟。

1、更換數(shù)據(jù)源

需要把復(fù)用過(guò)來(lái)的示例組件中的數(shù)據(jù)改為真實(shí)的大屏業(yè)務(wù)數(shù)據(jù)

2、調(diào)整圖表樣式

首先去掉大屏中不常用的圖表元素，如圖表原配的標(biāo)題、單系列圖表的圖例、密密麻麻的標(biāo)簽、圖表特效中的工具欄以及坐標(biāo)軸線、系列框線和背景的橫線等；

最后再根據(jù)大屏的色彩風(fēng)格調(diào)整系列配色，可以使用設(shè)計(jì)器內(nèi)置的配色方案，其中「xx高亮」系列為大屏專屬的配色；

3、調(diào)整所有組件

在我們將圖表調(diào)整成大屏適合的樣式后，還需要統(tǒng)一為組件添加背景、標(biāo)題，調(diào)整組件的文字、位置和大小。

4、補(bǔ)充效果

經(jīng)過(guò)以上效果調(diào)整后，大屏已經(jīng)基本滿足展示需要了，再添加一些跑馬燈、組件輪播、圖表高亮的效果，一張完整的大屏模板就制作成功了。

總結(jié)

以上是生活随笔為你收集整理的超全干货：数据可视化的设计总结，工具，技术要点统统都有的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。