Adobe XD 入門教學

2018年中旬Adobe宣布XD免費！
Adobe XD CC Starter版本具備正式版的相同功能，並且沒有什麼試用30天的時間限制。

We believe Adobe XD will be as big as Photoshop, if not bigger. (我們相信XD將會像PS一樣強大，如果沒有，那就是更大。)

-Scott Belsky, Chief Product Officer & Executive Vice President, Adobe

這邊其實關連到前陣子新釋出的功能：目前AdobePhotoshop檔案(.psd)是可以直接使用AdobeXD應用程式開啟的。

在AdobeXD問世(2017)之前，Mac OS用戶使用Sketch製作軟體介面設計，而Windows用戶則主要使用Photoshop來製作設計。

AdobeXD目前鎖定的目標用戶有兩類：(1)原PS UI設計者、(2)UI/UX入門者。
因此，降低新舊轉移成本和最低化進入門檻是XD目前的主要特色。
對原PS使用者而言，舊專案可直接匯入，且所有圖層和操作習慣都相似，這就是新舊的無痛轉移阿。

那進入門檻到底有多低呢？
如果沒有用過Adobe系列任何一項產品是否有機會？

Ans: 很低，可以的。

下列讓我來帶您導覽一下XD的基本操作，不管你有沒有美術天分或介面設計概念，只要會用滑鼠和鍵盤，就可以建立你的第一個APP Prototype。

下載安裝好AdobeXd之後，開啟應用程式你會看到下面這個畫面。

點選左下角的Begin Tutorial按鈕即可開啟教學檔案，進入下面這個畫面。

首先，先來介紹基本操作：

(1) 視角縮放
點選鍵盤上的 Ctrl 或 Alt 加上 +/- 或 滑鼠滾輪。

(2) 移動視角
點選鍵盤上的 空白鍵 加上 滑鼠左鍵。

基本的操作技巧你已經會了，接下來透過七個簡單步驟，帶你快速上手這套軟體！

第一步 預覽APP
點選右上角的播放按鈕，來預覽目前的範例專案。
你將會看見下列效果

第二步 新增畫板
點選新增畫板Artboard按鈕，可透過右側欄新增制式畫板，或自己拉大小。
接著將游標狀態選回點選工具，並點選剛才新增畫板的標題，即可針對此畫板進行編輯。
如：透過右方的色彩Fill欄位可變更畫布的背景色。

第三步 匯入圖片
自電腦中拖曳圖片進來，如拖曳到畫布內的特定圖形，可直接套用該圖形的遮罩；如無則保持該圖形的原樣。

第四步 重複區塊
點選欲重複的區塊再點選右上角Repeat Grid按鈕，接著拖曳綠色的邊界即可看見相同區塊重複出現。其中，X Y方向皆可重複，並可拖曳粉色區塊來變更重複區塊的間距。
小技巧：重複的區塊可便捷的進行統一調整。

第五步 畫面捲動
當畫布Artboard長度大於視窗Viewport長度時，將會出現卷軸讓使用者捲動/滑動。
在這裡面實現這個效果的方法首先點選畫布的標題，接著將右側捲動SCROLLING欄位由None切換至Vertical。
下方出現的Vertical Height將會是視窗的高度，接著將畫布的高度調整大於此數值。
最後，點選播放按鈕將可預覽捲動效果。

第六步 設定連結
將左上角的Tab由Design切換至Prototype，將可看見每個物件皆出現藍色小箭頭。

拖曳藍色小箭頭至特定畫板，即可製作出「點選該物件即跳轉畫面」的互動效果。

第七步 分享原型
點選上方分享 頁籤，選擇發佈原型選項。等待產出連結後，便可將連結分享給你的朋友，大家也可以在連結內發表回應。

第八步 分享 Design Spec
設定好需匯出的圖檔

點選右上分享 頁籤，選擇發佈 New Link 與 Development 選項。等待產出連結後，便可將連結分享給前端工程師，也包含回應功能。

簡單八個步驟後，你就可以製作出你自己的設計摟！

Prototype

Design Spec