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

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

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

【IT168 專稿】本文根據(jù)【2016 第七屆中國數(shù)據(jù)庫技術(shù)大會】(微信搜索DTCC2014,關(guān)注中國數(shù)據(jù)庫技術(shù)大會公眾號)現(xiàn)場演講嘉賓染熙老師分享內(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)測試、新型的數(shù)據(jù)可視化等領(lǐng)域。

正文:

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

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

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

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

有

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

有

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

有

有

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

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

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

有

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

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

有

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

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

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

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

有
▲這是DataV配置組件頁。

有
▲這是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號晚上10點(diǎn)開始,進(jìn)行了一個(gè)長達(dá)26個(gè)小時(shí)的實(shí)時(shí)可視化渲染。除了之外,還有一個(gè)城市數(shù)據(jù)的渲染,渲染了三四萬的3D城市數(shù)據(jù)。

有

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

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

有

雛形版解決了哪些問題?第一是開發(fā)成本,我們要做二十七張屏工期還不變,那么如何提升工作效率,降低開發(fā)的成本?首先用工具解構(gòu)大屏頁面,都是前端頁面(HTML+CSS+JS)。但是DataV從2012年沉淀了許許多多的組件庫,包括3D地圖、2D地圖以及一些基礎(chǔ)的圖表組件庫。我們對所有的組件進(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ù)庫,可能是API也可能是各種文檔系統(tǒng),但是我們克服了這個(gè)問題,阿里云上有各種各樣的數(shù)據(jù)庫來支持我們的客戶。

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

有

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

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

如果一不小心控制臺被關(guān)閉了,就像軍訓(xùn)的時(shí)候,教官走了大家會如何行動(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í)的收取到控制臺的命令,那怎么辦?我們當(dāng)時(shí)是對每個(gè)屏幕進(jìn)行一個(gè)約定,當(dāng)接受到教官的命令的時(shí)候,不要立馬就開始走,過兩秒后再進(jìn)行輪播。

有

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

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

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

有

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

下面真正要講到我們線上的可視化平臺了。

有

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

有

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

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

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

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

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

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

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

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

有

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

有

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

有

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

有

這是拖拽式編輯器。

有

有

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

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

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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è)人資料

存檔