大屏是什麼?
大屏設計是最近比較流行的概念，一般按照功能來分有幾種：
1. 可互動的觸控式螢幕，大多運用在互動教學課程或者報告演示現場，使用者可結合互動操作來闡述具體內容。設計師需要對互動形式和傳達內容作統一思考設計。
2. 為某些特定的大型活動設計的專屬大屏，比如說產品釋出會、雙11購物狂歡節。這類大屏需要結合音樂、場景、動效、燈光等多方面元素統一烘托，最終效果酷炫震撼，所有展現的內容都是定製化設計和開發的。
3.專為企業提供服務的視覺化資料大屏，這一類大屏在商業中有其應用價值，它的特性是資料展示能力強，用一些較為常見的圖表，如柱狀圖、餅圖等來展現業務情況，使客戶快速讀懂資料背後的含義。
資料大屏為客戶提供了政務、電商、客服、安全、金融等多個應用場景。
資料大屏和資料包告的區別是什麼？
先來看一下業務場景中的報告和大屏是如何展現的：
報告
大屏
1.使用者
資料包告的使用者一般是資料分析師，分析師製作完報告，會把結果反饋給業務人員或者公司高層，為決策提供參考。而大屏的使用者會更廣，整個企業內的有關人員甚至所有員工都能夠看大屏。
2.互動
一份完整的報告一般包括詳細的分析過程，使用者無法在不互動的情況下了解完整資料，比如說篩選、鑽取、檢視詳情等等，都是很常用的分析功能。而大屏依靠視覺、動效，來傳遞有效資訊，使用者並不需要互動即可直觀迅速瞭解內容。
3.時間
報告偏向展示一段時間內的資料，某些企業甚至能通過報告的日期篩選查詢到從接入系統開始所有的歷史資料。大屏更多起到的是監測職能，反饋的是實時資訊，顯示的是當下的資料。
4.展示
報告的閱讀場景決定了它展示的側重點在“精確”和“完整”，要達到這兩點，不可避免有時候會犧牲一些視覺表現。例如：資料項過多的情況下，視覺感受比較擁擠。
對於大屏來說，即使只有當下的資料，使用者也很難在短時間內get到關鍵，所以重要的是如何在有限的時間內傳遞出有效資訊，即如何迅速提煉出重點資料並展示，即使這樣會犧牲資料的完整性。
如果用一句話總結資料大屏的設計的關鍵：重點突出大於面面俱到。
大屏產生的過程
大部分人制作大屏的方式，只是一種圖表的堆砌，先把需要的單個圖表做完，然後簡單地羅列組合在一起，最後改變一下整體顏色，就完成了。整個過程雖然不能說錯，但並沒有把大屏的優勢發揮出來。一個完整的大屏設計過程應該包括以下步驟：
1.提煉資訊
首先，我們要對資料進行分析，得出自己的結論。同樣一份資料，因為不同的角度和思考方式，可能得出的觀點很不一樣。例如同樣都是關於銷售額的資料，有人希望知道各地銷售額對比，有人希望瞭解銷售額排名前五的商品型別，拿來資料就畫圖會讓設計顯得雜亂無章，讀者也不知道要讀什麼資料。
所以在大屏設計之前，需要先和客戶確認他們想要傳達給目標使用者的重點，這個重點是他們希望使用者在讀完這個大屏之後能夠理解並記住的主要資訊，很多公司都錯誤的認為，把多個資料塞進一個大屏中可以幫助提高公司的專業度，實際上這隻能顯示他們有很多資料。
為什麼重點這麼重要，試想一下，看大屏的人可能只會駐足在螢幕前一分鐘，他們和大屏僅有的互動就是快速掃過整張圖，在這一分鐘內，到底能記住多少資訊？設計師在每個設計環節都要牢牢記住這一點。
可以嘗試著問客戶兩個問題：
（1）如果整個大屏只能展示一個最重要的資訊，你希望是什麼？
（2）你希望展現這些資訊的理由是什麼？通過客戶的回答，你能瞭解他希望使用者的關注點在哪裡，從而提煉出設計重點。如果只有一個重點，放在最顯眼的位置，如果有幾個重點，儘量集中放置，吸引視覺焦點。
沒有什麼比加粗高亮數字更簡單直接，保險大屏想傳遞的重心在於
（1）保費總額 。
（2）各地貢獻的保費情況。
網路安全大屏，首先讓使用者通過直接的數字感知總體安全情況，其次詳細檢視當前攻擊發生的源頭和目的地。
整個客戶服務的場景中，員工們是非常忙碌的，可能只有偶爾休息的間隙檢視一下實時的服務情況，最希望傳達給客服的資訊集中設計在左半屏，
（1）呼叫量。
（2）滿意度。其他資訊的優先順序相對較低。
2.選擇圖表
明確需要表達的資訊和主題後，需要根據這個資訊的資料關係，決定選擇何種圖表型別，以及要對圖表作何種特別處理。
圖表種類各式各樣，有些圖表很難界定是屬於哪種關係，我見過講圖表關係和圖表功能比較好的平臺是Ant v的墨者學院，有興趣的小夥伴可以瞭解一下。
Ant v把資料關係分成了9個大類，當你確定了某個資料關係型別後，就可以根據該資料的使用場景查詢出相對應的圖表和使用建議，並在其中進行選擇。
以一份購物城資料為例：
3.製作圖表
當確定了要使用哪些圖表做圖後，開始進入製作流程，影響最終圖表展現效果的元素一般分為兩個層面：
非資料層：
不受資料影響樣式的元素，比如說背景、網格線、外邊框等等。這類元素起到的是輔助閱讀作用，但如果不加處理全部放出，視覺上會顯得雜亂和不夠簡潔，干擾到你真正想展示的資訊。對於這類元素，應該儘量隱藏和弱化。
隱藏
· 去除不必要的背景填充
· 去掉無意義的顏色變化
· 去掉不必要的外框
弱化
· 座標軸淡色或隱藏
· 網格線淡色或隱藏
資料層：
受資料影響樣式的元素，比如說柱狀圖的柱條長度，柱條顏色，柱條展示個數，氣泡圖氣泡大小等等，這類元素的展示效果和圖表本身的資料息息相關，一旦圖表本身的資料比較極端，有可能會使得最終視覺展現不盡如人意，我們無法改變具體的資料，是否就完全無法操控這些元素了呢？
這裡挑選了幾個大屏中應用較多的圖表，總結了其資料層樣式的調整方式。
調整範圍
· 截斷超大值
當某一個值特別大時，繪製出的條形遠遠長於其他類別，導致其他條形被壓縮，不便於比較。某條特別長，也可能會影響到整個大屏的排版平衡，可以採用截斷選項的方式。
· 資料可以不從0開始
很多資料視覺化工具裡都有“數軸是否包括零”這一個選項，使用者可通過這個功能來控制座標軸的顯示範圍，例如下圖，折線的波動範圍比較小，走勢起伏不明顯，這時可以選擇資料不從零開始，清晰地看出了折線的走勢情況。當然，如果在平時的資料包告中，這樣顯示有誇大差異的嫌疑，不建議頻繁使用。
避免重疊
· 避免負值被遮蓋
當一些數值有負數時，標籤和柱條離得較遠，不便於閱讀，如果標籤緊貼柱條，又會發生重疊，比較好的方式是標籤根據柱條的方向分別顯示在座標軸的兩側。
· 軸標籤太長可橫向放置
當軸標籤太長時，雖然斜放可以避免重疊，但歪著頭檢視內容在瀏覽大屏的場景下對使用者不是很友好，可以考慮把柱條橫向放置，把標籤置於柱條空隙之間。
精簡資料項
· 餅圖分類5～7項
在做資料包告時，不管有多少資料項，為了完整和精確性，所有的內容都會顯示出來，但在大屏中，如此滿的資料展示，不但忽略了視覺體驗，還會讓使用者抓不住重點，對於餅圖來說，建議扇區個數不要超過5個，例如保留佔比前5的扇區，剩下的非重點資料全部歸到“其他”。
· 保留前五和後五
如果柱狀圖的資料項過多，展示時會過於密集，建議先把資料項按照數值大小排序，然後將中間使用者可能不是最關心的柱條摺疊起來，只保留前五和後五的資料項。
強調重點
· 視覺高亮重要資訊
先來看一張對比圖，雖然左圖顏色更加豐富，但是沒有重點，視覺傳達給使用者的資訊是沒有主次的，而右圖很明顯想傳達：這個數值有異常！請關注我！在大屏中，為了在短時間內讓使用者get到關鍵資訊，應該儘量排除其他不重要的資料項干擾。
折線圖中，只高亮重要資料點比每個節點都標註更能傳遞有效資訊
在餅圖中，因為顏色塊大小代表佔比多少，所以高亮的方式並不一定適用，我們可以通過分離某一塊扇區達到強調重點的效果。
· 儘量減少圖例
大屏的圖表中應該儘量避免圖例，圖例會讓使用者不斷在資料項和顏色塊之間往返比對，耗費時間，還容易忘記重點，由於柱條個數經特殊處理後並不會很多，所以資料項名稱可以直接標註。
總結
如果要對大屏設計的特點作一個總結：全屏時突出重點圖表，單表時突出重點資料。把握好這點，至少可以避過大部分的坑。但一個高水準的大屏，還少不了一些細節的把控。比如：
1. 大屏風格是否符合業務主題，是熱烈？是專業？是冷靜？
2. 是否需要一些個性化的控制元件：例如時間器、輪播歡迎語等。
3. 是針對固定屏的定製化開發，還是考慮延展性的模組縱橫柵格佈局，對不同屏的適配是如何？
4. 現場投放大屏後，內容是否方便閱讀，動效是否符合預期，色差是是否需要調整等等。
由於篇幅原因，這裡不一一詳細展開，如果有小夥伴對我們大屏感興趣，可以加微信群：1092912327。
大屏是我們用來分享、溝通、傳播資訊的有效途徑之一。它將會進化成一種新的媒體形式，在品牌推廣、政務接待、商業溝通、資料監控等各個場景發揮重要作用。本文主要整理了一些大屏設計過程中的方法和原則，希望能夠為大家提供一些借鑑思路。
寫了幾篇實現思路文章：
https://www.cnblogs.com/luoyuhao/p/13541260.html 怎麼實現員工和工資大資料分析，echarts+js實現
https://www.cnblogs.com/luoyuhao/p/13867911.html SaaS系統怎麼做物流行業年度經營報告，MVC+js+echarts實現