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

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

概觀

AEM Style Systems有四大優點:

  • 範本作者可以在元件或頁面的內容原則中定義樣式類別
  • 內容作者能夠選取樣式以套用至整個頁面,或在頁面上編輯元件時
  • 讓作者能夠呈現替代的視覺變數,讓元件和範本變得更加靈活
  • 減少或完全消除開發自訂元件和/或複雜對話方塊以顯示元件變異的需求

初始設定和使用

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

領導力 Designer 開發人員/架構師 範本作者 內容作者
決定該元件的內容和目標 決定內容的視覺和體驗式呈現 開發CSS和JS以支援體驗;定義並提供要使用的類別名稱 新增開發人員定義的CSS類別名稱,為樣式化元件設定範本原則。 每種樣式都應使用好記的名稱。 編寫頁面時,會視需要套用樣式,以獲得想要的外觀和感覺

雖然這是初始設定,但我們的許多客戶透過簡化此程式已獲得額外的靈活性,例如將其CSS上傳到DAM,如此可讓您更新樣式而無需部署。 其他客戶則擁有功能齊全的公用程式類別集,可讓他們開發元件和樣式,然後無需部署或開發即可運用。

樣式系統有幾種不同的風格:

  1. 版面樣式

    • 設計及版面配置的多層面變更

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

  2. 顯示樣式

    • 不會改變樣式基本性質的微小變化

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

  3. 資訊樣式

    • 顯示/隱藏欄位
注意

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

最佳實務

  • 先實體化預設樣式
    • 套用樣式系統前掉到頁面上時元件的版面配置和顯示
    • 這應該是最常使用的轉譯
  • 儘可能只顯示有效果的樣式選項
    • 如果暴露無效組合,請確定它們不會造成負面影響
    • 例如:指示影像位置的版面配置樣式,並伴有控制影像位置的無效顯示樣式
  • 在組合顯示樣式上選擇版面樣式
    • 減少必須檢查品質的排列數目
    • 確保遵守品牌標準
    • 簡化內容作者的撰寫作業
    • 協助建立一致的網站品牌識別
  • 使用組合樣式時要保守
    • 類別間和類別內
  • 分配適當時間以完整測試合併樣式
    • 有助於避免不良影響
  • 將樣式選項和排列數目減到最少
    • 太多選項可能會導致外觀和感覺缺乏品牌一致性
    • 可能會讓內容作者感到困惑,不知需要哪種組合才能達到想要的效果
    • 增加必須檢查品質的排列
  • 使用商業使用者易記的樣式標籤和類別
    • 「藍色」和「紅色」,而非「主要」和「次要」
    • "Card"和"Hero"而非"Variation A"和"Variation B"
    • 對於某些客戶來說,這可能更像是泛泛之說;設計團隊、業務團隊和內容團隊都非常熟悉他們的主要和次要顏色,或他們測試的變體。 但若是彈性及未來變更的可能性,使用特定辭彙可能更有效率。

關鍵重點

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

他們可以從開發角度簡化流程。 您可以使用單一樣式系統呈現相同內容的多重外觀。 同樣地,從製作角度來看,與其培訓作者,且作者必須記住要在哪個宮殿中使用哪個元件,您可以加快製作速度。

事情簡單明瞭。 核心元件內的HTML非常冗長。 在CSS層級執行所有這些操作,可讓元件建置速度更快,程式碼也更乾淨。

最後,Style Systems的使用更多是藝術而非科學。 如我們所討論,雖然有許多最佳實務,但您可以靈活地自訂組織的設定。

如需詳細資訊,請檢視我們的 客戶成功網路研討會 威爾·布里斯班和約瑟夫·范·布斯柯克。

若要進一步瞭解策略與思想領導力,請前往 客戶成功 集線器。

本頁內容