使用AEM樣式系統加速內容速度

在本文中，您將學習如何使用AEM樣式的系統，讓貴組織的設計人員、內容作者和開發人員能以客戶期望的速度和規模建立和提供體驗。

總覽

AEM Style Systems有四大優點：

  • 範本作者可在元件或頁面的內容原則中定義樣式類別
  • 內容作者可選取套用至整個頁面或編輯頁面上的元件時的樣式
  • 讓作者能夠呈現替代的視覺變化，讓元件和範本更具彈性
  • 減少或完全消除開發定制元件和/或複雜對話以呈現元件變化的需要

初始設定與使用

5步驟設定與標準元件開發工作流程非常類似。

領導力 Designer 開發人員/架構師 範本作者 內容作者
決定該元件的內容和目標 確定內容的視覺和體驗演示 開發CSS和JS以支援體驗；定義並提供要使用的類名 通過添加由開發人員定義的CSS類名來配置已設定樣式的元件的模板策略。 每種樣式應採用好記的名稱。 編寫頁面時，視需要套用樣式，以達到所需的外觀和風格

雖然這是初始設定，但我們的許多客戶透過簡化此程式（例如將其CSS上傳至DAM）達到額外的靈活性，因此可更新樣式而無需部署。 其他客戶則擁有一組功能齊全的公用程式類別，可讓他們開發元件和樣式，這些元件和樣式無需部署或開發即可加以運用。

風格系統有幾種不同的風格：

  1. 版面樣式

    • 設計和佈局的多方面更改

    • 用於定義明確且可識別的轉譯

  2. 顯示樣式

    • 不改變風格基本性質的微小變化

    • 例如，變更色彩配置、字型、影像方向等。

  3. 資訊樣式

    • 顯示/隱藏欄位
注意

若要示範這些功能，建議您觀看 客戶成功網路研討會 威爾·布里斯班和約瑟夫·范·布柯克。

最佳實務

  • 先固化預設樣式
    • 在應用樣式系統之前拖放到頁面上的元件佈局和顯示
    • 這應該是最常使用的轉譯
  • 嘗試只顯示可能有效的樣式選項
    • 如果暴露了無效組合，請確保它們不會造成負面影響
    • 例如，指定影像位置的佈局樣式和控制影像位置的無效顯示樣式
  • 選擇版面樣式而非組合的顯示樣式
    • 減少必須檢查質量的排列
    • 確保遵守品牌標準
    • 簡化內容作者的製作
    • 有助於建立一致的網站品牌識別
  • 採用組合樣式保守
    • 跨類別和類別
  • 分配適當時間以徹底測試組合樣式
    • 有助於避免不良影響
  • 將樣式選項和排列的數量減到最少
    • 太多的選項可能會導致外觀和感覺缺乏品牌一致性
    • 可能會造成內容作者混淆，需要哪些組合才能達到預期的效果
    • 增加必須檢查品質的排列
  • 使用業務用戶友好的樣式標籤和類別
    • "Blue"和"Red"而非"Primary"和"Secondary"
    • "Card"和"Hero"而非"Variation A"和"Variation B"
    • 對於某些客戶而言，這可能更籠統；設計團隊、業務團隊和內容團隊非常熟悉其主要和次要顏色，或測試的變體。 但是，對於靈活性和任何未來變化的潛力，使用特定術語可能會更有效。

主要要點

樣式系統減少了對複雜對話的需求，但它們不是對話的替代。 它們有助於簡化項目，但在某些情況下，您可能會想要使用元件屬性或對話方塊，而非為其建立樣式系統。

從開發角度，它們可以簡化流程。 您可以使用一個樣式系統來呈現相同內容的多重外觀。 同樣地，從製作角度來看（而非訓練作者），而且作者必須記住要在宮殿中使用哪個元件，您就能加快製作速度。

事情很乾淨。 核心元件中的HTML高度詳細。 在CSS層級執行上述操作，可讓元件建置更快速，程式碼也更簡潔。

最後，使用Style Systems比使用科學更藝術。 如前所述，有許多最佳實務，但您在自訂組織設定的方式上會有彈性。

如需詳細資訊，請查看 客戶成功網路研討會 威爾·布里斯班和約瑟夫·范·布柯克。

進一步了解策略和思想領導，請前往 客戶成功 中心。

本頁內容