中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

2022-06-29    分類: 網(wǎng)站建設(shè)

創(chuàng)新互聯(lián)分享:58作為中國大的分類信息網(wǎng)站,其服務(wù)覆蓋了生活的各個(gè)領(lǐng)域及中國所有大中城市。在58高速平穩(wěn)發(fā)展的今天,我們希望用數(shù)據(jù)可視化的效果來整合展現(xiàn)58集團(tuán)的數(shù)據(jù)資源,讓大家全方位了解58的價(jià)值。由此,我們啟動(dòng)了“城市脈動(dòng)”項(xiàng)目。(注:文中附圖所有數(shù)據(jù)均非真實(shí)數(shù)據(jù),僅為效果呈現(xiàn))

一、調(diào)研

我們對(duì)“城市脈動(dòng)”項(xiàng)目的整體定位進(jìn)行了思考,如何展現(xiàn)數(shù)據(jù)?展現(xiàn)場景是怎樣的?我們的用戶是誰?我們該給用戶怎樣的體驗(yàn)?圍繞著這些問題,整個(gè)項(xiàng)目的核心目標(biāo)也愈發(fā)清晰。


如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

數(shù)據(jù)是什么?

是信息的表現(xiàn)形式和載體(定義中摘取)。那么拋開狹義理解的數(shù)字本身,從表現(xiàn)形式和載體入手,只專注于各類數(shù)據(jù)應(yīng)用于不同環(huán)境下最優(yōu)的表現(xiàn)形式,讓展現(xiàn)更具有目標(biāo)性,讓設(shè)計(jì)“有理有據(jù)”。

展現(xiàn)場景是怎樣的?我們的用戶是誰?

有展示場景才會(huì)有用戶,因而我們將用戶與展現(xiàn)場景放在一起進(jìn)行分析。整體項(xiàng)目是利用大屏設(shè)備進(jìn)行相關(guān)數(shù)據(jù)及圖表展示,我們預(yù)想將項(xiàng)目應(yīng)用的場景分為兩種情況:

1.專業(yè)展示:參與商務(wù)活動(dòng)、分享或?yàn)槟承﹫F(tuán)體進(jìn)行講解及展示使用。

2.普通展示:主辦公區(qū)域或前臺(tái)大廳實(shí)時(shí)數(shù)據(jù)展示。

這樣我們則更能準(zhǔn)確定位出我們的用戶是誰,并將用戶分為3類人群:

a.專業(yè)用戶:即參加商務(wù)活動(dòng)、分享等,需了解具體數(shù)據(jù)內(nèi)容的用戶。此類用戶會(huì)較為細(xì)致的查看每項(xiàng)數(shù)據(jù);

b.興趣用戶:即無論數(shù)據(jù)在何處展示,其對(duì)數(shù)據(jù)都有濃厚的興趣,會(huì)去駐足停留,仔細(xì)觀看及分析數(shù)據(jù)。

c.普通用戶:即匆匆過往的人群。這部分用戶可能只會(huì)在屏幕前短暫停留。


如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

我們該給用戶怎樣的體驗(yàn)?

基于對(duì)整體項(xiàng)目的分析,數(shù)據(jù)部的同學(xué)對(duì)數(shù)據(jù)內(nèi)容與表現(xiàn)形式進(jìn)行了專業(yè)化的歸類,我們從用戶體驗(yàn)及設(shè)計(jì)角度,與數(shù)據(jù)部同學(xué)進(jìn)行探討并優(yōu)化內(nèi)容,最終為“城市脈動(dòng)”定了三個(gè)關(guān)鍵詞:清晰、明確、迅捷。以確保給用戶更為良好的體驗(yàn)。

a.清晰

目的是使繁雜多項(xiàng)的數(shù)據(jù)能夠清晰展現(xiàn),達(dá)到圖與數(shù)據(jù)的好結(jié)合;

b.明確

用視覺手段將各模塊內(nèi)容區(qū)分開,使各模塊數(shù)據(jù)明確展示;

c.迅捷

再次明確用戶群體及展示內(nèi)容,針對(duì)不同場景及用戶的差異化需求,讓用戶更加迅捷找到興趣內(nèi)容.

通過分析定位,我們的目標(biāo)也漸漸清晰:讓設(shè)計(jì)服務(wù)于數(shù)據(jù)內(nèi)容,給各類用戶以最為清晰明確迅捷的數(shù)據(jù)展示。即,通過視覺與動(dòng)效的結(jié)合,能夠給ab兩類細(xì)致觀看的用戶良好的視覺呈現(xiàn)及專業(yè)的數(shù)據(jù)展示;能夠給c類用戶深刻的印象,從而轉(zhuǎn)化為a、b類用戶。真正達(dá)到讓每個(gè)人,全方位的了解58集團(tuán)的價(jià)值。


如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

二、設(shè)計(jì)

“城市脈動(dòng)”整個(gè)項(xiàng)目是以展示為主,在確保視覺效果的同時(shí),信息的有效傳遞是設(shè)計(jì)重點(diǎn)。需構(gòu)建清晰的層級(jí)關(guān)系,運(yùn)用準(zhǔn)確的視覺語言。就展示載體而言,因載體為大屏,如用淺色背景會(huì)有拖影的情況,因而在整體設(shè)計(jì)上,運(yùn)用深色背景。

1. 色的視覺牽引


如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

色彩是最能給人直觀感受的,能夠直接的牽引用戶去尋找有效信息。在運(yùn)用色彩的過程中,最初設(shè)計(jì)將數(shù)據(jù)的顏色與58logo的色彩相近,但是對(duì)于數(shù)據(jù)的同學(xué)來說,紅色代表數(shù)據(jù)異常,因而整體給人緊張感;而藍(lán)色數(shù)據(jù)則使人加以冷靜,從而給人良好的視覺感受。

整體色彩確定后,便運(yùn)用色彩來劃分信息的層級(jí)關(guān)系,用主色調(diào)強(qiáng)調(diào)重點(diǎn)內(nèi)容,以引導(dǎo)用戶能夠清晰、明確、迅捷的識(shí)別重要信息。


如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

2. 構(gòu)圖的層級(jí)劃分與視覺平衡

除色彩的視覺牽引外,用構(gòu)圖的方式來突出信息重點(diǎn),用比例關(guān)系的手法來使視覺達(dá)到平衡,讓用戶在瞬間捕捉到視覺點(diǎn),建立明確的信息層級(jí),從而能夠使用戶迅捷的了解我們希望用戶感知到的信息。


如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

3. 形的感知與精準(zhǔn)表達(dá)

形的樣式能夠使數(shù)據(jù)給用戶不一樣的感知效果,用準(zhǔn)確的形態(tài)來給用戶準(zhǔn)確的感知,減少用戶在視覺層面的思考和時(shí)間,直擊內(nèi)容本身,使用戶在能夠在短時(shí)間內(nèi)捕捉興趣內(nèi)容。

如柱狀圖中,分格樣式的數(shù)據(jù)表達(dá),則給人感受數(shù)據(jù)不夠精準(zhǔn),復(fù)雜且無意義的設(shè)計(jì)語言形成了對(duì)用戶的視覺干擾;而柱狀樣式的數(shù)據(jù)表達(dá),則更為直觀準(zhǔn)確。


如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

在三屏畫面中,地圖會(huì)在兩屏中出現(xiàn),一屏為省/直轄市地圖,另一屏為中國地圖,且在畫面中的占比都很重。在地圖樣式的選擇上,采用對(duì)比法來進(jìn)行選擇。


如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

1.色塊形式。顏色過深或過淺都會(huì)使畫面顯得突兀,中度色則易于背景混淆,無法恰當(dāng)?shù)耐怀鲋黧w;

2.描邊形式則更加凸顯地圖,依附圖形自身與背景元素所產(chǎn)生的空間感,配合實(shí)時(shí)點(diǎn)擊的效果,整個(gè)畫面更加清晰伶俐,且精確的表達(dá)出實(shí)時(shí)點(diǎn)擊的效果。

4. 輔助圖形的視覺引導(dǎo)

輔助圖形的運(yùn)用,對(duì)畫面和信息,都存在引導(dǎo)關(guān)系。在干擾視覺的同時(shí),引導(dǎo)用戶對(duì)某些數(shù)據(jù)內(nèi)容進(jìn)行無意識(shí)的知識(shí)補(bǔ)給。如圖所示,左圖:在省/直轄市地圖為主的屏幕中,加一較小的中國地圖,意為讓用戶更明確的感知到此省在我國的位置(或此位置為我國哪省)。

中圖的時(shí)間軸形式則為統(tǒng)一相同時(shí)間內(nèi)數(shù)據(jù)變化而設(shè);右圖中,用標(biāo)尺進(jìn)行內(nèi)容分割,使數(shù)據(jù)模塊的劃分更為清晰。


如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

5、動(dòng)效的舒適體驗(yàn)

整個(gè)項(xiàng)目中有許多數(shù)據(jù)都是實(shí)時(shí)變化的,為了減少數(shù)據(jù)變化刷新時(shí)的突然性,動(dòng)效設(shè)計(jì)必不可少。在整個(gè)動(dòng)效網(wǎng)站制作知識(shí)的過程中,除過場動(dòng)畫、數(shù)據(jù)的變化外,動(dòng)效還肩負(fù)起增添空間感、平衡畫面和整合信息的作用。

a.增添空間感:第一屏中內(nèi)容較少,省/直轄市地圖占據(jù)中心較大面積,但各省地圖形狀各具特點(diǎn),大小不一,為平衡地圖形狀的不同,則在地圖后面加以多個(gè)虛線圈使畫面豐富,并使其轉(zhuǎn)動(dòng)起來,增添了畫面的空間感。


如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

(省地圖動(dòng)態(tài)展示)

b.平衡畫面:第三屏中可動(dòng)數(shù)據(jù)為畫面中心的中國地圖及右下數(shù)據(jù),為不忽視其它內(nèi)容區(qū),動(dòng)效童鞋為左下及右上部分?jǐn)?shù)據(jù)增添了光影效果,使整個(gè)畫面的動(dòng)態(tài)視覺感受平衡;

c.整合信息:第二屏的右下部分?jǐn)?shù)據(jù)為5個(gè)模塊的餅狀圖,若全部放于畫面中則過于累贅,用倒計(jì)時(shí)的模式將其進(jìn)行切屏,使信息更加聚合。


如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

(餅圖切屏)

但是在增加動(dòng)效的同時(shí),仍需考慮服務(wù)器在承載大量數(shù)據(jù)涌入的同時(shí),是否能夠承載較多的動(dòng)效。因而在增加動(dòng)效過后,我們與技術(shù)同學(xué)一同分析畫面與數(shù)據(jù)量,對(duì)動(dòng)效部分進(jìn)行適當(dāng)取舍。使動(dòng)效不必喧賓奪主,明確畫面中的重點(diǎn)進(jìn)行展示。

三、呈現(xiàn)

注:文中附圖所有數(shù)據(jù)均非真實(shí)數(shù)據(jù),僅為效果呈現(xiàn)。


如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

第一屏電視及其動(dòng)效展示


如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

第二屏電視


如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖

第三屏電視

四、結(jié)語

從立項(xiàng)到如今的成功上線,收獲頗豐,在這個(gè)過程中,我們站在用戶的角度,提出問題,解決問題;再提出問題,再解決問題…本著通過自己的方案,減少用戶的觀看時(shí)間與思考成本為原則,共同探討解決方法,共同向著同一個(gè)方向努力。

我們期待通過我們的努力,讓每個(gè)人都能夠?qū)?8有新的了解與體驗(yàn)。58在發(fā)展,LUX也在進(jìn)步,我們會(huì)繼續(xù)本著用戶第一的原則,繼續(xù)腳踏實(shí)地的走好每一步。

新聞標(biāo)題:如何從零開始做出數(shù)據(jù)可視化的動(dòng)效圖
轉(zhuǎn)載源于:http://m.rwnh.cn/news16/172916.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、定制開發(fā)、營銷型網(wǎng)站建設(shè)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、App設(shè)計(jì)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管
沭阳县| 北辰区| 无为县| 芜湖市| 溆浦县| 明光市| 阳西县| 海门市| 岫岩| 桂东县| 盘锦市| 托克逊县| 张家港市| 阜新| 四平市| 阿勒泰市| 盐边县| 电白县| 策勒县| 建湖县| 乐陵市| 乐至县| 霍邱县| 盘山县| 镇赉县| 太湖县| 黑龙江省| 三台县| 湘阴县| 三门县| 通州市| 乐清市| 陆河县| 油尖旺区| 双城市| 河源市| 定边县| 章丘市| 连城县| 凤庆县| 高要市|