文章目錄

• 5.銷售數據看板
• • 5.1 了解數據大屏基礎知識
  • • 1.數據大屏簡介：
    • • 2.數據大屏使用場景
      • 3.數據大屏分類
    • 5.2 數據大屏的設計：
    • • 1.大屏前端設計流程
      • 2.數據大屏設計尺寸解析
      • 3.可視化視覺設計
    • 5.3 大屏開發工具DataV：
    • • 1.DataV數據可視化簡介
      • 2.優勢
      • 3.DataV數據可視化特性
      • 4.DataV數據可視化案例展示

5.銷售數據看板

參考：深度好文：一文掌握數據大屏設計與制作

5.1 了解數據大屏基礎知識

1.數據大屏簡介：

可視化數據大屏是以數據可視化的方式在一個或多個LED大屏幕上、液晶顯示屏上顯示業務的一些關鍵指標，以大屏幕為主要顯示載體的數據可視化設計。

2.數據大屏使用場景

可視化大屏在政府、商業、金融、制造等行業的業務場景中出現較多。例如
城市智能運營中心
應急指揮中心
公安監控中心
電力調度中心
金融交易大廳
可視化大屏具有日常監測、分析判斷、展示匯報等多種功能，

3.數據大屏分類

一、展示類
展示類的場景一般是指企事業單位為了展示其核心經營理念、核心的公司戰略/公司品牌理念，業務亮點、主要對外展示的整體公開數據等。目的是對外呈現企業的整體宏觀數據，向領導匯報業務成果，向業界展示業務實力。
例如，某大型集團展示其員工總數、納稅總額、分支結構、在建項目等，主要展示其公司的整體實力。主要用于領導或同行的參觀介紹、對外形象展示等。
展示類場景大部分采用平鋪的方式來布局展現信息，風格符合企業整體的UI，美觀大氣。配套數據大屏需要有相關的講解腳本，突出業務亮點。
展示類大屏對大屏的交互性一般要求不是很高，主要側重美觀度和震撼力。

二、監控類
監控類數據大屏的關注重點是在業務方監控關鍵點上，實時跟蹤業務數據變化，對異常數據及時告警，從而保證業務正常運行。例如，生產制造型企業需要對整個生產過程的數據進行監控，如果發現運行異常，便需要及時通知到產線人員，及時排查原因，解除故障，保證生產作業正常進行。
監控類數據大屏根據不同業務和使用場景中需要監控的內容類型不同，需要對IOT、設備、視像頭都硬件數據進行采集跟蹤，通過圖像、視頻、可視化圖表等多種可視化手段結合使用，數據狀態變化表現要明顯、及時。
大屏設計時要保證數據的高度實時性，同時，要充分考慮監控使用人員認知習慣，監控痛點，被監控事物關鍵狀態及傳統展現形式。

三、分析類
分析類數據大屏主要用于展示和分析企業實際具體的業務數據，并通過對數據的鉆取、聯動、透視等交互性操作，挖掘出數據背后的原因，通過數據可視化為管理決策提供科學的數據支持。例如，企業經營管理的財務數據的營業收入、利潤、現金流、應付賬款等財務指標發生變化，需要按照不同的業務單元、時間等維度，分析其變化的原因。
分析類數據大屏要求對數據邏輯和業務了解比較深入，設計出的可視化元素需要時具體的分析結果的展示，對數據的規范性、關聯性、邏輯性要求較高，對大屏設計人員的業務能力和數據分析能力要求也比較高，所以設計難度較大。
同時，分析類大屏會被經常用于企業經營分析會議，需要基于大屏成果進行深度分析，鉆取、聯動、切片、篩選、透視等交互分析能力要求很高。

5.2 數據大屏的設計：

參考:小白必讀！大屏數據可視化設計的原則和流程
數據可視化大屏設計步驟，有3步流程
大屏可視化設計尺寸高級指南

1.大屏前端設計流程

1. 根據業務需求分定優先級
關鍵指標是一些概括性詞語，是對一組或者一系列數據的統稱。通過規定主，次，輔，三個指標的關鍵詞來概念性的清晰大屏的主要展示內容，例如我們做的一個照明的監測項目，我們可以歸類成這三種：

主：主要指標位于屏幕中央，為地圖展現照明區域使用數據。
次：次要指標位于屏幕兩側以圖表的形式展現。
輔：主要指標的補充信息鼠標點擊或懸停展示以及交互動效展示。

2. 通過指標分析維度確定圖表類型

同一個指標的數據，從不同維度分析就有不同結果。如果分析的維度沒有找準或定義的比較混亂，就會使可視化圖表無法清晰的看清楚含義，使人困惑。這里我們引用Stephen Few 的文章 《Visual Business Intelligence》的四項維度-比較，聯系，分布，構成，來分析數據的邏輯性。

聯系：數據之間的相關性
分布：指標里的數據主要集中在什么范圍、表現出怎樣的規律
比較：數據之間存在何種差異、差異主要體現在哪些方面
構成：指標里的數據都由哪幾部分組成、每部分占比如何

3. 根據大屏尺寸，規劃頁面布局，確立交互稿

確立圖表類型后，下一步要進入到布局具體的信息位置，確立交互稿的步驟。確立交互稿的第一步就是要確定大屏的尺寸。

尺寸確立后，接下來要對設計稿進行布局和頁面的劃分。布局這里就要參考第一項的業務需求優先級來布局畫面分割面積。核心業務指標安排在中間位置、占較大面積;其余的指標按優先級依次在核心指標周圍展開。

一般把有關聯的指標讓其相鄰或靠近，把圖表類型相近的指標放一起，這樣能減少觀者認知上的負擔并提高信息傳遞的效率。視覺上要盡量規避文字羅列或圖表羅列，注意方圓圖表的面積比例問題等，也是布局期間需要注意的事項。

4. 確定設計風格

很多小伙伴也許沒接觸過大屏設計工作，但大多數人都應該有APP或者Web風格定義的經驗。大屏雖酷炫，但實際上也是運行在瀏覽器里的Web頁面。

5. 可視化設計

根據定義好的設計風格與選定的圖表類型進行合理的可視化設計。目前來講大屏可視化主要有指標類信息點和地理類信息點兩大可視化數據。指標類信息點可視化效果相對簡單易實現，而地理類信息點一般可視化效果酷炫，但是開發相對困難，需要設計師跟開發多溝通的。地理類信息一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可交互實時演算等特點，所以對于被投電腦、大屏拼接器等硬件設備的性能會有要求，硬件配置不夠的情況下可能出現卡頓甚至崩潰的情況，所以這點也是需要提前溝通評估的。

6. 樣圖溝通確認

這里的溝通分三個層面：設計師對內溝通、設計師對外溝通、設計師與大屏的“溝通”。

樣圖溝通環節，最初的樣圖不需要十分精致，我們可以把它理解為一個“低保真”原型，然后通過不斷溝通修改，讓它逐步完善精致起來，也就是小步快跑，避免那種一下子走到終點，然后又大修大改的情況。

因為我們在前幾步已經分別確定了頁面布局、圖表類型、頁面風格特點，所以這一步我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現出來，然后根據樣圖效果嘗試確定五方面內容：

之前確立的布局在放入設計內容后是否依然合適
確立的圖表類型帶入數據后是否仍然客觀準確
根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受
已有的樣式、數據內容、動效等在開發實現方面是否存在問題
大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象

跟大屏“溝通”是比較重要也是個特殊的環節，這也是我覺得大屏設計跟其它設計不一樣的地方，大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環境，這里的很多問題只有設計稿投到大屏上才能夠被發現，所以這一步在樣圖溝通確認環節非常重要，有時候需要開發出demo，反復測試多次。

7. 頁面定稿、開發

事實上頁面開發階段并不是到了這一步才進行，這里說的頁面開發僅指前端樣式的實現，實際上后臺數據準備工作在定義好分析指標后就已經開始進行了，而我們當前的工作是把數據接入到前端，然后用設計的樣式呈現出來。

8. 優化調節與測試

這部分是指頁面開發完成后，將真實頁面投放到大屏進行的測試與優化。這里主要有兩部分工作。

視覺方面的測試(有點像APP的UI走查)：關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。

性能與數據方面的測試：圖形圖表動畫是否流暢、數據加載、刷新有無異常;頁面長時間展示是否存在奔潰、卡死等情況;后臺控制系統能否正常切換前端頁面顯示。

2.數據大屏設計尺寸解析

我們設計的可視化大屏通常可以分為兩類：

一類是拼接屏，由46-55寸的液晶顯示屏拼接而成，有一定的縫隙。
一類是LED屏無縫隙，是由成千上萬個LED燈構成像素點，發光像素點之間的距離是LED顯示屏的規格，用P值表示，P值越小成像越優秀細膩，對大屏類別的了解，有助于計算設計尺寸及比例。

大屏成像原理幾乎都是投屏，也就是把電腦屏幕通過有線信號投放到大屏上，電腦上呈現什么內容，大屏上就會呈現什么內容。

16:9（1920*1080）
16:9（3840*2160）
16:10（1920*1200）
21:9（3440*1440）
可拼接

3.可視化視覺設計

參考:小白必讀！大屏數據可視化設計的原則和流程

“清晰有效”是數據大屏的重點。
構圖突出重點
在主要信息和次要信息的布局和所占面積上進行調整
明確層級關系和流向，使觀者獲取信息時也能獲得視覺平衡感。

是要服務于業務，讓業務指標和數據合理的展現

合理的布局能讓業務內容更富有層次，合理的配色能讓觀看者更舒適

在大屏展現上，細節也會極大的影響整體效果

動效的適當增加能讓大屏看上去是活的，增加觀感體驗

5.3 大屏開發工具DataV：

1.DataV數據可視化簡介

DataV數據可視化是使用可視化應用的方式來分析并展示龐雜數據的產品。DataV旨在讓更多的人看到數據可視化的魅力，幫助非專業的工程師通過圖形化的界面輕松搭建專業水準的可視化應用，滿足您會議展覽、業務監控、風險預警、地理信息分析等多種業務的展示需求。

2.優勢

高性能的三維渲染引擎
DataV將游戲級三維渲染的能力引入地理場景，借助GPU計算能力實現海量數據渲染，提供低成本、可復用的三維數據可視化方案，適用于智慧城市、智慧交通、安防監控和商業智能等場景。
海量的炫酷圖表組件
DataV支持各類基礎圖表，接入ECharts、AntV-G2等第三方圖表庫，即便沒有設計師，也能搭建出高水準的可視化應用。
專業級地理信息可視化應用
DataV支持地理軌跡、網格聚合、矢量散點、地理飛線、熱力分布、3D地球等效果，并支持同一個地理數據多層疊加。
多種數據源接入
DataV支持接入包括阿里云分析型數據庫、關系型數據庫、本地CSV上傳和在線API等多種數據源，并支持動態請求。
多種行業模板
DataV定制了能源、電力、醫療、零售、制造、氣象、教育、旅游、物流、互聯網等多個行業數據模板，用戶簡單修改即可使用，業務全景一目了然。
工業級數據可視化項目。
DataV新推出的專業版，面向軟件開發商和開發者，提供更靈活的項目權限管理方案、自定義組件開發工具和強大的交互配置能力。
易上手
DataV提供圖形化編輯頁面，使用簡單拖拽的方式即可完成多種樣式和數據配置，無需編程就能輕松搭建。
安全性高
DataV支持加密發布，為您的數據安全保駕護航。

3.DataV數據可視化特性

4.DataV數據可視化案例展示

總結

以上是生活随笔為你收集整理的数据可视化系列-04数据大屏基础知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。