正文

可視化大屏效果設(shè)計(jì)（可視化大屏效果設(shè)計(jì)方案）

發(fā)布時(shí)間：2023-03-14 16:47:26 稿源：創(chuàng)意嶺閱讀： 1228 問大家

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于可視化大屏效果設(shè)計(jì)的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。

ChatGPT國(guó)內(nèi)免費(fèi)在線使用，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁(yè)版、PC客戶端

官網(wǎng)：https://ai.de1919.com

本文目錄:

1、那些令人拍案叫絕的可視化大屏，不用代碼要如何實(shí)現(xiàn)？
2、企業(yè)數(shù)據(jù)可視化大屏用什么工具去實(shí)現(xiàn)？
3、如何利用可視化組件制作一個(gè)智慧園區(qū)大屏？
4、大屏可視化設(shè)計(jì)尺寸-高級(jí)指南

可視化大屏效果設(shè)計(jì)（可視化大屏效果設(shè)計(jì)方案）

一、那些令人拍案叫絕的可視化大屏，不用代碼要如何實(shí)現(xiàn)？

大屏的制作，可以用代碼開發(fā)或現(xiàn)成的可視化工具來實(shí)現(xiàn)。用的比較多的就是JS+Ecahrts，但數(shù)據(jù)量支撐、后臺(tái)響應(yīng)、實(shí)時(shí)更新、平臺(tái)運(yùn)維等應(yīng)該還要調(diào)用更多的技術(shù)，這個(gè)不是非常懂就不贅述了。另一種是用現(xiàn)成的可視化工具，能相對(duì)簡(jiǎn)單高效的搭建一個(gè)數(shù)據(jù)大屏，比如帆軟FineReport，阿里dataV。

大屏硬件：大屏的展示工具幾乎都是LED拼接屏，如果是boss辦公室這種也有用大屏幕顯示器的。用LED拼接屏，UI設(shè)計(jì)時(shí)不用考慮屏幕縫隙影響內(nèi)容的呈現(xiàn)，內(nèi)容不會(huì)丟失，但有可能影響視覺的表現(xiàn)。設(shè)計(jì)時(shí)需要建立縫隙位置的參考線避，免類重要信息被分割?，F(xiàn)在企業(yè)常用的有無縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏，縫隙越小越貴。拼接的每塊小屏一般是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。

接下來就來講講制作可視化大屏的重頭戲，指標(biāo)、布局、設(shè)計(jì)、動(dòng)效。以FineReport制作大屏為例，這篇文章將教你怎么實(shí)現(xiàn)可視化。

指標(biāo)設(shè)計(jì)：設(shè)計(jì)大屏，大家可能會(huì)被酷炫的可視化所感動(dòng)，但一定要謹(jǐn)記，大屏一定是以展示數(shù)據(jù)為核心，任何炫酷吊炸天的表現(xiàn)都要建立在不影響數(shù)據(jù)的有效展示上！所以，大屏首要考慮的是放哪些數(shù)據(jù)，那么多指標(biāo)應(yīng)該放那些？一般而言，一個(gè)大屏一定會(huì)有明確的主題，比如銷售數(shù)據(jù)大屏，集團(tuán)營(yíng)業(yè)數(shù)據(jù)大屏。針對(duì)這種主題明確的可視化，推薦一個(gè)非常好用的套路——多維度拆解北極星指標(biāo)法。

第一步：確定一個(gè)北極星指標(biāo)。如銷售大屏，你的銷售總額一定是最重要的吧，這就是主題。第二步：多維度拆解北極星指標(biāo)，把你的銷售額情況分解。

從時(shí)間的維度。每個(gè)季度每個(gè)月的銷售額情況是如何，銷售額特別高的時(shí)間段，原因是什么，做了哪些措施？從地理維度。各大區(qū)域銷售額情況如何？可以做個(gè)排名情況。從計(jì)劃維度。和年初定的計(jì)劃相比，差了多少？從占比維度。各個(gè)產(chǎn)品占的銷售額多少，哪些是帶來貢獻(xiàn)最多的明星產(chǎn)品。

二、企業(yè)數(shù)據(jù)可視化大屏用什么工具去實(shí)現(xiàn)？

思邁特軟件Smartbi的的分析工具就可以實(shí)現(xiàn)，全面的需求滿足能力

。

大數(shù)據(jù)分析平臺(tái)擁有全面的需求滿足能力，無論你是哪種用戶，在BI的哪個(gè)階段流程，有什么需求場(chǎng)景都能得到滿足。

1、全階段：融合傳統(tǒng)BI、自助BI、智能BI，滿足BI定義所有階段的需求。

2、全流程：提供數(shù)據(jù)連接、數(shù)據(jù)準(zhǔn)備、數(shù)據(jù)分析、數(shù)據(jù)應(yīng)用等全流程功能

3、全場(chǎng)景：提供復(fù)雜報(bào)表、數(shù)據(jù)可視化、自助探索分析、機(jī)器學(xué)習(xí)建模、預(yù)測(cè)分析、自然語(yǔ)言分析等全需求場(chǎng)景。

4、全用戶：為數(shù)據(jù)角色提供數(shù)據(jù)處理、數(shù)據(jù)準(zhǔn)備等功能，為分析角色提供數(shù)據(jù)分析相關(guān)功能，為管理決策人員提供資源發(fā)布、管理協(xié)同、社交協(xié)同、系統(tǒng)監(jiān)控、權(quán)限管理等功能，實(shí)現(xiàn)“人盡其才”！

數(shù)據(jù)可視化大屏展示有沒有用，來試試Smartbi就知道了,Smartbi產(chǎn)品功能設(shè)計(jì)全面，涵蓋數(shù)據(jù)提取、數(shù)據(jù)管理、數(shù)據(jù)分析、數(shù)據(jù)共享四個(gè)環(huán)節(jié)，幫助客戶從數(shù)據(jù)的角度描述業(yè)務(wù)現(xiàn)狀，分析業(yè)務(wù)原因，預(yù)測(cè)業(yè)務(wù)趨勢(shì)，推動(dòng)業(yè)務(wù)變革。

思邁特軟件Smartbi個(gè)人用戶全功能模塊長(zhǎng)期免費(fèi)試用

馬上免費(fèi)體驗(yàn):Smartbi一站式大數(shù)據(jù)分析平臺(tái)

三、如何利用可視化組件制作一個(gè)智慧園區(qū)大屏？

各地產(chǎn)業(yè)園區(qū)、工業(yè)園區(qū)、創(chuàng)意園區(qū)、科技園區(qū)等園區(qū)的投入建設(shè)日益增多，對(duì)于園區(qū)開發(fā)商或是運(yùn)營(yíng)商而言，將園區(qū)每天產(chǎn)生的數(shù)據(jù)實(shí)現(xiàn)實(shí)時(shí)管控，能夠更加高效地管理園區(qū)。在當(dāng)前數(shù)字化技術(shù)迅速發(fā)展的背景下，數(shù)據(jù)可視化是一個(gè)對(duì)于園區(qū)的建設(shè)和管理至關(guān)重要的概念，僅通過一張圖或是一個(gè)大屏，就可以將園區(qū)的各種數(shù)據(jù)進(jìn)行高度整合，實(shí)現(xiàn)園區(qū)數(shù)據(jù)綜合監(jiān)測(cè)，這就是可視化大屏的魅力所在。

接下來本文將詳細(xì)介紹如何利用山海鯨可視化軟件制作一個(gè) 智慧園區(qū)智能系統(tǒng)管理大屏的全過程。

一、新建大屏

在山海鯨可視化軟件中，新建大屏主要有兩種方式：

①新建空白項(xiàng)目自行完成設(shè)計(jì)和制作：

②通過軟件內(nèi)資源中心進(jìn)行關(guān)鍵詞檢索，載入模板后將模板數(shù)據(jù)替換成個(gè)人數(shù)據(jù)進(jìn)行制作：

新建空白大屏可選擇“添加新數(shù)據(jù)”，載入模板大屏可選擇“替換數(shù)據(jù)源”，而以上兩種新建大屏的方式均可以連接山海鯨數(shù)據(jù)管家進(jìn)行數(shù)據(jù)接入。數(shù)據(jù)導(dǎo)入過程可以在新建大屏后導(dǎo)入作為備用，也可以在所有組件設(shè)置完成后再導(dǎo)入。

二、設(shè)置組件

設(shè)計(jì)制作一張完整的可視化大屏離不開豐富的可視化組件，在智慧園區(qū)智能系統(tǒng)管理大屏內(nèi)運(yùn)用了多個(gè)圖表組件和多媒體組件進(jìn)行數(shù)據(jù)搭載：

1. 2D地圖組件

2D地圖組件可以用來展示和地理位置相關(guān)的數(shù)據(jù)信息。

在本大屏中，以園區(qū)所在區(qū)域?yàn)槔枚S地圖進(jìn)行展示，加入數(shù)據(jù)支撐后將數(shù)據(jù)落實(shí)在具體的地理位置，將大屏展現(xiàn)的數(shù)據(jù)信息與現(xiàn)實(shí)位置結(jié)合起來，使數(shù)據(jù)更可信易懂。

2. 環(huán)形圖組件

在環(huán)形圖組件中，通過將一個(gè)環(huán)形區(qū)域劃分為多個(gè)子區(qū)域，從而可以反映出不同子類數(shù)據(jù)之間的對(duì)比關(guān)系以及子類數(shù)據(jù)在大類中的百分比。

在本大屏中，園區(qū)“總?cè)藬?shù)”用環(huán)形圖組件展示，能直觀地體現(xiàn)各類人才在園區(qū)總?cè)藬?shù)中的占比。

3. 雷達(dá)圖組件

雷達(dá)圖適用于多維數(shù)據(jù)，能直觀地體現(xiàn)某一個(gè)對(duì)象多維度的數(shù)據(jù)。

在本大屏中，“園區(qū)分類”用雷達(dá)圖組件展示，直觀地體現(xiàn)園區(qū)中多個(gè)設(shè)備的數(shù)據(jù)，從而幫助我們了解其分布情況。

4. 數(shù)據(jù)表格組件

數(shù)據(jù)表格組件，即通過表格的形式來展示數(shù)據(jù)。

在本大屏中，園區(qū)中的行業(yè)類型和具體的公司名稱的多列數(shù)據(jù)用一個(gè)數(shù)據(jù)表格同時(shí)呈現(xiàn)，更直觀地統(tǒng)計(jì)了園區(qū)內(nèi)各類型公司的數(shù)據(jù)。

5. 百分比圖組件

百分比圖組件用來顯示某一指標(biāo)值在整體中的占比，多個(gè)百分比圖并列展示以突出各個(gè)指標(biāo)在不同整體內(nèi)的構(gòu)成情況。

在本大屏中，園區(qū)的設(shè)備運(yùn)行管理用百分比圖來呈現(xiàn)，采用條形的表現(xiàn)形式進(jìn)行了多組件的橫向?qū)Ρ取?/p>

6. 分組柱狀圖組件

柱狀圖利用柱子的高度，反映數(shù)據(jù)的差異。

在本大屏中，園區(qū)人數(shù)用分組柱狀圖來展示，直觀地體現(xiàn)了園區(qū)中不同區(qū)域的人員數(shù)量和差異。

7. 面積圖組件

面積圖組件是在折線圖的基礎(chǔ)上，對(duì)折線以下區(qū)域進(jìn)行顏色填充，用于在連續(xù)間隔或時(shí)間跨度上展示數(shù)值，常用來顯示趨勢(shì)和對(duì)比關(guān)系（多個(gè)面積塊之間的對(duì)比）。

在本大屏中，選擇面積圖組件來呈現(xiàn)園區(qū)各個(gè)區(qū)域擁堵指數(shù)，折線圖體現(xiàn)不同區(qū)域的擁堵峰值，而面積圖的對(duì)比表現(xiàn)出不同區(qū)域的擁堵差異。

在完成以上的組件設(shè)置后，一張智慧園區(qū)智能系統(tǒng)管理大屏就制作完成了。

三、導(dǎo)出分享大屏

大屏制作完成并保存之后，就可以進(jìn)行導(dǎo)出和分享。

1. 導(dǎo)出大屏

保存后的大屏可以導(dǎo)出到本地，根據(jù)不同的保存需求可以導(dǎo)出為：

①本地可編輯項(xiàng)目文件：

②服務(wù)器部署工程文件：

如果想將大屏項(xiàng)目發(fā)給他人，而對(duì)方想要繼續(xù)編輯該大屏項(xiàng)目，可以采用方式①；

如果想將大屏項(xiàng)目發(fā)給他人，而對(duì)方僅有查看大屏的需求，可以采用方式②。

2. 分享大屏

創(chuàng)建好的大屏可以分享為Web鏈接，公開分享有以下兩種方式：

①在“我的項(xiàng)目”頁(yè)面中的“全部項(xiàng)目”界面，點(diǎn)擊項(xiàng)目卡片上的“公開分享”按鈕可以打開公開分享設(shè)置窗口。

②在大屏編輯界面中點(diǎn)擊工具欄右側(cè)的“公開分享”按鈕可以打開公開分享的設(shè)置窗口。

同時(shí)，山海鯨可視化軟件提供了兩種分享方式：

①軟件中打開：分享之后的大屏只能用山海鯨可視化軟件或山海鯨瀏覽器打開。

②Web 頁(yè)面打開：分享之后的大屏可以使用任何瀏覽器打開。

以上就是利用山海鯨可視化軟件制作智慧園區(qū)智能系統(tǒng)管理大屏的全過程。

四、大屏可視化設(shè)計(jì)尺寸-高級(jí)指南

前言大屏可視化的設(shè)計(jì)尺寸定義，一直是很多設(shè)計(jì)師苦惱的一件事，很多時(shí)候大屏出現(xiàn)的問題，都是因?yàn)閷?duì)設(shè)計(jì)尺寸沒有一個(gè)正確的認(rèn)識(shí)導(dǎo)致。比如大屏內(nèi)容呈現(xiàn)不全、拉伸、壓縮、字號(hào)小的看不見等等，出現(xiàn)這樣的問題就會(huì)浪費(fèi)時(shí)間調(diào)整返工，本期我們就來認(rèn)認(rèn)真真的討論一下大屏的設(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)容。

在電腦上的交互操作大屏?xí)竭M(jìn)行，這就是投屏，看下圖所示，電腦上風(fēng)景圖投放到大屏上顯示。

雖然投屏的原理沒問題，但這樣的展示換成可視化頁(yè)面就會(huì)有問題，不知道你會(huì)不會(huì)發(fā)現(xiàn)，后面我們揭曉。

總結(jié)：

本章節(jié)只需要記住一句話“電腦上呈現(xiàn)什么內(nèi)容，大屏上就會(huì)呈現(xiàn)什么內(nèi)容”，所以電腦上出現(xiàn)滾條是絕對(duì)不可以的。

大屏和電腦同比例設(shè)計(jì) 首先要強(qiáng)調(diào)一點(diǎn)，不可以以大屏的分辨率定義設(shè)計(jì)稿尺寸，當(dāng)大屏的比例和電腦屏幕的比例一樣時(shí)，要結(jié)合電腦屏幕的分辨率來定設(shè)計(jì)稿尺寸。比如電腦屏幕分辨率為1920 1080，那設(shè)計(jì)稿就可以是這個(gè)尺寸，當(dāng)電腦屏幕是3840 2160（4K）屏?xí)r，可以用1920～3840*1080～2160同等比例任意數(shù)值。

當(dāng)電腦是4k分辨率時(shí)，雖然設(shè)計(jì)稿用1920*1080的設(shè)計(jì)尺寸也可以實(shí)現(xiàn)，但最終在大屏的呈現(xiàn)畫面清晰度不夠高。

原因是開發(fā)人員用1920*1080適配了4k分辨率，這本身就是同比放大關(guān)系，再加上投放中的畫質(zhì)損失就會(huì)更明顯，不過基本上也是可以接受的范圍內(nèi)。

雖然畫質(zhì)影響不大，但優(yōu)先級(jí)上更推薦電腦本身的分辨率3840*2160作為設(shè)計(jì)稿尺寸，這樣1比1的呈現(xiàn)最能保證畫面質(zhì)量。

前端開發(fā)上只需要按尺寸固定寫即可，下圖為4k設(shè)計(jì)稿，中間的圖像能相對(duì)更清晰。

4k設(shè)計(jì)稿（圖片來源51WORLD）

大分辨率的設(shè)計(jì)尺寸還有個(gè)優(yōu)勢(shì)就是可以呈現(xiàn)更多的內(nèi)容，同時(shí)在設(shè)計(jì)上的字號(hào)也要相對(duì)更大，比如1920上面16px字號(hào)，3840最好也能做到兩倍左右的放大。

當(dāng)然也完全可以用1920*1080設(shè)計(jì)尺寸設(shè)計(jì)，最后導(dǎo)出4k尺寸，也就是2倍圖，包括切圖也是導(dǎo)出2倍圖。

總結(jié)：

當(dāng)大屏電腦比例一致，電腦屏幕分辨率為1920*1080時(shí)，設(shè)計(jì)稿為電腦分辨率尺寸大?。?/p>

分辨率為3840 2160時(shí)設(shè)計(jì)稿優(yōu)先級(jí)是3840 2160、1920*1080、之間同比例數(shù)值，當(dāng)小于電腦分辨率時(shí)開發(fā)方式要適應(yīng)屏幕大小。

大屏和電腦不同比例設(shè)計(jì)

反面案例原因是設(shè)計(jì)師的設(shè)計(jì)尺寸按32:9設(shè)計(jì)，在電腦上呈現(xiàn)1:1沒有任何問題，投放到大屏上比例壓到20:9，因?yàn)橥斗抨P(guān)系頁(yè)面上所有的元素都會(huì)呈現(xiàn)壓癟狀態(tài)。所以開篇圖片投放案例，問題也出在不同比例的投放上，大屏上的圖片被拉伸變形，視覺上不會(huì)太明顯，但是可視化圖表的呈現(xiàn)就會(huì)很難受，比如餅圖被壓癟或拉伸。改正的方法就是按大屏的比例設(shè)計(jì)，保證大屏的正常呈現(xiàn)，電腦上差點(diǎn)無關(guān)緊要。本案例中兩臺(tái)顯示器組成32:9的屏幕投放并非是最優(yōu)的方案，接下來用一個(gè)案例來詳細(xì)解析。案例解析一個(gè)4 7的拼接大屏，分比率13440 4320，比例為28:9，如何給配置最合適的電腦比例屏幕投屏？

其實(shí)能找到28:9的最佳，但據(jù)我了解比較困難，我也咨詢很多這方面的公司，沒有定制顯示器比例的服務(wù)。所以就要找最接近的這個(gè)比例的顯示器，在某電商平臺(tái)查了個(gè)遍，最常見的有以下比例顯示器：1、16:9（1920 1080）2、16:9（3840 2160）3、16:10（1920 1200）4、21:9（3440 1440）

其實(shí)根據(jù)我們上面的結(jié)論，大分辨率的電腦顯示器擴(kuò)展性更強(qiáng)，所以首先考慮4k大分辨率顯示器，但16:9與28:9相差過大，如下圖所示：

這樣的一個(gè)壓縮程度在操作會(huì)存在一些問題，例如有交互的大屏，很小的按鈕就會(huì)被壓的很癟，導(dǎo)致點(diǎn)擊的精準(zhǔn)度下降，影響操作體驗(yàn)。下圖所示，用兩個(gè)屏幕組合成一個(gè)屏幕稱為32:9的比例，這樣是較為接近28:9，所以最為合適。

雖然兩個(gè)16:10的顯示器比例為29:9最為接近，但分辨率過低，沒有很強(qiáng)的擴(kuò)展性。所以前一章節(jié)分享的反例，20:9的大屏用16:9的顯示器更為合適，因?yàn)?6:9更接近大屏的比例。雖然理論上了我們可以找到最優(yōu)的方案，但現(xiàn)實(shí)工作中不一樣，例如某個(gè)事業(yè)單位一直都是16:9電腦屏投放28:9的大屏，你非說人家這樣不行，得加個(gè)顯示器，沒必要！我們身為設(shè)計(jì)師出于對(duì)產(chǎn)品的負(fù)責(zé)，可以提出建議，但不要去爭(zhēng)論，因?yàn)橛绊懖皇呛艽?，我們把大屏的完美呈現(xiàn)保證好才是最終目的?？偨Y(jié)：1、要以大屏的比例去定義設(shè)計(jì)稿，保證大屏完美呈現(xiàn)2、4k分辨率電腦，優(yōu)先使用大分辨率作為設(shè)計(jì)稿

圖片來源 https://www.finereport.com/

總結(jié)：每個(gè)信號(hào)源對(duì)應(yīng)一張?jiān)O(shè)計(jì)稿，n個(gè)信號(hào)源就是n張?jiān)O(shè)計(jì)稿。后語(yǔ) 大屏的設(shè)計(jì)是一個(gè)新興的設(shè)計(jì)學(xué)科，它同于APP設(shè)計(jì)，都需要考慮使用場(chǎng)景，不同于網(wǎng)頁(yè)設(shè)計(jì)，需要結(jié)合它獨(dú)有的特征，定義設(shè)計(jì)流程及規(guī)范。最后，相信認(rèn)真看完以上文章的你，對(duì)大屏的設(shè)計(jì)尺寸會(huì)有一個(gè)更深刻的認(rèn)識(shí)，并且當(dāng)遇到類似問題，也能夠迎刃而解。

轉(zhuǎn)自: https://tob.design/#/experience/detail/218

以上就是關(guān)于可視化大屏效果設(shè)計(jì)相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。