Why Adobe Xd

比 Ai 還好用的幾個神功能

<div class="draft-block draft--p left">每年我都會更新一份年度總結的作品集，就像是一種回顧自己的感受，以往我都是用PS/AI，今年來嚐試一下XD，耶</div>
<h3 class="draft-block draft--h3" name="header-9u3gu">Why Adobe&nbsp;Xd</h3>
<figure>Go from concept to prototype with Adobe XD</figure>
<div class="draft-block draft--p left">Adobe Xd 全名是 Adobe Experience Design，主要是用來設計 h5 / app / website 的 prototype 方便團隊溝通跟即時演示的，我覺得這就是有簡單動效跟連結功能的精簡版 Ai ，Repeat Grid 又是個神助攻，功能簡潔又操作直覺，就算是拿來當平面 / ui / 網頁設計的起跑點練習都是個很好的開始。可惜就是不管是做設計稿或做互動等網頁的特效在功能上都不夠全面，還是需要別的軟體來協助，不過目前我覺得已經很能滿足這軟體初始設定的需求了。</div>
<div class="draft-block draft--p left">另一大優點是以作品集這樣類型的設計檔案，通常連結或置入的外部來源文件數量很大，相較於 Ai 的圖片連結很吃資源，到後期移動一下檔案就會卡頓(電腦不夠強大，泣)，Xd 的卻沒有這樣操作上的問題，編輯檔案起來也比較有效率。而且以往我的原文件是A4-12頁左右， Ai 的檔案會到100mb，Xd 是35mb左右，連容量都贏了一大截。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:undefinedpx" class="image-block-prerender" data-src="https://images.vocus.cc/b38a679c-64ca-4ad2-933d-c949691b7572.png" data-width="0" data-height="0" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">不過 Xd 畢竟是用來設計 Prototype 方便溝通跟演示的工作，所以在格式設定上沒有 Ai 那麼多的細節設定，文字設定基本的顏色填滿/邊線/粗細/間距/對齊/陰影都有，但如果真的要畫細節圖標什麼的，建議還是在 Ai 或 Ps 上完成設計再以 Assets 的形式插入即可。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:undefinedpx" class="image-block-prerender" data-src="https://images.vocus.cc/ccc45e23-31f7-4f95-a8a0-3f49196e74fe.png" data-width="0" data-height="0" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<h3 class="draft-block draft--h3" name="header-dn106">比 Ai 還好用的幾個神功能</h3>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">Artboard 分類命名顯示</span></div>
<div class="draft-block draft--p left">其實我滿喜歡這個功能的，每個頁面可以命名清楚，也好直接認清前後關係</div>
<div class="draft--imgNormal draft-block"><div><div style="height:undefinedpx" class="image-block-prerender" data-src="https://images.vocus.cc/0691199a-d027-484b-9d8f-86894f1ecb53.png" data-width="0" data-height="0" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">Grid / Layout 對齊系統</span></div>
<div class="draft-block draft--p left">對齊系統的基本配備，格線跟對齊方式或是邊界都有選項可以自行調整</div>
<div class="draft--imgNormal draft-block"><div><div style="height:undefinedpx" class="image-block-prerender" data-src="https://images.vocus.cc/0520362f-5208-4712-a035-a0dc08acc1df.png" data-width="0" data-height="0" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft--imgNormal draft-block"><div><div style="height:undefinedpx" class="image-block-prerender" data-src="https://images.vocus.cc/e047969f-7b98-4301-a099-5ede644ebc60.png" data-width="0" data-height="0" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">自動變形的 layout 對齊</span></div>
<div class="draft-block draft--p left">以往在 Ai 的參考線都是整個畫面為基準的，這個的變形是以畫板為基準，更好用了</div>
<div class="draft--imgNormal draft-block"><div><div style="height:undefinedpx" class="image-block-prerender" data-src="https://images.vocus.cc/b511f13c-64e5-4a73-9fbb-208c4c51d6fe.gif" data-width="0" data-height="0" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">最強大的神助攻 Repeat Grid</span></div>
<div class="draft-block draft--p left">雖然原本是配合現在流行的卡片式設計 或響應式RWD的功能，但其實省下大量我之前做作品集做彙整頁的功能，只要調整好樣式跟排版，按下 Repeat Grid 功能就可以重複同樣的設計，間距可以再微調，裡面的資料也可以輕鬆的用拖放就一次調整完畢！</div>
<div class="draft--imgNormal draft-block"><div><div style="height:undefinedpx" class="image-block-prerender" data-src="https://images.vocus.cc/bf344bb6-bf96-4aed-bb44-586d502b3085.gif" data-width="0" data-height="0" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">可以直接拖外部 txt 檔案進入工作區取代文字，plugin 裡還有支援 excel 檔案的插件可以使用</div>
<div class="draft-block draft--p left">(但這功能目前我測試中文文字在記事本裡是失敗的，英文文字成功了)</div>
<div class="draft--imgNormal draft-block"><div><div style="height:undefinedpx" class="image-block-prerender" data-src="https://images.vocus.cc/5a776276-4441-4750-a648-3259dbd96dea.gif" data-width="0" data-height="0" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">還可以搭配使用這個網站，新增多項不重複的虛擬資料，像 email / name / address 等做為範例演示用</div>
<div class="draft-block draft--p left"><a href="https://www.repeatgrid.com/" target="_blank" class="draft--a">https://www.repeatgrid.com/</a></div>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">Asset 管理功能</span></div>
<div class="draft-block draft--p left">應該算是等同於 Ai 裡 選取&gt;相同對象的功能，但是這個更方便一次性的調整所有畫面中相同的顏色 / 文字設計，或是一些重複使用的圖標也可以全儲存在 Asset 面板裡，如果一開始就規劃好配色跟視覺文字字型的運用，點一下就可以立即套用在多個項目上，也可以減少很多的重複作業時間，點擊一下就完成了，不用再 ctrl+c / ctrl +v 啦～</div>
<div class="draft--imgNormal draft-block"><div><div style="height:undefinedpx" class="image-block-prerender" data-src="https://images.vocus.cc/7f6cb0f2-9497-4590-a7e2-0a67ce47ac0e.png" data-width="0" data-height="0" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft--imgNormal draft-block"><div><div style="height:undefinedpx" class="image-block-prerender" data-src="https://images.vocus.cc/d8e0e4d9-093f-4af7-8e3e-b448edb335d7.png" data-width="0" data-height="0" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">在 Repeat Grid 功能裡也可以輕鬆的更改</div>
<div class="draft--imgNormal draft-block"><div><div style="height:undefinedpx" class="image-block-prerender" data-src="https://images.vocus.cc/c28d7b56-f36e-4cab-a7af-c04d22298842.gif" data-width="0" data-height="0" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">做網站或是APP 等就會更常使用的連結功能，但我現在還上不了線 demo 或share&nbsp;:expressionless:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:undefinedpx" class="image-block-prerender" data-src="https://images.vocus.cc/ff99005d-873c-4070-8c57-f8ee868faac1.png" data-width="0" data-height="0" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">如果是有平面設計軟體操作基礎的人，我想看完軟體自帶的官方教程就能輕鬆理解 Xd 的操作跟連結了，還可以在 Adobe Xd 官方網站下載 UI Kit 參考</div>
<div class="draft-block draft--p left"><a href="https://www.adobe.com/cn/products/xd/ui-design-kits.html" target="_blank" class="draft--a"><span style="font-weight: bold; ">适用于移动设备和 Web 的 UI 设计套件 | Adobe XD CC</span><br><span style="font-style: italic; ">了解这些用于创造简洁的移动和 Web 设计且可以完全自定义的 UI 套件。立即开始使用！</span>www.adobe.com</a></div>
<div class="draft-block draft--p left"><a href="https://theblog.adobe.com/free-xd-ui-kits-2019/" target="_blank" class="draft--a"><span style="font-weight: bold; ">Adobe's Favorite (and Free) XD UI Kits for</span> <span style="font-style: italic; ">2019<br>Adobe Products Featured Tractiv has many social and gamification aspects that are key to users getting the most ben</span>efit…theblog.adob</a>e.com</div>
<div class="draft-block draft--p left">其他線上資源介紹</div>
<div class="draft-block draft--p left"><a href="https://medium.com/zaou/%E4%BD%A0%E4%BB%8A%E5%A4%A9-xdddddddd-%E4%BA%86%E5%97%8E-%EF%BC%91-adobe-xd-%E7%B0%A1%E4%BB%8B-501f3ac25132" target="_blank" class="draft--a"><span style="font-weight: bold; ">你今天 Xddddddddd 了嗎？－１：Adobe Xd 簡介</span><br><span style="font-style: italic; ">去年三月時，Adobe 公司發表了一套最新的設計軟體：Adobe Xd，使用中文的朋友一定會對其中的 Xd 感到印象深刻，但這是套非常認真的軟體，全名叫做 Adobe Experience Design，主要用來設計行動裝置、網頁畫面以及…</span>medium.com</a></div>
<div class="draft-block draft--p left"><a href="https://medium.com/monospace-tw/adobe-xd-%E6%8E%A8%E5%87%BA%E5%85%8D%E8%B2%BB%E6%96%B9%E6%A1%88-%E8%B7%B3%E5%9D%91%E4%B9%8B%E5%89%8D%E8%AB%8B%E8%A9%B3%E9%96%B1%E6%AD%A4%E4%BD%BF%E7%94%A8%E8%AA%AA%E6%98%8E%E6%9B%B8-bee5f4093970" target="_blank" class="draft--a"><span style="font-weight: bold; ">Adobe XD 推出免費方案，這將會是你學習 UI 設計的入門磚？</span><br><span style="font-style: italic; ">設計界佔有一席之地的的軟體公司Adobe 5/16 日宣佈推出Adobe XD CC起步方案(Adobe XD CC Stater…</span>medium.com</a></div>
<div class="draft-block draft--p left"><a href="https://freebiesupply.com/adobe-xd-templates/" target="_blank" class="draft--a"><span style="font-weight: bold; ">Adobe XD Templates, UI Kits &amp; Resources - Freebie Su</span>p<span style="font-style: italic; ">ply<br>The latest free Adobe XD templates, XD UI kits and resources for the awesome UI/UX prototyping solution by Ad</span>obe.freebiesupply</a>.com</div>
<div class="draft-block draft--p left">工具軟體都有它設計的初衷，不過就看個人怎麼運用，如果我今天是想設計一份方便網站跟手機版觀看的即時性演示用的文件(其實就是面試的時候方便展示作品集 XD)，我可以用 Adobe Xd Share 的功能在手機或 ipad 做 demo 展示，配上簡單的動效和連結的設計，在操作上可以更直覺，也比一般 PDF 檔有更好的呈現效果，說不定可以撈點加分，何樂而不為呢～&nbsp;:)</div>

音樂藝文

每年我都會更新一份年度總結的作品集，就像是一種回顧自己的感受，以往我都是用PS/AI，今年來嚐試一下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 的形式插入即可。

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

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

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

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

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

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

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

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

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

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

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

适用于移动设备和 Web 的 UI 设计套件 | Adobe XD CC
了解这些用于创造简洁的移动和 Web 设计且可以完全自定义的 UI 套件。立即开始使用！www.adobe.com

Adobe's Favorite (and Free) XD UI Kits for 2019
Adobe Products Featured Tractiv has many social and gamification aspects that are key to users getting the most benefit…theblog.adobe.com

你今天 Xddddddddd 了嗎？－１：Adobe Xd 簡介
去年三月時，Adobe 公司發表了一套最新的設計軟體：Adobe Xd，使用中文的朋友一定會對其中的 Xd 感到印象深刻，但這是套非常認真的軟體，全名叫做 Adobe Experience Design，主要用來設計行動裝置、網頁畫面以及…medium.com

Adobe XD 推出免費方案，這將會是你學習 UI 設計的入門磚？
設計界佔有一席之地的的軟體公司Adobe 5/16 日宣佈推出Adobe XD CC起步方案(Adobe XD CC Stater…medium.com

Adobe XD Templates, UI Kits & Resources - Freebie Supply
The latest free Adobe XD templates, XD UI kits and resources for the awesome UI/UX prototyping solution by Adobe.freebiesupply.com

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

https://www.adobe.com/cn/products/xd/ui-design-kits.html

https://theblog.adobe.com/free-xd-ui-kits-2019/

https://medium.com/zaou/%E4%BD%A0%E4%BB%8A%E5%A4%A9-xdddddddd-%E4%BA%86%E5%97%8E-%EF%BC%91-adobe-xd-%E7%B0%A1%E4%BB%8B-501f3ac25132

https://medium.com/monospace-tw/adobe-xd-%E6%8E%A8%E5%87%BA%E5%85%8D%E8%B2%BB%E6%96%B9%E6%A1%88-%E8%B7%B3%E5%9D%91%E4%B9%8B%E5%89%8D%E8%AB%8B%E8%A9%B3%E9%96%B1%E6%AD%A4%E4%BD%BF%E7%94%A8%E8%AA%AA%E6%98%8E%E6%9B%B8-bee5f4093970

https://freebiesupply.com/adobe-xd-templates/

今年，vocus 的 iOS 工程師 YC 帶著技術交流（以及讓更多人認識 vocus）的使命，參與了今年的 try! Swift Tokyo 研討會，這系列的文章，我們將會分享研討會當中的精彩學習，還有那些網路上看不到的研討會體驗細節（讚嘆主辦方的用心）！

方格子 vocus 官方沙龍

vocus tech｜iOS 工程師前進東京！參加 try! Swift Tokyo 研討會的學習與啟發（上）

本文探討了多種Adobe Acrobat Pro DC的替代方案。每種工具的優缺點均有分析，尤其推薦PDFtoPDF.ai，強調其高精度OCR技術和多功能註釋工具。根據不同需求和預算，用戶可以找到最適合自己的PDF編輯解決方案。

leqi.ai

Adobe Acrobat Pro DC的五大最佳替代方案

本文介紹了幾款優秀的PDF編輯器，供您選擇最適合您的需求的工具。無論您需要高級編輯功能、具成本效益的選項，或者特定的OCR和轉換工具，都有一個能滿足您需求的Adobe Acrobat Pro DC替代方案。我們還推出了PDFtoPDF.ai，該產品在PDF編輯和轉換方面具有獨特優勢。

選擇完美的Adobe Acrobat Pro DC替代方案

這篇整理了我這個月讀到關於「設計創作」和「AI」相關的內容，並且幫大家附上了來源，如果你想了解我這個月發現了什麼不錯的內容都可以在這裡找到，而且我還會加上我的一點個人回饋。

另外每月資訊量不同，造成每一類的內容不一，有的內容會比較多，如果你只想看精選，我會在每一類中都挑出 3 篇我最推的。

創作邦｜設計X工具X品牌的沙龍

Adobe AI 功能更新、用 AI 寫程式太棒了｜每月閱讀推薦 VOL.06 （上）

這篇文章分享了許多好用的設計工具，包括Adobe、Canva和Mirosoft Designer，提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。

切の人生雜學

懶人不專業設計好幫手 | Microsoft Designer、Canva、Adobe

Creatie AI 助力UI設計，PixVerse 將圖片動態化。Pigment 提供色彩調整工具，404s 靈感來自眾多404頁面設計。PDF Escape 是 Acrobat 的免費選擇，簡化 PDF 處理。這些工具為設計師提供高效和創新的解決方案。

VOL.41 創作邦精選工具資源合集

設計師們該站出來改變世界、人人都能用 AI 做音樂了？｜每月閱讀推薦 VOL.02 （上）

這篇文章精選了三款必備的AI繪圖工具，包括MidJourney、DALL·E和Stable Diffusion。這些工具提供了豐富的創作可能性，讓使用者能夠輕鬆地以AI技術創作各種繪畫作品。

Dodson的沙龍

3款設計時，千萬不能錯過的AI繪圖工具

AI能幫助我很重要的第一點就是，常常會和客戶反覆的進行設計上的討論，有時候在溝通上都會有一些對於上一次設計的調整，現在有了AI之後，它就能幫我整理我和客戶這些零零總總的溝通資料，整理客戶他們的所有想法和需求

葉瀚林建築設計師

室內設計師會利用AI處理什麼工作？

網頁設計AI利用機器學習和算法來生成吸引人且功能性的網頁設計。功能包括自動佈局、配色方案、圖形生成、響應式設計、內容編輯。然而，網頁設計師仍需運用創造力和專業知識以創建獨特品牌需求的設計。

Kant Chan的沙龍

網頁設計AI功能及其應用

作為一名創作者，我們在完成設計作品後，最令人期待的就是看到它在印刷品上呈現出色。

為了確保設計能夠完美呈現，我們需要掌握完稿檔案的基本知識。首先要為各位介紹的就是Illustrator，這個製作萬能的工具，真可謂是設計師的得力助手。無論是製作『單張印刷品』還是複雜的『多頁印刷品』，甚至是『軋型加工

捷可印的沙龍

印刷完稿基本知識-大揭密

職場

學習

以行動支持創作者！付費即可解鎖

軟體開發

pdf to pdf

歡迎來到我的博客！idphoto.phd 讓您在30秒內輕鬆製作護照、簽證、身份證、名片等各種證件照，規格齊全，拍攝次數無限制。pdf to pdf 提供清晰的閱讀體驗，可將圖片中的PDF轉換成保留原始佈局的文字版本，讓您輕鬆享受複製和粘貼的樂趣。希望您在這裡找到有用的資訊！

科技

閱讀書評

自我成長

創作邦訂閱精選文章

創作邦致力分享設計新知、創作工具、高效工作方法，我們的沙龍提供各種給設計師和創作者的實用知識與資源，如果你付費訂閱我們，還會提供你更深度的內容分享、專屬討論區、會員購買數位商品限定優惠等福利。

<div class="draft-block draft--p left">謝謝切格大的分享~</div>

設計

🦙日常

一些生活的體悟，融合閱讀心得、或是各類影視作品、遊戲等。世界的一切都是有關連的，希望能用文字把所有連結寫出來。

創作

工具資源週報

在數據分析的路上

個人品牌建立

• Data Analyst x Dcard 7000+ Creator
• 分享 #個人品牌 ｜#AI工具｜ #Lifestyle

文化生活

這裡會分享很多關於我葉瀚林建築設計師的工作日常、心得分享、對時事的看法、還有個人的心情日記，想發就發，沒有侷限！

lazy.designers的沙龍

用AdobeXD做作品集全紀綠

pdftopdf.ai

<div class="draft-block draft--p left">
              <a href="/user/@bibowawa" target="_blank" class="draft--mention">
                <i class="icon-mention"></i>
                <span>霧隱財那 🥷</span>
              </a>
             謝謝你喜歡~~~</div>