前言
你是不是第一次使用Adobe XD呢?如果是,歡迎你!
精簡、極度精華,是這份教學的最大特點。因為我們相信,與其製作豐富的教學,其實你只需要掌握基本中的基本,重要的是實際操作、在做中學。
在這份教學中,我們會示範一個僅有兩頁的互動原型。非常簡單,但是你會學到三件事情:
- 認識XD介面
- 用XD製作互動原型
- 操作XD的檔案,像是建立新檔案、預覽、上傳等等
我們馬上開始。
大綱
- 新建檔案
- 匯入圖片
- 改變視野
- (用滑鼠)調整圖片
- 預覽
- 儲存檔案
1. 新建檔案
每次開啟XD後,你會看到一個對話框,長得像下圖這樣:
對話框大約分成3區:
- 左上 - 建立新檔
- 右側 - 開啟舊檔;會列出最近用過的9個檔案供你快速開啟
- 左下 - 官方教學以及一些常用資源
建立新檔案時,你要選擇一種畫布尺寸。從左到右依序是:手機、平板、網頁、自訂;從下拉符號裡你可以找到更多的預設尺寸。
我們這次示範使用的是「iPhone 6/7/8」的尺寸。
2. 匯入圖片
讓我們匯入一張圖片。
最簡單的方式,就是從桌面或資料夾中,用滑鼠把圖片直接拉進來。你也可以從左上選單裡,找到「Import...」選項,將圖片匯入。
圖片和畫布的大小和位置有些落差,所以我們要調整圖片。有2種方式:
- 第一種 - 輸入數值。你可以在介面的右側,查看物件的屬性並調整它們。
- 第二種 - 用滑鼠移動和縮放。
今天我們先來學第二種方式。
3. 改變視野
首先,你要先能看到整張圖片,所以你必須懂得如何改變視野:
- 空白鍵 - 視野上下左右平移
- Ctrl鍵 + 0鍵 - 將顯示比例縮放到,讓你能俯視全體
- Ctrl鍵 + 1鍵 - 顯示比例100%
- Ctrl鍵 + 2鍵 - 顯示比例200%
- Ctrl鍵 + 3鍵 - 將顯示比例縮放到,讓被選的物件剛好符合視窗大小
- Ctrl鍵 + -鍵 - 縮小顯示比例
- Ctrl鍵 + +鍵 - 放大顯示比例
雖然介面中有對應的功能,但如果能熟悉這些鍵盤快速鍵,會方便很多。以我而言,最常用的組合技就是:
- Ctrl鍵 + 0鍵
- 點選物件
- Ctrl鍵 + 3鍵
- Ctrl鍵 + 1鍵/2鍵/-鍵/+鍵
像這樣把視野跳到另一個地方,大約只要1秒,真的非常方便!
4. 調整圖片
學會改變視野之後,剩下的事情非常簡單。
- 確認選到了圖片,被選的物件會呈現淺藍色框,框上會有8個小白點
- 將圖片拉到你要的位置
- 按住其中一個小白點進行縮放
在進行縮放時,你可以按住「shift鍵」,固定圖片的長寬比例。
5. 預覽
現在我們來看一下效果如何。
介面的右上角有3個輸出選項,這次我們孤芳自賞,所以選中間那個、長得像撥放鈕的。
按下去後,XD會開啟一個新視窗,把你的設計成果秀給你看。
預覽視窗和你的檔案是同步的。也就是說,只要你的預覽視窗開著,當你修改內容的時候,預覽視窗也會更新。
6. 儲存檔案
做了一個段落,記得儲存檔案喔!
你可以按「Ctrl鍵 + s鍵」或從左上選單找到「Save...」做儲存。
留言列表