這些大屏可視化設計知識點,你知道多少?

10 評論 1.2萬 瀏覽 107 收藏 19 分鐘

編輯導讀:大屏可視化,是指一些復雜、抽象的數據,通過可視的簡單理解的方式展示出來,更加形象地表達內在的信息與規律,讓數據更高效、更容易懂。本文作者圍繞大屏可視化的設計,進行三個維度的分析,希望對你有幫助。

說起大屏可視化,很多人都知道是啥?

真正的大屏其實包含很多東西,簡單的理解就是一些復雜、抽象的數據通過可視的簡單理解的方式展示出來,更加形象的表達內在的信息與規律,讓數據更高效、更容易懂。更容易懂很多數據的含義。但這要研究其中的數據的需求以及邏輯。根據本人的一些理解幫助大家更好的了解大數據可視化的設計。

做大屏設計其實有口訣:3定1量3選3調優。

  • 3定:定需求,定指標、定粒度;
  • 1量:量大屏;
  • 3選:選圖表、選風格、選布局;
  • 3調優:UI調優、開發、測試之后調優。

記得這口訣。下面給大家詳細講解。

一、設計大屏的原則

1. 確定業務需求

大屏的展示都是基于業務的需求,不是簡單的排數據,展示數據。所有的大屏都是基于業務這一基礎上展示。

明確,大屏都是基于業務。數據的展示給相關人員全局的了解數據帶來的價值從而達到增效。如果脫離了這一訴求,展示的數據就一無所用。

了解相關人員的業務需求是根本。例如:

  • 對于設備而言相關人員想知道設備的運轉是否正常、設備損耗多少、設備何時要修理、設備是否故障等;
  • 對于事故而言相關人員想知道事故發生了多少、哪里發生事故、事故有沒有減少、事故損失多少等等
  • ……

知道了業務需求,我們才能幫助相關人員真正意義上的解決問題。才能更好的確定知道,知道數據要如何展示。

2. 設計框架后細節

我們知道大屏很大,大到設計者不知道都不知道讓人怎么看,胡亂設計的大屏不能幫助相關人員解決問題。所以設計大屏的時候我們要把握好方向,定好框架,展示內容要有主次之分,使用者才有聚焦點。才知道那些是核心數據,那些是輔助數據。那些是要進入二三級界面。這都是需要設計者好好斟酌。

二、設計邏輯

還是上面所說的3定1量3選3調優,對這幾個詳細講解:

1. 定需求,定指標、定粒度

1)定需求、定指標

知道業主的訴求,將業主的訴求提煉成指標,比如,在停車監控系統中,業主想知道停車的時長、空車的數量、外部來的車輛有多少、車輛都停在哪里、哪里有違停等,可以提煉出指標:停車場空位數、外來車輛數、內部車輛數、車輛區域熱力圖、車輛違停數、熱點停車區域、熱點違停區域等。提煉了這些指標我們就能大概知道大屏需要顯示哪些內容,屏幕會分為哪幾塊。

2)定粒度

粒度講白了就是用比較好的維度講解指標,很多產品小伙伴整理完關鍵指標之后無法準確的表明自己的意圖,同時不能給業主展示他們想要的數據,展示的圖形讓迷惑或者云里霧里,很大原因就是維度把握不準確或者指標定義不明確(如何更好運用圖形可以看3.2)。

2. 量大屏

量大屏不是真正意義上去尺子量,而是要提前知道電腦的分辨率,很多大屏由于面積過大,所以需要需要多個電腦或者信號源進行適配,設計的分辨率很容易不滿足實際場景,展示效果也不好,單純靠標準的大屏設計很可能不滿足現場需求,所以設計前了解物理大屏寬比、大屏的整體分辨率很重要。

不同大屏簡單介紹:

1)Led屏幕

點間距不同:

p3點與點之間的距離是3毫米,p4點與點之間的距離是4毫米。

清晰度不同:

P后面那個數字越小,代表兩個燈珠之間的距離越小,清晰度越高,相對應,價格也會高,因為每平方的像素點P3比P4多很多,成像效果好。

最佳可視距離不同:

點間距P3(3mm)的顯示屏,它的最佳可視距離是3.5~10米,點間距P4(4mm)的顯示屏,它的最佳可視距離是5~13.5米。可以根據自己的實際情況,選擇最適合的型號。

2)拼接屏

拼接的每塊小屏一般是16:9的高清屏,設計尺寸可以把上下高度設定為1080px,長度按照拼接屏的數量比例得出長度的設計尺寸。例如3乘5的一塊大屏幕,高度3塊屏設為1080,每塊高就是360,360除9乘16等640,640就是一塊屏幕的長度,640乘5塊屏=3200最后得出設計稿尺寸就是:高1080px乘寬3200px

現在企業常用的有無縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏,縫隙越小越貴。

另外大屏設計還有一個比較重要的問題就是注意拼接屏之間的縫隙,設計時千萬不能跨屏設計,不然很影響美觀。

3)控制端

目前企業用的最多的控制端為ipad控制,需要在ipad上制作出控制端頁面,一般尺寸為2048*1536,控制端大多數為按鈕操作,頁面盡量簡單明了。

注意:

  • 要以大屏的比例去定義設計稿,保證大屏完美呈現
  • 4k分辨率電腦,優先使用大分辨率作為設計稿
  • 使用最接近大屏分辨率的電腦屏幕比例投放

3. 選圖表、選風格、選布局

1)選圖表

提到圖表,大家腦海里浮現的,通常是柱狀圖、餅圖、趨勢圖等等,沒有把握數據的關聯性經常會導致圖表的誤用。

圖表的作用,是幫助我們更好地看懂數據。選擇什么圖表,需要回答的首要問題是『我有什么數據,需要用圖表做什么』,而不是 『圖表長成什么樣』 。因此我們從數據出發,從功能角度對圖表進行分類。找出指標里的數據主要集中在什么范圍、有啥關聯性、兩者之間有啥差異、表現出怎樣的規律等。

(引用網圖)

2)選風格

不同顏色、不同搭配,給與觀看者不一樣的感受,大屏色彩的搭配很有講究,也有一定規律,大屏一般是主打科技炫酷的,多以深藍色的主調,各個背景、統計圖等多用深色,讓界面更有科技感,一下子就被吸引。(ps:更多風格設計可以百度下情緒板的學習,本文就不多講解)

3)定布局

設計布局設置,要顯示關鍵的指標信息,展示主次,讓使用者能過直觀理解數據背后的意義。市面常見的布局:

(中心環繞)

(左右分布)

(上下分布)

布局根據實際的大屏進行設計,不能硬生生套用模板。

4. UI調優、開發、測試之后調優

1)ui設計調優

ui設計調優分為兩步,第一是確定可視化的酷炫效果,大屏的硬件配置有著很大不同,如果硬件配置不夠的情況下要求酷炫的效果可能造成卡頓甚至崩潰的情況,這是需要提前溝通的。

第二步是,是要與UI不斷的試稿,溝通,不斷的修改溝通,定好布局、圖表、關鍵元素、結構。不斷的重復試錯,嘗試修改,很多時候,設計出來的投放到大屏的效果不好,所以不斷溝通確認是很重要的。很多時候開發出來的DEMO需要反復調優。

2)開發調優

開發調優主要是針對前端展示、設計處理;

前端的話很多前端無法用樣式寫出動效、,一般需要設計人員提供切圖。例如邊框、圖表等,設計人員要給于切圖。才能讓開發進行設計調優。

設計處理需要把原始數據進行處理,將雜亂無章的數據處理成有價值的數據,這需要數據處理人員的介入。數據處理的邏輯如下:

3)測試調優

測試調優,是投放到大屏上進行測試調優,主要有視覺上跟性能上的調優。

視覺上,看大屏的字體、效果、圖表是不是根預先設計的一樣;

性能上,看動畫是不是流暢、數據是不是有問題,跳轉是不是有卡頓等。

只有經過測試調優過的大屏系統,才能真正的運用到市場。

三、常見問題

1. 顯示不佳的各個問題

  • 顯示拉升/壓縮
  • 顯示不清晰

對于拉升/壓縮。一般情況下,前端只需要對設計稿還原就好,可以預先配置 meta 避免自動縮放拉伸。較多采用用rem布局。也有可能是視頻擴展器問題,在實際調優的情況下了解壓縮比例,然后矯正。

對于顯示不清晰,我們要知道1個是色彩問題、一個是分辨率問題。

色彩問題是因為投放過程中會存在色差,要將在設計稿中不斷的在大屏上進行投放,了解實際與設計的差異,才能解決。

分辨率問題,我們要知道大屏投放要經過4個分辨率,從顯卡到矩陣、到大屏設計分辨率、到實際分辨率。盡量做到設計稿的與實際的物理比例一致,在電腦的播放的比例與大屏一致。

2. 如何選圖表(常用圖表)

1)柱形圖

應用場景:分類數據比較

2)條形圖

應用場景:數據比較(類別名稱可以更長,因為Y軸上有更多空間)

3)折線圖

應用場景:數據量隨時間變化的趨勢,系列趨勢的比較

4)面

積圖

應用場景:序列比,時間趨勢比

5)餅形圖

餅圖廣泛用于各個領域,以表示不同類別的比例并通過弧線比較各種類別。

應用場景:序列比率,序列大小比較(玫瑰圖)

6)散點圖

散點圖在直角坐標系上以點的形式顯示了兩個變量。點的位置由變量的值確定。通過觀察數據點的分布,我們可以推斷出變量之間的相關性。

制作散點圖需要大量數據,否則相關性不明顯。

應用場景:關聯分析,數據分發

7)氣泡圖

氣泡圖是多元圖表,是散點圖的變體。除了由X軸和Y軸表示的變量的值外,每個氣泡的面積代表第三個值。

我們應該注意,氣泡的大小是有限的,氣泡太多會使圖表難以閱讀。

應用場景:分類數據比較,相關分析

8)儀表

數據可視化大屏設計中的儀表是一種實體化圖表。標尺代表度量,指針代表尺寸,指針角度代表值。它可以直觀地表示指標的進度或實際情況。

應用場景:時鐘,比例顯示

9)雷達圖

雷達圖用于比較多個量化變量,例如查看哪些變量具有相似的值,或者是否存在極限值。它們還有助于觀察數據集中哪些變量具有較高或較低的值。雷達圖適用于演示工作績效。

雷達圖還具有堆積的柱形樣式,可用于分類和系列之間的雙向比較,同時還代表比例。

應用場景:尺寸分析,系列比較,系列權重分析。

10)樹狀圖

樹狀圖是一種以樹狀結構形式顯示層次結構的直觀方法,可以清楚地顯示層次結構的關系。

應用場景:層次顯示,過程顯示

11)矩形樹圖

矩形樹形圖適合于呈現具有層次關系的數據,可以直觀地反映相同級別之間的比較。與傳統的樹形結構圖相比,矩形樹形圖更加有效地利用了空間,并具有顯示比例的功能。

矩形樹圖適用于顯示具有權重關系的層次結構。如果不需要反映比例,則框架圖可能更清晰。

應用場景:加權樹數據,樹數據比例

12)漏斗圖

漏斗圖顯示每個階段的比例,并直觀地反映每個模塊的大小。適合比較排名。

同時,漏斗圖也可用于比較。我們水平排列多個漏斗圖,數據對比也非常清晰。

應用場景:數據排名,比率,標準值比較

13)詞云圖

詞云是文本數據的直觀表示。它是由詞匯組成的云狀彩色圖形。它用于顯示大量文本數據,并可以快速幫助用戶感知最突出的文本。

詞云圖需要大量數據,數據的鑒別度比較大,否則效果不明顯。而且它不適合進行準確的分析。

應用場景:關鍵詞搜索

14)甘特圖

甘特圖直觀地顯示了任務的時間安排,實際進度以及與需求的比較。因此,管理人員可以輕松地了解任務(項目)的進度。

應用場景:項目進度,狀態隨時間變化,項目過程

15)地圖

該圖分為三種類型:區域圖,點地圖和流向圖。

區域地圖:

區域地圖是一種使用顏色表示地圖分區上一定范圍的值分布的地圖。

應用場景:數據比較和分發

點地圖:

點地圖是通過在地理背景上繪制相同大小的點來表示數據的地理分布的方法。

點的分布使你很容易掌握數據的整體分布,但是當你需要觀察單個特定數據時,它不適合使用。

應用場景:數據分發

但是,如果用氣泡替換該點,則該點地圖不僅可以顯示分布,而且可以粗略地比較每個區域中數據的大小。

流向圖:

流向圖顯示流出區域和流入區域之間的交互數據。通常用連接空間要素的幾何重心的線表示。線條的寬度或顏色表示流量值。

流向圖有助于說明地理遷移的分布,動態流線的使用可減少視覺混亂。

應用場景:數據流,分布和比較

16)熱圖

熱圖用于指示地理區域中每個點的權重。除了將地圖作為背景圖層之外,你還可以使用其他圖像。熱圖中的顏色通常是指密度。

應用場景:區域訪問,熱量分布,各種事物的分布。

 

本文由 @narode 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自?Unsplash,基于 CC0 協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 師傅帶帶我

    回復
  2. 一直知道詞云圖這個東西,現在第一次知道名字。。。

    回復
    1. 產品經理路漫漫,很多學習的地方。

      回復
  3. 歡迎交流

    回復
  4. 文章講的內容偏向于類似“給某個具體的客戶定制一個可視化大屏”場景更多站在前端和設計的角度談怎么樣呈現一個好的大屏。
    如果說我要做一個可視化大屏通用產品,如何讓用戶能夠用它自定義各種樣式和排版?如何解決數據來源問題?

    回復
    1. 你提到的確是現在的發展方向,我寫的文章是針對業務來源的大屏,現在越來越多公司在制定可視化編輯大屏產品,這個是Saas產品,目前市場也有很多廠商在做,數字冰雹、華為、億信等。這個設計的重點是大屏內容的組件化,將各個展示圖表提煉起來,然后自定義數據,以及數據的配置,這衍生了數據模型設計,數據填報接口、數據處理、指標管理等一系列產品功能,接著綁定設計好的可視化設計組件,以拖拉形式布置界面。如果想深入了解,不妨加個微信持續討論。

      回復
  5. 讀完獲益良多,感謝LZ分享~

    回復
    1. 后面輸出更多,幫我點評點評哦,隨時溝通

      回復
  6. 多多分享

    回復
    1. 后面還會不斷輸出干貨,一周一篇,多多指點

      回復