為什么要做數(shù)據(jù)大屏？
現(xiàn)如今的大數(shù)據(jù)逐漸發(fā)揮出了它的力量，并無形的改變著我們的生活。但大數(shù)據(jù)在不是從事技術(shù)開發(fā)的人來說沒有很明顯的感受，很多人對大數(shù)據(jù)的概念只是停留在每年網(wǎng)易云音樂對個人聽歌的匯總上亚情、知乎2017年解鎖的知識成就、微信新年的個人社交分析哈雏、支付寶的年終賬單等势似。其迫切的需要通過一些媒介展現(xiàn)數(shù)據(jù)的威力拌夏，而數(shù)據(jù)大屏作為大數(shù)據(jù)展示媒介的一種，廣泛運用于各種展示廳履因、會展障簿、發(fā)布會及各種狂歡節(jié)中，其中不乏一些通用的處理方案：阿里巴巴集團(tuán)的DataV產(chǎn)品栅迄。其大屏有多種主題站故，提供多種模版，設(shè)計的非常的震撼毅舆，DataV也用于展現(xiàn)歷年雙十一的盛況西篓。
而公司的大數(shù)據(jù)工作組就需要通過數(shù)據(jù)大屏展示一些處理過后有價值的信息，因此需求孕育而生憋活。下面的截圖是產(chǎn)品迭代四次之后在公司大屏展示廳的照片岂津，第五次迭代還在開發(fā)中。
用Vue做基礎(chǔ)的框架是不是合適悦即？
絕對合適吮成，就現(xiàn)在運用的情況來說，Vue適合95%的網(wǎng)頁應(yīng)用開發(fā)辜梳，幾乎任何的網(wǎng)頁應(yīng)用Vue都有對應(yīng)的解決方案粱甫，而且開發(fā)效率極高，甚至由于它組件化的特性作瞄，尤其適合完成一些需求不明確茶宵、需求在應(yīng)用開發(fā)的過程中一直會發(fā)生變化、需要快速迭代出一個新版本的開發(fā)宗挥。而最終參與制作的產(chǎn)品就是一個在需求不明確的情況下慢慢變成一個產(chǎn)品的乌庶。
程序員如何產(chǎn)生想法再落實到實際開發(fā)？
眾所周知契耿，程序員是碼代碼的瞒大，而設(shè)計產(chǎn)品不是程序員的強(qiáng)項，很不巧的是我就是那個碼代碼宵喂，不太會設(shè)計的程序員，但通過一些訣竅会傲，還是能夠設(shè)計出一款不錯的大屏應(yīng)用的锅棕。下面就來介紹一下里面的一些技巧，這些技巧其實還適用于其他的產(chǎn)品設(shè)計淌山。
數(shù)據(jù)大屏設(shè)計歸根結(jié)底就是一個在極端寬闊的屏幕上做應(yīng)用的開發(fā)裸燎，因此大屏設(shè)計往往強(qiáng)調(diào)的是大數(shù)據(jù)迸發(fā)的一瞬間大量的數(shù)據(jù)信息通過一定的可視化形式瞬間沖入腦海的驚艷感。讓人感覺數(shù)據(jù)距離大家不是這么的遙遠(yuǎn)泼疑，而給人一種觸手可及的感覺德绿。
數(shù)據(jù)大屏的設(shè)計其實是有訣竅的，掌握了一些訣竅，在知道了公司大數(shù)據(jù)組大概需要展示哪些內(nèi)容之后移稳，不需要UI蕴纳，程序員自己也能配合產(chǎn)品經(jīng)理、企劃部和DBA完成一個數(shù)據(jù)大屏產(chǎn)品的設(shè)計个粱。
步驟分為
確定基色->尋找靈感->思考實施->作出第一個原型->再次了解需求->多次修改產(chǎn)品->優(yōu)化細(xì)節(jié)
后面的步驟需要循環(huán)多次古毛，歸根結(jié)底就是一個典型的需求不明確快速迭代的原型開發(fā)。
- 確定基色和尋找靈感
確定基色不是很難都许，由于是大屏稻薇，采用深色做背景，最重要的是要有靈感胶征，初期的需求分析了解到了需要在大屏上存放的內(nèi)容如下：
- 兩塊地圖
- 三個大數(shù)據(jù)數(shù)值的統(tǒng)計
- 流程圖展示
- 實時提單詳細(xì)展示
- 收發(fā)報文統(tǒng)計展示
在確定了初期的需求之后塞椎，接下來就是思考如何把這些需求落實到頁面上。如何在頁面上展示這些內(nèi)容睛低。而數(shù)據(jù)大屏的展示案狠，數(shù)據(jù)大屏的核心就是數(shù)據(jù)的拼接，具體到展示層可以歸納成數(shù)據(jù)塊的拼接暇昂，由于公司大屏是8*4的32塊屏莺戒，因此起初的尋找靈感就是從分塊開始。
這樣做的好處是每個屏幕切分的很清晰急波，靈感也在切分中越來越清晰从铲，到往后就是一個個模塊的排列組合，和細(xì)節(jié)的優(yōu)化澄暮，經(jīng)過初期對需求的解讀名段，初步劃分如下圖所示。
- 地圖1
- 標(biāo)題
- 實時提單展示
- 地圖2
- 全鏈路
- 數(shù)據(jù)統(tǒng)計
7-11：報文詳細(xì)
- 思考實施
在切分變的明顯之后泣懊，就開始了細(xì)節(jié)的開發(fā)伸辟，前人的經(jīng)驗是要吸取的。因此可以在UI中國上尋找優(yōu)秀的大屏設(shè)計馍刮，看看哪些內(nèi)容可以被吸取到自己的產(chǎn)品內(nèi)部信夫。
UI中國 - 大數(shù)據(jù)監(jiān)控運營平臺
UI中國 - 人口、旅游 大數(shù)據(jù)可視化大屏展示
UI中國 - 數(shù)據(jù)可視化大屏
UI中國 - 可視化數(shù)據(jù)展示系統(tǒng)
UI中國 - 雅培活動數(shù)據(jù)分析Dashboard
在開發(fā)上卡啰，歸功于Vue的組件化思想静稻，當(dāng)設(shè)計出一個模塊框和些許組件之后，后面的內(nèi)容就是按照內(nèi)容劃分進(jìn)行填充匈辱，極其的快速振湾，馬上，第一個原型孕育而生亡脸，而且出了圖標(biāo)采用開源解決方案押搪，其他的內(nèi)容都是自己從零開始開發(fā)的树酪，維護(hù)效率也偏高，產(chǎn)品設(shè)計也更加統(tǒng)一大州。
- 第一個原型
下圖展示了第一個原型的誕生续语，運用Vue進(jìn)行開發(fā)，圓環(huán)和統(tǒng)計圖采用ECharts進(jìn)行繪制摧茴，上面的實時提單展示會一直滾動绵载，并且實時可以查看單子的詳細(xì)。
- 再次了解需求
下面開始就是快速迭代中比較重要的一點：快速了解進(jìn)一步的需求苛白，在第一個原型誕生之后娃豹，必然帶來第二稿的修改，因為模糊的需求并不能精確命中用戶的真實需求购裙，而用戶的正式需求往往是設(shè)計人員在設(shè)計出第一個原型之后誕生的懂版。
此時用戶在見到了一些內(nèi)容之后會有更加近一步的想法，甚至有些設(shè)計因為需求不明確和真實需求并不相符躏率，不是用戶真正想要的內(nèi)容躯畴，就比如上圖那個全鏈路的圓環(huán)，在進(jìn)一步了解需求之后發(fā)現(xiàn)薇芝，有可能一天有多個步驟同時發(fā)生蓬抄，那運用圓環(huán)表示比率的做法就沒有任何的意義，而這些只有在第一個原型出來之后才能發(fā)現(xiàn)的夯到。
于是配合用戶嚷缭、業(yè)務(wù)部門和DBA，誕生了第二個原型耍贾，和第一個原型比更加的豐富阅爽，業(yè)務(wù)也發(fā)生了相應(yīng)的變化。
- 多次修改產(chǎn)品荐开、優(yōu)化細(xì)節(jié)
經(jīng)過多次和用戶付翁、企劃、公司大數(shù)據(jù)組人員進(jìn)行溝通后晃听，變成了最終文章開始的展示模式百侧，原型確定之后的具體后端接口的開發(fā)了。
這其中最方便的一點是開發(fā)完原型后前端應(yīng)用展示方面的內(nèi)容無需修改分毫能扒，因此運用假接口調(diào)用和后端確定規(guī)范就變得非常必要佣渴，只需要編寫后端數(shù)據(jù)，編寫完之后直接修改HOST就能做到赫粥，由于原型開發(fā)面臨這不斷的修改观话，而且后端也不清楚最后能夠提供什么樣的數(shù)據(jù)予借，這樣溝通成本就變得很大越平，如何降低溝通成本频蛔，制定一個規(guī)范，就是我們必須要考慮的問題秦叛。
原先會通過原型變更后端的假接口也相應(yīng)發(fā)生變化晦溪，讓前端去調(diào)用，這樣做非常低效挣跋，后端工程師的時間也浪費了三圆，測試也要等到后端假接口寫完之后，但得益于YAPI這個開源項目（這是由去哪兒的工程師開發(fā)的一套前后端開發(fā)規(guī)范管理系統(tǒng)）運用mockjs做假數(shù)據(jù)的生成避咆，原型直接調(diào)用這套系統(tǒng)的接口舟肉。后端也無需考慮數(shù)據(jù)結(jié)構(gòu)，前端把定義好的數(shù)據(jù)結(jié)構(gòu)寫成YAPI內(nèi)部對應(yīng)的一個個測試接口查库，當(dāng)輪到后端開發(fā)的時候直接按照這套系統(tǒng)的API規(guī)范進(jìn)行開發(fā)路媚，降低了溝通成本，對于任何一個團(tuán)隊來說都非常便捷樊销。
YAPI - 高效整慎、易用、功能強(qiáng)大的 api 管理平臺
代碼結(jié)構(gòu)設(shè)計
組件化拆分變的尤為重要围苫，又是webpack打包的項目裤园，因此模塊也相對比較清晰，對于后期運維也相對好維護(hù)剂府。
- data-block：數(shù)據(jù)模塊框組件
- data-link：全鏈路組件
- data-map：地圖組件
- data-marquee：實時滾動組件
- data-step：嵌套在data-link內(nèi)部的步驟條詳細(xì)
- data-title：標(biāo)題組件
- svg-circle：原型內(nèi)部鏈路圓環(huán)（已被需求淘汰）
圖表全在utils內(nèi)部的chart.js內(nèi)部維護(hù)拧揽，圖標(biāo)采用SVG，和鏈路項的順序單獨維護(hù)在配置文件內(nèi)部周循，便于需求變化后的修改强法。樣式運用less進(jìn)行開發(fā)，統(tǒng)一配色湾笛、樣式饮怯。
PS：用戶就是領(lǐng)導(dǎo)??
