嗨囉,我是設計師 Riven 🙂

在今天台灣時間約凌晨三點的時候,線上舉行的 Adobe MAX 活動直播開始進行了,而在第一天的議程當中少不了宣布幾項現有產品的更新,像是 Illustrator for iPad 終於正式公開囉!以及 iPhone 版本的 Fresco 等等;而 Adobe Xd 則也釋出了內建的 3D Transforms 功能,可以在軟體當中直接將介面中的物件做立體視角的轉換,今天就讓我們一起來看看它可以做什麼事情吧~

Transforms

軟體使用方式

而這操作方式也非常簡單,只要確定目前使用的 Adobe Xd 有更新成最新版(34.0.12)以上,然後在 Xd 介面中右上方就可以找到這個 3D Transforms 的按鈕,開啟之後就能夠自由拖曳物件的垂直與水平方向。

Transforms
選取物件後在 Adobe Xd 開啟 3D Transforms
用拖曳的方式來調整視角

而這個原理其實就是可以調整圖片的透視角度,我們從下面這張哀傷的示意圖中可以更清楚地理解這項 Adobe Xd 的新功能:

使用 3D Transforms 可以切換物件的不同視角

在 UI 介面上的用途

而這個 3D Transforms 實際上可以在介面設計上做到什麼樣的發揮呢?

1.做出透視感的視覺設計

2.更好的合成畫面角度

3. 介面互動設計


於實務開發面向的用途

但老實說這個視角調整啊,老早在好幾年前的 Photoshop 就可以做到了,這次 Adobe Xd 的更新有什麼特別的嗎?回歸到 Xd 本身還是 UI 設計專門的軟體,所以做這樣透視的功能並不單只是為了視覺好看而已,更重要的是讓前端工程師開發切版時能夠更好地協作,而以網頁來說,這樣的設計在程式語言上就是與perspective以及rotateXrotateY等有關。

同時,開啟 3D Transforms 後除了原本物件的 X 軸與 Y 軸,還會開啟另外一個 Z 軸,能夠直接做 Z 軸平移,而這則是對應到前端語言當中的translateZ

調整 Z 軸會讓物件產生前後透視關係(無視圖層順序)

而回到前面提到介面上的互動,如果能夠著實地做出來,則可以產生類似 AR 虛擬實境感的介面體驗。

範例檔案可以到 Transforms in Adobe XD 下載。

這樣看來 3D Transforms 的確可以在 UI 介面上創造更多設計的可能性呢!


好啦,以上就是今天關於 Adobe Xd 新功能 3D Transforms 的簡單介紹,除此之外在 Adobe MAX 2020 年上還有一些像是 Stacks、Smart Padding 等的更新,有興趣的同學可以收看 Keynote 開場展示的環節存檔影片。

我是 Riven 😀 我們下次見囉~ 掰掰。


延伸閱讀


留個言
訂閱 RAR 設計攻略

訂閱 RAR 設計攻略

每週將收到最新設計相關情報~

🤩 成功完成訂閱啦!讚讚~