使用 Adobe XD 快捷方式進行快速 UX 原型設計(PDF 備忘單)
已發表: 2022-03-10(這是一篇贊助文章。)Adobe 於去年 10 月宣布推出 Project Comet,以提供快速高效的一體化解決方案。 幾個月前,代號背後的秘密被揭露並以預覽版的形式向公眾推送:Adobe Experience Design CC (Adobe XD)。 XD 專為快速流暢的 UX 設計而設計,將所有內容集中在一個簡潔的捆綁包中:它讓您可以勾勒出想法、創建交互式原型、測試和分享它們。
為了讓您在使用 XD 時搶占先機,我們整理了 15 個專業提示,其中包括乍一看可能並不明顯但會使您的原型製作工作流程更加順暢的功能。 我們在一個 PDF 文件 (97 KB) 中收集了所有快捷方式,您可以在此處下載。
Adobe XD 目前仍處於公開測試階段,可以免費下載,即使您不是 Creative Cloud 的訂閱者。 此外,還會定期添加新功能。 請注意,Windows 版本正在開發中,將於 2016 年晚些時候發布,但目前 Adobe XD 僅適用於 Mac OS X。
重複網格
增長重複網格
為了省去手動複製和粘貼對象的過程,XD 提供了一項稱為探索重複網格的功能。 選擇要重複的項目,然後單擊右側屬性檢查器中的重複網格按鈕(或使用快捷鍵Cmd + R
)。 現在您可以拖動綠色手柄來重複您的項目。 要從中心拖出或擴大重複網格,請在拖動時按住Option
鍵。 當您想將一組對象保持在畫板上的中心時,這可能會特別方便。
進入和退出編輯上下文
重複網格被視為一個組。 如果您想為重複網格中的所有項目添加內容,請雙擊進入網格的編輯上下文,然後繪製、粘貼或添加元素。 這可以防止您一直取消分組和重新分組。 要在您的組或重複網格中彈出一個級別,請按Escape
鍵。

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

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

繪畫
畫板網格
使用鋼筆工具繪圖時,畫板網格提供更多方向。 它們允許您拖動對像以捕捉到網格,並且您還可以在繪製時將錨點捕捉到它們。 要啟用網格,請單擊工具欄中的畫板圖標,然後在右側的屬性欄中將勾選設置為網格。 在那裡,您還可以根據自己的喜好調整網格的大小和顏色。
從中心繪製和調整大小
想要從中心繪製或調整大小? 按住Option
鍵。
貝塞爾曲線
XD 中的貝塞爾曲線很容易創建。 您使用鋼筆工具繪製的任何錨點只需雙擊即可轉換為曲線。 要將曲線切換回一個點,請重複。
要創建不對稱曲線,請執行與上述相同的操作,按住Option
鍵並拖動和旋轉控制點以調整曲線。
打開一條路徑
如果您有閉合路徑,則在您首次選擇鋼筆工具時會突出顯示起點和終點。 單擊該點以打開路徑,以便您可以根據需要繼續繪製和更改形狀。

關閉智能參考線
智能參考線可讓您捕捉到畫板上的任何內容:例如,附近對象之間的距離、畫板的邊緣和中心以及其他對象。 如果這些輔助工具太分散注意力,或者如果您的畫板看起來太複雜,您可以通過在拖動時按住Cmd
鍵來關閉它們。
更改不透明度
要快速更改對象的不透明度,請選擇對象並開始輸入數字。 9 = 90%、8 = 80% 等; 0 讓你回到 100%。
圖片
圖像蒙版
如果要遮蓋圖像,請將其拖入矩形以自動剪輯或用對象遮蓋。 蒙版為您提供更多控制,因為它允許您重新定位甚至使用布爾組創建複雜對象來創建蒙版。 通過雙擊內部,您可以調整蒙版和被蒙版的圖像。 蒙版不會破壞圖像,因此如果您對結果不滿意,只需取消組合併重新蒙版即可。
原型製作
拆線對象
在原型設計模式下,您將項目連接到畫板以在它們之間創建過渡,並了解用戶將如何體驗您的設計。 如果要拆線,只需拖動電線的任一側即可移除連接。
共享原型
您可以通過 Web 共享原型,並且可以將原型的腳本演練發送給團隊成員、利益相關者或客戶。 要錄製腳本演練,請單擊原型屏幕右上角的播放按鈕。 單擊預覽窗口右上角的記錄按鈕並開始與您的原型進行交互。 完成後,再次單擊錄製按鈕,並將錄製內容保存為 MOV 文件。 現在你可以分享了。
各種各樣的
重用文本樣式
如果要重複使用已在另一個文本對像上設置的文本樣式,可以先選擇文本對象,切換到文本工具 ( T
),然後單擊並開始輸入。 XD 將自動從先前選擇的對像中選取文本樣式。 方便的。
編輯組
嵌套組是 XD 中的一個強大概念。 要進入編輯上下文,請雙擊一個組。 如果組中有組,也可以雙擊內部組。 您可以在編輯上下文中繪製、添加文本,甚至粘貼。 要在編輯上下文中彈出一個級別,請按Escape
鍵。
更多資源
- 您可以在 Adobe Experience Design 中使用的所有鍵盤快捷鍵列表(鏈接),
- Adobe 的 XD 專業提示視頻提供了有關使用 XD 功能的說明和工作流程。 一個示例文件讓您自己嘗試一下,
- Adobe 幫助網站,包含常見問題、提示和技巧以及簡短教程(鏈接),
- Adobe XD 博客中有關 UX 和 UI 設計最佳實踐的文章,
- 在 Behance 上使用 Adobe XD 創建的鼓舞人心的項目,
- 新功能會定期添加到 XD。 因此,請密切關注新功能公告,以免錯過任何內容,
- Adobe XD 團隊期待聽到您對 Adobe XD UserVoice 的反饋。
關於 SmashingMag 的進一步閱讀:
- 如何為移動應用設計錯誤狀態
- 如何使用 Adobe XD 創建圖標
- 移動應用程序中的動畫微交互
- 在 Adobe XD 中探索重複網格 [](https://www.smashingmagazine.com/2016/11/exploring-repeat-grid-in-adobe-xd/)
感謝 Elaine Chao (@elainecchao) 對本文的幫助。