大屏設(shè)計(jì)系列之六：有"屏"有據(jù)，阿里雙11大屏是怎樣煉成的

2017-4-10    藍(lán)藍(lán)設(shè)計(jì)的小編

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

【IT168 專稿】本文根據(jù)【2016 第七屆中國(guó)數(shù)據(jù)庫(kù)技術(shù)大會(huì)】（微信搜索DTCC2014,關(guān)注中國(guó)數(shù)據(jù)庫(kù)技術(shù)大會(huì)公眾號(hào)）現(xiàn)場(chǎng)演講嘉賓染熙老師分享內(nèi)容整理而成。錄音整理及文字編輯IT168@田曉旭@老魚。

染熙，阿里云前端可視化工程師，負(fù)責(zé)DataV組件的架構(gòu)、DataV可視化工具產(chǎn)品，以及數(shù)據(jù)產(chǎn)品的研發(fā)和2015年雙十一的前端開發(fā)。專注于pc端web數(shù)據(jù)可視化的架構(gòu)，探索數(shù)據(jù)可視化自動(dòng)測(cè)試、新型的數(shù)據(jù)可視化等領(lǐng)域。

正文：

大家好，我是來自阿里云數(shù)據(jù)可視化DataV小組的染熙，今天主要是和大家分享一下阿里云數(shù)據(jù)可視化展示平臺(tái)的搭建過程，我會(huì)盡量將整個(gè)過程本真的還原出來，幫助準(zhǔn)備自己搭建平臺(tái)的小伙伴們掃除一些障礙。

我們這個(gè)平臺(tái)是用來搭建大屏的。什么是大屏?大屏是我們集團(tuán)內(nèi)部對(duì)于數(shù)據(jù)可視化的數(shù)據(jù)大屏的一個(gè)簡(jiǎn)稱，目前我們集團(tuán)有三種大屏，第一種是觸摸式大屏，它的最大特點(diǎn)是能夠展示全量的數(shù)據(jù)，一般來說這種大屏都會(huì)帶有互動(dòng)。

第二種大屏是數(shù)據(jù)大屏，也是我們的雙十一大屏，它的特性是展示性非常強(qiáng)，能夠讓大家快速的了解到大屏背后講述的故事。

第三種大屏是數(shù)據(jù)產(chǎn)品類型，這種大屏的圖表都非常簡(jiǎn)單易懂，基本上就是折線、餅圖等等這一類的圖表，對(duì)展示性的需求也不是特別的高，主要目的是讓商家快速讀懂圖表的意思。

有

我們的產(chǎn)品和雙十一大屏頗有淵源，可以說我們的大屏是被雙十一催生出來的，除了雙十一項(xiàng)目之外，我們也會(huì)做一些集團(tuán)內(nèi)部的數(shù)據(jù)大屏。

有

作為大屏背后的程序員，我可以很負(fù)責(zé)任的告訴大家，老板真的超級(jí)愛大屏。他們不僅在平時(shí)的數(shù)據(jù)展示，在談發(fā)展談戰(zhàn)略的時(shí)候非常愛大屏，甚至到看集團(tuán)內(nèi)部的數(shù)據(jù)監(jiān)控時(shí)也非常愛大屏。而且我發(fā)現(xiàn)不止阿里的老板愛大屏，天朝最帥的男人現(xiàn)在也忙著在全球看大屏，圖上左邊是大大在微軟，右邊是大大在帝國(guó)理工。

有

有

數(shù)據(jù)工程師可能會(huì)很容易從第一張圖中獲取到信息，但是普通人就有點(diǎn)困難了。但是如果把它轉(zhuǎn)換成大屏，我們就可以很輕易的從折線圖中獲取到信息。

數(shù)據(jù)可視化過濾了非常多的冗余信息，濃縮了最重要的信息，它的魅力就在于將枯燥的數(shù)據(jù)組織在一起，把最需要的那些編輯成一個(gè)故事。目前大數(shù)據(jù)那么流行，但是其實(shí)大家并不是需要那么多的數(shù)據(jù)，而是需要整合的數(shù)據(jù)，恰當(dāng)?shù)膶⒖蛻糇铌P(guān)注的數(shù)據(jù)挖掘展示出來才是最重要的。

我們做展示平臺(tái)的初衷其實(shí)是當(dāng)時(shí)我們集團(tuán)內(nèi)部對(duì)大屏需求越來越多，如果我們把所有時(shí)間都耗費(fèi)在大屏上，那么我們部門遲早要被拖垮的。但是我們這個(gè)展示平臺(tái)也不是一蹴而就的，它也經(jīng)歷了一段摸索期。

有

圖上就是就是展示平臺(tái)的第一版，大家可以看到它簡(jiǎn)直丑到?jīng)]朋友。第一版其實(shí)就是一個(gè)程序員歪歪用戶需求做出來的。它的中間是大屏的編輯器能夠選擇圖表，頂部是操作步驟。雖然它的界面不漂亮但是我們也從中沉淀了很多東西。

這個(gè)展示平臺(tái)的使用步驟有四步，第一步是選擇模板，第二步是上傳數(shù)據(jù)，第三步是選擇圖表，第四步是生成屏幕。這四大步驟一直延續(xù)到我們的產(chǎn)品中。

有

第二版，設(shè)計(jì)師對(duì)產(chǎn)品進(jìn)行了設(shè)計(jì)，UI發(fā)生了翻天覆地的變化。集團(tuán)內(nèi)部有一位大神對(duì)我們進(jìn)行了指點(diǎn)，他認(rèn)為我們第一版的步驟太繁瑣了，用戶想要的是所見即所得，說的炫酷一點(diǎn)叫沉浸式編輯器。

第三版是去年的六七月份，我們備戰(zhàn)雙十一的項(xiàng)目。這是DataV可視化平臺(tái)的雛形版，我們先來看一下大致的樣子。

有
▲這個(gè)是一個(gè)控制臺(tái)，它可以看到所有的屏幕。

有
▲這是一個(gè)屏幕的管理器，我們可以在屏幕的管理器中對(duì)布局和組件進(jìn)行增刪操作。

有
▲這是DataV配置組件頁(yè)。

有
▲這是DataV數(shù)據(jù)管理器。

這個(gè)雛形版實(shí)際運(yùn)用到了雙十一的項(xiàng)目中，我們先來回顧一下雙十一到底是怎么樣的工作量。

有

2012年，當(dāng)時(shí)的大屏就只有兩張屏，有一個(gè)折線圖和一個(gè)平面地球。

有

2013年，屏幕的數(shù)量增加了，是由五張小屏拼成了一個(gè)大屏。當(dāng)時(shí)平面地球是用SVG做的，右下角還有一個(gè)3D地圖，是用外部的軟件做的。當(dāng)時(shí)的屏幕還有內(nèi)存泄露的問題。

有

2014年，是由5個(gè)小屏拼成一個(gè)大屏，需要幾小時(shí)刷新一次。

有

2015年，一共有27張屏，從11月10號(hào)晚上10點(diǎn)開始，進(jìn)行了一個(gè)長(zhǎng)達(dá)26個(gè)小時(shí)的實(shí)時(shí)可視化渲染。除了之外，還有一個(gè)城市數(shù)據(jù)的渲染，渲染了三四萬的3D城市數(shù)據(jù)。

有

總結(jié)一下2015年的大屏，第一個(gè)是屏幕量劇增，但工期不變，第二個(gè)是數(shù)據(jù)的表達(dá)形式增多，第三個(gè)是效果更炫，性能更好，最后一個(gè)是反應(yīng)速度更快。

第三版展示平臺(tái)并不是線上版，而是線下版。之所以采用線下版，主要是基于以下三點(diǎn)的考量：1.模板不是一開始就有，后期要讓客戶進(jìn)行模板的創(chuàng)建，我們需要一個(gè)半代碼模式去編輯模板的工具;2.線下部屬，有一些客戶非常注重?cái)?shù)據(jù)安全;3.雙十一是一個(gè)模板，而不是從一個(gè)模板演變過來。

有

雛形版解決了哪些問題?第一是開發(fā)成本，我們要做二十七張屏工期還不變，那么如何提升工作效率，降低開發(fā)的成本?首先用工具解構(gòu)大屏頁(yè)面，都是前端頁(yè)面(HTML+CSS+JS)。但是DataV從2012年沉淀了許許多多的組件庫(kù)，包括3D地圖、2D地圖以及一些基礎(chǔ)的圖表組件庫(kù)。我們對(duì)所有的組件進(jìn)行統(tǒng)一的規(guī)范化處理，有標(biāo)準(zhǔn)規(guī)范的輸入和輸出。

有

這張圖是雙十一大屏的解構(gòu)，它把上面所有的組件都畫出來了。我們發(fā)現(xiàn)除了畫出來的組件，還有一些剩下的東西，例如標(biāo)題、裝飾性的框和背景等等，這些東西怎么辦呢?我們也把它當(dāng)做組件來處理。這樣做了以后，我們發(fā)現(xiàn)做一個(gè)大屏，剩下的工作量也不是特別多，主要就是去調(diào)整擺放位置，細(xì)化每一個(gè)組件。

第二是數(shù)據(jù)的來源不統(tǒng)一。客戶數(shù)據(jù)來源不統(tǒng)一是一個(gè)普遍問題，它可能是不一樣的數(shù)據(jù)庫(kù)，可能是API也可能是各種文檔系統(tǒng)，但是我們克服了這個(gè)問題，阿里云上有各種各樣的數(shù)據(jù)庫(kù)來支持我們的客戶。

第三是組件之間是怎么通話的。組件之間的通話是很好實(shí)現(xiàn)的，我們屏幕上有一個(gè)時(shí)間器，每當(dāng)?shù)搅送砩系牧泓c(diǎn)鐘會(huì)告訴所有的組件“灰姑娘的時(shí)間到了”，大家都要清空，這時(shí)候這個(gè)組件就發(fā)起了和別的組件的通話。每個(gè)大屏都有一個(gè)獨(dú)立的作用域期間，在這個(gè)區(qū)間內(nèi)可以獲取到所有的組件信息，可以對(duì)所有的組件發(fā)起命令。

有

第四是屏幕之間的通話。雙十一我們有一個(gè)城市大屏，它由六個(gè)小屏組成的，我們要讓這六個(gè)小屏同時(shí)依照北京、上海、廣州、深圳、杭州這五個(gè)城市進(jìn)行輪播的。我們電腦端有一個(gè)屏來控制輪播事件，比如我們進(jìn)行輪播之后，每?jī)擅霊?yīng)該是會(huì)切換到下一個(gè)城市的，并且是同時(shí)的。

但是也會(huì)有一些意外情況發(fā)生。比如其它屏都輪播的到杭州了，突然新冒出一個(gè)屏，這個(gè)屏是北京。就像在軍訓(xùn)的時(shí)候，大家都在一二一二走，突然走進(jìn)來一個(gè)人，他和大家的步調(diào)不一致，那怎么辦?這時(shí)需要有一個(gè)教官喊口令，進(jìn)來的同學(xué)必須要聽教官的口令協(xié)調(diào)自己的步伐。所以我們的做法也是一樣，控制臺(tái)就是我們的教官，它會(huì)跟所有的屏幕發(fā)起一個(gè)命令，這個(gè)屏聽到這個(gè)命令之后會(huì)協(xié)調(diào)自己的步伐，

如果一不小心控制臺(tái)被關(guān)閉了，就像軍訓(xùn)的時(shí)候，教官走了大家會(huì)如何行動(dòng)呢?我們理論上是繼續(xù)一二一二的走，每塊屏都有一個(gè)各自的輪播系統(tǒng)繼續(xù)支持輪播，

還有一個(gè)情況，就是我們突然又打開一個(gè)控制屏，就是軍訓(xùn)的時(shí)候又來一個(gè)教官，主教官說的是一二一二，副教官說的是二一二一。這時(shí)候我們應(yīng)該聽主教官的，我們采用Token機(jī)制，讓所有屏幕都聽主教官的而不是副教官。

因?yàn)殡p十一的時(shí)候網(wǎng)絡(luò)是異常緩慢和延遲的，我們不能保證每個(gè)屏都能迅速同時(shí)的收取到控制臺(tái)的命令，那怎么辦?我們當(dāng)時(shí)是對(duì)每個(gè)屏幕進(jìn)行一個(gè)約定，當(dāng)接受到教官的命令的時(shí)候，不要立馬就開始走，過兩秒后再進(jìn)行輪播。

有

第五，我們?nèi)绾伪ＷC每塊屏的健康狀況。我們要知道屏幕是不是突然掛了，或者數(shù)據(jù)是不是渲染不對(duì)了。當(dāng)時(shí)我們做了一個(gè)產(chǎn)品控制臺(tái)，它看到所有屏幕的現(xiàn)狀，綠色的框代表屏幕是打開的。截圖對(duì)比和自動(dòng)化測(cè)試也在嘗試中。

第六，數(shù)據(jù)安全，有一些用戶對(duì)數(shù)據(jù)的安全問題是比較在意的，我們會(huì)做一個(gè)線下版，主動(dòng)部屬到他們的機(jī)器上。

第七，大家應(yīng)該會(huì)經(jīng)常遇到，產(chǎn)品已經(jīng)發(fā)布了，但是產(chǎn)品經(jīng)理突然要求改需求。怎么辦?我們做了組件配置的頁(yè)面，可以用來做熱更新，就像大家可能知道一些IOS的熱更新發(fā)布，也是靠動(dòng)態(tài)html頁(yè)面來完成的。

有

雙十一頁(yè)面能夠比較穩(wěn)定和有效率的開發(fā)完成依賴于這樣的一個(gè)平臺(tái)。除此之外，我們還和其他合作伙伴合作開發(fā)雛形版，左上圖是郡縣圖治，這個(gè)產(chǎn)品主要是面向市鎮(zhèn)縣村的辦公廳的數(shù)據(jù)展示的，右上圖是貨車幫，最下面的是浙江省經(jīng)濟(jì)云圖。

下面真正要講到我們線上的可視化平臺(tái)了。

有

這是首頁(yè)的控制臺(tái)，可以進(jìn)行模板創(chuàng)建，最核心的是編輯的配置頁(yè)面。大家去https://datav.aliyun.com申請(qǐng)產(chǎn)品試用。數(shù)據(jù)可視化不是一個(gè)前端，它涉及到數(shù)據(jù)汲取、清洗、可持久化，進(jìn)行API封裝，最后選擇一個(gè)比較合適的可視化場(chǎng)景，中間還涉及到圖形圖像、設(shè)計(jì)和產(chǎn)品等等。所以數(shù)據(jù)可視化是一個(gè)非常綜合性的學(xué)科，那么到底是哪些人在玩數(shù)據(jù)分析呢?

有

1.可能不擅設(shè)計(jì)，或者是對(duì)復(fù)雜設(shè)計(jì)展現(xiàn)經(jīng)驗(yàn)不足的人;

2.可能不愿意耗費(fèi)大量的時(shí)間和精力去開發(fā)可視圖表與;

3.對(duì)于非傳統(tǒng)的展現(xiàn)缺乏相關(guān)的組件和工具支持，比如很多的數(shù)據(jù)分析工作者都是用Excel進(jìn)行數(shù)據(jù)可視化，但是Excel只有一些基礎(chǔ)的折線，還沒有非傳統(tǒng)的展現(xiàn);

4.可能不想面對(duì)太多的分辨率適配的問題;

5.可能目前暫時(shí)無法很好的支持大數(shù)據(jù)的分析展示。

我們發(fā)現(xiàn)這些人都非常熱愛數(shù)據(jù)可視化，他們都恰好在數(shù)據(jù)可視化這個(gè)環(huán)中缺少一個(gè)鏈。所以，我們希望他們能在我們的平臺(tái)上獲得一些樂趣，能夠創(chuàng)造價(jià)值，能夠推進(jìn)數(shù)據(jù)可視化的發(fā)展。

目前大眾的數(shù)據(jù)意識(shí)都提高了，之前大家還覺得數(shù)據(jù)可視化是一個(gè)徒有外表的東西，但是現(xiàn)在大家都意識(shí)到它的重要性了。普通大眾在看到自己的淘寶十年帳單，他們真的會(huì)從帳單中分析自己的購(gòu)物習(xí)慣。

下面我們來看一下可視化平臺(tái)能夠?yàn)榇蠹規(guī)硎裁础?/span>

有

如果你不擅設(shè)計(jì)，但是又要做一個(gè)可視化產(chǎn)品，怎么辦?平臺(tái)會(huì)為你提供一些模板，我們部門后期還和一些行業(yè)內(nèi)非常有特點(diǎn)的合作伙伴進(jìn)行合作，比如說右下角那個(gè)非常具有地理信息可視化的模板就非常適合提供給一些有設(shè)備管理方面的人進(jìn)行數(shù)據(jù)可視化。

有

組件的形式不夠豐富，無論你用的哪個(gè)組件庫(kù)，都有用煩的一天，我們希望能夠有更豐富的形式來展示數(shù)據(jù)可視化，所以我們開發(fā)了組件服務(wù)中心，所有對(duì)數(shù)據(jù)可視化感興趣的人都可以去上傳自己的組件，也可以對(duì)現(xiàn)有的開源組件進(jìn)行擴(kuò)展，發(fā)送到組件服務(wù)中心。右邊的編輯器也可以進(jìn)行實(shí)時(shí)的配置和數(shù)據(jù)的修改。

有

當(dāng)我們選擇數(shù)據(jù)庫(kù)之后，進(jìn)行數(shù)據(jù)庫(kù)開發(fā)的人可以在這邊寫SQL，大大提高了他們的工作效率。

有

這是拖拽式編輯器。

有

有

最后來回顧一下，我們整個(gè)架構(gòu)的改進(jìn)的演進(jìn)過程。一開始它可能就是簡(jiǎn)單的一個(gè)服務(wù)器和一個(gè)前端的頁(yè)面，我們從中抽離出我們想要的組件，除了本地的組件之外，我們還有遠(yuǎn)端組件，使用組件服務(wù)中心來管理遠(yuǎn)端組件;之后我們?yōu)楸镜胤?wù)做了一個(gè)線上產(chǎn)品;最后是數(shù)據(jù)服務(wù)管理器，右下角有一個(gè)開發(fā)套件，它有一些命令行式的操作，會(huì)迅速產(chǎn)生一個(gè)組件包，具體操作大家可以參考里面的案例和組件功能。

我特別希望這個(gè)數(shù)據(jù)可視化展示平臺(tái)幫能夠幫助各位老板，讓展示和決策變得有信心;能夠幫到運(yùn)營(yíng)同學(xué)，讓數(shù)據(jù)盡在掌握;能夠幫助設(shè)備管理同學(xué)，讓預(yù)警和維護(hù)效率提升;最重要的是能夠幫助數(shù)據(jù)工作者，讓數(shù)據(jù)離我們更進(jìn)一步。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


相關(guān)文章 



日歷

鏈接

個(gè)人資料

存檔