前言：此篇主要討論的是大屏可視化動效設計，與應用于各種移動應用、網(wǎng)頁、軟件等用戶界面設計中的純 UI 動效在定義、應用場景、設計目的與原則以及技術(shù)實現(xiàn)與要求等方面都存在明顯的區(qū)別。純 UI 動效更注重于提升用戶體驗和界面的生動性，而大屏可視化動效則更側(cè)重于提高信息展示的有效性和大屏整體的視覺效果。兩者各有側(cè)重，但都是為了提升用戶體驗和信息展示效果。

一、動效設計的價值體現(xiàn)

1. 提升用戶體驗

1. 緩解用戶在觀看時的尷尬感，增加界面的生動性和趣味性；
2. 適度的動態(tài)元素可減少用戶視覺疲勞，提高長時間觀看的舒適度；
3. 通過流暢的動畫轉(zhuǎn)場，使數(shù)據(jù)展示更加連貫，例如，通過談入淡出的轉(zhuǎn)場過度動畫，使得頁面整體更加平滑舒適。

2. 增強信息傳達

1. 引導用戶注意力，突出重要信息，例如告警信息；
2. 通過動態(tài)效果展示數(shù)據(jù)變化趨勢，例如實時的溫度變化曲線；
3. 幫助用戶更直觀地理解復雜的數(shù)據(jù)關(guān)系，例如知識圖譜中"實體-關(guān)系-實體"三元組組成的關(guān)系網(wǎng)。

3. 改善交互體驗

1. 為用戶操作提供即時的視覺反饋，例如鼠標的 Hover、點擊狀態(tài)；
2. 當用戶在不確定是否可進行交互的按鈕時，可通過動效暗示可交互的元素，提高界面的可用性；
3. 有效的動效交互引導，可減少用戶的學習成本，讓用戶快速上手操作。

4. 強化品牌形象

每個品牌除了有自己的品牌色和品牌元素外，也可通過獨特的動效設計展現(xiàn)品牌特色，給用戶留下深刻印象，增強記憶點，促進用戶對產(chǎn)品及品牌的深度認同與信賴 ，比如 Google 的 logo 演變和 Apple 的 Face ID 動畫。

5. 輔助數(shù)據(jù)分析

1. 通過動態(tài)展示數(shù)據(jù)變化過程，便于用戶分析趨勢；
2. 利用動效突出異?；蛑匾獢?shù)據(jù)，使得用戶可以快速聚焦定位關(guān)鍵數(shù)據(jù)，輔助決策；
3. 動態(tài)呈現(xiàn)數(shù)據(jù)關(guān)聯(lián)性，有助于發(fā)現(xiàn)潛在規(guī)律，例如山體滑坡數(shù)據(jù)監(jiān)測，通過實時獲取滑坡體的相關(guān)數(shù)據(jù)，評估未來可能受影響的道路或村莊，及時疏散人員，從而減少滑坡災害造成的人員傷亡和財產(chǎn)損失。

6. 提高信息密度

1. 在有限的容器中，信息展示往往展示不足，此時可利用動效在有限空間內(nèi)展示更多信息，例如表格的跑馬燈效果；
2. 通過動態(tài)切換，實現(xiàn)多維度數(shù)據(jù)的輪換展示，比如 Tab 頁面輪播圖。

7. 增強沉浸感

1. 營造出數(shù)據(jù)可視化的"生態(tài)系統(tǒng)"感，例如在城市大屏中，模擬一天日出到日落、天氣變化（晴朗、下雨、下雪、臺風等）的動態(tài)效果，從而創(chuàng)建一個與數(shù)據(jù)相協(xié)調(diào)的生態(tài)系統(tǒng)。
2. 提高用戶對數(shù)據(jù)展示的投入度和參與感，不同層級的數(shù)據(jù)使用不同的進入和退出動畫，幫助用戶理解數(shù)據(jù)的層次結(jié)構(gòu)，從而更好地投入于數(shù)據(jù)的探索過程。

8. 提升大屏的現(xiàn)場感和即時性

1. 數(shù)據(jù)的實時性，例如數(shù)字孿生中社區(qū)大屏，可通過實時數(shù)據(jù)更新的動效，全面獲取當前社區(qū)的安全動態(tài)情況；
2. 增強大屏在監(jiān)控、指揮等場景中的現(xiàn)場感，特別是三維場景中的視角切換，打破二維靜態(tài)場景的單一性。

9. 營造氛圍和情感共鳴

1. 通過不同的動態(tài)效果和色彩搭配，營造出特定的氛圍和情調(diào)，從而更好地與觀眾產(chǎn)生共鳴，增強情感傳達的效果。
2. 利用品牌的標志性顏色、圖案或符號，將其融入動效設計中，以強化品牌氛圍。例如，下圖中的阿里云平臺，利用阿里品牌色橙色融入到場景中，讓人一眼就知道是阿里的設計。

總結(jié)：動效設計雖然能夠幫助可視化大屏設計提升價值屬性，但在應用動效設計時也需要注意適度原則，避免過度使用影響數(shù)據(jù)的清晰展示和系統(tǒng)性能。合理的動效設計能夠在提升用戶體驗的同時，更有效地達成數(shù)據(jù)可視化的目標。

二、動效設計的類型

1. 主視覺動效

主視覺動效主要包含攝像機動畫、場景動畫、背景動畫、燈光動畫以及頁面切換動畫。這里需要說明一下的是主視覺的場景內(nèi)容雖然屬于整個大屏的設計組件之一，占比高，但此處將不以設計組件進行展開闡述，將作為獨立模塊講解，另外，主講的是三維場景。

① 攝像機動畫

大屏主視覺動畫中，攝像機動畫起著關(guān)鍵作用，它可以多角度，全方位展示數(shù)據(jù)。主要涉及到主場景入場動畫和視角切換動畫。在制作攝像機動畫前，還有一項很重要的點是要確定好攝像機的 FOV（視場角），F(xiàn)OV 的計算方法通常與攝像機的焦距和傳感器尺寸有關(guān)：計算方法可參考「相機視角 FOV 計算公式」

以 35mm 膠片相機為例，膠片的圖像格式是 36mm 寬 24mm 高。 如果鏡頭焦距為 24mm，則：

1. 水平視角 = 2 artan(膠片寬/2/鏡頭焦距） = 2 artan(36/2/24) = 73.74
2. 垂直視角 = 2 artan(膠片高/2/鏡頭焦距） = 2 artan(24/2/24) = 83.97
3. 對角視角 = 2 artan(膠片對角/2/鏡頭焦距） = 2 artan(43/2/24) = 83。

攝像機動畫的意義

1. 提供動態(tài)視角：攝像機動畫可以模擬人眼觀察事物的角度和方式，例如通過攝像機自動環(huán)視的上帝視角，使觀眾能夠更全面地了解全局數(shù)據(jù)內(nèi)容。
2. 增強沉浸感：通過攝像機動畫的流暢移動和視角變換，用戶可以更好地融入到大屏展示的場景中，提升沉浸感。
3. 突出重點信息：攝像機動畫可以將重要的信息或者區(qū)域進行特寫展示，從而引導觀眾的注意力，突出關(guān)鍵內(nèi)容。

攝像機動畫的設計要點

1. 攝像機FOV：FOV是攝像機能夠捕捉到的場景范圍的大小，通常用角度或弧度來表示。FOV越大，意味著攝像機能夠拍攝到更寬廣的視角；反之，則只能捕捉到較小的視角。
2. 路徑設定：在制作攝像機動畫時，需要提前規(guī)劃好攝像機的移動路徑。路徑應該根據(jù)展示內(nèi)容和用戶的觀看習慣進行合理設置，確保用戶能夠清晰地看到展示的重點。
3. 速度節(jié)奏：攝像機動畫的速度和節(jié)奏也是設計的關(guān)鍵。過快的速度可能導致觀眾看不清內(nèi)容，而過慢的速度則可能使觀眾感到無聊。因此，需要根據(jù)展示內(nèi)容的特性和用戶的接受程度來調(diào)整動畫的速度和節(jié)奏。
4. 視角變換：選擇合適的視角對于攝像機動畫的設計至關(guān)重要。不同的視角可以呈現(xiàn)出不同的視覺效果和情感體驗。例如，俯視視角可以展現(xiàn)全局，而仰視視角則可以營造高大、威嚴的氛圍。
5. 過渡效果：在攝像機動畫中，不同場景或視角之間的過渡效果也需要精心設計。流暢的過渡可以增強動畫的連貫性和提升用戶的觀看體驗。

總結(jié)：攝像機動畫雖然可以模擬人眼觀察事物的角度和方式，全方位展示數(shù)據(jù)內(nèi)容，合理的動畫設計可以增加大屏的沉浸感，增強動畫的連貫性和提升用戶體驗，但需要準確控制好攝像機視角轉(zhuǎn)換的速度和節(jié)奏，避免造成用戶的眩暈感和數(shù)據(jù)表現(xiàn)不充分的現(xiàn)象。另外，在相同的傳感器尺寸中，過寬的攝像機視角容易導致畫面畸變，比如魚眼鏡頭（焦距通?！?6mm），過窄的攝像機視角，空間容易被極致壓縮，導致畫面缺乏空間感，例如200mm的長焦鏡頭，我們在制作攝像機動畫時需根據(jù)不同的場景選擇合適的FOV。

② 場景動畫

場景動畫以城市場景為例，體現(xiàn)在建筑物的生長、城市板塊抬升、城市道路交通流光效果、水域的波動等其它城市元素動畫，搭配攝像機動畫可以增加沉浸感和臨場感。

場景動畫的意義

1. 增強視覺沖擊力：通過流暢自然的場景動畫，如建筑的生長、主體建筑物的光影變化等，可以給用戶帶來強烈的視覺震撼，快速聚焦在重點區(qū)域。
2. 提升信息傳達效果：場景動畫可以將復雜的數(shù)據(jù)和信息以直觀、易懂的方式呈現(xiàn)出來。例如下圖，通過視角推拉及不同場景模塊的同步疊加，展示不同頁面的數(shù)據(jù)變化，幫助用戶更好地理解數(shù)據(jù)的含義和分析結(jié)果。
3. 提升用戶體驗：流暢的場景動畫可以為用戶提供更自然、更有趣的交互體驗，增強大屏的可用性。

場景動畫的設計原則

1. 符合主題：場景動畫的設計應與大屏的主題和內(nèi)容相吻合，確保動畫效果與整體設計風格的一致性。
2. 簡潔明了：避免過于復雜的動畫效果，以免干擾用戶對信息的理解和接收。動畫應簡潔明了，突出重點。
3. 流暢自然：場景動畫的過渡應流暢自然，避免出現(xiàn)卡頓或突兀的效果，以提供良好的用戶體驗。

③ 背景動畫

背景動畫在大屏視效中扮演著輔助角色，起到襯托主體、豐富整體畫面的作用。

常見的背景動畫有粒子動畫、波浪變形動畫、顏色漸變動畫、紋理變形動畫、幾何圖形動畫等，例如 AE 中 Trapcode Particular 和 Stardust 粒子插件，以下是一些案例樣式，圖片來源：Pinterest。

④ 燈光動畫

燈光動畫主要體現(xiàn)在光效層面，能營造出強烈的科技感、穿梭感以及空間感，例如 AE 中的 OF（Optical Flares）、Saber 插件在大屏可視化設計中就會經(jīng)常用到。以下是一些案例樣式，圖片來源：Pinterest。

2. 設計組件動效

① 標題動效

標題動效包括漸變動畫、位移動畫、縮放動畫、旋轉(zhuǎn)動畫以及閃爍動畫，他們可以作為單獨的屬性來生成動畫，也可進行多項組合生成。在制作的時候把控好每個元素動畫出現(xiàn)的時間，即可生成有層次且具有美感的標題動效。

② 圖表動效

圖表是數(shù)據(jù)展示的重要形式，是最為直觀的信息傳達方式。常用的圖表動效有線形圖、面積圖、柱狀圖、直方圖、條形圖、氣泡圖、散點圖、雷達圖、漏斗圖、餅圖、環(huán)形圖、水波圖、儀表盤、熱點圖、樹狀圖等。以下是一些圖表動效案例，動圖有進行抽幀看起來會卡頓。

③ 圖標按鈕動效

常見的圖標按鈕可以分為：圖標、按鈕、圖標+按鈕三大類，包括：區(qū)域/頁面切換、提示反饋、狀態(tài)變化、引導、數(shù)據(jù)更新這五種類型。以下是幾個案例呈現(xiàn)，整體的動效都相對比較柔和，不激進。

④ 地圖打點動效

通常應用在地球、地圖以及城市大屏中，用來定位某一具體地理位置，有時候會結(jié)合不同的顏色來區(qū)分告警級別。比如位置標記、呼吸態(tài)、光柱圖、漸變圖形等。

⑤ 其它特殊組件動效

特殊組件主要包括下拉菜單動效、彈窗動效、地圖飛線動效、擴散波、數(shù)字滾動動效。

三、動效設計的原則

大屏動效設計的原則包括信息優(yōu)先、交互友好、簡潔流暢、適度平衡、一致性、層次感、適應性、技術(shù)可行性、及時反饋、個性化、創(chuàng)新性、可維護性。原則只是讓我們能夠以這個為基礎，需根據(jù)不同的業(yè)務需求進行靈活運用。

最后，以上就是此篇文章所講的內(nèi)容，在平時的工作之余實際是可以多花點心思去突破現(xiàn)有的一些動效設計，要保持對新技術(shù)、新趨勢的敏感度，持續(xù)創(chuàng)新。

另外，大屏可視化動效設計師往往扮演著多個角色，除了需要具備 UI 設計和動效設計的能力外，還需要對數(shù)據(jù)處理、大屏交互等方面有一定的了解和實踐經(jīng)驗。

PS:本人較懶，整理了一下動效設計導圖，welcome 一起學習討論，共同進步。

3DDATAX