使用 Adobe XD 進行 UI 規劃 ui-planning-adobe-xd

大多數情況下,新網站的規劃工作都是從模型和靜態設計開始。 Adobe XD 是建立使用者體驗的同級最佳設計工具。 Adobe 建議透過使用 Adobe XD 或其他工具建立 UI 模型,來規劃您的 Sites 實施。

先決條件 prerequisites

這是包含多個部分的教學課程,並假設您已經完成前一章所述的步驟。 本章是單純觀看並學習的部分,不需要執行任何動作,便可以繼續後續的章節。

若要跟隨影片內容進行操作,您必須安裝 Adobe XD我們提供免費試用

目標

  1. 檢閱由標準網站範本及 WKND 設計團隊提供的 UI 套件。
  2. 了解如何使用 UI 套件來對應和規劃 AEM Sites 實施。
  3. 了解如何把在 Adobe XD 中建立的 UI 設計交接給前端開發人員以利實施。

您將要建置的內容 what-you-will-build

在本章,我們檢查兩個 Adobe XD 檔案,一個用於標準網站範本,另一個用於所建議的 WKND 網站。 此

標準網站範本 UI 套件 standard-site-template-uikit

概括性步驟:

  1. 下載標準網站範本 XD 檔
  2. 檢查 Adobe XD 中的 UI 套件。
  3. 模擬將設計交接給前端開發人員。

WKND UI 套件 wknd-ui-kit

概括性步驟:

  1. 下載 WKND 文章 XD 檔案
  2. 檢查 WKND 文章範本的設計。

恭喜! congratulations

恭喜,您已經了解如何使用 Adobe XD UI 套件來對應和規劃 AEM Sites 實施。

另有更多 UI 套件可供檢查和下載。

後續步驟 next-steps

在下一章將根據 WKND 文章設計建立一個新的頁面範本。

了解如何建立和修改頁面範本。 了解頁面範本與頁面之間的關係。 了解如何設定頁面範本的原則,以便提供詳細的治理功能並讓內容維持品牌一致性。 以來自 Adobe XD 的模型為基礎建立結構良好的雜誌文章範本。

recommendation-more-help
experience-manager-learn-help-getting-started-wknd-tutorial-develop