FrankStudio官方部落格

這對於XD是比較新的功能，2018/10上線。至今僅2個多月，還不健全。目前只支援desktop preview和mobile preview，就是無法用瀏覽器開來看。

大概的做法如下：

1. 將你的畫面和元件複製一份
2. 把第二份的元件調整到滑動結束時的狀態
3. 切換到prototype模式
4. 設定連結，從物件連到另一個畫面
5. 改連結選項：把"tap"換成"drag"，第二個項目選"auto-animate"
6. 設定另一個連結，讓兩個畫面可以滑過去，也可以滑回來
7. 完成

這是小弟的sample，供各位參考：

補充：轉場特效（easing）可用選項

1. None（無特殊效果）
2. Ease-in（開始時放慢）
3. Ease-out（結束時放慢）
4. Ease-in-out（頭尾都放慢）
5. Snap（折返）：結束時，會超過一點，再拉回
6. Wind up（發條衝刺）：開始時，會倒抽一點，再前進
7. Bounce（彈跳）：好像球掉到地上，會反彈幾次才停止

本日目標

做出第二個頁面，並讓兩頁產生連結。

大綱

1. 認識左側功能列
2. 建立新畫布
3. 輸入文字
4. 調整文字：大小與顏色
5. 切換到「原型製作模式」
6. 製作連結

前言

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

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

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

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

我們馬上開始。

大綱

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

1. 新建檔案

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

簡介

自從今年5月Adobe推出XD的免費版本後，UX/UI設計師們多了一樣免費原型工具的選擇。

除了免費之外，XD還有什麼特點呢？

• 在Mac和Win的電腦上都可以使用
• 可以快速輸出，用網頁或手機檢視與回饋
• 相容於Adobe系列產品：AI、PS、線上資料庫（library）等等