動態生活：移動數據可視化動畫指南

如今，隨著技術推動大量數據的收集和生產，您可以相對容易地獲得可以指導您日常決策的信息。 移動應用程序利用心率和其他生物特徵數據來跟踪健康和鍛煉目標。 它們提供有關投資、個人支出和預算的實時數據。 他們甚至可以幫助父母評估新生兒的餵養和睡眠模式。

要掌握大量可用數據，只需看看設計師 Nicholas Felton 根據他自己的個人數據構建的年度報告。 觸手可及的信息如此之多，最難的部分是理解它。

這就是動畫可以提供幫助的地方。 動畫數據使其更易於理解、引人入勝和有用，尤其是在移動設備的小屏幕上。 有了動畫，數字變得更容易消化，否則被忽視的趨勢、模式和敘述變得明顯。 與這些視覺效果的實時交互可促進參與度，並允許用戶更深入地探索數據。

同時，過度或誤導的動畫可能會破壞其目的，模糊而不是闡明洞察力。 在為移動數據可視化製作動畫時，設計師應該使用運動設計原則——並避免常見的陷阱。

動畫移動數據可視化的好處

動畫不僅僅是數據可視化的點綴。 運動提供了無數的好處，它應該以實現特定結果為目標而應用。

幫助用戶感知趨勢和變化是在數據可視化中使用運動的關鍵優勢。 已故學者漢斯·羅斯林 (Hans Rosling) 以動畫著稱，他在動畫中繪製了壽命和收入數據，以顯示數十個國家幾十年來的健康和財富變化。 這是一部引人入勝的動畫，它闡明了隨著時間推移的趨勢，並抵消了對全球發展的普遍看法。

研究表明，動畫靜態圖表可以改善圖形感知並增加觀眾的興趣。 例如，元素可以以不同的速度進入，而不是一次顯示所有圖表，以免過多的信息使查看者不知所措。 動作“有助於顯示或增強元素的視覺層次結構，或軸的方向以及數據的顯示方式，”Toptal 網絡中駐倫敦的 UI/UX 設計師 Tetiana Donska 說。

動畫還可以幫助設計師有效利用移動設備屏幕。 “數據可視化中的運動有助於創建對不同狀態之間轉換的認識，並在不影響用戶體驗的情況下提供更多信息，”Donska 說。 實時交互可以進一步保持界面簡潔，因為用戶可以通過點擊、拖動、滾動和縮放等手勢來探索數據。 例如，用戶可以沿軸滑動手指以顯示不同的值或點擊以顯示數字。

將實時更新整合到動畫數據可視化中可以使它們對用戶更具吸引力。 尼日利亞 Toptal UI/UX 設計師 Olajide Akinpelu 表示，在我們眼前看到數據更新有助於人類認知。 用戶刷新靜態數據將更難檢測到變化； 實時運動可幫助他們識別否則可能會錯過的洞察力。

當然，在不分散用戶注意力的情況下讓過渡和動作看起來很自然說起來容易做起來難。

移動端動畫和數據可視化技術

數據可視化並不局限於傳統圖表和圖形所代表的複雜數據集。 即使是在社交應用上記錄用戶情緒的“贊”按鈕也是一種可視化數據的方式。

無論複雜程度如何，在動畫數據可視化時，一套通用的原則和技術都會發揮作用。 我們在本文中關注的四種技術——價值改變； 放寬、抵消和延遲； 育兒； 和縮放——旨在為 UX 環境中的運動注入現實世界中運動的自然性，符合用戶與生俱來的期望以及連續性和敘事感。 畢竟，目標是幫助用戶理解抽像數據，而不僅僅是讓他們參與或取悅他們。

價值變化

當顯示值隨動畫變化時，不是顯示靜態數字，而是數字計數器滴答作響或條形上升，然後到達最終圖形。 這可能是傳達進步或增長（或缺乏）的有力方式。 它還表示數據可能會發生變化，在某些情況下，動畫值表示交互性。

價值變化可視化在移動領域很普遍，包括健身、教育和金融應用程序。 例如，在語言學習應用程序中，條形可能會逐漸上升，直到達到測試的最終分數。 價值變化顯示了進步，可以為用戶提供成就感，鼓勵他們繼續學習。

將值更改應用於圖表中的線條是演示隨時間變化的另一種方式。 例如，在顯示不同國家國內生產總值 (GDP) 的條形圖中，運動可以揭示國家經濟相對於彼此的軌跡。 這種視覺效果被稱為條形圖競賽。

緩動、偏移和延遲

在物理世界中，一個物體不可能瞬間從零加速到 20 英里/小時。 然而，在數字世界中，您可以在沒有加速或減速的情況下創建運動。 但這並不意味著你應該這樣做。 在人眼看來，這樣的運動顯得不自然，這就是為什麼給圖形元素以自然的進出速度（稱為緩動）是有益的。

抵消不同 UI 元素的引入並延遲它們的速度可以進一步向用戶表明正在顯示不同的變量，並且可以幫助在它們之間建立層次結構。 例如，在股票交易應用程序中，用戶股票的價值可能首先出現，然後是一般指數的價值。 偏移和延遲使用戶更容易理解數字和圖表，而不是一次性呈現它們。

育兒

Parenting 創建 UI 組件之間的關係。 當父元素中的屬性（例如位置、比例或顏色）發生變化時，子元素中的屬性也會發生變化。 例如，在折線圖上，如果一條線上的一個點是父級，當用戶拖動該點時，他們可以看到值（子對象）發生變化。

育兒是增加互動性和創建層次結構的有效方式。

縮放

縮放允許用戶輕鬆地從數據的鳥瞰圖變為更細化的數據。 在呈現大型數據集時，它可能是一種有用的技術，這種技術通常可以在桌面上查看。 例如，股票跟踪應用程序可以加載給定股票的每週價格視圖，並允許用戶放大或縮小以顯示每日或每年的數據。

最常見的數據可視化形式之一是地圖，廣泛用於健身、自行車共享和叫車應用程序。 在這種情況下，縮放是一個關鍵工具，因為移動屏幕的限制極大地限制了可以在單一視覺中呈現的內容。

要避免的運動設計陷阱

愛德華·塔夫特（Edward Tufte），這位真正撰寫了現代數據可視化書籍的人，有一個簡單的格言：“最重要的是，展示數據。”

專注於傳遞信息。 顏色、形狀和運動等屬性只能用於增強對數據的理解。 無關的視覺元素——或者 Tufte 所說的“圖表垃圾”——有損於這個目的。

在移動設備上，屏幕用戶可能容易分心，數據可視化中太多的移動部分可能會讓人不知所措。

2019 年加入 Toptal 網絡的資深設計師 Darrell Estabrook 說：“對於移動設備，您已經擁有需要關注的小外形尺寸。對於任何移動工作流程，如果沒有精心設計的離散步驟，“用戶就會出錯。”

Estabrook 補充道：“對於所有數據可視化，你必須問清楚，你向用戶提供了哪些信息，以便他們做出下一個決定……按下按鈕、寫一封電子郵件或深入挖掘。 你需要做什麼來為他們提供這些[信息]？”

您可以通過避免以下陷阱來設計集中且有效的移動數據可視化：

不會增加太多價值的資源密集型視覺效果

在視覺效果中渲染運動在後端可能會佔用大量資源，並且可能會對前端的性能和用戶體驗產生負面影響。 需要大量編碼的大型數據集或數據會增加這種風險。 在將資源用於構建此類視覺效果之前，設計團隊和客戶應該清楚預期的結果——並且值得付出努力。

華而不實或多餘的動畫

動畫數據可視化應該支持應用程序的目的。 ​​語言學習應用程序可能會使用動作來強調用戶的進步，而投資應用程序可能會巧妙地突出可操作的數據。 然而，無論應用程序的性質如何，在大多數情況下，設計師都應避免使用華麗的動畫，例如掉落的五彩紙屑或煙花。 他們不僅冒著將視覺效果遊戲化的風險，這可能導致對應用程序的不健康參與，而且他們可能會掩蓋或誇大數據實際傳達的內容。

過度交互的視覺效果

處理數據需要一定程度的精確度，用戶需要在智能手機屏幕上佔據相當大的一部分——通常認為 7 到 10 毫米是最佳做法——才能成功執行手勢。 太多的交互性可能會變得麻煩和令人沮喪。 一次優先考慮一項操作是有益的。

風格不一致

數據可視化應該與應用程序的整體風格和功能相結合，Apple 在其人機界面指南中將其稱為美學完整性。

根據尼日利亞的 UX/UI 設計師 Akinpelu 的說法，“在您使用的過渡類型、動畫類型、顏色混合方面”保持風格一致性有助於用戶導航數據集。

與激增的數據保持同步

從工作和學校到健康和財務，數據已經成為我們生活中的固定裝置。 隨著越來越複雜的智能手機和 5G 連接的普及，數據量——以及應用它的潛力——肯定也會增長。

動畫可以成為幫助人們理解所有這些信息的重要工具。 Motion 讓用戶更容易理解關鍵指標、趨勢和關係。 然而，與任何 UX 功能一樣，動畫可能會被過度使用或誤用，這最終可能會降低數據的可理解性。 通過使用運動設計原則和技術，設計師可以創建具有吸引力和洞察力的動畫移動數據可視化。

進一步閱讀 Toptal 設計博客

• 引人注目和感動：運動設計原則指南
• 運動設計行業不斷擴大的影響
• 使用這些移動應用程序設計最佳實踐取悅用戶