隨著互聯網產品的不斷發展，越來越多的產品開始在其交互設計中運用動態立體效果。如翻轉卡片、立體盒子轉場效果等等。讓用戶可以感受到更生動、更有真實立體感的交互體驗。而對于動效設計師而言，上線的動效品質至關重要，因為只有好用的交互和精美的視覺效果才能吸引和留住用戶。

（素材來自網絡，僅用于學習交流，侵聯刪）

3D 圖層展示優勢

在設計中，3D 動效相比 2D 動效具有更多地展示優勢，3D 圖層相比 2D 的區別主要在于攝像機可以在其三維空間內進行移動、旋轉、縮放等操作，使得圖像更加立體、真實、更富創意性。
同時，3D 圖層還可以在不同角度下顯示不同的內容，增加了圖像的光感變化性和視覺效果。而 2D 圖層只有左右、上下兩個方向，只能在平面內進行操作，沒有前后，無法呈現出 3D 效果。

一、3D 動效應用思路

AE 中三維空間特點

AE 技術是基于圖層的，所以可以將每個圖層理解為一個面片，即由 X、Y 軸組成的一個平面，開啟圖層的三維開關后，就多了一個 Z 軸（藍色軸）。

所以，三維坐標有三個軸，即 X 軸、Y 軸、Z 軸。其中，X 軸（紅色軸）表示左右關系，Y 軸（綠色軸）表示上下關系，Z 軸（藍色軸）表示前后關系，這樣就形成了人的視覺立體感。

3D 動效在 UI 設計中的作用

在 UI 設計中，使用 3D 圖層效果可以創造更生動、更立體的界面元素，從而提升用戶的交互體驗。以下是一些常見的 UI 設計中應用 3D 效果的例子：

通過使用 3D 圖層效果，畫面可以呈現更加立體和生動的效果。將其運用于加載動畫中，可以減少用戶等待時的焦慮感，確保用戶在等待期間不會感到沮喪和煩躁。同時，使用 3D 效果展示產品或橫幅廣告時，可以提升界面的美觀度，讓用戶產生更好的使用體驗。

二、 制作要點& 案例教學分享

3D 動效制作要點

【設計前】

了解設計需求：
為了設計出符合用戶體驗的 3D 動效，拿到平面稿或動效需求后，需要充分對需求進行了解，包括確定具體主題、色彩樣式、使用場景等等，以確保最終的動效設計符合需求。
風格一致性：
明確設計目標后，就可以開始動效構思了，要確保動效的風格和主題需與產品保持一致，不能出現突?；虿粎f調的效果。
考慮用戶體驗：
需要考慮用戶的需求和使用場景，包括文字大小、動效設計等，盡可能為用戶提供更好的交互體驗。
【設計中】

確定動效流程：
需要通過流程圖或草圖來確定動效的流程，包括動畫的起始、中間和結束狀態以確保動效的連貫性和流暢性。
注重動效細節：
在制作 3D 動效時，應注重細節的把控，例如光影效果、景深效果等。需要通過不斷的預覽調試，來確保動效的細節達到最優狀態。
節奏和速度：
要根據設計主題來確定動效的節奏和速度。例如，關于知識分享類 APP，可以使用簡單的卡片翻轉過渡動畫；而對于娛樂或體育競技類的設計，則可以采用更多的動效交互效果，如下圖所示。

【設計后】

文件導出：
在動效制作完成后，需要將文件導出并完成效果測試，在導出的過程中還需確保動效文件的格式、大小、分辨率等參數符合產品需求，確保導出文件與 AE 制作效果一致。
落地交付：
在落地交付時，需要與開發團隊進行協作，確保動效的實現和應用測試沒有問題。同時也要關注用戶反饋和進行數據分析，及時修改，不斷優化動效。
3D 翻轉影集模板案例分享

運用以上知識點，分享一套可愛萌娃 3D 翻轉影集模板是如何從 AE 制作到上線交付的全流程

制作前準備工作：

首先，我們拿到平面稿后，需要對平面分鏡內的圖層元素進行拆分分組，以這套 PSD 素材為例，我按照每個畫面分成了 4 組，并且每個有關聯的元素圖層都做了分離，以方便后續的動效制作。整理素材的過程就可以根據需求開始構思模板動效的呈現方式了。在選擇動效時，需要考慮哪些動效既具有通用性，又能夠充分表現可愛和趣味性，同時還要吸引用戶使用。

其次考慮到萌娃影集的可愛和跳躍感，在音樂的選擇上選用了一首符合可愛主題的音樂，并根據其節奏設計了 2 秒一個轉場點。
接著，考慮到每個畫面的展示時間不超過 2 秒，因此需要選擇簡潔明了的動效呈現方式，而避免過度復雜?；谶@個考慮，放棄需要出場時間的復雜動效，如小到大的縮放、畫面外飛入等動效。
相反，為了營造更加生動有趣的效果，可以采用 3D 立體卡片翻轉的動效方式，并將裝飾元素分為前景和背景兩組，拉開它們的軸距，以產生立體景深感。此外，還需要精確控制每個畫面的出現時間，以確?？c效果的完美呈現。
現在，打開 AE 跟著我的步驟一起開始動效制作吧！
AE制作部分：

1、打開 AE 選擇「文件」—「新建」—「新建項目」

合成設置窗口中填寫合成名稱，長寬比尺寸，幀速率與持續時間等（需要在需求溝通時與研發溝通得到上線文件的像素尺寸與參數等信息）

2、選擇「文件」—「導入」—「文件」在本地文件中找到平面視覺稿，點擊「打開」將平面稿導入到 AE 軟件中。

導入 PSD 文件時需要注意，在導入時需要選擇「合成-保持圖層大小」和勾選「可編輯的圖層樣式」，（這樣做可以保證文件導入后也是分層可編輯的。并且圖層素材也能鏈接到原始的 PSD 文檔的，當在 PS 中更改了對應圖層的內容，效果同樣會實時同步到 AE 中）

3、再次選擇「文件」—「導入」—「文件」找到并導入模板需要的音頻文件。

拖拽剛剛導入的音頻文件到"影集模板"「 合成窗口中 」輸入法英文模式下，按兩下「 L 」鍵調出音頻軌道波形圖，方便我們動效卡點。

4、在項目面板中找到剛剛導入的 PSD 文件，打開「畫面1」預合成后，按住「shift 鍵」多選"糖果"與"球球"這幾個圖層，然后「Ctrl+Shift+C」組合鍵將它們打入新的預合成當中，作為照片上方的前景裝飾元素使用，下面我們就叫它"前景裝飾元素"。這步操作可以避免總合成當中圖層過多影響我們接下來的操作。

5、把這個''前景裝飾元素''從「畫面 1 」合成中復制到「影集模板」大合成當中。按「空格鍵」聽一下 BGM，在第 15 幀"重鼓點"這里切入下一個畫面比較適合，那么我們把時間線停留在 15 幀這里，使用快捷鍵「 Alt+】」進行裁切。

6、重復第 6-7 步驟操作，依次將「畫面 2」、「畫面 3」、「畫面 4」合成的"前景裝飾元素"分別裝到預合成當中并復制到「影集模板」大合成當中，并根據音樂卡點裁切和移動到合適位置。

完成以上操作后如下圖所示。

7、因為我們的平面稿中只有 4 個畫面，需要復用循環這 4 個畫面，復制并移動到模板的后半部分展示，以填充整個視頻的畫面內容。接下來我們選中 「預合成 1-」這四層‘’前景裝飾元素‘’

按快捷鍵「Ctrl+D」鍵 2 次原位復制得到 12 層"前景裝飾元素"合成，并根據音樂卡點移動到合適位置。

8、全選這 12 個"前景裝飾預合成"，按快捷鍵「Ctrl+Shift+C」組合鍵將它們全部打入一個新的「預合成 5」當中。這樣模板的前景元素就都布置好了。

注意~ 重點來啦！畫面如何呈現 3D 感覺就看下面的操作啦！

9、「右鍵」—「新建」—「空對象」

將前景裝飾元素「預合成 5」與「空對象」鏈接父子級關系；

并開啟圖層的「3D 屬性開關」，這樣圖層就華麗升級為 3D 圖層了！

10、接下來需要用空對象來制作翻轉的動作，選中「空對象圖層」展開它的「變換」屬性

激活「縮放」與「方向」的秒表，拖動 "Y 軸" 數值對方向 K 幀操作，旋轉動效要考慮到動畫合理性，角度與速度都不能過大，以免影響觀感。

11、接下來重復這個操作，對軌道中后面畫面的元素進行 K 幀。并選中「空對象圖層」與「預合成 5」合成使用快捷鍵「Ctrl+Shift+C」組合鍵將它們編入一起，命名為「前景」，這樣畫面的前景的動效就制作完成了。

12、重復以上 6-13 步驟，按照"前景裝飾元素"制作步驟，做出照片后面的裝飾元素。

制作好背景裝飾元素后，需要拉開各自的 ''Z 軸數值'' 形成如下圖展示的"三明治"感覺。及萌娃照片的前面為"前景裝飾元素"，中間是 "照片占位圖"，后面為 "背景裝飾元素"。

13、導入「照片占位圖」別忘了激活它的「3D 屬性開關」與空對象關聯在一起就可以繼承它們的旋轉動效啦~

14、最后，使用「文字工具」在畫面下方添加可編輯文字

這樣一套可愛的 3D 照片翻轉效果的影集模板就制作好啦~

三、動效輸出與落地

使用 PAG 動效解決方案

PAG 是騰訊自主研發的完整動畫工作流解決方案，安裝后可直接在 AE 中導出 PAG 文件，目前最新的 PAG 4.2 版本，可完美支持 3D 圖層效果的直接導出。安裝方法詳見官網安裝指南：PAGViewer安裝指南

導出方式

PAG 同時支持「矢量預合成」直接導出和「BMP 預合成」及「矢量與 BMP 混合」三種導出方式，設計師可根據素材特點選擇適合的方式進行導出，下面我們可以簡單了解一下它們的特性。
1、矢量導出：雖然只支持部分 AE 特性的導出，但可獲得更好的性能和更小的文件。
2、BMP 預合成導出：支持所有 AE 動效效果的導出，原理是將 AE 特效渲染成圖片序列幀。
3、矢量與 BMP 混合導出：結合以上兩種特性，為保持動效的可編輯性，可選擇矢量和 BMP 預合成混合導出。
導出 PAG 文件

【可愛萌娃】這個模板案例，因為照片層在上線后有被用戶替換編輯的需要，所以我們需要選擇矢量和 BMP 預合成混合的方式導出；
在 AE 中點擊菜單欄中的“文件” - “導出” - “PAG File(Panel)...”,選擇需要導出的合成，點擊設置按鈕，在子節點勾選 BMP，選擇保存地址后，就可以導出 PAG 文件了。

PAGViewer 測試預覽

導出成功后會自動喚起 PAGViewer 預覽播放，設計師在 PAGViewer 中自檢自測無誤后，就可以將 PAG 文件交付研發部署上線了。

四、研發接入 PAG SDK 并完成上線部署

研發接入

研發只需接入 PAG SDK 后簡單操作即可完成動效的上線部署，官網也有貼心又詳細的接入介紹指南，詳見開發者接入指南。

軟件更新

已接入 PAG SDK 的會出現更新提示彈窗，根據提示點擊“安裝更新”即可。也可以在菜單欄中找到‘’檢查更新‘’更新體驗最新版本，建議及時安裝更新以獲得更好的體驗。