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

一、動(dòng)效設(shè)計(jì)的價(jià)值體現(xiàn)

1. 提升用戶體驗(yàn)

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

2. 增強(qiáng)信息傳達(dá)

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

3. 改善交互體驗(yàn)

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

4. 強(qiáng)化品牌形象

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

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

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

6. 提高信息密度

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

7. 增強(qiáng)沉浸感

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

8. 提升大屏的現(xiàn)場(chǎng)感和即時(shí)性

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

9. 營(yíng)造氛圍和情感共鳴

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

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

二、動(dòng)效設(shè)計(jì)的類型

1. 主視覺動(dòng)效

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

① 攝像機(jī)動(dòng)畫

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

以 35mm 膠片相機(jī)為例，膠片的圖像格式是 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. 對(duì)角視角 = 2 artan(膠片對(duì)角/2/鏡頭焦距） = 2 artan(43/2/24) = 83。

攝像機(jī)動(dòng)畫的意義

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

攝像機(jī)動(dòng)畫的設(shè)計(jì)要點(diǎn)

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

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

② 場(chǎng)景動(dòng)畫

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

場(chǎng)景動(dòng)畫的意義

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

場(chǎng)景動(dòng)畫的設(shè)計(jì)原則

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

③ 背景動(dòng)畫

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

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

④ 燈光動(dòng)畫

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

2. 設(shè)計(jì)組件動(dòng)效

① 標(biāo)題動(dòng)效

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

② 圖表動(dòng)效

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

③ 圖標(biāo)按鈕動(dòng)效

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

④ 地圖打點(diǎn)動(dòng)效

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

⑤ 其它特殊組件動(dòng)效

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

三、動(dòng)效設(shè)計(jì)的原則

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

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

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

PS:本人較懶，整理了一下動(dòng)效設(shè)計(jì)導(dǎo)圖，welcome 一起學(xué)習(xí)討論，共同進(jìn)步。

3DDATAX