Adobe XD 這 4 大特色功能還不懂?快學起來向 UI 設計師邁進吧!

實用工具精選教學網頁界面設計網頁製作

Sketch 是不少人設計介面的工具,但如果大家是用 Windows 系統的話就必須另覓選擇,而 Adobe XD 就是其中之一。Adobe XD 並不難上手,只要好好了解工具的主要功能,你也可以一步步成為 UI 設計大師。

你知道 Adobe XD 的新功能「Stacks」、「Scroll Groups」嗎?

Adobe XD 是甚麼?

Adobe XD 是 Adobe 一款 UI/ UX 設計工具,支援 Windows 10 和 Mac OS。傳統上,人們以 Photoshop 設計界面,但 Photoshop 本身並不用於此功能,而實際操作上,Photoshop 無法呈現介面互動的情況。Adobe XD 的出現就解決了這個問題,讓設計師製作出具互動功能的原型(Prototype)供工程師參考。

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 的 Design 和 Prototype 模式

在大多數情況下,我們的應用程式和網站都不只一個介面,例如在網站首頁,我們點擊了某按鈕,然後跳到另一頁;而在 Adobe XD,我們就要建立一個新的 「Artboard」 設計出另一頁的界面。這時候,就需要在左邊的工具列選擇 「Artboard」 ,然後在右邊選擇需要的解像度。

  建立新的 Artboard

在 Adobe XD 新增 Artboard

當設計好各個界面,就要建立各個 「Artboard」 之間的互動關係,模擬真實產品跳轉頁面的情況。

這時候就要切換到「Prototype」頁面,當中我們可以為每個 「Artboard」 內的元件加入互動,只要按一下元件,就可看到右邊有箭頭圖案,這時候只要拖曳至所需 「Artboard」 便可以了。

  在 Prototype 模式以拖曳建立 Interaction

於 Adobe XD 的 Prototype 模式為 Artboard 建立 Interaction

如果想測試每個「Artboard」之間的互動,只需按下右邊的預覽鍵便可。

  在 Adobe XD 預覽 UI 設計

在 Adobe XD 預覽界面設計

Adobe XD 特色功能

除了路徑工具之外,Adobe XD 亦有不少特色功能,讓大家設計更仔細的介面。

1. Repeat Grid

許多界面都有重複的元素出現,像是推介文章、分享按鈕等等,要逐一複製貼上非常麻煩,不過透過 Adobe XD 內的 Repeat Grid,大家可以輕易製造到重複元素。而在 Repeat Grid 內,元素的間隔都是一致的,大家可以自行調校闊度來呈現最合適的介面。

  在 Adobe XD 建立 Repeat Grid

於 Adobe XD 使用 Repeat Grid

而且,大家還可以為 Repeat Grid 內的元素插入不同圖案和文字,呈現出更迫真的效果。除了逐一修改,更可拖曳圖片和 txt 檔案至 Repeat Grid 內套用變更,十分方便。

  將 txt 檔案拖曳至 Repeat Grid 內可快速套用文字

在 Adobe XD 的 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

在 Adobe XD 為需要動畫效果的物件建立 Auto Animate

  觸發互動的物件亦需設定成 Auto Animate

在 Adobe XD 為觸發互動的物件建立 Auto Animate

3. State

在網頁經有會有滑鼠停留在元素上產生變化的效果(hover),而在 Adobe XD,我們亦可為物件設定 Hover State,以更方便地展示出所需效果。只要點選所需物件,然後在右邊的 Component 位置按一下加號,就可建立 Component,當中可見有 Default State,即元件的預設型態。這時候便可建立一個 New State 或 Hover State,繼而修改物件在新 State 的樣式。

  建立 Hover State 後可修改樣式

在 Adobe XD 建立 Hover State

每個元件只可有一個 Hover State。如果設定了 Hover State,元件會自動建立 Interaction 以在預覽模式呈現 Hover 狀態,否則就要自行設定觸發(Trigger)和所需狀態。

  設定了 Hover State 的物件會自動添加 Trigger 和 Destination State

建立 Hover State 的物件會自動加上 Interaction

4. 外掛

簡單的線條、矩形工具當然不能滿足精細的界面設計,例如是社交媒體圖案、分享鍵等,如要再靠自己畫就廢時失事。這個時候可以搜尋 Adobe XD 的外掛,例如使用 Icondrop 我們便可以直接在 Adobe XD 搜尋和插入標誌和圖片;又或者 Lorem Ipsum 直接插入範例文字。

  使用 Icondrop 外掛插入圖案

在 Adobe XD 透過 Plug in 插入圖案

  使用 Lorem Ipsum 外掛快速插入排版文字

在 Adobe XD 插入 Lorem Ipsum

附錄:Adobe XD 費用

Adobe XD 可免費下載使用,但如果想使用更多功能,包括無限檔案分享、字型,就需要使用付費版。用戶可單買 Adobe XD,月費 68 港元或年費 816 港元(只限香港),或者直接訂閱 Adobe CC,一年計劃月繳 408 港元/ 1,680 新台幣。

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

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

六角學院

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

詳細資料!

Udemy – 從 Adobe XD 入門網頁設計

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

馬上報名!