數(shù)據(jù)可視化大屏設計實戰(zhàn)分享
重點概覽：
- 了解數(shù)據(jù)可視化
- 圖表設計指南；
- 具體設計思路；
- 大屏優(yōu)化設計
- 總結
一、了解數(shù)據(jù)可視化
可視化是為了幫助用戶更好的分析數(shù)據(jù)，信息的質量很大程度上依賴于其表達方式。
數(shù)據(jù)本身是冰冷的數(shù)字，通過選擇合適的圖形或者圖表來進行展示表達，使得傳遞給使用者的感受更加直觀、更容易獲得其中的價值。
數(shù)據(jù)可視化將技術與藝術完美結合，借助圖形化的手段，清晰有效地傳達與溝通信息。一方面，數(shù)據(jù)賦予可視化以價值;另一方面，可視化增加數(shù)據(jù)的靈性，兩者相輔相成，幫助企業(yè)從信息中提取有價值的信息。
二、圖表設計指南
在數(shù)據(jù)可視化設計中，首先面臨的問題是如何將各種繁多的數(shù)據(jù)指標進行展示，需要根據(jù)數(shù)據(jù)的特點，以及數(shù)據(jù)之間的關系，決定選擇什么樣的圖表類型，然后梳理數(shù)據(jù)包含的維度，最終突出關鍵信息。
如下圖，通過對數(shù)據(jù)展示需求進行歸類整理，并調研行業(yè)內的主流解決方案，將數(shù)據(jù)展示需求分為以下幾種類型：
三、具體設計思路
數(shù)據(jù)可視化的目的是讓數(shù)據(jù)說話，讓復雜抽象的數(shù)據(jù)以視覺的形式更準確的傳達。簡單的來說就是既要選擇合適的圖表，又要展示其中的數(shù)據(jù)關系，通過視覺元素有序組合體現(xiàn)數(shù)據(jù)特征。
下面來舉些栗子～
1. 數(shù)量的圖表展示對于數(shù)量展示，主要包含以下幾種使用場景
- 純數(shù)字應用于具體的總數(shù)展示場景，例如XXX個數(shù)為1000臺，XXX個數(shù)為99條等，這里把純數(shù)字置于視覺控件中，能讓觀者直觀了解到個數(shù)多少臺、條數(shù)有多少條；
- 數(shù)字翻牌器應用于地圖中個各個指標總數(shù)顯示的展示場景，例如XXX個數(shù)為88個等；
- 折線圖表示一段時間內數(shù)據(jù)的變化，例如XXX在1-7月中每個月的數(shù)量增減情況、XXX在最近一周內數(shù)量增減情況等；
- 橫向柱狀圖是主要是通過水平方向不同顏色的柱子來展示數(shù)值，此類數(shù)值一般有正負關系，一般展示資源總量與已使用量、未使用量對比的場景中，例如XXX的總量800pb、已分配量500pb、未分配量300pb三者之間的資源數(shù)量的對比等；
2. 趨勢的圖表展示主要使用場景
折線圖是指定一個分析軸進行數(shù)據(jù)大小的比較，主要是展示數(shù)據(jù)隨著時間推移的趨勢或變化，兩點連接。例如展示最近6個小時的兩種數(shù)值變化趨勢等。
3. 占比類數(shù)值的圖表展示主要使用場景
環(huán)形圖應用于部分占比情況展示，主要是通過展示不同類別數(shù)值相對于總數(shù)的占比情況，反應部分與整體的關系。每個區(qū)域弧長表示類別大小，總和為100%。
例如在環(huán)形圖中，某資源占整個資源的30%。
4. TOP類數(shù)據(jù)的圖表展示主要指各種指標的TOPN展示
比如TOP5的數(shù)值大小排行。
5. 區(qū)域類的數(shù)據(jù)
區(qū)域類的數(shù)據(jù)展示在一張地圖圖上展示各區(qū)域資源數(shù)量情況，有利于使用者觀察全局以及各個區(qū)域的情況。
6. 網(wǎng)頁版數(shù)據(jù)可視化設計樣例
四、大屏優(yōu)化設計
本次可視化大屏主要是為了實時展示相關數(shù)據(jù)監(jiān)控情況，不同于網(wǎng)頁版可視化設計的展示，大屏展示需要做到重點突出，要求較強的數(shù)據(jù)展示能力，而不是面面俱到。
網(wǎng)頁版偏向展示一段時間內的數(shù)據(jù)，甚至是通過日期篩選查詢到某一時間段的數(shù)據(jù)。大屏更多起到的是監(jiān)測職能，反饋的是實時信息，顯示的是當下的數(shù)據(jù)。以下是大屏設計和網(wǎng)頁版設計的一些不同：
1. 布局和配色：設計尺寸
硬件尺寸：
6384*1216px，分辨率：72dpi設計布局了解需求的基礎上，辨別數(shù)據(jù)的優(yōu)先級，做到重點突出，細分資源類型及指標，布局出大致的設計模版，如下圖。
字體：
配色：
相比較網(wǎng)頁版設計展示，大屏更傾向于選用深色調背景，不僅為了讓視覺更好聚焦，而且長時間觀看之后眼睛也不會出現(xiàn)視覺刺刺痛感。
基于此，所有圖表的配色皆以深色系為背景，保證數(shù)據(jù)明度與色調的和諧統(tǒng)一。
數(shù)據(jù)元素：
圖標：
2. 展示和交互
在大屏展示中，有多種資源類型及數(shù)據(jù)展示。通過構圖突出重點，在主要信息和次要信息的布局和所占面積上進行調整，明確層級關系和流向，使觀者獲取信息時也能獲得視覺平衡感。
以地圖的方式展示出資源分布信息，左右兩側排布詳細類別的資源信息展示，在構圖上突出主次。并在全國地圖中省份位置添加鉆取的動態(tài)效果，進一步增強視覺導流線和信息層級的引導作用。
不同于網(wǎng)頁版可視化內容展示可以做到面面俱到，大屏界面空間有限，必須突出重點，將重要的指標放在最顯眼的位置，盡量集中放置，吸引視覺焦點。
交互方面，網(wǎng)頁版可視化內容展示的交互復雜相對多樣化。而可視化大屏，交互樣式單一，更多是側重于數(shù)據(jù)多維度鉆取。
3. 優(yōu)化細節(jié)
在完成大屏設計初稿后，為了進一步優(yōu)化維度和展現(xiàn)的方式，對大屏中的細節(jié)進行優(yōu)化。例如對背景、裝飾線框、圖表線條等細節(jié)進行審查。
比如視覺上顯得線條太多，頁面整體不夠清晰，重要信息凸顯不出來。對應裝飾元素能避免則避免。
對于層次感不明顯的問題，進行了豐富信息以及加大背景色對比度的調整；對于圖表中柱狀圖的數(shù)量過密和過疏，進行長寬高、面積進行調整；對于表格排列進行優(yōu)化序號突出重點的調整……
最后一步，按照產品經理收集到需求方的要求，考慮到是否達到預期，是否有色差等。最后也要讓需求方審核是否能夠理解，數(shù)據(jù)是否是想要的樣子。
優(yōu)化后的最終版：
五、總結
數(shù)據(jù)可視化設計的著力點就是要把握好圖表的主次關系，突出主要圖表的重點數(shù)據(jù)。
本次設計實戰(zhàn)，在網(wǎng)頁版UI設計基礎上，提煉重點數(shù)據(jù)信息進行大屏設計，最終目的是能夠讓觀者洞悉各個資源的使用情況。
在本次設計實戰(zhàn)需要在短時間內實現(xiàn)復雜繁多的指標數(shù)據(jù)可視化，網(wǎng)頁版要做到面面俱到，大屏版要做到重點突出，整體設計難免有不完美的地方，后續(xù)會繼續(xù)改進完善。
最后，我建立了各大城市的產品交流群，想進群小伙伴加微信： chanpin628?? 我拉你進群。
視頻號推薦關注微信公眾號： 產品劉 ?可領取大禮包一份。
··················END··················
今日報告： 增長黑盒×黑盒點評? 發(fā)布 《2023中國AIGC應用研究報告》 ， 下載報告去公眾號： 硬核劉大 ??后臺回復“AIGC應用 ”，即可下載完整PDF文件。
申明： 報告版權歸? 增長黑盒×黑盒點評? 獨家所有，此處僅限分享學習使用，如有侵權，請聯(lián)系小編做刪除處理。
RECOMMEND
推薦閱讀 國內B端競品調研網(wǎng)站一網(wǎng)打盡
手把手教你做數(shù)據(jù)產品經理
如何設計電商系統(tǒng)商品中心？
面試一對一輔導
點擊“閱讀原文”
查看更多干貨