2021/03/31
11658

Adobe XD教學基礎篇:想成為UI/UX設計師必看攻略!

Adobe XD教學基礎篇:想成為UI/UX設計師必看攻略!

Adobe XD簡介

說到繪圖設計軟體,許多人較熟悉的可能是 adobe 系列中的 Photoshop 以及 illustrator,但如果想成為UI/UX 設計師的讀者們,那就不能錯過本篇 Adobe XD教學分享。
Adobe XD全名為 Adobe Experience Design ,是一款設計行動裝置、網頁畫面以及 Prototype 呈現的軟體。一個好的軟體,使用者友善以及乾淨明瞭的介面是一大要點, Adobe XD 可以快速的設計出產品 prototype 以供團隊進行後續開發,對於初學者來說是個十分好上手的軟體。

Adobe XD教學:工作區與介面介紹

Adobe XD的操作介面
【圖片來源】Flickr@Igor Polyakov
Adobe XD教學第一步先帶大家了解工作區及簡單的介面介紹,中間最大的區塊為工作區,像是畫布一樣所有的功能都在這裡完成。左方工具列可實作不同圖形及設計,右側為物件控制列,可設計選取物件的擺放、對齊位置。

Adobe XD教學:工具列功能介紹

左方工具列以順序為:
  1. 選取工具:可以選取物件作移動、縮放。
  2. 矩形工具:能隨意拉出不同尺寸大小的矩形。
  3. 圓形工具:能拉出不同尺寸大小的圓形。
  4. 直線工具:能拉出不同長度的直線。
  5. 鋼筆工具:能畫出向量圖型與線段。
  6. 文字工具:能拉出一定文字方框輸入文字。
  7. 畫板工具:可以設計產品的畫面,能拉出不同頁面進行設計。
  8. 放大鏡:用來縮放工作區。
  9. Assets:可以將顏色、字體樣式、圖樣儲存與此。
  10. 圖層工具可以查看、編輯各畫面中的圖層物件。
右側物件控制列:
  1. 對齊控制
    選取多個物件後,可以進行置上、置中、置下與垂直對齊,以及置左、垂直、置右與水平排列。如果只選取單一物件則會對齊 Artboard。
  2. 物件位置
    包含物件寬高的設定,以及水平、垂直反轉、旋轉的角度。
  3. 響應式設計
    有用過 Sketch 的讀者們應該也知道,此功能可以針對不同螢幕尺寸來做設計畫面。

Adobe XD教學:常用快捷鍵攻略

常用單鍵快捷鍵

  1. 新增工作區 A點擊後可利用鼠標拉出畫布,或是從右側工具列選擇常見裝置尺寸。
  2. 繪製圓形 E常見於製作小型圖案,透過顏色的搭配可變出豐富視覺。
  3. 繪製四邊形 R可拉出四邊形,而輕曳四角可以做出圓角的效果。
  4. 繪製直線 L在畫布上按一下滑鼠確定直線的起點,按住並拖曳滑鼠,再終點處釋放滑鼠,即可繪製出一條直線。
  5. 鋼筆工具 P用已經是習慣 Illustrator 的使用者們能更好上手,可以用來畫出任何你想要的形狀,要做好向量檔圖形必會技能!
  6. 文字工具 T產品的文字編排也可以說是一大看點,此快捷鍵可拉出文字區塊並放上文字。
  7. 選取 V操作 Adobe XD 的一個起手式,可選取想要的物件。

常用組合鍵

熱鍵組合 功能說明
Ctrl + 滾輪 視野縮放
十分常用, 與中鍵拖曳視野算是組合技
Ctrl + 3 選取元件後將視野縮放置適合大小
Ctrl + 0 將視野拉遠至可以總覽所有畫布
Ctrl + G 群組目前所選元件
Ctrl + Shift + G 解散目前所選群組
Ctrl + L 鎖定選取元件
Ctrl + Shift + M 製作剪裁遮色片
Ctrl + E 匯出所選擇的元件
以上的Adobe XD教學為方便初學者上手,其實還有更多進階的用法喔!在巨匠的Adobe XD 課程中會先傳授 UI/UX 基本概念,以及學習 Adobe XD 並實作出許多有趣的小作品喔!想要學習平面設計、廣告設計且想更進一步學習設計使用者介面的你,可千萬不能缺席!

免費學習資源不漏接

加巨匠電腦LINE好友
近期文章你可能有興趣的文章
×
提醒鈴鐺
【官網限定好禮】
免費體驗課程,熱門主題任你選!
熱門課程任選 免費體驗!
體驗課程
arrow_upward