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