從零開始設計數(shù)據(jù)大屏—基于vue

《從零開始設計數(shù)據(jù)大屏—基于vue》由會員上傳分享，免費在線閱讀，更多相關內容在工程資料-天天文庫。

1、從零開始設計數(shù)據(jù)大屏一基于Vue為什么要做數(shù)據(jù)大屏？現(xiàn)如今的大數(shù)據(jù)逐漸發(fā)揮出了它的力量，并無形的改變著我們的生活。但大數(shù)據(jù)在不是從事技術開發(fā)的人來說沒有很明顯的感受，很多人對大數(shù)據(jù)的概念只是停留在每年網(wǎng)易云音樂對個人聽歌的匯總上、知乎2017年解鎖的知識成就、微信新年的個人社交分析、支付寶的年終賬單等。其迫切的需要通過一些媒介展現(xiàn)數(shù)據(jù)的威力，而數(shù)據(jù)大屏作為大數(shù)據(jù)展示媒介的一種，廣泛運用于各種展示廳、會展、發(fā)布會及各種狂歡節(jié)中，其中不乏一些通用的處理方案：阿里巴巴集團的DataV產品。其大屏有多種主題，提供多種模版，設計的非常的震撼，DataV也用于展現(xiàn)歷年雙十一的盛況。而公司的

2、大數(shù)據(jù)工作組就需要通過數(shù)據(jù)大屏展示一些處理過后有價值的信息，因此需求孕育而生。下面的截圖是產品迭代四次之后在公司大屏展示廳的照片，第五次迭代還在開發(fā)中。用Vue做基礎的框架是不是合適?絕對合適，就現(xiàn)在運用的情況來說，Vue適合95%的網(wǎng)頁應用開發(fā),幾乎任何的網(wǎng)頁應用Vue都有對應的解決方案,而且開發(fā)效率極高，甚至由于它組件化的特性，尤其適合完成一些需求不明確、需求在應用開發(fā)的過程中一直會發(fā)生變化、需要快速迭代出一個新版本的開發(fā)。而最終參與制作的產品就是一個在需求不明確的情況下慢慢變成一個產品的。程序員如何產生想法再落實到實際開發(fā)?眾所周知，程序員是碼代碼的，而設計產品不是程序員

3、的強項，很不巧的是我就是那個碼代碼，不太會設計的程序員，但通過一些訣竅，還是能夠設計出一款不錯的大屏應用的。下面就來介紹一下里面的一些技巧，這些技巧其實還適用于其他的產品設計。數(shù)據(jù)大屏設計歸根結底就是一個在極端寬闊的屏幕上做應用的開發(fā)，因此大屏設計往往強調的是大數(shù)據(jù)迸發(fā)的一瞬間大量的數(shù)據(jù)信息通過一定的可視化形式瞬間沖入腦海的驚艷感。讓人感覺數(shù)據(jù)距離大家不是這么的遙遠，而給人一種觸手可及的感覺。數(shù)據(jù)大屏的設計其實是有訣竅的，掌握了一些訣竅，在知道了公司大數(shù)據(jù)組大概需要展示哪些內容之后，不需要UI,程序員自己也能配合產品經理、企劃部和DBA完成一個數(shù)據(jù)大屏產品的設計。步驟分為確定基

4、色-〉尋找靈感-〉思考實施-〉作出第一個原型-〉再次了解需求->多次修改產品->優(yōu)化細節(jié)后面的步驟需要循環(huán)多次，歸根結底就是一個典型的需求不明確快速迭代的原型開發(fā)。確定基色和尋找靈感確定基色不是很難，由于是大屏，采用深色做背景，最重要的是要有靈感，初期的需求分析了解到了需要在大屏上存放的內容如下：兩塊地圖三個大數(shù)據(jù)數(shù)值的統(tǒng)計流程圖展示實時提單詳細展示收發(fā)報文統(tǒng)計展示在確定了初期的需求之后，接下來就是思考如何把這些需求落實到頁面上。如何在頁面上展示這些內容。而數(shù)據(jù)大屏的展示,數(shù)據(jù)大屏的核心就是數(shù)據(jù)的拼接,體到展示層可以歸納成數(shù)據(jù)塊的拼接，由于公司大屏是8*4的32塊屏,因此起初的

5、尋找靈感就是從分塊開始。這樣做的好處是每個屏幕切分的很清晰，靈感也在切分中越來越清晰，到往后就是一個個模塊的排列組合，和細節(jié)的優(yōu)化，經過初期對需求的解讀，初步劃分如下圖所示。地圖1標題實時提單展示地圖2全鏈路數(shù)據(jù)統(tǒng)計7-11：報文詳細思考實施在切分變的明顯之后，就開始了細節(jié)的開發(fā)，前人的經驗是要吸取的。因此可以在UI中國上尋找優(yōu)秀的大屏設計,看看哪些內容可以被吸取到自己的產品內部。UI中國-大數(shù)據(jù)監(jiān)控運營平臺UI中國-人口、旅游大數(shù)據(jù)可視化大屏展示UI-數(shù)據(jù)可視化大屏UI中國-可視化數(shù)據(jù)展示系統(tǒng)UI中國-雅培活動數(shù)據(jù)分析Dashboard在開發(fā)上，歸功于Vue的組件化思想，當設

6、計出一個模塊框和些許組件之后，后面的內容就是按照內容劃分進行填充，極其的快速，馬上，第一個原型孕育而生，而且出了圖標采用開源解決方案，其他的內容都是自己從零開始開發(fā)的，維護效率也偏高，產品設計也更加統(tǒng)一。第一個原型下圖展示了第一個原型的誕生，運用Vue進行開發(fā)，圓環(huán)和統(tǒng)計圖采用ECharts進行繪制，上面的實時提單展示會一直滾動，并且實時可以查看單子的詳細。再次了解需求下面開始就是快速迭代中比較重要的一點：快速了解進一步的需求，在第一個原型誕生之后，必然帶來第二稿的修改，因為模糊的需求并不能精確命中用戶的真實需求，而用戶的正式需求往往是設計人員在設計出第一個原型之后誕生的。此時

7、用戶在見到了一些內容之后會有更加近一步的想法，甚至有些設計因為需求不明確和真實需求并不相符，不是用戶真正想要的內容，就比如上圖那個全鏈路的圓環(huán)，在進一步了解需求之后發(fā)現(xiàn)，有可能一天有多個步驟同時發(fā)生，那運用圓環(huán)表示比率的做法就沒有任何的意義，而這些只有在第一個原型出來之后才能發(fā)現(xiàn)的。于是配合用戶、業(yè)務部門和DBA,誕生了第二個原型,和第一個原型比更加的豐富，業(yè)務也發(fā)生了相應的變化。多次修改產品、優(yōu)化細節(jié)經過多次和用戶、企劃、公司大數(shù)據(jù)組人員進行溝通后,變成了最終文章開始的展示模式，原型確定之