使用 Adob​​e XD 快捷方式進行快速 UX 原型設計(PDF 備忘單)

已發表: 2022-03-10
快速總結↬每個設計師都有他們最喜歡的原型製作工具。 然而,當涉及到UX 線框圖和原型設計時,通常會涉及不止一種工具。 遲早,您會發現自己從一種工具切換到另一種工具,以便從中挑選出最好的工具。

(這是一篇贊助文章。)Adobe 於去年 10 月宣布推出 Project Comet,以提供快速高效的一體化解決方案。 幾個月前,代號背後的秘密被揭露並以預覽版的形式向公眾推送:Adobe Experience Design CC (Adobe XD)。 XD 專為快速流暢的 UX 設計而設計,將所有內容集中在一個簡潔的捆綁包中:它讓您可以勾勒出想法、創建交互式原型、測試和分享它們

為了讓您在使用 XD 時搶占先機,我們整理了 15 個專業提示,其中包括乍一看可能並不明顯但會使您的原型製作工作流程更加順暢的功能。 我們在一個 PDF 文件 (97 KB) 中收集了所有快捷方式,您可以在此處下載。

Adobe XD 目前仍處於公開測試階段,可以免費下載,即使您不是 Creative Cloud 的訂閱者。 此外,還會定期添加新功能。 請注意,Windows 版本正在開發中,將於 2016 年晚些時候發布,但目前 Adob​​e XD 僅適用於 Mac OS X。

重複網格

增長重複網格

為了省去手動複製和粘貼對象的過程,XD 提供了一項稱為探索重複網格的功能。 選擇要重複的項目,然後單擊右側屬性檢查器中的重複網格按鈕(或使用快捷鍵Cmd + R )。 現在您可以拖動綠色手柄來重複您的項目。 要從中心拖出或擴大重複網格,請在拖動時按住Option鍵。 當您想將一組對象保持在畫板上的中心時,這可能會特別方便。

在 Adob​​e XD 中增加重複網格
鏈接到動畫 gif

進入和退出編輯上下文

重複網格被視為一個組。 如果您想為重複網格中的所有項目添加內容,請雙擊進入網格的編輯上下文,然後繪製、粘貼或添加元素。 這可以防止您一直取消分組和重新分組。 要在您的組或重複網格中彈出一個級別,請按Escape鍵。

在 Adob​​e XD 中增加重複網格
鏈接到動畫 gif

調整填充

需要調整網格中的填充? 選擇重複網格,將鼠標懸停在項目之間的空間上,然後拖動直到填充符合您的要求。 XD 甚至提供數字,因此您可以更好地了解細胞之間的距離。

調整重複網格中的填充
鏈接到動畫 gif

插入數據

使用真實數據進行設計是 XD 的另一個絕妙功能。 無需為每個對象使用相同的佔位符文本,您可以將任何以 Return 分隔的 TXT 文件從 Finder 拖到任何文本對像上,以用獨特的內容填充網格。

在 Adob​​e XD 中增加重複網格
鏈接到動畫 gif

繪畫

畫板網格

使用鋼筆工具繪圖時,畫板網格提供更多方向。 它們允許您拖動對像以捕捉到網格,並且您還可以在繪製時將錨點捕捉到它們。 要啟用網格,請單擊工具欄中的畫板圖標,然後在右側的屬性欄中將勾選設置為網格。 在那裡,您還可以根據自己的喜好調整網格的大小和顏色。

使用畫板網格進行精確繪圖
鏈接到動畫 gif

從中心繪製和調整大小

想要從中心繪製或調整大小? 按住Option鍵。

從中心繪製
鏈接到動畫 gif
從中心調整大小
鏈接到動畫 gif

貝塞爾曲線

XD 中的貝塞爾曲線很容易創建。 您使用鋼筆工具繪製的任何錨點只需雙擊即可轉換為曲線。 要將曲線切換回一個點,請重複。

雙擊錨點繪製曲線
鏈接到動畫 gif

要創建不對稱曲線,請執行與上述相同的操作,按住Option鍵並拖動和旋轉控制點以調整曲線。

繪製不對稱曲線
鏈接到動畫 gif

打開一條路徑

如果您有閉合路徑,則在您首次選擇鋼筆工具時會突出顯示起點和終點。 單擊該點以打開路徑,以便您可以根據需要繼續繪製和更改形狀。

開闢道路
鏈接到動畫 gif

關閉智能參考線

智能參考線可讓您捕捉到畫板上的任何內容:例如,附近對象之間的距離、畫板的邊緣和中心以及其他對象。 如果這些輔助工具太分散注意力,或者如果您的畫板看起來太複雜,您可以通過在拖動時按住Cmd鍵來關閉它們。

在 Adob​​e XD 中增加重複網格
鏈接到動畫 gif

更改不透明度

要快速更改對象的不透明度,請選擇對象並開始輸入數字。 9 = 90%、8 = 80% 等; 0 讓你回到 100%。

通過鍵入值更改不透明度
鏈接到動畫 gif

圖片

圖像蒙版

如果要遮蓋圖像,請將其拖入矩形以自動剪輯或用對象遮蓋。 蒙版為您提供更多控制,因為它允許您重新定位甚至使用布爾組創建複雜對象來創建蒙版。 通過雙擊內部,您可以調整蒙版和被蒙版的圖像。 蒙版不會破壞圖像,因此如果您對結果不滿意,只需取消組合併重新蒙版即可。

在 Adob​​e XD 中增加重複網格
鏈接到動畫 gif

原型製作

拆線對象

在原型設計模式下,您將項目連接到畫板以在它們之間創建過渡,並了解用戶將如何體驗您的設計。 如果要拆線,只需拖動電線的任一側即可移除連接。

在 Adob​​e XD 中取消連接對象
鏈接到動畫 gif

共享原型

您可以通過 Web 共享原型,並且可以將原型的腳本演練發送給團隊成員、利益相關者或客戶。 要錄製腳本演練,請單擊原型屏幕右上角的播放按鈕。 單擊預覽窗口右上角的記錄按鈕並開始與您的原型進行交互。 完成後,再次單擊錄製按鈕,並將錄製內容保存為 MOV 文件。 現在你可以分享了。

在 Adob​​e XD 中記錄和共享原型
鏈接到動畫 gif

各種各樣的

重用文本樣式

如果要重複使用已在另一個文本對像上設置的文本樣式,可以先選擇文本對象,切換到文本工具 ( T ),然後單擊並開始輸入。 XD 將自動從先前選擇的對像中選取文本樣式。 方便的。

重用文本樣式
鏈接到動畫 gif

編輯組

嵌套組是 XD 中的一個強大概念。 要進入編輯上下文,請雙擊一個組。 如果組中有組,也可以雙擊內部組。 您可以在編輯上下文中繪製、添加文本,甚至粘貼。 要在編輯上下文中彈出一個級別,請按Escape鍵。

在 Adob​​e XD 中編輯組
鏈接到動畫 gif

更多資源

  • 您可以在 Adob​​e Experience Design 中使用的所有鍵盤快捷鍵列表(鏈接),
  • Adobe 的 XD 專業提示視頻提供了有關使用 XD 功能的說明和工作流程。 一個示例文件讓您自己嘗試一下,
  • Adobe 幫助網站,包含常見問題、提示和技巧以及簡短教程(鏈接),
  • Adobe XD 博客中有關 UX 和 UI 設計最佳實踐的文章,
  • 在 Behance 上使用 Adob​​e XD 創建的鼓舞人心的項目,
  • 新功能會定期添加到 XD。 因此,請密切關注新功能公告,以免錯過任何內容,
  • Adobe XD 團隊期待聽到您對 Adob​​e XD UserVoice 的反饋。

關於 SmashingMag 的進一步閱讀

  • 如何為移動應用設計錯誤狀態
  • 如何使用 Adob​​e XD 創建圖標
  • 移動應用程序中的動畫微交互
  • 在 Adob​​e XD 中探索重複網格 [](https://www.smashingmagazine.com/2016/11/exploring-repeat-grid-in-adobe-xd/)

感謝 Elaine Chao (@elainecchao) 對本文的幫助。