iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
1
Modern Web

「用 Adobe Xd 進行 UI 使用者介面設計」- Riven系列 第 3

3分鐘認識 Adobe Xd (操作工具篇)

https://ithelp.ithome.com.tw/upload/images/20190904/201204924PWgKq431Z.png

準備開始囉

嗨囉,我是 Riven
今天要用大概 3 分鐘的閱讀時間,一起快速認識 Adobe Xd 這個新的 UI/UX 設計軟體中,有哪些基本卻很重要的工具可以用。

請先確認您的電腦已經安裝好 Adobe Xd Win10 或 MacOS 系統都可以,環境要求請 點此
安裝完成後透過 Adobe Creative Cloud 開啟。


打開軟體

打開 Adobe Xd 之後第一眼會是這個畫面,現在 Adobe 的軟體都很貼心地幫你排好常見的尺寸規格,今天要做 APP 或是做 Web 都可以找到相應的尺寸直接打開。
下方則是會顯示最近開啟過的專案.Xd 檔案,這邊由於保密關係打了一層馬賽克。

https://ithelp.ithome.com.tw/upload/images/20190903/201204926UcZ9kNc9n.png

這邊先以常見的網頁設計尺寸 Web 1366(1366x768) 作為示範;點擊後就會開啟新檔。

https://ithelp.ithome.com.tw/upload/images/20190903/20120492thhGI5H9Nn.png


基本工具

先來看一下左排的 「工具列」
https://ithelp.ithome.com.tw/upload/images/20190904/20120492EBlIUESjU8.png

選取 (V)

起手式,要選任何物件前都要先按一下,才選得到想要的。
https://ithelp.ithome.com.tw/upload/images/20190904/20120492x1QAxfhtW0.png

幾何繪製工具

這邊可以繪製基本的幾何圖形,雖然看起來很陽春,但所有的 UI 介面元件,都可以從這幾種基礎工具做出來。

https://ithelp.ithome.com.tw/upload/images/20190903/201204927J5jAezYEI.png

線條與鋼筆工具

線條拿來做分隔線(Divider) 特別好用;鋼筆則是所有電繪的基礎,可以畫出任意圖形,原理為貝茲曲線(Bézier curve)。

https://ithelp.ithome.com.tw/upload/images/20190903/20120492fLOXoJbTJS.png

文字工具

介面中不論標題、內文或選單,都是由文字建立出來的,我們可以透過這裡去新增。

https://ithelp.ithome.com.tw/upload/images/20190904/20120492NlZd4rY7Hy.png

畫布工具

不管是 Web 還是 App,所有畫面的單位都是畫布組成,每個畫布 (Artboard) 都代表著一個頁面,我們所有設計都會在上面進行。
我們也可以透過右邊預設好的頁面尺寸,比如說 iPhone 7+ 或 Web(1920) 等直接新增。

https://ithelp.ithome.com.tw/upload/images/20190904/201204929Y2J2UoU6c.png

放大鏡

可以放大/縮小視野,但比起這個,用快捷鍵 Command(Ctrl) +/- 或滑鼠滾輪、Touchpad 拉伸會更快一些。

https://ithelp.ithome.com.tw/upload/images/20190904/20120492Tf4ISYiUXH.png

Assets 元件庫

這邊可以預先儲存好常用的顏色、文字設定等等,讓整體 UI 是一致的。
https://ithelp.ithome.com.tw/upload/images/20190904/20120492ZBWRDSLkak.png

Components (原 Symbol)可以將設計好的元件模組化,之後可以一次修改全部。
https://ithelp.ithome.com.tw/upload/images/20190904/20120492V0OQiVTayK.png

圖層

跟其他繪圖軟體(ex. Ai/Ps)一樣,Adobe Xd 可以透過圖層的方式去管理物件,是一層一層有先後順序疊加上去的,展開這個按鈕可以看到所有圖層(能任意拖移)。
https://ithelp.ithome.com.tw/upload/images/20190904/20120492LNzbN9ba7m.png

外掛 (Plugin)

Adobe Xd 雖然在軟體中已經可以完成大多數 UI 設計流程上所需要的功能,但仍然能夠透過安裝 Plugin(外掛、插件)去擴充,讓效率更好或是連結第三方的軟體工具。

https://ithelp.ithome.com.tw/upload/images/20190904/20120492rxgzM7Nd16.png


總結一下

好囉,以上就是 Adobe Xd 中可以用的基本功能,如果用過其他像是 Illustrator 或 Photoshop 的繪圖軟體,會發現 Adobe Xd 真的親民很多,但就像之前說的一樣,這是專門為 UI 設計打造的軟體,因此只要會用這些功能,就可以一步一步的繼續學習囉!
會使用基本工具之後,明天會來聊聊 Adobe Xd 軟體右半邊的設定,讓設計的細節更加豐富。


/images/emoticon/emoticon22.gif相關連結


上一篇
「欸!你覺得 Sketch 還是 Adobe XD 哪個比較好用?」
系列文
「用 Adobe Xd 進行 UI 使用者介面設計」- Riven3
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
Riven 林育正
iT邦新手 5 級 ‧ 2019-09-04 22:06:08

補充資源

這邊有我之前錄製的影片版 6 分鐘快速上手 Adobe Xd 影片,
有興趣的朋友可以看看!點此
/images/emoticon/emoticon37.gif

https://ithelp.ithome.com.tw/upload/images/20190904/201204927YFKIu2oUG.png

0
wrxue
iT邦好手 1 級 ‧ 2020-06-01 09:18:02

怎麼沒後續了QQ

我要留言

立即登入留言