Sketch 是不少人設計介面的工具，但如果大家是用 Windows 系統的話就必須另覓選擇，而 Adobe XD 就是其中之一。Adobe XD 並不難上手，只要好好了解工具的主要功能，你也可以一步步成為 UI 設計大師。
你知道 Adobe XD 的新功能「Stacks」、「Scroll Groups」嗎？
Adobe XD 3D Transforms 功能透析 – 製作炫目立體效果更方便
Adobe XD 是甚麼？
Adobe XD 是 Adobe 一款 UI/ UX 設計工具，支援 Windows 10 和 Mac OS。傳統上，人們以 Photoshop 設計界面，但 Photoshop 本身並不用於此功能，而實際操作上，Photoshop 無法呈現介面互動的情況。Adobe XD 的出現就解決了這個問題，讓設計師製作出具互動功能的原型（Prototype）供工程師參考。
Adobe XD 載點
Adobe CC 官方網站：前往
Android 程式：前往
iOS 程式：前往
雖然 Adobe 許多應用都要收費，但 Adobe XD 提供免費的 Starter 計劃，用戶可儲存多個 XD 原型，但就只能分享一個原型。而在新型肺炎下， 免費及付費 XD 計劃之展延共用與協作功能的無限存取權限，會直至 2020 年 10 月為止。
Adobe XD：Design 與 Prototype 模式
Adobe XD 兼顧電腦和手機環境，故可用於網頁和手機程式界面設計。要上手 Adobe XD 的基本操作並不困難。Adobe XD 主要分為「Design」和「Prototype」兩個模式。在「Design」，每一個「Artboard」都是一個介面，我們可以透過左邊的工具來繪畫圖案。
▼ Adobe XD 的 Design 和 Prototype 模式
在大多數情況下，我們的應用程式和網站都不只一個介面，例如在網站首頁，我們點擊了某按鈕，然後跳到另一頁；而在 Adobe XD，我們就要建立一個新的 「Artboard」 設計出另一頁的界面。這時候，就需要在左邊的工具列選擇 「Artboard」 ，然後在右邊選擇需要的解像度。
▼ 建立新的 Artboard
當設計好各個界面，就要建立各個 「Artboard」 之間的互動關係，模擬真實產品跳轉頁面的情況。
這時候就要切換到「Prototype」頁面，當中我們可以為每個 「Artboard」 內的元件加入互動，只要按一下元件，就可看到右邊有箭頭圖案，這時候只要拖曳至所需 「Artboard」 便可以了。
▼ 在 Prototype 模式以拖曳建立 Interaction
如果想測試每個「Artboard」之間的互動，只需按下右邊的預覽鍵便可。
▼ 在 Adobe XD 預覽 UI 設計
Adobe XD 特色功能
除了路徑工具之外，Adobe XD 亦有不少特色功能，讓大家設計更仔細的介面。
1. Repeat Grid
許多界面都有重複的元素出現，像是推介文章、分享按鈕等等，要逐一複製貼上非常麻煩，不過透過 Adobe XD 內的 Repeat Grid，大家可以輕易製造到重複元素。而在 Repeat Grid 內，元素的間隔都是一致的，大家可以自行調校闊度來呈現最合適的介面。
▼ 在 Adobe XD 建立 Repeat Grid
而且，大家還可以為 Repeat Grid 內的元素插入不同圖案和文字，呈現出更迫真的效果。除了逐一修改，更可拖曳圖片和 txt 檔案至 Repeat Grid 內套用變更，十分方便。
▼ 將 txt 檔案拖曳至 Repeat Grid 內可快速套用文字
2. 互動：Auto-Animate
在網頁中，介面互動有時會用到 CSS3 的 Transition 效果來凝造滑動的動畫效果，例如是選單收合等。在 Adobe XD，我們的互動類型可以使用 Auto-Animate 來模擬效果。
使用 Auto-Animate 有幾個注意事項。首先，元件必須在兩個 Artboard 出現，並要同一名字；第二，兩個元件必須先建立 Interaction 並設定成 Auto-Animate，這樣當元件移出 Artboard 範圍時才不會被當成 Pasteboard；第三，除了相同元件要設定 Auto-Animate 之外，觸發事件的元件也要設定成 Auto-Animate。
▼ 需建立 Auto Animate 然後才將物件移出 Artboard，否則物件就會脫離所屬 Artboard
▼ 觸發互動的物件亦需設定成 Auto Animate
3. State
在網頁經有會有滑鼠停留在元素上產生變化的效果(hover)，而在 Adobe XD，我們亦可為物件設定 Hover State，以更方便地展示出所需效果。只要點選所需物件，然後在右邊的 Component 位置按一下加號，就可建立 Component，當中可見有 Default State，即元件的預設型態。這時候便可建立一個 New State 或 Hover State，繼而修改物件在新 State 的樣式。
▼ 建立 Hover State 後可修改樣式
每個元件只可有一個 Hover State。如果設定了 Hover State，元件會自動建立 Interaction 以在預覽模式呈現 Hover 狀態，否則就要自行設定觸發（Trigger）和所需狀態。
▼ 設定了 Hover State 的物件會自動添加 Trigger 和 Destination State
4. 外掛
簡單的線條、矩形工具當然不能滿足精細的界面設計，例如是社交媒體圖案、分享鍵等，如要再靠自己畫就廢時失事。這個時候可以搜尋 Adobe XD 的外掛，例如使用 Icondrop 我們便可以直接在 Adobe XD 搜尋和插入標誌和圖片；又或者 Lorem Ipsum 直接插入範例文字。
▼ 使用 Icondrop 外掛插入圖案
▼ 使用 Lorem Ipsum 外掛快速插入排版文字
附錄：Adobe XD 費用
Adobe XD 可免費下載使用，但如果想使用更多功能，包括無限檔案分享、字型，就需要使用付費版。用戶可單買 Adobe XD，月費 68 港元或年費 816 港元（只限香港），或者直接訂閱 Adobe CC，一年計劃月繳 408 港元/ 1,680 新台幣。
