大屏數據可視化規範總結

2020-12-14 人人都是產品經理

最近關於大屏的項目做的比較多，目前手頭項目結束，有時間將內容整理分享，基於目前手上的某省監獄項目做可視化大屏規範分享希望能對大家有所幫助。

大屏數據可視化概念

數據可視化，是關於數據視覺表現形式的科學技術研究。其中，這種數據的視覺表現形式被定義為，一種以某種概要形式抽提出來的信息，包括相應信息單位的各種屬性和變量。

上述文字來自百度百科，做了許多大屏之後，可總結大屏分為信息展示、數據分析、監控預警三大類。利用屏幕大可展示信息多的特點，將複雜、抽象的內容通過可視化更加直觀的方式，以易於理解的形式幫助人們更好決策。

設計需求了解

1. 需求分析

一般產品經理需要想清楚大屏展示的內容動線，需要給觀者講述什麼故事，由於視覺展示往往也起著決定性作用。所以在需求分析排布時設計師需要提前加入項目中了解項目需求，以展示問題解決問題為目標將業務模塊理出順序。

2. 視覺設計

平時利用Eagle這款圖片收藏軟體很好的幫助我在需要靈感素材時快速上手。

關鍵詞：FUI \ HUD \  SCI-FI

設計網站：behance、dribbble、站酷、Tob.design、UI中國、花瓣、pinterest

業務場景：智慧園區、智慧安防、智慧交通、智慧城市、智慧監獄、智慧水利、智能客服、智慧倉儲、智慧醫藥、智慧零售、智慧工業、數字港口、智慧工程

3. 硬體了解

數據可視化最終落地平臺一般有① 大屏、② 拼接屏、③ LED大屏、④ DLP大屏（無縫隙拼接市場佔有率較高）、⑤ LCD、⑥ PDP（3mm拼接縫隙）需要清除了解大屏物理尺寸及視頻輸出解析度，確定設計稿尺寸。

根據需求內容及硬體尺寸確定頁面布局方式，以下布局為常用布局方式，在實際工作中可能會遇到相同的需求內容會展示在不同比例的大屏硬體中，這時將設計稿的設計尺寸高度固定，地圖寬度自適應，用一個設計稿一次開發解決不同尺寸適配問題。

4. 圖表類型選擇

將抽象的需求用圖表的形式展示，一般圖表分① 比較類 ② 佔比類  ③區間類 ④關聯類 ⑤ 趨勢類 ⑥ 時間類 ⑦ 地圖類。

不同展示內容選用不同形式的圖表，但有時候為了視覺效果豐富，不會在一個大屏裡顯示相同的圖表展示方式，這時需要了解圖表特性與需求內容將圖表差異化展示。並在項目積累到一定程度時整合圖表庫以便於下次項目快速設計避免重複工作。

5. 字體字號選擇

一般大屏設計與開發儘量選擇自帶字體微軟雅黑，數字字體選用din，特殊字體可將字體包給到開發嵌入程序中。

由於甲方客戶多為政府機關，字體要求也會比較大一些，16px為正文字號，最小字號14px，在設計時對這些規範靈活應用。

6. 顏色

顏色選用應以信息展示清晰為最基本要素，在主次清晰的情況下選擇視覺效果較舒適的顏色搭配，在此之前需要了解大屏的顯色模式，在不支持漸變色的情況下儘量避免漸變色的使用。

在演示搭配時選擇「631」搭配原則，頁面中60%使用主色調，30%使用輔助色調，10%使用對比色調。

7. 基礎組件

在前端調用一些現成圖表組件時候，添加一些背景組件能夠豐富畫面，增強頁面層次。

以下是幾種組件的展示樣式供大家參考，這裡也感謝組內小夥伴@梁祝。

設計注意事項

（1）屏幕投射效果不佳

如果條件允許的情況下應當設計前先用已經完成的不同風格的大屏設計在屏幕上投放，了解顏色差距，對比色臨近色漸變色在大屏上是否存在色差，如若效果不好應適當避免效果差的設計方式。

（2）等比例放大投射會發虛問題

首先需要明白幾個概念：①大屏邏輯解析度（設計解析度）② 顯卡輸出解析度 ③ 視頻矩陣切換器（DVI）支持解析度 ④ 大屏實際物理解析度 。

當顯卡輸出解析度=DVI支持解析度時顯示效果最佳，另外多個信號源投射優於單個信號源投射 。

（3）大屏顯示被拉伸或壓縮

一般情況下，前端只需要對設計稿還原就好，可能由於視頻擴展器顯示不正確導致壓縮或拉伸，現在需要了解被壓縮的比例，對其進行校正，再者可以通過視頻自定義解析度解決問題。

（4）圖表類樣式參考及實現

圖表工具：echarts、hichcharts  。第三方開發工具：datav數據可視化、騰訊雲圖、百度智能雲。原生開發：HTML5、JS、CSS、WebGL、unity。

 

本文由@宋佳 原創發布於人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash， 基於CC0協議

相關焦點

  • 「新冠疫情分析管控數據可視化」大屏設計總結
    此刻，疫情仍然在蔓延，如何利用全面、有效，及時的數據和可視化技術準確感知疫情態勢，為決策者、管理人員提供宏觀數據依據，節省決策時間，讓數據可視化成為管理者和時間賽跑的幫手，是快速打贏這場「戰疫」的關鍵。在家為祖國做貢獻期間，設計了該NCP疫情數據可視化大屏，並總結了一些關於數據可視化大屏設計的思考。
  • 數據可視化大屏設計實戰分享
    重點概覽：了解數據可視化圖表設計指南；具體設計思路；大屏優化設計總結一、了解數據可視化可視化是為了幫助用戶更好的分析數據，信息的質量很大程度上依賴於其表達方式。四、大屏優化設計本次可視化大屏主要是為了實時展示相關數據監控情況，不同於網頁版可視化設計的展示
  • 6大數據可視化應用設計規範
    本文講述了六個數據可視化應用規範：包括圖表分類、畫面布局、硬體設施、字體字號、畫面配色、畫面飽滿和畫面動效。今天為大家帶來的是數據可視化應用設計規範，談談我在設計過程中的一些經驗以及分享。
  • 大數據可視化大屏設計經驗,教給你
    大數據產業正在用一個超乎我們想像的速度蓬勃發展，大數據時代的來臨，越來越多的公司開始意識到數據資源的管理和運用，大數據可視化大屏展示被更多的企業青睞，身為UI設計師的我們，也要緊跟時代的步伐學習這方面的設計。
  • 大公司都是怎麼做數據可視化規範的
    2019年穀歌（Google）和倫敦城市智能（London City Intelligence）相繼將數據可視化指南納入設計規範系統中。數據可視化在企業決策和品牌價值弘揚中起到了越來越重要的作用。如何從中啟發來構建自己的數據可視化設計指南？企業或組織進行數據可視化時，需要用數據可視化設計指南來規範信息表示形式。通常包括是什麼（圖表的類型有哪些？）、為什麼（如為什麼使用這個顏色？）和怎麼做（如用什麼工具設計？）。如果涉及到一些設計工具，如Excel、R、D3.js或Tableau，可視化指南還會提供一個模板來演示如何應用。
  • 大屏可視化—教育服務大數據模板
    課堂監管大屏前面五期小編在網上找了一些常用的大屏可視化模板（有需要的小夥伴們，可以點擊下面的連結直達，文章末尾了解更多都有直接獲取demo的地址）。好多小夥伴都在評論區留言想要關於教育行業的大屏可視化demo，小編苦苦追尋終於找到了，他來了，他帶著教育服務大數據模板來了，點擊文章末尾連結更多可直接獲取。
  • 與Excel圖表相比,交互式數據可視化大屏的優勢有哪些?(1)
    編輯導語：數據可視化，這是近年來一個熱度比較高的詞，將數據以視覺形式來呈現，如圖表或地圖，以幫助人們了解這些數據的意義。數據可視化大屏，是當前可視化領域的一項熱門應用，好的數據可視化大屏是布局、色彩、圖表、動效的綜合運用。與Excel圖表相比，交互式數據可視化大屏的優勢有哪些？
  • 開發數據可視化大屏,你還在寫代碼嗎?OUT了!
    數據可視化大屏作為最直觀，最有效的信息傳遞方式已經被廣泛接受。技術的發展也使得數據可視化大屏的開發越來越簡單。一些用Echarts等第三方前端可視化框架做數據可視化大屏開發的程序猿們，一定深有感觸：儘管這些第三方組件包含了許許多多的圖表元件，甚至還提供了詳盡的JS代碼，但是由於每個用戶的大屏需求都不一樣，每次大屏開發都得寫不少前端代碼，改很多CSS樣式。
  • 數據可視化基本套路總結
    文章總結了多種數據可視化圖形，並簡要介紹了各種圖形的作用，能為科研工作者在數據可視化階段提供新的思路，在此分享給大家。本文旨在總結數據可視化基本套路，理解了本文的內容，就算不能在數據可視化比賽中拿獎，應付日常工作應該也夠了。熟悉了套路怎麼看，再結合專業知識，就可以解釋可視化結果了。
  • 只要10分鐘,教你配置出炫酷的數據可視化大屏
    現在這種立體化大屏幕似乎成了好萊塢大片的標配。其實，這種逼格很高的鏡頭就是一個數據可視化大屏。隨著社會信息化的高速增長，數據可視化大屏已經在很多商業領域彰顯價值。比如會議展廳、園區管理、城市交通調度中心、公安指揮中心、企業生產監控等重要場所。
  • 案例解析:電商大屏數據可視化設計經驗分享
    本文結合大量實際案例，來與大家分享電商類大屏設計的經驗，帶你了解電商大屏的設計技法與思考。數據可視化大屏設計大多以藍色調為主，因為藍色比較容易營造大屏所追求的科技感，所以在眾多行業中運用最廣泛。例如公安系統、城市交通、科技公司、政企單位、製造業等眾多行業。
  • 免費分享｜十個不同行業的數據可視化大屏模板/上
    袋鼠雲利用數據可視化將整個系統的運作情況展示在大屏上，節約人力資源實時維護的投入，轉為以大屏的形式進行實時的監控，實現穩定高效的目的。，點擊某條信息可進入相關明細大屏。保持色調風格統一，針對某一學院或部門需求針對某一主題設計數據可視化大屏，設計浙大在線教育、科研數字大腦、行政辦事服務、財務系統、釘釘應用數據等多個場景。
  • 可視化大屏設計案例全方位復盤!
    前言 隨著大數據產業的蓬勃發展，很多企業都開始應用數據可視化。所以數據可視化設計，絕對是熱門的設計之一。很多UI設計師突然會接到公司數據可視化設計的需求，如果不了解數據可視化設計，肯定是一頭霧水，不知從何入手。本文結合最近設計案例，分享大屏可視化設計過程中的遇到的一些問題以及設計思路，供大家一起交流與學習。
  • 大屏可視化:設計尺寸-高級指南
    大屏的類別及成像 我們設計的可視化大屏通常可以分為兩類：一類是拼接屏，由46-55寸的液晶顯示屏拼接而成，有一定的縫隙； 一類是LED屏無縫隙，是由成千上萬個LED燈構成像素點，發光像素點之間的距離是LED顯示屏的規格，用P值表示，P值越小成像越優秀細膩，對大屏類別的了解
  • 可視化大屏「華而不實」?試試這個BI工具
    「我們公司想做個大屏，數據已經Excel列好了，一周能做出來嗎？」如果按照以上需求來，可視化大屏幾天就能做完展示出來，但這樣的大屏只是「花架子」，即使做得再炫酷，實際作用寥寥。但其實，可視化大屏做得好不好，酷炫是其次，能夠讓人一目了然看到關鍵信息，聯繫到業務實際，輔助科學決策，才是最需要關注的方向。那麼，什麼樣的大屏才是真正有內涵的、有價值的大屏呢？
  • 免費分享｜十個不同行業的數據可視化大屏模板 / 下
    在模型旁邊加上一圈邊界勾勒使整個大屏看上去不會那麼單調。監測平臺相對來說沒有那麼多的指標，所以大屏下方主要集中在展位累計熱度分析、會場人員狀態實時監測、會場留存人數三個緯度。作為國內領先的數據智能踐行者，袋鼠雲以使紛繁複雜的數據可視、可感、可知為使命。根據杭州銀行的現狀，袋鼠云為其量身定製了數據可視化大屏，平臺將銀行現有的不同業務板塊間數據融合、統一展示，實現實時數據對接，增強銀行對其各項業務運行的掌控和對用戶畫像分析的精準把握。
  • 可視化大屏模板分享
    3個月前的一天，老闆找到我：「小王，數據怎麼才能產生讓人驚豔的感覺呢？」我說：「肯定是用代碼讓程式設計師操作一下，再讓設計師做一下配色，最好還能是數據實時變化的那種，簡直就和電影裡一模一樣！」就在昨天，他很興奮地讓我看這個，問我能不能做出一樣的效果：我一看，這是用Echarts+vue+專業的數據可視化工具做的啊
  • 公共衛生安全大屏可視化決策系統
    產品概述數字冰雹公共衛生安全可視化決策系統，面向公共衛生管理部門大屏可視化環境，具備優秀的大數據顯示性能以及多機協同管理機制，支持大屏、多屏、超大解析度等顯示情景。大屏環境支持2.8.1.超高清小間距顯示大屏為指揮中心量身打造超高清小間距LED大屏顯示解決方案，支持無縫、無邊框、無限拼接，可自定義整屏尺寸，任意解析度下，畫面顯示效果精準完整;具備低亮高灰技術內核，畫質細膩流暢，觀看舒適;亮度智能調節，滿足多種室內環境應用場合;超寬視角(水平/垂直均160度)，任意角度良好顯示;超高刷新率，納米級響應速度;安全低噪、穩定耐用，為用戶提供超凡的大屏使用體驗。
  • 手把手教你做酷炫的數據可視化大屏,零基礎的你僅需6步
    今年可視化大屏又被大家推上了熱搜，什麼500強企業分析大屏、指揮中心大屏、大屏可視化分析等，處處都有著大屏可視化分析的背景。那我們作為一名普通人，在沒有天貓雙十一發布會那種財力下，也沒有程式設計師的開發能力，我們能自己創作出一款大屏嗎？答案當然是肯定的！！
  • 用這款數據可視化大屏工具 Data MAX,讓你的企業經營管理更高效
    數據可視化大屏因其便於呈現宏觀數據，同時數據關聯及處理量巨大、高效已經為不少企業帶去了很多經營管理上的便利，同時往往還伴隨炫酷的動效、豐富的色彩，透露出企業對於數據化管理的重視程度與運籌帷幄。沒錯，數據可視化大屏通常是以超大尺寸的LED屏幕為主要展示載體，來展示關鍵數據內容，目前主要有信息展示、數據分析及監控預警三大類。