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 新台幣。