用AdobeXD做作品集全紀綠

更新於 發佈於 閱讀時間約 7 分鐘

每年我都會更新一份年度總結的作品集,就像是一種回顧自己的感受,以往我都是用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左右,連容量都贏了一大截。

raw-image

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

raw-image

比 Ai 還好用的幾個神功能

Artboard 分類命名顯示

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

raw-image

Grid / Layout 對齊系統

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

raw-image
raw-image

自動變形的 layout 對齊

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

raw-image

最強大的神助攻 Repeat Grid

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

raw-image

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

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

raw-image

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

https://www.repeatgrid.com/

Asset 管理功能

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

raw-image
raw-image

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

raw-image

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

raw-image

如果是有平面設計軟體操作基礎的人,我想看完軟體自帶的官方教程就能輕鬆理解 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 了嗎?-1: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 檔有更好的呈現效果,說不定可以撈點加分,何樂而不為呢~ :)

留言
avatar-img
留言分享你的想法!
avatar-img
lazy.designers的沙龍
3會員
13內容數
2022/04/26
RPF社群:https://discord.gg/jpvHwhbeRt Mintverse介紹:MINTVERSE寫給第一次接觸nft的人.pdf (reurl.cc) 可定義字詞『靈感』、『鹹酥雞』、『平行宇宙』、『拓荒者』、『酒精』 「靈感」 「鹹酥雞」
Thumbnail
2022/04/26
RPF社群:https://discord.gg/jpvHwhbeRt Mintverse介紹:MINTVERSE寫給第一次接觸nft的人.pdf (reurl.cc) 可定義字詞『靈感』、『鹹酥雞』、『平行宇宙』、『拓荒者』、『酒精』 「靈感」 「鹹酥雞」
Thumbnail
2022/04/05
包容性設計的原則〔一〕認知到不相容/排斥性 原則〔二〕從人類的多樣性中學習 原則〔三〕解決一個需求就能擴大到更多的用戶
Thumbnail
2022/04/05
包容性設計的原則〔一〕認知到不相容/排斥性 原則〔二〕從人類的多樣性中學習 原則〔三〕解決一個需求就能擴大到更多的用戶
Thumbnail
2022/04/05
你的設計夠體貼嗎? 嘿,但是包容性設計不是指做一套產品或服務能給所有人用的(還要兼具美感,這很難的!),而是指不同人以不同的方式使用你的設計時都能不感到隔閡,盡力在設計的過程和結果中減少對用戶的無意識排除,建立多種產品的體驗模式或解決方案的「選擇」
Thumbnail
2022/04/05
你的設計夠體貼嗎? 嘿,但是包容性設計不是指做一套產品或服務能給所有人用的(還要兼具美感,這很難的!),而是指不同人以不同的方式使用你的設計時都能不感到隔閡,盡力在設計的過程和結果中減少對用戶的無意識排除,建立多種產品的體驗模式或解決方案的「選擇」
Thumbnail
看更多
你可能也想看
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
本文介紹了幾款優秀的PDF編輯器,供您選擇最適合您的需求的工具。無論您需要高級編輯功能、具成本效益的選項,或者特定的OCR和轉換工具,都有一個能滿足您需求的Adobe Acrobat Pro DC替代方案。我們還推出了PDFtoPDF.ai,該產品在PDF編輯和轉換方面具有獨特優勢。
Thumbnail
本文介紹了幾款優秀的PDF編輯器,供您選擇最適合您的需求的工具。無論您需要高級編輯功能、具成本效益的選項,或者特定的OCR和轉換工具,都有一個能滿足您需求的Adobe Acrobat Pro DC替代方案。我們還推出了PDFtoPDF.ai,該產品在PDF編輯和轉換方面具有獨特優勢。
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
Creatie AI 助力UI設計,PixVerse 將圖片動態化。Pigment 提供色彩調整工具,404s 靈感來自眾多404頁面設計。PDF Escape 是 Acrobat 的免費選擇,簡化 PDF 處理。這些工具為設計師提供高效和創新的解決方案。
Thumbnail
Creatie AI 助力UI設計,PixVerse 將圖片動態化。Pigment 提供色彩調整工具,404s 靈感來自眾多404頁面設計。PDF Escape 是 Acrobat 的免費選擇,簡化 PDF 處理。這些工具為設計師提供高效和創新的解決方案。
Thumbnail
作為一名創作者,我們在完成設計作品後,最令人期待的就是看到它在印刷品上呈現出色。 為了確保設計能夠完美呈現,我們需要掌握完稿檔案的基本知識。首先要為各位介紹的就是Illustrator,這個製作萬能的工具,真可謂是設計師的得力助手。無論是製作『單張印刷品』還是複雜的『多頁印刷品』,甚至是『軋型加工
Thumbnail
作為一名創作者,我們在完成設計作品後,最令人期待的就是看到它在印刷品上呈現出色。 為了確保設計能夠完美呈現,我們需要掌握完稿檔案的基本知識。首先要為各位介紹的就是Illustrator,這個製作萬能的工具,真可謂是設計師的得力助手。無論是製作『單張印刷品』還是複雜的『多頁印刷品』,甚至是『軋型加工
Thumbnail
不管是電商行銷或是社群媒體,都需要有吸引人的設計圖文才能打動受眾。無論你是社群媒體達人、創業家、自媒體、文案寫手還是藝術家,Adobe Express都能為你提供無限可能。人人都能用它來打造引人注目的設計、精美的宣傳材料,甚至是具有教育價值的內容。無論你的目標是甚麼,Adobe Express都能成
Thumbnail
不管是電商行銷或是社群媒體,都需要有吸引人的設計圖文才能打動受眾。無論你是社群媒體達人、創業家、自媒體、文案寫手還是藝術家,Adobe Express都能為你提供無限可能。人人都能用它來打造引人注目的設計、精美的宣傳材料,甚至是具有教育價值的內容。無論你的目標是甚麼,Adobe Express都能成
Thumbnail
設計 - 是許多的工作都要用的的技能。對於缺乏設計經驗和技能的人來說,創建出符合自己需求的設計作品可能會是一件非常困難的事情。為了滿足這一需求,許多線上設計工具應運而生。 本篇部落格將會介紹一個線上設計工具——Microsoft Designer,它提供了豐富的模板、AI功能和自動生成設計功能,讓使
Thumbnail
設計 - 是許多的工作都要用的的技能。對於缺乏設計經驗和技能的人來說,創建出符合自己需求的設計作品可能會是一件非常困難的事情。為了滿足這一需求,許多線上設計工具應運而生。 本篇部落格將會介紹一個線上設計工具——Microsoft Designer,它提供了豐富的模板、AI功能和自動生成設計功能,讓使
Thumbnail
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News