2021-7-27 ui設計分享達人
隨著大數(shù)據(jù)時代的快速發(fā)展，日常生活中對數(shù)據(jù)信息的接觸場景越來越多，我們在做數(shù)據(jù)展示設計前首先要梳理數(shù)據(jù)重點，數(shù)據(jù)結(jié)構(gòu)關系得到的結(jié)論結(jié)合用戶需求產(chǎn)品需求等進行合理的設計。
最初的數(shù)據(jù)展示接近于數(shù)據(jù)報表的形式，而現(xiàn)今數(shù)據(jù)展示有兩種：靜態(tài)數(shù)據(jù)可視化、交互數(shù)據(jù)可視化。它們的設計基礎均基于數(shù)據(jù)可視化的設計要點進行延展的，而數(shù)據(jù)可視化要點已有很多優(yōu)秀的設計師進行總結(jié)，因此我重點介紹一下我對交互式數(shù)據(jù)可視化的理解（僅代表個人觀點），希望對大家有所幫助。
什么是交互式可視化
靜態(tài)與交互式數(shù)據(jù)可視化的區(qū)別
交互式數(shù)據(jù)可視化中的用戶體驗
交互式數(shù)據(jù)可視化設計思維
開源數(shù)據(jù)可視化庫
交互式數(shù)據(jù)可視化是一種更能夠吸引用戶的數(shù)據(jù)信息交流形式，在BI中的應用也變得越來越流行，并且由于其有較強的易用性以及能夠為用戶體驗帶來更多附加值而逐漸成為大多數(shù)數(shù)據(jù)分析系統(tǒng)的常見部分。它通過數(shù)據(jù)動態(tài)演示的交互方式，使用戶可以直接與信息交互，用以構(gòu)建自己對信息的理解，交互式可視化必須具有與人機交互方式，如單擊按鈕，移動滑塊，快速響應以顯示輸入和輸出之間的真實關系。
有效的交互式可視化能夠保持展示形式和數(shù)據(jù)功能之間的平衡關系。簡單的圖表可能因為太無聊而無法引起用戶的注意，復雜數(shù)據(jù)可視化可能完全無法傳達正確的信息。因此數(shù)據(jù)視覺和交互形式效果需要協(xié)同工作。
靜態(tài)數(shù)據(jù)可視化是不包含任何交互功能且不隨時間變化的數(shù)據(jù)可視化，從單一視角關注特定數(shù)據(jù)故事的信息圖。圖表中沒有可操作的交互功能來調(diào)整靜態(tài)可視化的數(shù)據(jù)展示結(jié)果，更適合不太復雜的數(shù)據(jù)故事、建立概念之間的關系以及傳達預定的視圖。其構(gòu)建成本遠低于交互式設計。因此在設計時必須充分考慮如何展示當前顯示的數(shù)據(jù)擬定好數(shù)據(jù)故事。
交互式是可視化設計中的絕佳工具，因為它們能夠優(yōu)化信息的顯示方式，減少視覺噪音，降低用戶對數(shù)據(jù)閱讀的難度。系統(tǒng)中最常見應用之一是數(shù)字化儀表板或數(shù)字看板，如果直接從枯燥的數(shù)據(jù)表格獲取信息這樣的體驗是非常原始且視覺干擾過多。而通過梳理數(shù)據(jù)結(jié)構(gòu)使用適當?shù)慕换タ梢暬箍窗?，能夠成為用戶快速汲取主要?shù)據(jù)信息的理想工具
設計時決定應用哪種數(shù)據(jù)可視化形式一方面需通過用戶畫像分析了解用戶偏好如何，另一方面則需要結(jié)合數(shù)據(jù)故事復雜程度采用哪種才能夠更全面更準確的傳達數(shù)據(jù)信息，以及在構(gòu)建項目的過程投入成本最終回報率的高低也起著決定性因素。
大量數(shù)據(jù)可用于幫助用戶做出更好的業(yè)務決策。為了實現(xiàn)這一點，并從數(shù)據(jù)中獲得最大價值，用戶必須能夠理解它；提出問題、體驗模型并識別異常。
在設計數(shù)據(jù)可視化面板時，最至關重要的是，需要考慮用戶將如何使用這些數(shù)據(jù)。讓更多的用戶會使用數(shù)據(jù)面板而不是讓他們?nèi)?chuàng)建面板。強迫用戶按照我們設定的規(guī)則去破譯圖表含義不僅不切實際且學習成本高昂。
用戶需要在不受額外功能干擾的情況下看到我們所展示的內(nèi)容，當我們使用太多的顏色、形狀、圖案和大量的數(shù)據(jù)時，容易使用戶迷失在數(shù)據(jù)展示中。我們的工作就是為用戶處理數(shù)據(jù)信息結(jié)構(gòu)降低用戶對數(shù)據(jù)認知的難度。
我們的大腦處理視覺圖像要比處理文字內(nèi)容快 60,000 倍，能夠在13 ms內(nèi)處理一張圖像，然而，大腦的處理能力也是有限的。為了展示最優(yōu)效果，數(shù)據(jù)可視化必須基于人類認知速度提供信息。需要設計輸入來將信息分解成可管理的模塊并以用戶能夠簡易處理的方式呈現(xiàn)它。
我們在構(gòu)建任何類型數(shù)據(jù)可視化時都需以用戶為中心，了解用戶的目標、動機和需求，經(jīng)營環(huán)境，需要解決什么問題，以及用戶語言和特定領域的知識；
在做這方面用戶分析不需要耗費大量的時間，只要足以使我們能夠進入下一階段——設計用戶路徑上即可
系統(tǒng)用戶的體驗建立在兩個主要元素上：關鍵點可視化以及交互路徑。而用戶路徑中每個關鍵點需設計為對應特定的業(yè)務問題。
可視化工具能夠以豐富而復雜的方式與圖表交互：篩選、縮放、細分、導出值等。它們都有助于將信息分解為更易于管理的塊，因此我們需要考慮多種操作結(jié)果，綜合起來能夠串聯(lián)出具有多個分支交互路徑和圖表用戶體驗路徑。
可視化中的交互改變了數(shù)據(jù)的視角，始終致力于簡單的可視化而不是復雜的可視化。目標是使其更易于理解和閱讀。因此，需要避免使因使用過多的圖表引起頁面結(jié)構(gòu)混亂，意味著通過過濾某些數(shù)據(jù)點，選擇數(shù)據(jù)的不同區(qū)域，甚至完全改變可視化的類型。重要的一點是：交互式可視化不再是靜態(tài)的，也不代表數(shù)據(jù)的單一視圖。交互使人們能夠根據(jù)自己的需要調(diào)整可視化并提出不同的問題。
通過了解受眾群體是誰，需要展示哪些數(shù)據(jù)，了解他們將如何使用這些數(shù)據(jù)。這些都將作為我們設計的理論依據(jù)，用以解決設計中哪些圖表是可以快速應用到實際場景中，如何為數(shù)據(jù)結(jié)構(gòu)做簡化等問題；在數(shù)據(jù)的展示形式上通常是使用圖表、線條或點、條形圖和地圖來實現(xiàn)的。萬變不離其宗，交互可視化也是同樣在此基礎上進行擴展發(fā)揮作用。
在設計中需要為數(shù)據(jù)可視化創(chuàng)建各種交互式小部件，但首先需要遵循數(shù)據(jù)可視化交互設計的三個基本設計原則——可用性、可訪問和可操作。
是否有直觀的交互功能和數(shù)據(jù)可視化？
用戶是否可訪問數(shù)據(jù)，并且能夠快速理解其含義？
是否為用戶提供簡便易上手的可操作的系統(tǒng)平臺？
當我們有了一個粗略的理論基礎模型，就可以搭建數(shù)據(jù)模型來記錄每條數(shù)據(jù)和相關的元數(shù)據(jù)，接下來是通過各種交互形式設計用戶界面。
可視化架構(gòu)是映射數(shù)據(jù)故事的形式化基礎，在此基礎上通過線條、圖標和顏色等設計元素的視覺工具進行展示。為了利用這些工具，我們責需要運用對比關系、比重關系、顏色差異、位置信息和象征意義等突出顯示信息所呈現(xiàn)的目的及數(shù)據(jù)間的結(jié)構(gòu)關系。
設計美學中少即是多的設計理念經(jīng)久不衰，我們在進行可視化設計時也可按照這一標準在有限的設計空間內(nèi)為用戶提供最多的想法，清晰準確的傳達復雜的想法
交互不一定發(fā)生在頁面中明顯可點擊的事物上，也可融入在圖像結(jié)構(gòu)中，用圖表中交互的小部件，擴展到其他類型的內(nèi)容上，通常需要一個或多個UI 元素進行轉(zhuǎn)換提示。
如在做地圖中的交互可視化時要探索當前特定點或區(qū)域的實時信息，此時需要將圖標或交互功能融入在地圖上
簡單介紹一下開源的交互可視化數(shù)據(jù)庫，如果對數(shù)據(jù)沒有什么概念在圖表設計前可以參考一下數(shù)據(jù)庫中的樣式及類型，然后根據(jù)自己實際項目的需要進行設計。
D3.js 可能是最流行和最廣泛的 Javascript 數(shù)據(jù)可視化庫 專為基于數(shù)據(jù)操作文檔而構(gòu)建，并使用 HTML、SVG 和 CSS 使數(shù)據(jù)栩栩如生。
還有很多開源數(shù)據(jù)庫可以查看- 11 個 Javascript 數(shù)據(jù)可視化庫-里面有詳細的介紹，這里就不一一說明了，希望在你們的設計中有所幫助。
為了提高交互式數(shù)據(jù)可視化易用性以及為用戶體驗帶來更多附加值，我們需要基于數(shù)據(jù)調(diào)研，用戶分析，場景模擬等方向逐一解決相對應的問題，才可從各項結(jié)論中得出設計方向和目標。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
文章來源：站酷 作者：胖Kuan
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( 91whvog3.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務