大屏設計係列之六||-陕西省国资委网站:有"屏"有據||_众彩网可信吗,阿裏雙11大屏是怎樣煉成的

2017-4-10 藍藍 設計思維

如果您想訂閱本博客內容||公顷与亩的换算,每天自動發到您的郵箱中||保定独立团网, 請點這裏

【IT168 專稿】本文根據【2016 第七屆中國數據庫技術大會】(微信搜索DTCC2014,關注中國數據庫技術大會公眾號)現場演講嘉賓染熙老師分享內容整理而成-__南庄四中ed2k。錄音整理及文字編輯IT168@田曉旭@老魚|__中国大陆身份证生成器。

染熙|北京466耳鼻喉科,阿裏雲前端可視化工程師_-衡水热线,負責DataV組件的架構--|致富财路、DataV可視化工具產品|__2019注册有彩金送的彩票网站,以及數據產品的研發和2015年雙十一的前端開發-_-易旺彩票平台。專注於pc端web數據可視化的架構__36选7好彩3奖金多少,探索數據可視化自動測試|_李宁鞋码对照表、新型的數據可視化等領域---pes2014下载。

正文-||038彩票官方ios:

大家好-__标靶药物治疗,我是來自阿裏雲數據可視化DataV小組的染熙-_锦州论坛,今天主要是和大家分享一下阿裏雲數據可視化展示平台的搭建過程|亿客隆彩票注册,我會盡量將整個過程本真的還原出來__永诚彩票,幫助準備自己搭建平台的小夥伴們掃除一些障礙-|诺基亚6700s拆机。

我們這個平台是用來搭建大屏的-_掌上恭城下载平台。什麼是大屏?大屏是我們集團內部對於數據可視化的數據大屏的一個簡稱_-银行期票,目前我們集團有三種大屏_强度电影,第一種是觸摸式大屏|-_鹿少女,它的最大特點是能夠展示全量的數據|-tisdeny,一般來說這種大屏都會帶有互動|青岛火车站电话。

第二種大屏是數據大屏|_珠海轻轨时刻表,也是我們的雙十一大屏_-_诺基亚n79主题下载,它的特性是展示性非常強|-诺基亚3600s拆机,能夠讓大家快速的了解到大屏背後講述的故事-|_长官爱人19楼。

第三種大屏是數據產品類型||2017电改国网裁员50万,這種大屏的圖表都非常簡單易懂_-武汉的小吃,基本上就是折線_||laichien、餅圖等等這一類的圖表_众彩国际app,對展示性的需求也不是特別的高---考察干部谈话,主要目的是讓商家快速讀懂圖表的意思--苏州移动话费查询。

有

我們的產品和雙十一大屏頗有淵源|可肤冰肌白乳液,可以說我們的大屏是被雙十一催生出來的-|-于宏洁2013年讲道集,除了雙十一項目之外-_年轻女教师4,我們也會做一些集團內部的數據大屏_-_姜云凡。

有

作為大屏背後的程序員-|-天目通手机维修论坛,我可以很負責任的告訴大家-_星岛田阳子,老板真的超級愛大屏---永盛国际彩票靠谱么。他們不僅在平時的數據展示|_-陈欣和,在談發展談戰略的時候非常愛大屏|上海闹市裸拍女下载,甚至到看集團內部的數據監控時也非常愛大屏_-369彩票官网平台。而且我發現不止阿裏的老板愛大屏|-快穿拯救深情男配h全文,天朝最帥的男人現在也忙著在全球看大屏-|柳州音乐网,圖上左邊是大大在微軟-autocad2004免费下载,右邊是大大在帝國理工-云顶娱乐彩票注册。

有

有

數據工程師可能會很容易從第一張圖中獲取到信息_|_阜新苏阳,但是普通人就有點困難了|_|众赢彩票娱乐有限公司。但是如果把它轉換成大屏|大石桥租房网,我們就可以很輕易的從折線圖中獲取到信息___张檬陈楚河。

數據可視化過濾了非常多的冗餘信息_--093彩票苹果,濃縮了最重要的信息_--触动陷阱,它的魅力就在於將枯燥的數據組織在一起-__新密这五个人火了,把最需要的那些編輯成一個故事-|-3M彩票注册。目前大數據那麼流行_|_金华艾克医院院长孙尚见,但是其實大家並不是需要那麼多的數據||喜孕宝,而是需要整合的數據|--南京长江骨科医院,恰當的將客戶最關注的數據挖掘展示出來才是最重要的||手机qq 2010。

我們做展示平台的初衷其實是當時我們集團內部對大屏需求越來越多|--谢谢你的温柔歌词,如果我們把所有時間都耗費在大屏上--青岛八度空间纹身,那麼我們部門遲早要被拖垮的_-|诺基亚1600保密码。但是我們這個展示平台也不是一蹴而就的|-芬兰语好学吗,它也經曆了一段摸索期_|盈彩彩票是不是黑网。

有

圖上就是就是展示平台的第一版--|2013年母亲节是几月几号,大家可以看到它簡直醜到沒朋友__儿童画春天的图片。第一版其實就是一個程序員歪歪用戶需求做出來的-22249平特肖。它的中間是大屏的編輯器能夠選擇圖表金色池塘自助餐,頂部是操作步驟||_副镇长辞职。雖然它的界麵不漂亮但是我們也從中沉澱了很多東西-_|魏征进。

這個展示平台的使用步驟有四步_-北京法院拍卖二手车,第一步是選擇模板|_-云顶至尊户型图,第二步是上傳數據-|初中数学教案模板,第三步是選擇圖表--_234彩票信誉怎么样,第四步是生成屏幕-|定陶县教育信息网。這四大步驟一直延續到我們最新的產品中|-_苏州寒山寺门票价格。

有

第二版___程妙可,設計師對產品進行了設計||康美药业主题曲,UI發生了翻天覆地的變化_-|雪碧真我篮球。集團內部有一位大神對我們進行了指點|__陕西交通厅曹森,他認為我們第一版的步驟太繁瑣了_-_众购彩票开奖直播网,用戶想要的是所見即所得--_同心圆软件,說的炫酷一點叫沉浸式編輯器|重庆万盛黑山论坛。

第三版是去年的六七月份|-_jindon京东商城,我們備戰雙十一的項目-|1999年杭州彩票中奖号码查询。這是DataV可視化平台的雛形版_苏州车管所网上选号,我們先來看一下大致的樣子|--石家庄43中电话。

有
▲這個是一個控製台_--新商盟卷烟超市,它可以看到所有的屏幕云天国际彩票怎么样。

有
▲這是一個屏幕的管理器_-_诛仙飞升任务流程,我們可以在屏幕的管理器中對布局和組件進行增刪操作|_云联惠最新消息。

有
▲這是DataV配置組件頁--|功夫2百度影音。

有
▲這是DataV數據管理器|_亿贝是什么个平台。

這個雛形版實際運用到了雙十一的項目中|__相逢是首歌原唱,我們先來回顧一下雙十一到底是怎麼樣的工作量__|孝义广电传媒。

有

2012年_-自行车比汽车污染更严重,當時的大屏就隻有兩張屏__-靓眼网,有一個折線圖和一個平麵地球||_众购彩票网。

有

2013年|-爱划算,屏幕的數量增加了_|39手机网 昆明,是由五張小屏拚成了一個大屏_|易投宝彩票注册。當時平麵地球是用SVG做的晋城五人,右下角還有一個3D地圖-_赢彩彩票中奖能提现吗?,是用外部的軟件做的-58创业加盟网。當時的屏幕還有內存泄露的問題-|玄魔神变。

有

2014年--拍拍网的东西是真的吗,是由5個小屏拚成一個大屏|_|120dj,需要幾小時刷新一次--锡崖沟。

有

2015年_--娱乐天地彩票官网,一共有27張屏_-_武汉高职高专学校排名,從11月10號晚上10點開始_-_金良顺,進行了一個長達26個小時的實時可視化渲染__|168彩票网站是真的吗。除了之外__蓝天使q9,還有一個城市數據的渲染_|娱乐天地是不是合法,渲染了三四萬的3D城市數據_--英菲迪尼qx56。

有

總結一下2015年的大屏_-36选7好彩3奖金,第一個是屏幕量劇增||q币购物券有什么用,但工期不變__168彩票手机版,第二個是數據的表達形式增多|__水族zadull,第三個是效果更炫-_天府新区总体规划,性能更好三大舰队,最後一個是反應速度更快_|-春公图。

第三版展示平台並不是線上版-芦荟棉是什么面料,而是線下版__|傲盾代理。之所以采用線下版__阿瓦提县政府网,主要是基於以下三點的考量-_江苏省盐城中学:1.模板不是一開始就有--拜毯,後期要讓客戶進行模板的創建--众购彩票是真的吗,我們需要一個半代碼模式去編輯模板的工具;2.線下部屬-_亿博彩票手机端,有一些客戶非常注重數據安全;3.雙十一是一個模板|_|丧尸类电影,而不是從一個模板演變過來||黄丽满简历。

有

雛形版解決了哪些問題?第一是開發成本||中国军衔胸章,我們要做二十七張屏工期還不變|_-亿博娱乐彩票,那麼如何提升工作效率||药酒是在哪个朝代之后出现的,降低開發的成本?首先用工具解構大屏頁麵__工商银行账号,都是前端頁麵(HTML+CSS+JS)__|198彩平台正规吗。但是DataV從2012年沉澱了許許多多的組件庫_|-淘宝二手市场,包括3D地圖--sss355、2D地圖以及一些基礎的圖表組件庫|_陇南教育网。我們對所有的組件進行統一的規範化處理_-|印度电视剧新娘之无悔的爱,有標準規範的輸入和輸出|-易旺彩票地址是多少。

有

這張圖是雙十一大屏的解構成都红绳网,它把上麵所有的組件都畫出來了--_杨幂不雅视频种子。我們發現除了畫出來的組件__什么车性价比高,還有一些剩下的東西|车之旅自驾游资讯网,例如標題-_舅舅和外甥的关系、裝飾性的框和背景等等|七咲风花,這些東西怎麼辦呢?我們也把它當做組件來處理__|234彩票客服怎么联系。這樣做了以後-_上海苏宁电器官网,我們發現做一個大屏||1分快3彩票合法吗,剩下的工作量也不是特別多_188福地彩票官网,主要就是去調整擺放位置_--淄博豪哥健身俱乐部,細化每一個組件---新农村房屋模型。

第二是數據的來源不統一|金陵丸子是哪里的菜。客戶數據來源不統一是一個普遍問題_-_亿鑫彩票,它可能是不一樣的數據庫_-_易发彩票资金安全吗,可能是API也可能是各種文檔係統|_中国乐队名字,但是我們克服了這個問題-|雪见图片,阿裏雲上有各種各樣的數據庫來支持我們的客戶||教师工资标准。

第三是組件之間是怎麼通話的--金甲虫鼠标。組件之間的通話是很好實現的_|-攻略男神h书包网手机版,我們屏幕上有一個時間器-|-尊彩安全吗,每當到了晚上的零點鍾會告訴所有的組件“灰姑娘的時間到了”__69代理,大家都要清空|-|车辆产权证,這時候這個組件就發起了和別的組件的通話__-办厂好项目。每個大屏都有一個獨立的作用域期間_-|168娱乐2app,在這個區間內可以獲取到所有的組件信息_筱月桂,可以對所有的組件發起命令-青浦人才。

有

第四是屏幕之間的通話_盈发彩票网址。雙十一我們有一個城市大屏沪指最低点,它由六個小屏組成的-uc蝴蝶版下载,我們要讓這六個小屏同時依照北京_注册送188彩票、上海-|_阿克苏教育局、廣州___长沙坎城红毯、深圳|-小县城里的故事、杭州這五個城市進行輪播的-|妖精的尾巴洒洒。我們電腦端有一個屏來控製輪播事件-亿彩官网下载安装,比如我們進行輪播之後-11068移动彩票,每兩秒應該是會切換到下一個城市的__掌上足球专业版下载,並且是同時的|-|练级网游。

但是也會有一些意外情況發生-|-nissen汽车。比如其它屏都輪播的到杭州了_|林志炫北京演唱会,突然新冒出一個屏__|咬人猫黑历史,這個屏是北京_-5个人出名了。就像在軍訓的時候-|-脑残不死 圣战不休,大家都在一二一二走|_华录s9000,突然走進來一個人_||365彩票网3d走势图,他和大家的步調不一致-绍兴古筝,那怎麼辦?這時需要有一個教官喊口令-__3分pk10是正规彩票吗,進來的同學必須要聽教官的口令協調自己的步伐-|248彩票投注软件。所以我們的做法也是一樣_-淘宝网开店,控製台就是我們的教官|-高林生舒淇,它會跟所有的屏幕發起一個命令_|新娘无悔的爱,這個屏聽到這個命令之後會協調自己的步伐__|小学家长会主题,

如果一不小心控製台被關閉了-||诺基亚5802xm,就像軍訓的時候-|中乙联赛官网,教官走了大家會如何行動呢?我們理論上是繼續一二一二的走-iphone5联通合约机套餐,每塊屏都有一個各自的輪播係統繼續支持輪播-||168娱乐2平台是骗局吗,

還有一個情況--注册送金币,就是我們突然又打開一個控製屏|--尊龙网上娱乐,就是軍訓的時候又來一個教官|_running man 宋茜,主教官說的是一二一二-__138影视,副教官說的是二一二一__-防火塑料布。這時候我們應該聽主教官的_-_05年到18年彩票中奖号码,我們采用Token機製_钚电池,讓所有屏幕都聽主教官的而不是副教官|||指险套。

因為雙十一的時候網絡是異常緩慢和延遲的-众彩彩票注册,我們不能保證每個屏都能迅速同時的收取到控製台的命令_|k722次列车,那怎麼辦?我們當時是對每個屏幕進行一個約定-_-易富彩票首页,當接受到教官的命令的時候-|-爱祖国爱家乡的画,不要立馬就開始走-|_脉搏士,過兩秒後再進行輪播|_衣尚网。

有

第五|-|掌游彩官网下载,我們如何保證每塊屏的健康狀況|_|栾城贴吧。我們要知道屏幕是不是突然掛了_塔罗牌大师tlp6868668,或者數據是不是渲染不對了___长春速腾车友会。當時我們做了一個產品控製台|_长沙黄花机场到火车站,它看到所有屏幕的現狀||-dnf智能娃娃机怎么用,綠色的框代表屏幕是打開的|_涪风论坛。截圖對比和自動化測試也在嚐試中__南阳卫生网。

第六-|谜语人的灵蛇,數據安全|-长乐市人民政府网,有一些用戶對數據的安全問題是比較在意的-|_36选7开奖中奖规则复式,我們會做一個線下版-_-应昊茗,主動部屬到他們的機器上-|青年工社。

第七-__2m彩票2m永久费资料,大家應該會經常遇到___爱相约国际交友网,產品已經發布了-2019年白姐先锋诗,但是產品經理突然要求改需求|芭蕾舞剧牡丹亭。怎麼辦?我們做了組件配置的頁麵|__永盛彩票骗局,可以用來做熱更新_|008彩票论坛ll,就像大家可能知道一些IOS的熱更新發布_--花若瞳,也是靠動態html頁麵來完成的|-_五个人火了。

有

雙十一頁麵能夠比較穩定和有效率的開發完成依賴於這樣的一個平台|_-360彩票购彩大厅。除此之外_|-洛克王国潘多许愿蛋,我們還和其他合作夥伴合作開發雛形版|-义乌库存鞋批发,左上圖是郡縣圖治-__罗格电器,這個產品主要是麵向市鎮縣村的辦公廳的數據展示的|_杨镇一中网,右上圖是貨車幫_|106福利版彩票安卓,最下麵的是浙江省經濟雲圖_|雪在飞。

下麵真正要講到我們線上的可視化平台了_|-长青贝妮。

有

這是首頁的控製台_永胜国际彩票正规吗,可以進行模板創建-_北京十二中游泳馆,最核心的是編輯的配置頁麵-|_150号段。大家去https://datav.aliyun.com申請產品試用_--意林少年版在线阅读。數據可視化不是一個前端|_3分PK10,它涉及到數據汲取|_定陶教育网、清洗_-|132彩票登录、可持久化-|长武公众信息网,進行API封裝-_长篇小说征稿,最後選擇一個比較合適的可視化場景铁哥们助手,中間還涉及到圖形圖像-_-众乐网彩票、設計和產品等等_-248彩票网可靠吗。所以數據可視化是一個非常綜合性的學科|-|苯达松,那麼到底是哪些人在玩數據分析呢?

有

1.可能不擅設計-|魏氏膏,或者是對複雜設計展現經驗不足的人;

2.可能不願意耗費大量的時間和精力去開發可視圖表與特效;

3.對於非傳統的展現缺乏相關的組件和工具支持|__米粒资源网,比如很多的數據分析工作者都是用Excel進行數據可視化||锦皓,但是Excel隻有一些基礎的折線__-168彩票网官方版,還沒有非傳統的展現;

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

5.可能目前暫時無法很好的支持大數據的分析展示--100元彩金卡。

我們發現這些人都非常熱愛數據可視化_-|张本渝 阿ben,他們都恰好在數據可視化這個環中缺少一個鏈_|长白瀑布。所以-乔任梁死亡现场,我們希望他們能在我們的平台上獲得一些樂趣||-中央政治局常委人数,能夠創造價值_驿站网络日记本,能夠推進數據可視化的發展_山海情缘东方神韵。

目前大眾的數據意識都提高了_-亿彩彩票APP,之前大家還覺得數據可視化是一個徒有外表的東西-_年末负债总额,但是現在大家都意識到它的重要性了_|鹰彩App。普通大眾在看到自己的淘寶十年帳單_-寻找了解绝杀技,他們真的會從帳單中分析自己的購物習慣||_国家医考网登录入口。

下麵我們來看一下可視化平台能夠為大家帶來什麼|--柏原崇佟丽娅亲密照。

有

如果你不擅設計_|易盈彩票靠谱吗?,但是又要做一個可視化產品||李天一受害教师照片,怎麼辦?平台會為你提供一些模板__qq2011版官方下载,我們部門後期還和一些行業內非常有特點的合作夥伴進行合作陇南教育网,比如說右下角那個非常具有地理信息可視化的模板就非常適合提供給一些有設備管理方麵的人進行數據可視化__女特工电影。

有

組件的形式不夠豐富|--设备管理器没有鼠标,無論你用的哪個組件庫||观赏鱼之家水族zadull,都有用煩的一天--觅食的意思,我們希望能夠有更豐富的形式來展示數據可視化-|_杨幂被灌醉性侵视频,所以我們開發了組件服務中心-_-盈发彩票可信吗,所有對數據可視化感興趣的人都可以去上傳自己的組件_疥舒宁多少钱一盒,也可以對現有的開源組件進行擴展_|-浙江教师培训管理平台,發送到組件服務中心||_2018白菜注册网。右邊的編輯器也可以進行實時的配置和數據的修改||_qq互赞群。

有

當我們選擇數據庫之後_-|3cp彩票注册,進行數據庫開發的人可以在這邊寫SQL|-耐美金,大大提高了他們的工作效率_|苏州寒山寺招聘尼姑。

有

這是拖拽式編輯器|_|苏西 埃米斯。

有

有

最後來回顧一下||f1电影网,我們整個架構的改進的演進過程-|_觅食的意思。一開始它可能就是簡單的一個服務器和一個前端的頁麵_|www hhcxxd com,我們從中抽離出我們想要的組件--聊斋奇女子之小谢,除了本地的組件之外-|_盐城一中吧,我們還有遠端組件__洛阳绿营,使用組件服務中心來管理遠端組件;之後我們為本地服務做了一個線上產品;最後是數據服務管理器||gm730e,右下角有一個開發套件--_2元机选双色球中等奖,它有一些命令行式的操作|-_118彩票手机版苹果,會迅速產生一個組件包__云购彩票是骗局吗,具體操作大家可以參考裏麵的案例和組件功能_街头篮球葡萄论坛。

我特別希望這個數據可視化展示平台幫能夠幫助各位老板_|cctv11在线直播电视,讓展示和決策變得有信心;能夠幫到運營同學_-陈雪明,讓數據盡在掌握;能夠幫助設備管理同學|-|义务教育课程标准实验教科书,讓預警和維護效率提升;最重要的是能夠幫助數據工作者_|_盈彩彩票软件,讓數據離我們更進一步|||重庆老火锅赵亮。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-|l乐蜂网,為期望卓越的國內外企業提供卓越的UI界麵設計|-冰心奶奶的原名、BS界麵設計 ||求佛临淄方言版、 cs界麵設計 --|紫砂饮水机、 ipad界麵設計 _-色啦啦、 包裝設計 -118彩票登录网址、 圖標定製 |谢园的学生、 用戶體驗 |__舞动奇迹 胡定欣、交互設計|金大班结局、 網站建設 -__夹心取力器、平麵設計服務


相關文章 



標簽: 大屏設計 大屏可視化設計 大屏界麵設計 大數據可視化分析 大數據可視化技術 大數據可視化效果圖 數據可視化大屏定製

Powered by emlog 京ICP備12006971號-1 sitemap