FrankStudio官方部落格

前言

你是不是第一次使用Adobe XD呢？如果是，歡迎你！

精簡、極度精華，是這份教學的最大特點。因為我們相信，與其製作豐富的教學，其實你只需要掌握基本中的基本，重要的是實際操作、在做中學。

在這份教學中，我們會示範一個僅有兩頁的互動原型。非常簡單，但是你會學到三件事情：

1. 認識XD介面
2. 用XD製作互動原型
3. 操作XD的檔案，像是建立新檔案、預覽、上傳等等

我們馬上開始。

大綱

1. 新建檔案
2. 匯入圖片
3. 改變視野
4. （用滑鼠）調整圖片
5. 預覽
6. 儲存檔案

1. 新建檔案

每次開啟XD後，你會看到一個對話框，長得像下圖這樣：

對話框大約分成3區：

• 左上 - 建立新檔
• 右側 - 開啟舊檔；會列出最近用過的9個檔案供你快速開啟
• 左下 - 官方教學以及一些常用資源

建立新檔案時，你要選擇一種畫布尺寸。從左到右依序是：手機、平板、網頁、自訂；從下拉符號裡你可以找到更多的預設尺寸。

我們這次示範使用的是「iPhone 6/7/8」的尺寸。

2. 匯入圖片

讓我們匯入一張圖片。

最簡單的方式，就是從桌面或資料夾中，用滑鼠把圖片直接拉進來。你也可以從左上選單裡，找到「Import...」選項，將圖片匯入。

圖片和畫布的大小和位置有些落差，所以我們要調整圖片。有2種方式：

• 第一種 - 輸入數值。你可以在介面的右側，查看物件的屬性並調整它們。
• 第二種 - 用滑鼠移動和縮放。

今天我們先來學第二種方式。

3. 改變視野

首先，你要先能看到整張圖片，所以你必須懂得如何改變視野：

• 空白鍵 - 視野上下左右平移
• Ctrl鍵 + 0鍵 - 將顯示比例縮放到，讓你能俯視全體
• Ctrl鍵 + 1鍵 - 顯示比例100%
• Ctrl鍵 + 2鍵 - 顯示比例200%
• Ctrl鍵 + 3鍵 - 將顯示比例縮放到，讓被選的物件剛好符合視窗大小
• Ctrl鍵 + -鍵 - 縮小顯示比例
• Ctrl鍵 + +鍵 - 放大顯示比例

雖然介面中有對應的功能，但如果能熟悉這些鍵盤快速鍵，會方便很多。以我而言，最常用的組合技就是：

1. Ctrl鍵 + 0鍵
2. 點選物件
3. Ctrl鍵 + 3鍵
4. Ctrl鍵 + 1鍵/2鍵/-鍵/+鍵

像這樣把視野跳到另一個地方，大約只要1秒，真的非常方便！

4. 調整圖片

學會改變視野之後，剩下的事情非常簡單。

1. 確認選到了圖片，被選的物件會呈現淺藍色框，框上會有8個小白點
2. 將圖片拉到你要的位置
3. 按住其中一個小白點進行縮放

在進行縮放時，你可以按住「shift鍵」，固定圖片的長寬比例。

5. 預覽

現在我們來看一下效果如何。

介面的右上角有3個輸出選項，這次我們孤芳自賞，所以選中間那個、長得像撥放鈕的。

按下去後，XD會開啟一個新視窗，把你的設計成果秀給你看。

預覽視窗和你的檔案是同步的。也就是說，只要你的預覽視窗開著，當你修改內容的時候，預覽視窗也會更新。

6. 儲存檔案

做了一個段落，記得儲存檔案喔！

你可以按「Ctrl鍵 + s鍵」或從左上選單找到「Save...」做儲存。