Adobe XD 3D Transforms 功能透析 – 製作炫目立體效果更方便

實用工具環球 IT 新聞科技新聞精選教學

在今年的 Adobe MAX 大會,界面設計工具 Adobe XD 引入了全新的 3D 變形功能 (3D Transforms),可以輕易地將元件前後移動及旋轉,讓設計不再局限於 2D 平面。

使用 3D 變形巧能非常簡單,點選物件後,再在右邊 Property Inspector 的 Transform 一欄選擇 3D Transforms 按鈕(或快捷鍵 Ctrl + T),物件中間就會出現把手控制(gizmos),用戶拖曳滑鼠便可調整;按著 Shift 調整時就會以 15 度調整。如果用戶想精準地調校,亦可在右邊的 Property Inspector 輸入角度等數值。

3D Transforms 可應用於形狀、文本或群組,並配搭其他功能使用,包括捲動組合 (Scroll Groups)、重複網格 (Repeat Grid) 及自動生成動畫 (Auto-Animate)。

▼ 點擊立方體啟用 3D Transforms 功能

點擊立方體啟用 3D Transforms 功能

▼ 可自行輸入數值調校 3D Transforms 效果

可自行輸入數值調校 3D Transforms 效果

3D Transforms怎樣提升 UI 設計效果呢?Adobe 就分享了多個情景,其中一個就是 AR,用戶可透過 3D 變形營造重疊效果;結合 Auto-Animate 亦可模擬出特別的動畫效果。另外,即使 Repeat Grid 採用了 3D 變形,每項物件亦可修改。

▼ 透過 3D 變形再加上 Auto-Animate,可造出特別的轉場效果。

透過 3D 變形再加上 Auto-Animate,可造出特別的轉場效果。

▼ 3D Transforms 再加上 Auto-Animate轉場效果示範。

 3D Transforms 再加上 Auto-Animate轉場效果示範。

以上只是非常簡單的示範,3D Transforms 可用於更進階的場景,讓互動效果更加專業。

另外,Adobe 亦引入 Adobe XD Extension for Visual Studio Code 整合工具,讓開發人員無需離開編輯器即可使用設計系統。Visual Studio Code 是最受編程語言開發人員歡迎的程式碼編輯器之一,可在 Windows、macOS 和 Linux 等操作系統上免費使用。

用戶現可在 Visual Studio Marketplace 下載 Adobe XD Extension for Visual Studio Code 整合工具,用作設計師與開發人員之間橋樑。在 Creative Cloud 資料庫的支援下,開發人員可在瞬間創建 Design Tokens 並將其應用至 Web、iOS、Android 及 Flutter 等多個平台。在進行編碼時,他們可以快速瀏覽任何相關的文件和代碼片段。

Adobe XD:免費下載

Adobe CC:馬上訂閱

自學 Adobe XD 無難度!網上課程大搜集

Adobe XD 已成為新興的界面設計工具,如果想掌握軟件的使用方法,除了閱讀網上教學,更可參加課程!

Udemy – 從 Adobe XD 入門網頁設計

為初學者而設的 Adobe XD 課程,除可快速上手 Adobe XD 操作之外,更可學習 UI/ UX 設計概念!

馬上報名!

六角學院

由台灣六角學院設計之 Adobe XD 課程,讓學員學習設計網頁。除了 Adobe XD,六角學院亦有 JavaScript、Vue 等課程!

詳細資料!