11.11數據可視化大屏設計揭祕

如下文章來源於Design with CloudAI ，做者Joann idesign

Design with CloudAI京東智聯雲用戶體驗設計團隊服務於Cloud&AI 涉及UE Design、Brand Design、UE Research、ID Design 等相關領域。堅持以客戶（用戶）爲中心的產品設計理念，努力成爲京東雲與AI最好的合做夥伴。

萬衆期待的京東11.11全球熱愛季落下帷幕，巔峯狂歡中，多少人的購物車在這一天成爲了GDP野馬，創造的商業價值年年翻新，節節拔高，這背後的數據和流量，讓消費者和企業更加直觀、明確地捕捉到最新的消費風向，而每一年同期公開展現的系列數據大屏正是這其中重要的一環。

（11.11機房數據圖譜大屏 圖中顯示非真實數據）

本次與你們分享的11.11機房數據圖譜大屏，做爲這系列之一，以最新的視覺體驗和可視化形態爲觀者傳遞了機房、網絡的實時情況。

本篇文章咱們將以設計者的身份爲你們帶來相關看法與分析。

|  什麼是數據大屏？

要了解11.11可視化大屏，咱們先來認知數據大屏這一律念。

感興趣的小夥伴能夠點擊如下連接回顧：

《如何決策快人一步？用一塊大屏輕鬆實現數據可視化》

數據大屏的根本是數據可視化，而數據可視化就是藉助圖形手段把相對複雜、抽象的數據，清晰有效地傳達、溝通出去。把枯燥無味的數據經過圖形化設計表現達到一種更加精準和高效的數據分析和表達。

數據大屏做爲數據可視化的表現形式之一，每每承載了大量變量的數據集，設計者須要使數據容易產生對比，並用它來說故事，以此來幫助用戶作出決策。

（圖片來源於網絡）

|  設計理念

上面提到了設計者須要用數據來說故事，小說的三大要素是人物、情節和環境，套用在數據大屏上，這三大要素即是圖表、交互流程和環境場景。

爲了確保這三大要素的準確性，設計者要在前期對本身提出人生三大問號：故事受衆是什麼？爲何要講這一故事？故事要怎麼講？

本次11.11大屏須要表述各大機房的流量詳情及年度數據對比，其中的數據包括公網出口，內網專線，內網實時流量、流量趨勢，內網峯值、帶寬，公網出口流量、帶寬等。

根據以上內容咱們確立了數據工廠這一律念，以數據流水線的形式將各種信息進行可視化處理。

在618活動中所展現的機房數據圖譜大屏，選用了2.5D插畫的視覺風格，考慮到近兩年利用3D效果展現智慧城市、工廠的可視化案例愈來愈多，本次大屏的視覺設計也傾向於基於3D效果，全方位展示雲主機運維的各個細節，直觀傳達實時數據信息。

|  着手可視化

（1）精細篩選數據信息

在設計可視化大屏產品時，根據故事受衆及目的，選擇合適數據內容。將用戶最關心的數據展示出來，篩選分類後摘取合適的圖表，讓數據和最有效的圖表類型配對。

在此向你們推薦一款開源的數據可視化JavaScript圖表庫：ECharts，包含了極其豐富的圖表資源可供選用，如常規的折線圖、柱狀圖、散點圖、餅圖、水位圖、雷達圖、K線圖、箱線圖、日曆熱力圖、關係圖、漏斗圖、桑基圖、儀表盤等，知足用戶進行多維數據分析和展現。

（圖片來源於網絡：EChart）

（2）數據展現與3D模型相結合

這一展示方式須要數據與設計者所描述的故事相適應，將數據合理適當地放置於3D場景中，利用匹配透視視角、環境光效、動態效果等手法減小違和感。

（上：純模型圖  下：數據結合模型展現）

本次大屏設計主要使用數據與3D模型相結合的形式來展現具體內容，分佈在不一樣機房處的數據利用各自的視角差和色彩狀態體現歸屬關係，各類數據實時更新，流量趨勢動態展現，體現數據的即時性與實時性。

|  Step By Step

三維模型通過程序開發，是可支持用戶交互操做的，但考慮到本次11.11大屏的實際需求與研發週期，只採用了一個固定視角對外展現。

11.11大屏三維建模到最終數據工廠效果呈現的過程大體以下：

一、建模：根據拓撲圖結構構建機房模型，放置於工廠環境的模型中適當對工廠模型進行減面，拉開重點模型的精細度。

二、渲染：根據大屏的科技感、科幻感定位，大量使用金屬、玻璃、發光材質，還能夠根據機房的不一樣狀態設置不一樣的發光效果，如正常綠、故障黃等。

三、數據搭建：海量數據信息依據奧卡姆剃刀原則合理擺放，並適當用圖例引導觀者理解。

（左：純模型圖  右：數據結合模型展現）

四、動效：根據實時流量狀態增長動態流量效果，讓動效也能傳達實際信息，而不是影響擾亂閱讀。

五、音效：完整的可視化大屏體驗應該是帶有音效的，採用合適的音樂加強代入感，同時適量使用機械音做爲點擊、消息的音效，加強大屏使用的反饋效果和科幻感。

（現場效果）

|  結語

大屏設計愈來愈廣泛地採用3D效果，這得益於它震撼的視覺效果，但同時，3D模型過於抓人眼球就會失去了製做數據大屏的初衷——展現數據，傳達信息。設計者要善用3D、動效這些設計手法，讓它們成爲數據的傳達方式，從中體現數據的真正價值，而非炫技。

前路且長，道阻且跂，可視化大屏設計這條路，讓咱們一塊兒探索下去。

（可視化大屏中所用數據皆非真實數據 文中部分圖片來源於網絡，侵刪）

推薦閱讀：

• 11.11 TECK TALK | 媲美物理機 裸金屬雲主機極致性能輕鬆應對11.11大促
• 11.11 TECK TALK | 11.11應對海量訪問的網絡基石 京東智聯雲自研交換機發展之路
• 11.11 TECK TALK | 支撐2715億元海量訂單 揭祕京東大促背後的數據庫基石

歡迎點擊【京東智聯雲】，瞭解開發者社區

更多精彩技術實踐與獨家乾貨解析

歡迎關注【京東智聯雲開發者】公衆號