同理心拯救世界

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) 視角縮放
點選鍵盤上的 CtrlAlt 加上 +/-滑鼠滾輪

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

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

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

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

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

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

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

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

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

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

簡單七個步驟後,你就可以製作出你自己的Prototype摟!

Try Me



發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料


向上滑動