Adobe Xd 軟體新手詳解圖文教學

林育正 Riven
RAR 設計攻略
Published in
7 min readFeb 21, 2019

[ 最新 2019 版本繁體中文持續更新中 ]

哈囉,我是 Riven,目前在幫 Adobe Taiwan 推廣 Xd 這項新的 UI/UX 設計整合工具,有在各大專院校、企業與社群擔任講師,或是協助諮詢想跨入這領域的同學們,接觸到不少新手村的的朋友,希望可以透過這篇繁中語言+實務整理的文章,讓你可以對 Adobe Xd 軟體本身有初階的認識。

如果還有其他問題,可以加入我所創建的 Adobe Xd Taiwan User Group 台灣交流社群 發文討論、跟大家交流,我們也會定期舉辦線上/線下活動噢!

軟體工具列

剛接觸 Adobe Xd 的朋友應該會發現它跟 Illustrator、Photoshop 等軟體相差很大的是介面相當簡單,原因是 Xd 在整個 Adobe 宇宙裡面是定位在 UI/UX 設計工具,並不是拿來取代 Ps / Dw,而是你可以更有效地搭配 Adobe 其他設計軟體進行整合。

選取 (V)

可以選取物件,同時為了不在操作時過於混亂(比如說選到不是想要的物件),可以作為設計時的起手式,按一下就可以回到選取狀態。

矩形 (R)

可以輕鬆繪製四邊型,別小看這樣簡單的圖形,在 UI 介面設計中可是相當常用的功能,像是拉出一個大範圍矩形後可以丟入圖片,或是瞄準四邊拉出圓角做成按鈕等。

按住 shift 可以等比例畫出正方形,加上 alt(option) 一起按可以從中心開始做圖。

如果想要畫出更多邊的圖形,建議可以在 Illustrator 做好再貼過來噢!

圓形 (E)

常見於製作 icon 、user頭像等,透過漸層色可搭配出多變的視覺。

按住 shift 可以等比例畫出正圓,加上 alt (option) 一起按呢則可以從圓心開始作圖。

線條 (L)

若覺得介面太單調,在段落之間畫一條線調低透明度往往有不錯的效果。需注意的是 Line 是建立在 border 上,不是填充色。

鋼筆 (P)

用習慣 Illustrator 的人更好上手,可以用來畫出任何你想要的形狀,其運算原理就是高中數學課的 “貝茲曲線”,要做好向量檔圖形必會技能。

推薦資源:貝茲曲線練習遊戲網站

文字 (T)

不管是設計網頁或App等,文字編排的組成佔了大宗,拉出來的文字區塊可利用周圍調整大小至適合的排版位置。

畫布 (A)

點擊後可利用鼠標拉出自訂大小的畫布 (Artboard),或是從右側邊欄選擇常見裝置尺寸。

縮放 (Z)

可以放大局部的區塊,同時也可以用 Macbook 的 touch pad 來縮放,或是使用滑鼠的同學可以用滾輪來放大縮小。

物件控制列

位於 Adobe Xd 右側的控制列可以針對物件去做編輯。

對齊排列

選取多個物件後,可以進行置上、置中、置下與垂直排列,以及置左、垂直、置右與水平排列。

若只選取單一物件則會對齊 Artboard。

布林運算 (Boolean algebra)

其實就是國中數學課本統計學的交集、差集、補集什麼的,可以讓建立好的形狀進行切割,在電腦繪圖中算很常用的功能。

物件位置

包含寬度W (width) 、高H(Height),與 X 、Y 軸位置,以及旋轉角度跟水平、垂直翻轉。

RESPONSIVE RESIZE

有用過 Sketch 的朋友應該對 resize 的功能相當讚譽有佳,Adobe Xd 同樣有類似的功能哦!默認都是 Auto、切換成 Manual 就可以自由編輯,主要用在群組後的物件可以方便地縮放。

文字(TEXT)

所有用文字工具建立的文字都可以在這邊設定,包括字體、字重與大小,以及字距、行距等,同時能做文字區塊的對齊排列,記得在介面設計時不能轉外框哦!要保留文字可編輯性。

外觀(APPEARANCE)

這邊可以編輯填充色、邊框與陰影顏色,透明度與物件/背景模糊也可以在此進行。

資產與圖層 (Assets & Layer)

位於 Adobe Xd 左下角,類似 Sketch 的 Symbol 與 Adobe 系列都有的圖層功能。

資產 Assets

這邊可以儲存顏色、字體,以及整組物件的 Symbol,不論是做什麼載體的 UI 介面設計,統一樣式與設計都是相當重要的,可以透過這樣的系統進行管理,也可以一次性地進行編輯。

圖層 Layers

可以在這邊設置圖層的上下順序,或是進行鎖住 (Lock) 或隱藏,若要設定切圖也是在這裡進行。

理解完基本軟體介面操作後,可以觀看在 YOTTA 的《Adobe Xd設計實務|成為UI設計師的8項核心技能》有一支六分鐘免費試看的影片,可以幫助你快速理解怎麼運用工具進行介面設計。

Adobe Xd設計實務|成為UI設計師的8項核心技能》
與 YOTTA 獨家合作的教學內容,點此了解更多

我是 Riven ,如果這篇內容還算受用的話,歡迎幫我在旁邊拍手處給予 1~50下的鼓勵,更多 UI/UX設計相關文章可以發摟我的 Medium

有任何問題或交流討論,都可以透過我的 Facebook 臉書。我們下次見囉 😉

--

--

林育正 Riven
RAR 設計攻略

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design