比ai还好用，用 Adobe XD 做作品集

每年我都會更新一份年度總結的作品集，就像是一種回顧自己的感受，以往我都是用PS/AI，今年來嚐試一下XD，耶

Why Adobe Xd

Go from concept to prototype with Adobe XD

Adobe Xd 全名是 Adobe Experience Design，主要是用來設計 h5 / app / website 的 prototype 方便團隊溝通跟即時演示的，我覺得這就是有簡單動效跟連結功能的精簡版 Ai ，Repeat Grid 又是個神助攻，功能簡潔又操作直覺，就算是拿來當平面 / ui / 網頁設計的起跑點練習都是個很好的開始。可惜就是不管是做設計稿或做互動等網頁的特效在功能上都不夠全面，還是需要別的軟體來協助，不過目前我覺得已經很能滿足這軟體初始設定的需求了。

另一大優點是以作品集這樣類型的設計檔案，通常連結或置入的外部來源文件數量很大，相較於 Ai 的圖片連結很吃資源，到後期移動一下檔案就會卡頓(電腦不夠強大，泣)，Xd 的卻沒有這樣操作上的問題，編輯檔案起來也比較有效率。而且以往我的原文件是A4-12頁左右， Ai 的檔案會到100mb，Xd 是35mb左右，連容量都贏了一大截。

而且現在完全免費，喔耶！

不過 Xd 畢竟是用來設計 Prototype 方便溝通跟演示的工作，所以在格式設定上沒有 Ai 那麼多的細節設定，文字設定基本的顏色填滿/邊線/粗細/間距/對齊/陰影都有，但如果真的要畫細節圖標什麼的，建議還是在 Ai 或 Ps 上完成設計再以 Assets 的形式插入即可。

Xd 開始頁面

比 Ai 還好用的幾個神功能

Artboard 分類命名顯示

其實我滿喜歡這個功能的，每個頁面可以命名清楚，也好直接認清前後關係

Multiple artboards for various screens in a single XD file (from: Adobe)

Grid / Layout 對齊系統

對齊系統的基本配備，格線跟對齊方式或是邊界都有選項可以自行調整

Square grids in XD (from: Adobe)

Layout grids in XD (from: Adobe)

自動變形的 layout 對齊

以往在 Ai 的參考線都是整個畫面為基準的，這個的變形是以畫板為基準，更好用了

Layout grid behavior when you change the artboard size (from: Adobe)

最強大的神助攻 Repeat Grid

雖然原本是配合現在流行的卡片式設計 或響應式RWD的功能，但其實省下大量我之前做作品集做彙整頁的功能，只要調整好樣式跟排版，按下 Repeat Grid 功能就可以重複同樣的設計，間距可以再微調，裡面的資料也可以輕鬆的用拖放就一次調整完畢！

Dragging image files over an object in a Repeat Grid (from: Adobe)

可以直接拖外部 txt 檔案進入工作區取代文字，plugin 裡還有支援 excel 檔案的插件可以使用

(但這功能目前我測試中文文字在記事本裡是失敗的，英文文字成功了)

Dragging a text file over an object in a Repeat Grid (from: Adobe)

還可以搭配使用這個網站，新增多項不重複的虛擬資料，像 email / name / address 等做為範例演示用

https://www.repeatgrid.com/

Asset 管理功能

應該算是等同於 Ai 裡 選取>相同對象的功能，但是這個更方便一次性的調整所有畫面中相同的顏色 / 文字設計，或是一些重複使用的圖標也可以全儲存在 Asset 面板裡，如果一開始就規劃好配色跟視覺文字字型的運用，點一下就可以立即套用在多個項目上，也可以減少很多的重複作業時間，點擊一下就完成了，不用再 ctrl+c / ctrl +v 啦～

A. Colors B. Character Styles C. Symbols D. Add assets E. Icon indicating a missing or disabled font (From: Adobe)

在 Repeat Grid 功能裡也可以輕鬆的更改

Replace all instances of a symbol with another symbol (From: Adobe)

做網站或是APP 等就會更常使用的連結功能，但我現在還上不了線 demo 或share :expressionless:

Interactive elements linked to target screens: A. Home screen B. Linked artboards C. Outgoing connection D. Incoming connection (From: Adobe)

如果是有平面設計軟體操作基礎的人，我想看完軟體自帶的官方教程就能輕鬆理解 Xd 的操作跟連結了，還可以在 Adobe Xd 官方網站下載 UI Kit 參考

适用于移动设备和 Web 的 UI 设计套件 | Adobe XD CC

Adobe's Favorite (and Free) XD UI Kits for 2019

其他線上資源介紹

你今天 Xddddddddd 了嗎？－１：Adobe Xd 簡介

Adobe XD 推出免費方案，這將會是你學習 UI 設計的入門磚？

Adobe XD Templates, UI Kits & Resources - Freebie Supply

工具軟體都有它設計的初衷，不過就看個人怎麼運用，如果我今天是想設計一份方便網站跟手機版觀看的即時性演示用的文件(其實就是面試的時候方便展示作品集 XD)，我可以用 Adobe Xd Share 的功能在手機或 ipad 做 demo 展示，配上簡單的動效和連結的設計，在操作上可以更直覺，也比一般 PDF 檔有更好的呈現效果，說不定可以撈點加分，何樂而不為呢～ :)