自從 Adobe XD 推出了免費版本的 Starter Plan 之後，有越來越多人投入學習這套新的 UI 設計軟體。號稱將設計、原型、溝通三大特點合而為一的 Adobe XD 好用嗎？怎麼用？在這個簡報裡面都會做簡單的介紹。

1. ⸺Web 開發讀書會⸺
Adobe XD 網⾴設計⽕⼒展⽰

2. 「
」
嗨！我是俊儀
也可以叫我 Junior
臺灣科⼤ 設計系畢
極熊設計 共同創辦⼈
六⾓學院 設計師
《前端修煉第零週》
https://bit.ly/2ucQcIO

3. 「
」
今天會分享三⼤部分
希望講得完
基礎操作 差異⽐較 資源分享

4. X D 是 什 麼 呢 ？
才不告訴逆雷XDDDDDDD
XD = www = 555 = hahaha

5. Experience Design
三⼤功能⸺設計、原型、溝通

6. 「 」
基礎操作 差異⽐較 資源分享
1
1-1
介⾯簡介

7. 「 」
基礎操作 差異⽐較 資源分享
1
1-1
介⾯簡介：XD Tutorials
三⼤大特點：repeat grid, Asset, Review
分三⾴頁表列列（第四⾴頁、實機操作：XD Tutorials）

8. 「 」
基礎操作 差異⽐較 資源分享
1
1-2
功能特點：Repeat grid
快速⼤量複製
間距調整直覺
內容修改同步
⽂字內容可獨⽴修改
圖⽚與⽂字拖曳套⽤
卡⽚、表單、按鈕等等
重複性⾼的區塊最好⽤

9. Repeat Grid 的⼩缺點
沒有假字假圖⽣成器
網路路上還是有很多這類資源啦
但還要去找來來⽤用⼼心情就很不美麗

10. 「 」
基礎操作 差異⽐較 資源分享
1
1-2
功能特點：Asset
Colors 全域⾊彩
⼀鍵設定你的產品標準⾊
Character Style 字體樣式
選⼀個好字體是設計師的通病
Symbols 元件
會常出現的元素就放在這吧

11. Asset/Colors 的⼩缺點
不能單存 Border ⾊彩樣式

12. Asset/Character Style 的⼩缺點
不能⾃訂命名樣式

13. Asset/Symbols 的⼩缺點
沒有獨⽴管理⾴⾯，編輯不易

14. 「 」
基礎操作 差異⽐較 資源分享
1
1-2
功能特點：Prototype
主⾴⾯選擇⽅便
操作介⾯流暢
symbol 可設互動點
Transition/Overlay
Fixed Position

15. Prototype 的⼩缺點
不⽀援⼿勢操作

16. 「 」
基礎操作 差異⽐較 資源分享
1
1-2
功能特點：Preview
裝置同步
即時預覽即時調整
可以錄影

17. Preview 的⼩缺點
裝置預覽和操作錄影都是 Mac 專⽤呢

18. 「 」
基礎操作 差異⽐較 資源分享
1
1-2
功能特點：Publish
Prototype/Spec
問題回饋
熱點提⽰
連結管理
https://adobe.ly/2L33WzK
https://adobe.ly/2Jftbd0

19. Publish 的⼩缺點
略吃效能，有容量限制

20. 「 」
基礎操作 差異⽐較 資源分享
2
2-1
設計軟體⼤⾞拼
Sketch XD illustrator Photoshop
主要⽤用途 UI 介⾯面設計 UI 介⾯面設計 向量量插圖 影像編輯
適⽤用系統 Mac only Win / Mac Win / Mac Win / Mac
向量量繪圖 是 是 是 否
插件數量量 非常多 少 少 少
價格比較 USD 99 / 年年 有免費 Starter Plan NTD 7,680 / 年年 NTD 7,680 / 年年

21. 「 」
基礎操作 差異⽐較 資源分享
2
2-2
XD 免費版有什麼差別
免費版 付費版
軟體使⽤用 可 可
開放原型 ⼀一個 無限
設計標注 ⼀一個 無限
雲端容量量 2 GB 100 GB
Typekit 有限制 無限制

22. 「 」
基礎操作 差異⽐較 資源分享
3
3-1
官⽅資源：教學影⽚與⽂件
https://helpx.adobe.com/xd/tutorials.html
https://helpx.adobe.com/xd/user-guide.html

23. 「 」
基礎操作 差異⽐較 資源分享
3
3-1
官⽅資源：UI Kits
ㄈㄈ

24. 「 」
基礎操作 差異⽐較 資源分享
3
3-2
其他資源
https://bit.ly/2ztRxQQ
https://bit.ly/2L3iu21

25. Ｑ＆Ａ
欸欸那邊再講詳細⼀一點啦
哼哼看我還不問倒你