高效的 XD 原型製作 – Adobe XD 組件教程
已發表: 2022-03-11Adobe XD 的組件系統為設計師提供強大的功能來製作數字產品原型。 然而，它並非沒有怪癖，需要特別小心。 利用智能快捷方式和遵循最佳實踐將使設計人員能夠簡化其 XD 原型製作工作流程。
自 2017 年底正式公開推出以來，Adobe XD 在成為 UX 設計師的極具競爭力的線框圖和原型製作工具方面取得了長足的進步。 特別是，它的新組件系統擴展了設計師可以試驗的交互類型。 儘管如此，組件並非沒有怪癖和缺點。 使用 XD 組件時，採用一組工作流實踐有助於避免繁重的工作並充分利用系統的潛力。
什麼是 Adobe XD 組件？
XD 組件是可重複使用的元素分組，例如文本、形狀或線條。 一個組件有一個作為父組件的“主組件”和放置在畫板上的“實例”或子組件。 更改主組件時，更改會傳播到其所有實例。
取代 XD 以前的“符號”系統，它具有類似的目的，組件提供了一個關鍵的區別。 它們可以具有多個狀態，以響應 XD 原型模式中定義的不同輸入。 例如，按鈕可以具有默認狀態，但在懸停或單擊狀態時會更改其外觀。 它可以在單擊時播放聲音，甚至可以根據語音識別的輸入改變其外觀。
組件系統可以節省時間，但需要特別小心。 要充分利用系統的強大功能，必須採用深思熟慮的方法和精心準備的工作流程。
建議熟悉 Adobe XD
對 Adobe XD 相當熟悉的設計師將從以下提示和建議中獲得最大收益。 要搶占先機，請從 Google 的 Material Design 主頁下載 Adobe XD 設計工具包。 該工具包將提供一個 Adobe XD 組件集以進行實驗和解構。
提示 #1 – 在創建組件之前考慮所有狀態
第一次創建具有狀態的組件時，設計人員應該了解組件的潛在更改可能如何影響其他實例。 為了說明，讓我們考慮一個具有多種狀態的下拉菜單：
- 默認狀態：菜單折疊
- 懸停狀態：當光標在它上面時，輪廓顏色可能會改變
- 展開的單擊狀態：顯示下拉菜單選項
編輯下拉菜單子實例的默認狀態時，這些更改不會傳播到懸停或單擊狀態。 必須更改主組件中的默認狀態以更新所有實例的懸停或單擊狀態。
雖然跳入並開始迭代Main Components可能很誘人，但由於父組件和子組件的行為方式不同，有時會發生意想不到的問題。
一個好的做法是在添加其他狀態或實例化組件之前考慮並預測主組件的默認狀態中所需的一切——甚至可以並排佈置不同的狀態。
設計人員還應該記住，他們可以在主組件或子實例的非默認狀態下添加和更改元素，而不會影響默認狀態，但反之則不然。
對 Adobe 的建議：為組件狀態提供鎖定功能，以便設計人員可以保持非默認狀態完好無損，並防止對主組件默認狀態的更改傳播。
提示 #2 – 在創建時命名組件
創建組件（右鍵單擊元素，然後在菜單中選擇“製作組件”，或在 Mac 上按 Cmd-K/在 PC 上按 Ctrl-K）將組件添加到左側邊欄中的 Assets 面板。 XD 將給組件一個默認名稱“組件 XX”（其中“XX”是一個數字）。 它的描述性不是很強，所以最好給它一個唯一的、可搜索的名稱。
為什麼這樣做？ 隨著組件列表填滿，如果組件都以相同的默認名稱和無意義的數字開頭，它將變得笨拙。 雖然“平鋪視圖”選項有所幫助，但它沒有文本標籤，使視覺識別變得緩慢且具有挑戰性。 帶有小縮略圖的“列表視圖”也使得難以識別名稱難以辨認的組件之間的差異。 組件可能而且將會丟失。 通過命名它們使它們可搜索將在以後節省時間。
對 Adobe 的建議：創建組件時，自動選擇它並讓用戶將注意力集中在 Assets->Components 面板上以重命名它或彈出一個命名彈出窗口。 在首選項中切換此功能也很有幫助。
提示 #3 – 保持主要組件有條理
創建組件時，很容易將主組件意外放置在畫板上。 雖然 XD 提供了查找主組件的工具（通過搜索“資源”面板或右鍵單擊並從子實例中選擇“編輯主組件”），但很容易對主組件進行意外更改，同時認為它是一個實例。 這樣做可能會導致跨多個畫板的許多不希望的更改。
即使畫板上只有少數幾個組件實例，一旦畫板被克隆，事情很快就會失控。 對主組件的無意更改可能會增加本可以避免的清理時間。
最好養成在創建後立即將主要組件從設計畫板上移開的習慣。 執行此操作的理想方法是將主要組件放置在 XD 文件中的粘貼板上或明確標記的專用畫板上。 這樣做會讓以後的事情更有效率。
對 Adobe 的建議：在對主組件進行更改時考慮提示，以便警告設計人員更改可能會傳播到子實例。
提示 #4 – 使用圖層面板保持井井有條
很容易在畫板上嘗試想法並進入對組件進行分組/取消分組和更改組件狀態屬性的流程。 將左側邊欄最小化以獲得更多工作空間可能會有很大的誘惑力。 但是，組件狀態和轉換很有可能在迭代過程中不會按預期運行。 這可能是因為子元素（例如形狀、矢量或文本）的組織和分組已經偏離了過渡正常工作所需的內容。
層視圖為元素的層次結構和命名提供了 100% 的透明度，其密封組織至關重要。 在狀態之間使用 XD 強大的自動動畫轉換需要元素在組件的層層次結構中具有相同的名稱和位置。 否則，過渡將默認為淡入淡出，而不是吸引人的自動動畫。
有時，可能需要在自動動畫轉換時抑制插值的屬性。 為此，設計人員可以重命名不同組件狀態或畫板中的元素，以中斷基於名稱的鏈接。
在任何一種情況下，層視圖都可用於在出現意外問題時進行故障排除。 它應該是調試原型問題時的第一步，無論是組件狀態之間的轉換還是畫板之間的轉換。
提示 #5 – 使用 Alpha Fading 插入顏色
自動動畫是 XD 的一個很好的補充，但也有一些限制和特性。 當使用自動動畫在兩個組件狀態或畫板之間更改元素的顏色時，其中一個怪癖變得明顯。 不是兩種顏色之間的平滑插值，而是在測試時突然變化。
當前的解決方法有點尷尬，並且對應該如何組織主要組件狀態有影響。 它涉及添加兩個具有不同顏色而不是一個的對象，然後在兩種狀態下交叉淡入淡出兩個對象的 alpha 以實現平滑過渡。 默認的淡入淡出過渡可能會起作用，但如果使用自動動畫插入形狀和大小，淡入淡出可能就不夠了。
提示 #6 – 在重複網格中利用組件
重複網格是 XD 中另一個出色的省時功能，可以輕鬆組織和維護類似元素的數組。 與組件一樣，重複網格具有層次關係，其中網格左上角的第一個元素是定義“子”元素屬性的“父”元素。 （對此有例外：位圖對於子元素可以是唯一的，文本字符串也可以是唯一的，但文本屬性不是。）
但是，在重複網格中使用組件時，情況會發生變化。
正常使用重複網格時，對父級所做的更改會立即傳播到其子級。 但是，如果沒有本地屬性覆蓋，主組件更改只會傳播到重複網格中的子代。 換句話說，在網格中更改組件的屬性會“鎖定”它，使其免受從主組件傳播的更改。
要從也是重複網格中的一個組件的父級傳播更改，請將網格的大小調整到僅父級。 這會刪除它的孩子。 然後，將手柄拖回所需的尺寸以更新子代。
一旦設計師可以解決組件和重複網格的特性，將它們組合起來就會很強大。
提示 #7 – 假設不存在基於時間的組件狀態轉換（暫時）
當使用基於時間的延遲（不是基於輸入）在畫板之間應用轉換時，很自然地假設組件狀態之間也可以使用相同的轉換。 不幸的是，這種情況並非如此。 所有基於組件的狀態更改都必須基於原型模式下的用戶輸入或交互，而不是時間。
對 Adobe 的建議：向組件添加基於時間的轉換選項，以便它們的狀態可以獨立於用戶輸入進行動畫處理。
提示 #8 – 克隆主要組件層次結構時要徹底
最後一個技巧更像是 XD 設計人員可能不會經常遇到但應該注意的邊緣情況。
讓我們假設主組件需要一個變體，該變體仍保留子組件繼承屬性的“一對多”質量，但不影響任何現有子組件。 要創建新的父組件層次結構，必須將實例化組件取消分組並從頭開始重建。 取消組合組件也將丟失在原型模式中設置的所有狀態和轉換屬性。 這是一個解決方法：
- 為組件中的每個狀態克隆一個組件實例。
- 將每個實例的狀態設置為不同的狀態。
- 瀏覽並取消組合每個組件實例。
- 開始對每個組件實例進行所需的調整和更改。
- 重新創建新的主組件。
- 進入原型模式並重新創建之前設置的交互和過渡類型。
對 Adobe 的建議：在“資源”面板中右鍵單擊主組件時，提供“複製”菜單選項。
使用 Adobe XD 組件進行原型設計：成功秘訣
Adobe XD 在過去幾年中在功能和實用性方面取得了重大改進。 它已經成長為 Sketch 和其他成熟的原型工具的一個有價值的、有競爭力的替代品。 根據該工具自首次亮相以來的發展方式，可能還會有更多改進。
特別是，Adobe XD 組件系統在改進和擴展設計人員可以創建的交互類型方面具有極好的潛力。
以下是一些需要牢記的關鍵要點：
- 了解更改如何在主組件和子實例之間傳播。
- 請注意組件如何與 Adobe XD 的其他功能（例如自動動畫和重複網格）交互。
- 努力採用一致的工作流程實踐來節省時間，例如命名組件和在 XD 文件中維護一個單獨的主組件粘貼板區域。
注意使用 Adobe XD 組件的特性，同時保持規範的工作流程，將最大限度地提高設計效率。 它將避免不必要的清理和維護，並在製作數字產品原型時為 XD 設計師提供效率優勢。
讓我們知道您的想法！ 請在下方留下您的想法、評論和反饋。
• • •
進一步閱讀 Toptal 設計博客：
- Adobe XD 與 Sketch – 對決 2020
- 精准設計——Adobe XD 評論
- 探索多模式設計 - Adobe XD 教程
- UX 神話——原型設計、用戶測試和 UX 可交付成果
- 完善你的用戶體驗設計過程——原型設計指南