使用AEM樣式系統加快內容速度
在本文中,您將瞭解如何使用AEM式系統,讓貴組織的設計人員、內容作者和開發人員以客戶期望的速度和規模建立及提供體驗。
概觀
AEM Style Systems有四個主要優點:
- 範本作者可以在元件或頁面的內容原則中定義樣式類別
- 內容作者能夠選取樣式以套用至整個頁面,或在頁面上編輯元件時套用
- 讓作者能夠呈現替代的視覺變數,讓元件和範本變得更靈活
- 減少或完全消除開發自訂元件和/或複雜對話方塊以呈現元件變體的需求
初始設定和使用
5步驟設定與標準元件開發工作流程非常類似。
雖然這是初始設定,但我們的許多客戶已透過簡化此程式獲得額外的靈活度,例如將其CSS上傳至DAM,這可讓您更新樣式而不需要部署。 其他客戶則擁有功能齊全的公用程式類別集,可讓他們開發元件和樣式,然後無需部署或開發即可運用。
樣式系統有幾種不同的風格:
-
配置樣式
-
設計與版面配置的多層面變更
-
用於定義明確且可識別的轉譯
-
-
顯示樣式
-
不會改變樣式基本特性的細微變化
-
例如,變更色彩配置、字型、影像方向等。
-
-
資訊樣式
- 顯示/隱藏欄位
最佳做法
-
先實體化預設樣式
- 套用樣式系統前掉到頁面上時的元件版面配置和顯示
- 這應該是最常使用的轉譯
-
儘可能只顯示具有效果的樣式選項
- 如果暴露無效組合,請確定它們不會造成負面影響
- 例如,配置樣式會指定影像位置,並伴有控制影像位置的無效顯示樣式
-
在合併的顯示樣式上選擇版面樣式
- 減少必須檢查品質的排列數目
- 確保遵守品牌標準
- 簡化內容作者的製作流程
- 協助建立一致的網站品牌識別
-
使用組合樣式時要保守
- 所有類別和類別內
-
分配適當的時間以完整測試合併的樣式
- 有助於避免不良影響
-
將樣式選項和排列數減至最少
- 太多選項會導致外觀和感覺缺乏品牌一致性
- 可能會讓內容作者感到困惑,不知道需要哪些組合才能達到理想的效果
- 增加必須檢查品質的排列
-
使用業務使用者易記的樣式標籤和類別
- 「藍色」和「紅色」,而非「主要」和「次要」
- "Card"和"Hero"而非"Variation A"和"Variation B"
- 對於某些客戶來說,這可能更像是一般性;設計團隊、業務團隊和內容團隊非常熟悉他們的主要和次要顏色,或他們正在測試的變體。 但若是彈性及未來變更的可能性,使用特定辭彙可能更有效率。
關鍵重點
樣式系統減少了對複雜對話方塊的需求,但它們不是對話方塊的替代品。 它們有助於簡化操作,但在某些情況下,您可能會想要使用元件屬性或對話方塊,而不是為其建立樣式系統。
他們可以從開發角度簡化流程。 您可以使用單一樣式系統呈現相同內容的多重外觀。 同樣地,從製作角度來看,與其培訓作者,且作者必須記住要在哪個宮殿中使用哪個元件,您可以加快製作速度。
事情簡單明瞭。 核心元件內的HTML極為冗長。 在CSS層級執行所有這些操作,可讓元件建置速度更快,程式碼也更乾淨。
最後,Style Systems的使用更多是藝術而非科學。 如我們所討論,我們提供一些最佳實務,但您可以靈活地自訂組織的設定。
如需詳細資訊,請檢視我們的客戶成功網路研討會,與Will Brisbane和Joseph Van Buskirk一起進行。
在客戶成功中心瞭解更多策略和思想領導力。