編輯導(dǎo)語(yǔ)：我們?cè)诠ぷ髦薪?jīng)常會(huì)用到一些數(shù)據(jù)，數(shù)據(jù)可視化可以幫助我們更好的理清數(shù)據(jù)，動(dòng)效的設(shè)計(jì)也更加能體現(xiàn)多維展現(xiàn)數(shù)據(jù)；本文作者分享了關(guān)于交互動(dòng)效的數(shù)據(jù)可視化，我們一起來(lái)看一下。

數(shù)據(jù)可視化把相對(duì)復(fù)雜、抽象的數(shù)據(jù)通過(guò)可視化的手段表達(dá)出其內(nèi)里的信息和規(guī)律，促進(jìn)數(shù)據(jù)信息的傳播和應(yīng)用，更加直觀(guān)地傳達(dá)圖表信息；通過(guò)可視化，我們的大腦能夠更好地抓取和理解有效信息，增加信息的印象。

然而，如果數(shù)據(jù)可視化設(shè)計(jì)做的不合理，反而會(huì)帶來(lái)負(fù)面影響，影響信息的傳播，誤導(dǎo)用戶(hù)的認(rèn)知；所以在設(shè)計(jì)的時(shí)候需要我們多維展現(xiàn)數(shù)據(jù)，不僅僅局限于單一層面，這時(shí)候動(dòng)效設(shè)計(jì)就是很重要的一環(huán)了。

我們希望的數(shù)據(jù)可視化設(shè)計(jì)是可以讓數(shù)據(jù)通過(guò)視覺(jué)形式，使信息更容易被接受，讓數(shù)據(jù)內(nèi)容更容易被理解，讓數(shù)據(jù)信息更容易被記憶。

一、為什么需要交互動(dòng)效設(shè)計(jì)

在一個(gè)數(shù)據(jù)項(xiàng)目中，有許多的數(shù)據(jù)通常都是實(shí)時(shí)變化的，為了減少數(shù)據(jù)變化刷新時(shí)的突然性以及需要告知用戶(hù)數(shù)據(jù)更新，那么動(dòng)效設(shè)計(jì)就是必不可少的。

此外，數(shù)據(jù)可視化大屏服務(wù)的主要是B端用戶(hù)，我們?cè)谠O(shè)計(jì)過(guò)程中要做到：讓設(shè)計(jì)服務(wù)于數(shù)據(jù)內(nèi)容，給用戶(hù)以最為清晰明確迅捷的數(shù)據(jù)展示。

針對(duì)數(shù)據(jù)可視化大屏的特點(diǎn)，來(lái)具體談?wù)勎覀優(yōu)槭裁葱枰鰟?dòng)效設(shè)計(jì)：

1. 信息體量大

與B端產(chǎn)品一樣，可視化大屏的信息體量相對(duì)龐大，且更注重用戶(hù)在單位面積內(nèi)獲取信息的效率，因此我們需要在有限的大屏內(nèi)盡可能展示多的有效信息。

但是，如果我們僅僅是一味地往數(shù)字大屏里“塞”信息，沒(méi)有對(duì)信息結(jié)構(gòu)、展現(xiàn)方式做一個(gè)很好的規(guī)劃，往往龐大的數(shù)據(jù)量會(huì)造成信息堆砌，給用戶(hù)接受并處理信息帶來(lái)一定的干擾。

這時(shí)候，動(dòng)效就可以很好的解決這個(gè)問(wèn)題；利用動(dòng)效，構(gòu)建出數(shù)據(jù)大屏的層次，將數(shù)據(jù)存放在不同的層級(jí)頁(yè)面內(nèi)，為用戶(hù)帶來(lái)更好的數(shù)據(jù)信息服務(wù)體驗(yàn)。

2. 專(zhuān)業(yè)操作性強(qiáng)

從目標(biāo)用戶(hù)來(lái)看，可視化大屏主要面向的是具有一定專(zhuān)業(yè)知識(shí)的用戶(hù)，因此產(chǎn)品需要做到專(zhuān)業(yè)性高、邏輯嚴(yán)謹(jǐn)、規(guī)范性強(qiáng)，用戶(hù)在使用時(shí)按照已有的一套規(guī)范流程進(jìn)行操作，大大提高工作效率。

但專(zhuān)業(yè)的操作流程，往往會(huì)帶來(lái)操作鏈路過(guò)長(zhǎng)的問(wèn)題；因此我們需要進(jìn)行動(dòng)效設(shè)計(jì)，一個(gè)好的動(dòng)效可以引導(dǎo)用戶(hù)更快、更簡(jiǎn)的熟悉流程、上手操作、完成任務(wù)。

3. 專(zhuān)業(yè)概念多而復(fù)雜

可視化大屏往往需要解決一些專(zhuān)業(yè)性的問(wèn)題，同時(shí)傳達(dá)出來(lái)的概念多而復(fù)雜，如果僅僅靠文字、數(shù)據(jù)來(lái)進(jìn)行展現(xiàn)，往往會(huì)增加用戶(hù)的認(rèn)知成本；同時(shí)，可視化大屏在幫助業(yè)務(wù)人員理解以及幫助領(lǐng)導(dǎo)做出決策中起到了很大的作用，我們?nèi)绾螌?fù)雜的專(zhuān)業(yè)概念快速傳達(dá)呢？

這時(shí)候“動(dòng)效”就產(chǎn)生了很大的作用——大數(shù)據(jù)時(shí)代，文字和數(shù)據(jù)實(shí)在會(huì)讓人感到疲憊，但將其轉(zhuǎn)化為圖片甚至是動(dòng)畫(huà)，通過(guò)概念物化可以幫助用戶(hù)更快的理解、更好的記憶。

二、做什么樣的交互動(dòng)效

根據(jù)可視化大屏的這三個(gè)特點(diǎn)，具體來(lái)說(shuō)說(shuō)我們可以制作怎樣的動(dòng)效讓可視化大屏動(dòng)起來(lái)：

（以下案例均來(lái)源于EasyV數(shù)據(jù)可視化）

1. 信息排布

信息排布可以解決好信息體量大的問(wèn)題，在有效的面積內(nèi)盡可能的展示更多的信息，這就需要設(shè)計(jì)師在信息展示上進(jìn)行布局優(yōu)化。

當(dāng)出現(xiàn)同一類(lèi)指標(biāo)需要應(yīng)用于不同的場(chǎng)景時(shí)，可以利用交互按鈕進(jìn)行指標(biāo)主體切換，將不同的場(chǎng)景數(shù)據(jù)存放在同一位置中。

比如，同屬于票務(wù)銷(xiāo)售指標(biāo)的公園門(mén)票與觀(guān)光車(chē)票，可以通過(guò)交互按鈕進(jìn)行主體切換，將不同數(shù)據(jù)的兩張圖表存放在同一區(qū)域塊內(nèi)；既解決了空間存放問(wèn)題，又讓用戶(hù)更好的理解數(shù)據(jù)主體，提升了用戶(hù)的交互體驗(yàn)。

當(dāng)需要了解更詳細(xì)的文字、數(shù)據(jù)信息時(shí)，可以通過(guò)交互動(dòng)效進(jìn)行信息補(bǔ)充。

用戶(hù)在使用時(shí)可以通過(guò)總體信息概覽關(guān)注到整體數(shù)據(jù)的變化，并不需要時(shí)時(shí)刻刻知道每個(gè)區(qū)域具體的數(shù)據(jù)信息，但有時(shí)候需要關(guān)注到具體的業(yè)務(wù)時(shí)往往會(huì)需要知道更詳細(xì)的數(shù)據(jù)；比如，用戶(hù)在點(diǎn)擊新疆區(qū)域時(shí)可以從大屏中獲取到新疆區(qū)域的動(dòng)銷(xiāo)品種、新書(shū)品種、銷(xiāo)售碼洋的信息。

將全局信息與局部信息區(qū)分開(kāi)，通過(guò)動(dòng)效設(shè)計(jì)優(yōu)化信息的排布，可以幫助用戶(hù)獲得更好的交互體驗(yàn)。

在使用數(shù)據(jù)可視化大屏?xí)r，領(lǐng)導(dǎo)決策者會(huì)更關(guān)注全局?jǐn)?shù)據(jù)，具體業(yè)務(wù)負(fù)責(zé)人會(huì)更關(guān)注局部數(shù)據(jù)；比如，上圖模版中地球視角代表的就是全局?jǐn)?shù)據(jù)，指標(biāo)視角代表的就是局部數(shù)據(jù)，整個(gè)數(shù)據(jù)大屏中的數(shù)據(jù)被明確區(qū)分開(kāi)，便于決策者與業(yè)務(wù)人員更好的使用并理解數(shù)據(jù)。

2. 引導(dǎo)交互

動(dòng)效設(shè)計(jì)可以引導(dǎo)用戶(hù)進(jìn)行交互，讓用戶(hù)每進(jìn)行一次操作就知道接下來(lái)該做什么或立刻明晰自己的操作得到了什么。

利用動(dòng)效進(jìn)行交互引導(dǎo)，即使大屏操作鏈路過(guò)長(zhǎng)，也可以讓用戶(hù)快速上手操作，減少流程學(xué)習(xí)時(shí)間。

比如，用戶(hù)的鼠標(biāo)滑過(guò)，字段會(huì)高亮響應(yīng)或者圖表塊會(huì)突出顯示，提示用戶(hù)此處可點(diǎn)擊，從而吸引用戶(hù)點(diǎn)擊查看下一層級(jí)數(shù)據(jù)。

進(jìn)入下一場(chǎng)景后，又會(huì)有對(duì)應(yīng)的區(qū)域提示用戶(hù)返回全局或查看其他場(chǎng)景；當(dāng)做到層層有響應(yīng)，就能減少用戶(hù)在每一步操作上的困惑時(shí)間，幫助用戶(hù)快速上手操作流程，并且大大提升工作效率。

3. 概念物化

將抽象的概念利用動(dòng)效具象化，將會(huì)大大降低用戶(hù)的學(xué)習(xí)成本，利用動(dòng)效講好一個(gè)故事，無(wú)疑是為可視化大屏景上添花的。

比如，將整個(gè)流程通過(guò)動(dòng)效制作成模型展示出來(lái)，用戶(hù)便能直接清晰明了的找到某個(gè)環(huán)節(jié)的數(shù)據(jù)；如今的數(shù)據(jù)可視化不再是一味的圖表堆砌，更多的設(shè)計(jì)師開(kāi)始關(guān)注3D建模、動(dòng)效交互等等，將更逼真的場(chǎng)景搬上大屏，給用戶(hù)身臨其境的真實(shí)感。

在數(shù)據(jù)可視化大屏中，優(yōu)秀的動(dòng)效設(shè)計(jì)不僅僅是炫酷的場(chǎng)景、令人贊嘆的動(dòng)畫(huà)，更多的是要關(guān)注到用戶(hù)的體驗(yàn)感。

說(shuō)到底，制作動(dòng)效還是為了更好的服務(wù)使用者，提供更好的交互體驗(yàn)，有時(shí)候一個(gè)微小的動(dòng)效設(shè)計(jì)就能帶來(lái)用戶(hù)體驗(yàn)的大幅提升。

 

本文由 @可愛(ài)的數(shù)據(jù)控

 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

原文鏈接：https://www.woshipm.com/pd/4217597.html

題圖來(lái)自u(píng)nsplash，基于 CC0 協(xié)議

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）bouu.cn 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

關(guān)鍵詞：UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)