隨著大數(shù)據(jù)時(shí)代的快速發(fā)展，日常生活中對(duì)數(shù)據(jù)信息的接觸場(chǎng)景越來(lái)越多，我們?cè)谧鰯?shù)據(jù)展示設(shè)計(jì)前首先要梳理數(shù)據(jù)重點(diǎn)，數(shù)據(jù)結(jié)構(gòu)關(guān)系得到的結(jié)論結(jié)合用戶(hù)需求產(chǎn)品需求等進(jìn)行合理的設(shè)計(jì)。

      最初的數(shù)據(jù)展示接近于數(shù)據(jù)報(bào)表的形式，而現(xiàn)今數(shù)據(jù)展示有兩種：靜態(tài)數(shù)據(jù)可視化、交互數(shù)據(jù)可視化。它們的設(shè)計(jì)基礎(chǔ)均基于數(shù)據(jù)可視化的設(shè)計(jì)要點(diǎn)進(jìn)行延展的，而數(shù)據(jù)可視化要點(diǎn)已有很多優(yōu)秀的設(shè)計(jì)師進(jìn)行總結(jié)，因此我重點(diǎn)介紹一下我對(duì)交互式數(shù)據(jù)可視化的理解（僅代表個(gè)人觀點(diǎn)），希望對(duì)大家有所幫助。

      什么是交互式可視化

      靜態(tài)與交互式數(shù)據(jù)可視化的區(qū)別

      交互式數(shù)據(jù)可視化中的用戶(hù)體驗(yàn)

      交互式數(shù)據(jù)可視化設(shè)計(jì)思維

      開(kāi)源數(shù)據(jù)可視化庫(kù)

什么是交互式數(shù)據(jù)可視化

      交互式數(shù)據(jù)可視化是一種更能夠吸引用戶(hù)的數(shù)據(jù)信息交流形式，在BI中的應(yīng)用也變得越來(lái)越流行，并且由于其有較強(qiáng)的易用性以及能夠?yàn)橛脩?hù)體驗(yàn)帶來(lái)更多附加值而逐漸成為大多數(shù)數(shù)據(jù)分析系統(tǒng)的常見(jiàn)部分。它通過(guò)數(shù)據(jù)動(dòng)態(tài)演示的交互方式，使用戶(hù)可以直接與信息交互，用以構(gòu)建自己對(duì)信息的理解，交互式可視化必須具有與人機(jī)交互方式，如單擊按鈕，移動(dòng)滑塊，快速響應(yīng)以顯示輸入和輸出之間的真實(shí)關(guān)系。

      有效的交互式可視化能夠保持展示形式和數(shù)據(jù)功能之間的平衡關(guān)系。簡(jiǎn)單的圖表可能因?yàn)樘珶o(wú)聊而無(wú)法引起用戶(hù)的注意，復(fù)雜數(shù)據(jù)可視化可能完全無(wú)法傳達(dá)正確的信息。因此數(shù)據(jù)視覺(jué)和交互形式效果需要協(xié)同工作。

靜態(tài)與交互式數(shù)據(jù)可視化的區(qū)別

      靜態(tài)數(shù)據(jù)可視化是不包含任何交互功能且不隨時(shí)間變化的數(shù)據(jù)可視化，從單一視角關(guān)注特定數(shù)據(jù)故事的信息圖。圖表中沒(méi)有可操作的交互功能來(lái)調(diào)整靜態(tài)可視化的數(shù)據(jù)展示結(jié)果，更適合不太復(fù)雜的數(shù)據(jù)故事、建立概念之間的關(guān)系以及傳達(dá)預(yù)定的視圖。其構(gòu)建成本遠(yuǎn)低于交互式設(shè)計(jì)。因此在設(shè)計(jì)時(shí)必須充分考慮如何展示當(dāng)前顯示的數(shù)據(jù)擬定好數(shù)據(jù)故事。

      交互式是可視化設(shè)計(jì)中的絕佳工具，因?yàn)樗鼈兡軌騼?yōu)化信息的顯示方式，減少視覺(jué)噪音，降低用戶(hù)對(duì)數(shù)據(jù)閱讀的難度。系統(tǒng)中最常見(jiàn)應(yīng)用之一是數(shù)字化儀表板或數(shù)字看板，如果直接從枯燥的數(shù)據(jù)表格獲取信息這樣的體驗(yàn)是非常原始且視覺(jué)干擾過(guò)多。而通過(guò)梳理數(shù)據(jù)結(jié)構(gòu)使用適當(dāng)?shù)慕换タ梢暬箍窗?，能夠成為用?hù)快速汲取主要數(shù)據(jù)信息的理想工具

    設(shè)計(jì)時(shí)決定應(yīng)用哪種數(shù)據(jù)可視化形式一方面需通過(guò)用戶(hù)畫(huà)像分析了解用戶(hù)偏好如何，另一方面則需要結(jié)合數(shù)據(jù)故事復(fù)雜程度采用哪種才能夠更全面更準(zhǔn)確的傳達(dá)數(shù)據(jù)信息，以及在構(gòu)建項(xiàng)目的過(guò)程投入成本最終回報(bào)率的高低也起著決定性因素。

交互式數(shù)據(jù)可視化中的用戶(hù)體驗(yàn)

      大量數(shù)據(jù)可用于幫助用戶(hù)做出更好的業(yè)務(wù)決策。為了實(shí)現(xiàn)這一點(diǎn)，并從數(shù)據(jù)中獲得最大價(jià)值，用戶(hù)必須能夠理解它；提出問(wèn)題、體驗(yàn)?zāi)Ｐ筒⒆R(shí)別異常。

      在設(shè)計(jì)數(shù)據(jù)可視化面板時(shí)，最至關(guān)重要的是，需要考慮用戶(hù)將如何使用這些數(shù)據(jù)。讓更多的用戶(hù)會(huì)使用數(shù)據(jù)面板而不是讓他們?nèi)?chuàng)建面板。強(qiáng)迫用戶(hù)按照我們?cè)O(shè)定的規(guī)則去破譯圖表含義不僅不切實(shí)際且學(xué)習(xí)成本高昂。

      用戶(hù)需要在不受額外功能干擾的情況下看到我們所展示的內(nèi)容，當(dāng)我們使用太多的顏色、形狀、圖案和大量的數(shù)據(jù)時(shí)，容易使用戶(hù)迷失在數(shù)據(jù)展示中。我們的工作就是為用戶(hù)處理數(shù)據(jù)信息結(jié)構(gòu)降低用戶(hù)對(duì)數(shù)據(jù)認(rèn)知的難度。

視覺(jué)成像基礎(chǔ)

      我們的大腦處理視覺(jué)圖像要比處理文字內(nèi)容快 60,000 倍，能夠在13 ms內(nèi)處理一張圖像，然而，大腦的處理能力也是有限的。為了展示最優(yōu)效果，數(shù)據(jù)可視化必須基于人類(lèi)認(rèn)知速度提供信息。需要設(shè)計(jì)輸入來(lái)將信息分解成可管理的模塊并以用戶(hù)能夠簡(jiǎn)易處理的方式呈現(xiàn)它。

 

用戶(hù)分析

      我們?cè)跇?gòu)建任何類(lèi)型數(shù)據(jù)可視化時(shí)都需以用戶(hù)為中心，了解用戶(hù)的目標(biāo)、動(dòng)機(jī)和需求，經(jīng)營(yíng)環(huán)境，需要解決什么問(wèn)題，以及用戶(hù)語(yǔ)言和特定領(lǐng)域的知識(shí)；

在做這方面用戶(hù)分析不需要耗費(fèi)大量的時(shí)間，只要足以使我們能夠進(jìn)入下一階段——設(shè)計(jì)用戶(hù)路徑上即可

用戶(hù)體驗(yàn)路徑

      系統(tǒng)用戶(hù)的體驗(yàn)建立在兩個(gè)主要元素上：關(guān)鍵點(diǎn)可視化以及交互路徑。而用戶(hù)路徑中每個(gè)關(guān)鍵點(diǎn)需設(shè)計(jì)為對(duì)應(yīng)特定的業(yè)務(wù)問(wèn)題。

      可視化工具能夠以豐富而復(fù)雜的方式與圖表交互：篩選、縮放、細(xì)分、導(dǎo)出值等。它們都有助于將信息分解為更易于管理的塊，因此我們需要考慮多種操作結(jié)果，綜合起來(lái)能夠串聯(lián)出具有多個(gè)分支交互路徑和圖表用戶(hù)體驗(yàn)路徑。

交互式數(shù)據(jù)可視化設(shè)計(jì)思維

      可視化中的交互改變了數(shù)據(jù)的視角，始終致力于簡(jiǎn)單的可視化而不是復(fù)雜的可視化。目標(biāo)是使其更易于理解和閱讀。因此，需要避免使因使用過(guò)多的圖表引起頁(yè)面結(jié)構(gòu)混亂，意味著通過(guò)過(guò)濾某些數(shù)據(jù)點(diǎn)，選擇數(shù)據(jù)的不同區(qū)域，甚至完全改變可視化的類(lèi)型。重要的一點(diǎn)是：交互式可視化不再是靜態(tài)的，也不代表數(shù)據(jù)的單一視圖。交互使人們能夠根據(jù)自己的需要調(diào)整可視化并提出不同的問(wèn)題。

尋找理論依據(jù)

      通過(guò)了解受眾群體是誰(shuí)，需要展示哪些數(shù)據(jù)，了解他們將如何使用這些數(shù)據(jù)。這些都將作為我們?cè)O(shè)計(jì)的理論依據(jù)，用以解決設(shè)計(jì)中哪些圖表是可以快速應(yīng)用到實(shí)際場(chǎng)景中，如何為數(shù)據(jù)結(jié)構(gòu)做簡(jiǎn)化等問(wèn)題；在數(shù)據(jù)的展示形式上通常是使用圖表、線(xiàn)條或點(diǎn)、條形圖和地圖來(lái)實(shí)現(xiàn)的。萬(wàn)變不離其宗，交互可視化也是同樣在此基礎(chǔ)上進(jìn)行擴(kuò)展發(fā)揮作用。

遵循設(shè)計(jì)原則

      在設(shè)計(jì)中需要為數(shù)據(jù)可視化創(chuàng)建各種交互式小部件，但首先需要遵循數(shù)據(jù)可視化交互設(shè)計(jì)的三個(gè)基本設(shè)計(jì)原則——可用性、可訪問(wèn)和可操作。

       是否有直觀的交互功能和數(shù)據(jù)可視化？

       用戶(hù)是否可訪問(wèn)數(shù)據(jù)，并且能夠快速理解其含義？

      是否為用戶(hù)提供簡(jiǎn)便易上手的可操作的系統(tǒng)平臺(tái)？

      當(dāng)我們有了一個(gè)粗略的理論基礎(chǔ)模型，就可以搭建數(shù)據(jù)模型來(lái)記錄每條數(shù)據(jù)和相關(guān)的元數(shù)據(jù)，接下來(lái)是通過(guò)各種交互形式設(shè)計(jì)用戶(hù)界面。

清晰的架構(gòu)

      可視化架構(gòu)是映射數(shù)據(jù)故事的形式化基礎(chǔ)，在此基礎(chǔ)上通過(guò)線(xiàn)條、圖標(biāo)和顏色等設(shè)計(jì)元素的視覺(jué)工具進(jìn)行展示。為了利用這些工具，我們責(zé)需要運(yùn)用對(duì)比關(guān)系、比重關(guān)系、顏色差異、位置信息和象征意義等突出顯示信息所呈現(xiàn)的目的及數(shù)據(jù)間的結(jié)構(gòu)關(guān)系。

可視化美學(xué)

      設(shè)計(jì)美學(xué)中少即是多的設(shè)計(jì)理念經(jīng)久不衰，我們?cè)谶M(jìn)行可視化設(shè)計(jì)時(shí)也可按照這一標(biāo)準(zhǔn)在有限的設(shè)計(jì)空間內(nèi)為用戶(hù)提供最多的想法，清晰準(zhǔn)確的傳達(dá)復(fù)雜的想法

交互式繪圖

     交互不一定發(fā)生在頁(yè)面中明顯可點(diǎn)擊的事物上，也可融入在圖像結(jié)構(gòu)中，用圖表中交互的小部件，擴(kuò)展到其他類(lèi)型的內(nèi)容上，通常需要一個(gè)或多個(gè)UI 元素進(jìn)行轉(zhuǎn)換提示。

如在做地圖中的交互可視化時(shí)要探索當(dāng)前特定點(diǎn)或區(qū)域的實(shí)時(shí)信息，此時(shí)需要將圖標(biāo)或交互功能融入在地圖上

開(kāi)源數(shù)據(jù)可視化庫(kù)

      簡(jiǎn)單介紹一下開(kāi)源的交互可視化數(shù)據(jù)庫(kù)，如果對(duì)數(shù)據(jù)沒(méi)有什么概念在圖表設(shè)計(jì)前可以參考一下數(shù)據(jù)庫(kù)中的樣式及類(lèi)型，然后根據(jù)自己實(shí)際項(xiàng)目的需要進(jìn)行設(shè)計(jì)。

D3.js 可能是最流行和最廣泛的 Javascript 數(shù)據(jù)可視化庫(kù)  專(zhuān)為基于數(shù)據(jù)操作文檔而構(gòu)建，并使用 HTML、SVG 和 CSS 使數(shù)據(jù)栩栩如生。

還有很多開(kāi)源數(shù)據(jù)庫(kù)可以查看- 11 個(gè) Javascript 數(shù)據(jù)可視化庫(kù)-里面有詳細(xì)的介紹，這里就不一一說(shuō)明了，希望在你們的設(shè)計(jì)中有所幫助。

結(jié)論

為了提高交互式數(shù)據(jù)可視化易用性以及為用戶(hù)體驗(yàn)帶來(lái)更多附加值，我們需要基于數(shù)據(jù)調(diào)研，用戶(hù)分析，場(chǎng)景模擬等方向逐一解決相對(duì)應(yīng)的問(wèn)題，才可從各項(xiàng)結(jié)論中得出設(shè)計(jì)方向和目標(biāo)。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：站酷    作者：胖Kuan

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)