帶你完成可視化大屏的製作

編輯導語：隨著網際網路的進步，大數據時代到來，如今很多領域都涉及到大數據，大數據對我們生活也有一定的影響，也是做數據分析比較重要的來源；本文作者詳細介紹了可視化大屏的製作，我們一起來看一下。

在當今社會中，網際網路的飛速發展讓我們逐步邁入了大數據的時代。

「大數據」已經從一個概念性質的詞語轉變為了對經濟社會各個領域都具有滲透影響的事物；並且隨著網際網路技術的持續發展，大數據所產生的影響呈現出了範圍不斷擴大，深度持續擴展的新特徵。

大數據時代就是指人們的生產、生活和工作中出現更多的信息數據，通過對相關數據進行收集、歸類與整理之後形成的一種多元化的信息系統。

大數據對於大企業的精準營銷、小微企業的服務轉型有很重要的作用,成本低、效率高、信息含量大是大數據超越計算機處理信息的優勢。

隨著大數據時代的持續發展，數據可視化這一塊的需求也越來越強烈，大家都逐漸喜歡用可視化這樣子的效果來進行數據的展示；特別是下面這三個場景，也是現在可視化這一塊被廣大用戶所關注到的一些需求。

所以在可視化大屏這一塊的製作，也是越來越被大眾所關注的；如何製作一塊可視化的大屏，也是大家都比較了解的。

接下來，根據此類大屏可視化的需求，也分享給大家一些製作可視化大屏的經驗。

一、明確展示內容

當前情況下，我們應該明確一個事情，「可視化大屏」不僅是要在視覺上美觀炫酷和與數據契合的科技感，更重要地是突出重點數據，做到美觀性與實用性共存的效果。

一個大屏的設計主要可以分為兩塊，一個是數據指標的選用，一個是與這些指標對應的組件的使用。

所以對於這些指標這一塊的數據，我們就需要好好把控住，然後一般來說要遵循下面幾個原則：

1）大屏指標在8-12個為宜

少於8個的話，大屏就會顯得空曠，而且也不經濟；多於12個的話，這麼多的數據指標擠在在一個張大屏上，要做到井然有序，確實很考驗設計者的功力。

但是如果數據指標真的很多，實在是不能刪減，那麼我建議使用報表塊，將這些數據整合到一起；這樣，多個數據指標就可以在一個報表裡面展現出來，不用佔用很多空間。

2）高頻組件儘量減少重複

報表塊、餅圖、柱形圖、儀錶盤、折線圖、條形圖和地圖這幾個組件出現的頻率都非常高，可以說是大屏圖表組件裡面的常規武器了。

3）使用3D效果

通過設計師設計的圖片作為背景來拓寬圖表樣式，實現3D柱形圖、3D圓環圖等效果，設計師設計自定義圖片，圖片為具有一定特效的圖表，把數據去掉；或者，可以通過上文提到的報表塊疊加，將圖片作為底層背景，上層疊加數據，即可實現自製圖表效果。

二、挑選工具

目前市面上主要有以下幾款工具可以使用，大家可以自己選擇來試用看看他們的優勢劣勢，這裡就不做一一分析。

三、設計大屏

這裡主要是通過一種產品的實操使用說明，來詳細地講解一下如何來直接製作出一個可視化大屏。

1. 新建大屏

這是所有設計大屏的第一步，通常只需要點擊一下新建即可立馬投入大屏的製作過程中。所以這可以說是所有製作可視化大屏啟動步驟了。

同時新建大屏之後，也是有不同的方式來進行製作大屏：

1）直接選擇已有的模版

通常來說，這是大家最常會使用的一種方式，直接在已有的模版上進行修改，更換掉一些不需要的組件，換上自己的特有的logo，一個專屬於自己的大屏就這麼誕生了。

同時目前的許多模版已經覆蓋了大家常見的一些場景，還是比較方便的。

2）從「0」開始

但是對於絕大多數人來說，實際上還是比較喜歡自定義的大屏設計，所以會直接點擊創建空白面板來進行大屏的搭建！

接下來也是主要根據從「0」開始的設計來進行搭建大屏的介紹。

2. 規劃布局

物理大屏的一些問題：大屏一般解析度比較高，如果不事先確定物理大屏尺寸，設計稿設計出來的效果被投放到大屏上就會有偏差失真。

一般情況下，確定設計稿尺寸需要分兩種情況：

• 當投屏電腦與與大屏系統尺寸比例、解析度一致時，設計稿的尺寸、解析度以投屏電腦為準；
• 當投屏電腦與與大屏系統尺寸比例、解析度不一致時，設計稿的尺寸、解析度以物理大屏為準。

然後是對大屏進行布局和頁面的劃分。這裡的劃分，主要根據我們之前明確的展示內容，然後把核心的內容指標安排在中間位置、佔較大面積；其餘的指標按優先級依次在核心指標周圍展開。

一般把有關聯的指標讓其相鄰或靠近，把圖表類型相近的指標放一起，這樣能減少觀者認知上的負擔並提高信息傳遞的效率。

主次分明、條理清晰、注意留白，合理利用大屏上各個小的顯示單元，並儘量避免關鍵數據被拼縫分割。

3. 選擇相應的組件，擺到合適的位置

選定圖表注意事項：易理解、易實現；通過上圖，我們可以發現，當今情況下，每款工具都提供了蠻多的圖表組件，所以對於這些組件的選擇也是我們需要重視的。

• 易理解：要考慮大屏最終用戶，可視化結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。
• 易實現：某些效果用設計工具可以輕易實現，但開發要用代碼落地卻非常困難，所以大屏設計中一定要善用工具，切忌不計成本，埋頭苦作。

如圖所示：

正中間選用了一個大大的地圖組件在其中，貼合標題，為了展示各個不同省份不同區域的人員信息；地圖上方，則用了3個數字展示組件，實時顯示當前的數據。

兩側主要通過4個不同的圖表分別展示一些人員狀態的數據。

地下兩個圖表主要是展示不同地區的人員信息。

總體來說，所以組件使用的初心就是一些前期確定好的核心數據的展示，但是也很明顯的是，因為組件是直接拖拽下來的，一些位置也是比較零散，所以我們需要調整一下組件的擺放位置。

4. 組件的位置調整

組件的位置擺放整齊：首先就是最主要的就是讓各個組件都在我們前期給他們規劃好的位置上，然後我們再對其進行一些細微的位置調整。

就好比左側的三個組件，我們畫一條邊界線在最左邊，然後所有的組件都不可以超過這條線上，緊緊貼近在一起。（一般情況下來說，製作可視化大屏的工具都會有類似於ps這樣的工具線幫助我們規範好位置；所以我們只需要擺放好第一個組件的位置，後續的組件就可以按照那個輔助工具線來進行擺放就可以了。）

讓整個大屏顯得飽滿但是不多餘：這是非常重要的，首先我們不可以讓我們的大屏過於空蕩，該有的信息我們都不可以落下，這一般來說都是比較容易實現的；但是太過於飽滿也會顯得很多餘，所以每個組件中間我們都應該留一點空隙，讓他們顯得不擁擠；但是如果組件過於多了的話，我們就應該考慮整合兩個數據，讓他們同時在一個表格裡顯示出來就可以了。

5. 數據的接入

接入需要展示的數據，讓這裡的報表的數據動起來！

一般來說，目前市面上，csv、api等等的數據都是支持的，所以我們這邊在數據的接入上面就不用有很大的憂慮了😊。

最後，一個實用的大屏就這麼搭建出來了，可以直接發布預覽了。

四、總結

實際上，搭建一個大屏，還是需要進行很多準備的，特別是在設計這一塊，也需要做好把控的。

比如：

• 字體使用，字體優先使用系統默認字體，需要嵌入字體時考慮字體的可識別性、與當前設計風格是否融合、是否可免費商用。
• 字體選擇，選擇字母容易辨識不會產生奇異的字體更有利於用於數據可視化設計。
• 背景色的使用，顏色是出色的工具。使用不當，不僅會讓讀者分心。背景色的選擇與可視化展示的設備相關，分為深色、淺色、彩色。
• 顏色搭配，色彩明度與飽和度差異顯著、對比鮮明， 儘量避免使用鄰近色配色。
• 對比，可視化讓數據對比更直觀，但是僅僅把兩組圖表緊挨著放在一起並不能達成這個目標，甚至更令人費解，所以要多用不同類型的圖片進行對比。

總的來說，可視化設計是一個任重而道遠的一件事情，我們需要一步步的練習，不斷的改進，才可以完成大屏的搭建，才可以讓你的大屏看上去越來越高級！

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

題圖來自 unsplash，基於 CC0 協議