編輯導語：隨著網際網路的進步，大資料時代到來，如今很多領域都涉及到大資料，大資料對我們生活也有一定的影響，也是做資料分析比較重要的來源；本文作者詳細介紹了視覺化大屏的製作，我們一起來看一下。
在當今社會中，網際網路的飛速發展讓我們逐步邁入了大資料的時代。
“大資料”已經從一個概念性質的詞語轉變為了對經濟社會各個領域都具有滲透影響的事物；並且隨著網際網路技術的持續發展，大資料所產生的影響呈現出了範圍不斷擴大，深度持續擴充套件的新特徵。
大資料時代就是指人們的生產、生活和工作中出現更多的資訊資料，透過對相關資料進行收集、歸類與整理之後形成的一種多元化的資訊系統。
大資料對於大企業的精準營銷、小微企業的服務轉型有很重要的作用,成本低、效率高、資訊含量大是大資料超越計算機處理資訊的優勢。
隨著大資料時代的持續發展，資料視覺化這一塊的需求也越來越強烈，大家都逐漸喜歡用視覺化這樣子的效果來進行資料的展示；特別是下面這三個場景，也是現在視覺化這一塊被廣大使用者所關注到的一些需求。
所以在視覺化大屏這一塊的製作，也是越來越被大眾所關注的；如何製作一塊視覺化的大屏，也是大家都比較瞭解的。
接下來，根據此類大屏視覺化的需求，也分享給大家一些製作視覺化大屏的經驗。
一、明確展示內容當前情況下，我們應該明確一個事情，“視覺化大屏”不僅是要在視覺上美觀炫酷和與資料契合的科技感，更重要地是突出重點資料，做到美觀性與實用性共存的效果。
一個大屏的設計主要可以分為兩塊，一個是資料指標的選用，一個是與這些指標對應的元件的使用。
所以對於這些指標這一塊的資料，我們就需要好好把控住，然後一般來說要遵循下面幾個原則：
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 協議