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

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

概觀

AEM Style Systems有四大優點：

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

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

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

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

注意

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

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

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

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

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

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

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

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