XD

設計

• 選擇工具

“選擇”工具是Adobe XD工具欄中的第1個工具，也是絕大多數情況下默認選中的工具，可以通過單擊工具欄中的指針圖標 ，或者直接按鍵盤上的V鍵激活。

激活“選擇”工具，用鼠標左鍵直接在畫布上單擊任意元素即可選中該元素，可對選中的元素進行拖曳、縮放和旋轉等操作

選擇圖層組中的圖層時需要注意以下兩點:

第1點：按住鍵盤上的command鍵（macOS）或者Ctrl鍵（Windows）直接選中單個圖層是在畫布上進行選擇，并不是在圖層面板中進行選擇。

第2點：無論是采用雙擊的方法還是采用按住鍵盤上command鍵（macOS）或者Ctrl鍵（Windows）的方法進入圖層組以后，都可以直接單擊鼠標左鍵選擇需要的圖層。

• 矩形工具

“矩形”工具是Adobe XD工具欄中的第2個工具，可以通過單擊工具欄中的矩形工具圖標 ，或者直接按鍵盤上的R鍵激活。

繪制矩形

“矩形”工具作為Adobe XD中繪圖工具的一種，可以用來繪制各種矩形和圓角矩形。

激活“矩形”工具后，在畫板上單擊鼠標左鍵并拖曳，即可繪制一個矩形，如圖所示。因為在Adobe XD中默認的填充色為純白色，所以大家在畫板上看到的是一個白色矩形，而非只是一個輪廓。

如果需要選中多個圖層，可以按住鍵盤上的Shift鍵，然后選擇需要選中的多個圖層

激活“矩形”工具后，按住鍵盤上的Shift鍵，同時拖曳鼠標即可繪制正方形

• 對齊屬性

該部分能設置圖層的對齊屬性，從左到右一共有8種對齊方式，分別是“頂對齊”“居中對齊（垂直）”“底對齊”“水平分布對齊”“左對齊”“居中對齊（水平）”“右對齊”和“垂直分布對齊”，如圖所示。

注意，圖中的“水平分布對齊”和“垂直分布對齊”的圖標是未激活狀態，這是因為需要選中3個或3個以上的圖層才可以執行分布對齊的操作。如果只選中一個圖層，那么該圖層對齊的參考為畫板本身。

• 橢圓工具

“橢圓”工具是Adobe XD工具欄中的第3個工具，可以通過直接單擊工具欄中的橢圓工具圖標 ，或者直接按鍵盤上的E鍵激活。

“橢圓”工具是Adobe XD中的第2種繪圖工具，用于繪制圓形。激活“橢圓”工具后，在畫布上單擊鼠標左鍵并拖曳鼠標，即可繪制橢圓，如圖所示。

如果在繪制橢圓之前，按住鍵盤上的Shift鍵，則可以繪制一個圓。

繪制完橢圓后，可以在右側的屬性檢查器中設置橢圓的屬性

• 直線工具

“直線”工具是Adobe XD工具欄中的第4個工具，可以用來繪制直線。要使用該工具，只需單擊工具欄上的直線工具圖標 ，或者直接按鍵盤上的L鍵將其激活。

使用“直線”工具繪制直線時，首先在畫布上單擊鼠標確定直線的起點，然后按住并拖曳鼠標，再在終點處釋放鼠標，即可繪制出一條直線

如果在繪制直線的同時按住Shift鍵，則可以以固定的角度繪制直線；如果鼠標從左往右拖曳，則在水平方向繪制；如果是上下拖曳，則繪制出一條垂直線；如果是往左上、右上、左下、右下等方向拖曳，則會以45° 角的方向繪制直線。

繪制完直線后，可以在右側的屬性檢查器中設置直線的各種屬性。相對于矩形和橢圓圖層的屬性檢查器，直線圖層的屬性檢查器沒有“填充”屬性，其他屬性的設置方法完全相同，在此不作重復說明。

• 鋼筆工具

“鋼筆”工具 是Adobe XD工具欄中的第5個工具，可以用該工具繪制各種路徑。要使用該工具，只需單擊工具欄上的鋼筆工具圖標，或者直接按鍵盤上的P鍵將其激活。

用“鋼筆”工具繪制直線路徑的方法非常簡單。首先激活“鋼筆”工具，在畫板上單擊鼠標左鍵，創建一個錨點，然后將鼠標移動到另一個位置并單擊鼠標左鍵，創建另一個錨點，這時兩個錨點之間會自動出現一條直線路徑。

此時可以再移動鼠標添加第3個錨點，則第3個錨點和第2個錨點之間也會出現一條直線路徑，如圖所示。

從圖中可以看出，最后一個錨點總是實心的圓，而之前的錨點是空心的圓。實心的圓表示該錨點是當前選中的錨點，把鼠標移動到該錨點并按住可以修改錨點的位置。

在一個路徑上可以添加無數個錨點。如果要結束路徑的繪制，可以按下鍵盤上的Esc鍵，此時，鼠標便會被釋放，并且默認選中第一個錨點，工具會自動變為“選擇”工具

提示：在連接兩個端點時，如果按住鍵盤上的command鍵（macOS系統）或者Ctrl鍵（Windows系統），就不會閉合路徑。

選擇“選擇”工具，用鼠標左鍵雙擊路徑上的錨點，可以把直線路徑變為曲線路徑，如圖所示，路徑左右會出現曲柄，拖曳曲柄可以對曲線進行調整。如果再次雙擊錨點，則會變為直線路徑。

如果希望一開始就繪制曲線，那么先要激活“鋼筆”工具，然后在起點處單擊鼠標左鍵，并拖曳鼠標到目的地位置后釋放，即可設置曲線的斜度，此時會生成一條相應斜度的曲線

若要繪制C形曲線，可以向前一條方向線的相反方向拖曳鼠標，然后再釋放；如果要繪制S形曲線，則可以按照與前一條方向線相同的方向拖曳鼠標，然后再釋放。

如果最后一個錨點與第一個錨點重合，則會自動閉合路徑，退出“鋼筆”工具；如果不希望閉合路徑，可以按下Esc鍵退出路徑的繪制。

當完成路徑的繪制后，再次按下Esc鍵，則退出路徑的編輯模式，此時再選中該路徑，路徑四周會出現一個矩形的選框。

原型

當切換到原型界面，最左側的功能鍵簡化到只有選擇和縮放，也就是說在“原型”工作區只能編輯界面交互動效，不能修改界面的設計。

在XD中通過選擇交互入口（可以是文字，圖案，圖片，一個編組以及一個頁面），拖拽出一條曲線，鏈接到目標頁面上，并且選擇切換動效，從而實現動態交互。

XD中的動態效果有兩類，一類是界面之間的跳轉，一類是頁面內的交互。其中“過度”功能就是實現界面之間的切換跳轉。它的操作比較簡單，只要選擇目標物體，拖拽出一條曲線鏈接到目標頁面上即可完成。

在動效設置中有“過渡”和“緩動”的設定，“過渡”有無過渡，溶解，左右上下滑出以及向左右上下推出。“緩動”有漸入，漸出，漸入漸出和無緩動。

疊加是用來制作在頁面中的交互，它的使用方法是在連接到目標物體之后，選擇“疊加”，之后會出現一個綠色的框在原頁面上，被連接的頁面底色會變成透明，然后選擇動態效果即可完成頁面內的交互。

• 創建交互式原型

1.切換到“原型”模式。
2.單擊要鏈接的對象。
對象上出現帶箭頭的連接手柄。將鼠標懸停在手柄上，光標會變為連接器。

3.單擊并開始拖動鼠標，可以看到連接器。在目標畫板或屏幕上釋放鼠標。

當您連接第一個元素時，該元素所在的畫板將設為主畫板。

4.在出現的彈出窗口中，您可以指定以下內容：

過渡選項和過渡持續時間：如果您想要在過渡到另一個畫板時讓滾動位置保持不變，請選擇“保留滾動位置”。這個選項對于導航欄或固定頁腳的原型設計非常有用。如果用戶在原始畫板中滾動，下一個畫板會識別原始畫板中的滾動位置。通過單擊畫板或畫板中的任何元素，您可以控制滾動位置，從而在從一個屏幕切換到下一個屏幕時保留原始位置。此控件可防止在項目文件中反復來回滾動。例如，如果用戶在畫板 A 上向下滾動到 y=1,000，那么過渡到畫板 B 后，默認位置也會是 y=1,000。如果未在原始畫板中定義滾動，則“保留滾動位置”選項處于非活動狀態。

5.重復上述步驟，鏈接項目中的所有交互式元素。

提示：
在“原型”模式下如何更快地創建交互：
您可以在不同畫板之間復制和粘貼對象。對象及其交互會一同被復制和粘貼。
您也可以單獨復制和粘貼交互。復制一個對象，右鍵單擊另一個對象，然后選擇“粘貼交互”。只有交互會被粘貼。

如需將元素指向另一屏幕，請再次單擊手柄并將其拖至所需的屏幕。

如需查看特定畫板的連接，請選擇畫板標題。

如需刪除交互，請將連接器的目標手柄從目標畫板拖到草稿區域。

注意:灰色鏈接指示傳出連接，藍色鏈接顯示傳入連接。

• 預覽和錄制交互

XD內有演示原型和錄屏的功能，可以快速預覽和交互并且錄制視頻。此外還可以設備上預覽，這就需要下載XD的app，然后通過鏈接數據線或者登陸Creative Cloud賬號同步項目來實現預覽。

注意:Windows 上的 Adobe XD 不支持錄制原型。但是，有一種變通方法。按 Windows + G 鍵并使用原生錄制程序錄制“預覽”窗口。
您可以預覽原型，以便測試原型和交互。您還可以錄制預覽，并將錄制內容保存為 .mp4 文件。然后，您可以選擇與您的利益相關者共享這個 .mp4 文件，他們可以查看（或審閱）原型的演練并提供反饋。

1.單擊“桌面預覽”圖標。此時會出現“預覽”窗口并突出顯示畫板。
如需測試屏幕之間的導航，請單擊交互式元素。
在“預覽”窗口中預覽時，可以編輯原型的設計和交互。可以立即預覽這些更改。

2.如需錄制交互，請單擊“預覽”窗口中的“錄制”圖標。如需結束錄制，請按 Esc，或者再次單擊“錄制”圖標。

3.指定名稱和保存錄制內容的位置。錄制內容會被保存為 .mp4 文件。

總結

以上是生活随笔為你收集整理的2021.5.10-2021.5.16周报的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。