大屏是什么?
大屏設計是最近比較流行的概念,一般按照功能來分有幾種:
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實現
可加QQ群:186841119
