中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文作者從實際工作出發，結合案例分享了大屏可視化設計過程中的一些問題以及設計思路，供大家一起參考與學習。

年底完成了一些數據可視化網頁版UI改造及大屏可視化設計的方案，最近空出一些時間來整理遇到的問題及設計思路，本文分享一下想法和感悟。

重點概覽：

1. 了解數據可視化
2. 圖表設計指南；
3. 具體設計思路；
4. 大屏優化設計
5. 總結

一、了解數據可視化

可視化是為了幫助用戶更好的分析數據，信息的質量很大程度上依賴于其表達方式。

數據本身是冰冷的數字，通過選擇合適的圖形或者圖表來進行展示表達，使得傳遞給使用者的感受更加直觀、更容易獲得其中的價值。

數據可視化將技術與藝術完美結合，借助圖形化的手段，清晰有效地傳達與溝通信息。一方面，數據賦予可視化以價值;另一方面，可視化增加數據的靈性，兩者相輔相成，幫助企業從信息中提取有價值的信息。

二、圖表設計指南

在數據可視化設計中，首先面臨的問題是如何將各種繁多的數據指標進行展示，需要根據數據的特點，以及數據之間的關系，決定選擇什么樣的圖表類型，然后梳理數據包含的維度，最終突出關鍵信息。

如下圖，通過對數據展示需求進行歸類整理，并調研行業內的主流解決方案，將數據展示需求分為以下幾種類型：

三、具體設計思路

數據可視化的目的是讓數據說話，讓復雜抽象的數據以視覺的形式更準確的傳達。簡單的來說就是既要選擇合適的圖表，又要展示其中的數據關系，通過視覺元素有序組合體現數據特征。

下面來舉些栗子～

1. 數量的圖表展示對于數量展示，主要包含以下幾種使用場景

• 純數字應用于具體的總數展示場景，例如XXX個數為1000臺，XXX個數為99條等，這里把純數字置于視覺控件中，能讓觀者直觀了解到個數多少臺、條數有多少條；
• 數字翻牌器應用于地圖中個各個指標總數顯示的展示場景，例如XXX個數為88個等；
• 折線圖表示一段時間內數據的變化，例如XXX在1-7月中每個月的數量增減情況、XXX在最近一周內數量增減情況等；
• 橫向柱狀圖是主要是通過水平方向不同顏色的柱子來展示數值，此類數值一般有正負關系，一般展示資源總量與已使用量、未使用量對比的場景中，例如XXX的總量800pb、已分配量500pb、未分配量300pb三者之間的資源數量的對比等；

2. 趨勢的圖表展示主要使用場景

折線圖是指定一個分析軸進行數據大小的比較，主要是展示數據隨著時間推移的趨勢或變化，兩點連接。例如展示最近6個小時的兩種數值變化趨勢等。

3. 占比類數值的圖表展示主要使用場景

環形圖應用于部分占比情況展示，主要是通過展示不同類別數值相對于總數的占比情況，反應部分與整體的關系。每個區域弧長表示類別大小，總和為100%。

例如在環形圖中，某資源占整個資源的30%。

4. TOP類數據的圖表展示主要指各種指標的TOPN展示

比如TOP5的數值大小排行。

5. 區域類的數據

區域類的數據展示在一張地圖圖上展示各區域資源數量情況，有利于使用者觀察全局以及各個區域的情況。

6. 網頁版數據可視化設計樣例

四、大屏優化設計

本次可視化大屏主要是為了實時展示相關數據監控情況，不同于網頁版可視化設計的展示，大屏展示需要做到重點突出，要求較強的數據展示能力，而不是面面俱到。

網頁版偏向展示一段時間內的數據，甚至是通過日期篩選查詢到某一時間段的數據。大屏更多起到的是監測職能，反饋的是實時信息，顯示的是當下的數據。以下是大屏設計和網頁版設計的一些不同：

1. 布局和配色：設計尺寸

硬件尺寸：

6384*1216px，分辨率：72dpi設計布局了解需求的基礎上，辨別數據的優先級，做到重點突出，細分資源類型及指標，布局出大致的設計模版，如下圖。

字體：

配色：

相比較網頁版設計展示，大屏更傾向于選用深色調背景，不僅為了讓視覺更好聚焦，而且長時間觀看之后眼睛也不會出現視覺刺刺痛感。

基于此，所有圖表的配色皆以深色系為背景，保證數據明度與色調的和諧統一。

數據元素：

圖標：

2. 展示和交互

在大屏展示中，有多種資源類型及數據展示。通過構圖突出重點，在主要信息和次要信息的布局和所占面積上進行調整，明確層級關系和流向，使觀者獲取信息時也能獲得視覺平衡感。

以地圖的方式展示出資源分布信息，左右兩側排布詳細類別的資源信息展示，在構圖上突出主次。并在全國地圖中省份位置添加鉆取的動態效果，進一步增強視覺導流線和信息層級的引導作用。

不同于網頁版可視化內容展示可以做到面面俱到，大屏界面空間有限，必須突出重點，將重要的指標放在最顯眼的位置，盡量集中放置，吸引視覺焦點。

交互方面，網頁版可視化內容展示的交互復雜相對多樣化。而可視化大屏，交互樣式單一，更多是側重于數據多維度鉆取。

3. 優化細節

在完成大屏設計初稿后，為了進一步優化維度和展現的方式，對大屏中的細節進行優化。例如對背景、裝飾線框、圖表線條等細節進行審查。

比如視覺上顯得線條太多，頁面整體不夠清晰，重要信息凸顯不出來。對應裝飾元素能避免則避免。

對于層次感不明顯的問題，進行了豐富信息以及加大背景色對比度的調整；對于圖表中柱狀圖的數量過密和過疏，進行長寬高、面積進行調整；對于表格排列進行優化序號突出重點的調整……

最后一步，按照產品經理收集到需求方的要求，考慮到是否達到預期，是否有色差等。最后也要讓需求方審核是否能夠理解，數據是否是想要的樣子。

優化后的最終版：

五、總結

數據可視化設計的著力點就是要把握好圖表的主次關系，突出主要圖表的重點數據。

本次設計實戰，在網頁版UI設計基礎上，提煉重點數據信息進行大屏設計，最終目的是能夠讓觀者洞悉各個資源的使用情況。

在本次設計實戰需要在短時間內實現復雜繁多的指標數據可視化，網頁版要做到面面俱到，大屏版要做到重點突出，整體設計難免有不完美的地方，后續會繼續改進完善。

本文由@一時無兩 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash， 基于CC0協議