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

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

概觀

Style SystemsAEM有四個主要優點:

  • 模板作者可以在元件或頁面的內容策略中定義樣式類
  • 內容作者能夠選擇要應用於整個頁面或編輯頁面上的元件時的樣式
  • 通過授權作者渲染替代的視覺變體,使元件和模板更加靈活
  • 減少或完全消除開發定制元件和/或複雜對話以呈現元件變化的需要

初始設定和使用

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

領導力 Designer 開發人員/架構師 模板作者 內容作者
確定該元件的內容和目標 確定內容的視覺和體驗式演示 開發CSS和JS以支援經驗;定義和提供要使用的類名 通過添加由開發人員定義的CSS類名,為樣式化元件配置模板策略。 每個樣式都應使用用戶友好的名稱。 在創作頁面時,根據需要應用樣式,以獲得所需的外觀

雖然這是初始設定,但我們的許多客戶通過簡化此過程實現了額外的靈活性,例如,將他們的CSS上載到DAM中,這允許對樣式進行更新,而無需部署。 其他客戶有一套功能齊全的實用程式類,這允許他們開發元件和樣式,這些元件和樣式無需部署或開發即可加以利用。

時尚系統有幾種不同的風格:

  1. 佈局樣式

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

    • 用於定義明確且可識別的格式副本

  2. 顯示樣式

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

    • 例如,更改配色方案、字型、影像方向等。

  3. 資訊樣式

    • 顯示/隱藏欄位
注意

要演示這些功能,我們建議觀看 客戶成功網路研討會 威爾布里斯班和約瑟夫范布斯柯克。

最佳做法

  • 先固化預設樣式
    • 在應用樣式系統之前將元件放在頁面上時的佈局和顯示
    • 這應是最常用的格式副本
  • 嘗試僅顯示盡可能有效的樣式選項
    • 如果暴露無效組合,確保它們不會造成負面影響
    • 例如,指示影像位置的佈局樣式和控制影像位置的無效顯示樣式
  • 選擇佈局樣式而不是組合顯示樣式
    • 減少必須檢查質量的置換數
    • 確保符合品牌標準
    • 簡化內容作者的創作
    • 幫助建立一致的站點品牌標識
  • 採用組合樣式保守
    • 跨類別和在類別內
  • 為完全test組合樣式分配適當的時間
    • 有助於避免不良影響
  • 最小化樣式選項和排列的數量
    • 過多的選項可能導致品牌外觀和感覺缺乏一致性
    • 可能會使內容作者混淆,因為需要組合才能達到預期效果
    • 增加必須檢查質量的排列
  • 使用業務用戶友好的樣式標籤和類別
    • "藍"和"紅"而不是"主"和"次"
    • "牌"與"英雄",而不是"變體A"和"變體B"
    • 對於一些客戶來說,這可能更具普遍性;設計團隊、業務團隊和內容團隊非常熟悉他們的主要顏色和次要顏色,以及他們正在測試的變體。 但是,對於靈活性和任何未來變化的可能性,使用特定術語可能會更有效。

關鍵要點

樣式系統減少了對複雜對話的需求,但它們不是對話的替代。 它們有助於簡化事物,但在某些情況下,您可能希望使用元件屬性或對話框,而不是為其建立樣式系統。

它們可以從發展的角度簡化流程。 使用一個樣式系統可以實現同一內容的多個外觀。 同樣,從創作的角度來看,而不是培訓作者,作者必須記住在哪個宮殿中使用哪個元件,您可以加快創作速度。

事情很乾淨。 核心元件中的HTML非常詳細。 在CSS級別執行所有這些操作可加快元件的生成速度,並且代碼也更乾淨。

最後,Style Systems的使用更多是藝術而非科學。 正如我們所討論的那樣,您有許多最佳做法,但您在如何自定義組織設定方面將具有靈活性。

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

瞭解有關策略和思想領導的更多資訊 客戶成功 中。

本頁內容