使用AEM样式系统加快内容速度

在本文中,您将了解如何使用AEM样式系统,使组织中的设计人员、内容作者和开发人员能够按照客户期望的速度和规模创建和提供体验。

概述

AEM Style Systems有四个主要优点:

  • 模板作者可以在组件或页面的内容策略中定义样式类
  • 内容作者能够选择要应用于整个页面或在页面上编辑组件时的样式
  • 通过使作者能够呈现替代的可视化变量,组件和模板变得更加灵活
  • 减少或完全消除开发自定义组件和/或复杂对话框以呈现组件变体的需要

初始设置和使用

五步设置与标准组件开发工作流非常相似。

领导力
Designer
开发人员/架构师
模板作者
内容作者
确定该组件的内容和目标
确定内容的可视和体验呈现方式
开发CSS和JS以支持体验;定义并提供要使用的类名
通过添加由开发人员定义的CSS类名,为样式化组件配置模板策略。 每种样式都应使用用户友好名称。
在创作页面时,会根据需要应用样式以获得所需的外观

虽然这是初始设置,但我们的许多客户已通过简化此流程实现了额外的灵活性,例如将其CSS上传到DAM,从而允许更新样式而无需部署。 其他客户则有一组功能齐全的实用程序类,它们可用于开发组件和样式,而无需部署或开发。

风格系统有几种不同的风格:

  1. 布局样式

    • 对设计和布局的多方面更改

    • 用于明确定义和可识别的演绎版

  2. 显示样式

    • 不会改变风格基本特性的细微变化

    • 例如,更改颜色方案、字体、图像方向等。

  3. 信息样式

    • 显示/隐藏字段
NOTE
如需这些功能的演示,我们建议您观看我们的 客户成功网络研讨会 威尔·布里斯班和约瑟夫·范布斯柯克。

最佳实践

  • 首先实体化缺省样式

    • 在应用样式系统之前将组件放到页面上时的布局和显示
    • 这应该是最常用的演绎版
  • 尽量只显示具有效果的样式选项

    • 如果暴露无效组合,请确保它们不会产生负面影响
    • 例如,指示图像位置并且伴有控制图像位置的无效显示样式的布局样式
  • 在组合显示样式上选择布局样式

    • 减少必须检查质量的排列数量
    • 确保遵守品牌标准
    • 简化了内容作者的创作
    • 帮助创建一致的网站品牌标识
  • 使用组合样式时要保守

    • 在类别之间和类别内
  • 分配适当的时间以彻底测试组合样式

    • 有助于避免不良影响
  • 最大程度地减少样式选项和排列数量

    • 太多选项可能会导致外观和感觉缺乏品牌一致性
    • 可能会导致内容作者感到困惑,不知需要哪种组合才能达到预期效果
    • 增加必须检查质量的排列
  • 使用便于企业用户使用的样式标签和类别

    • “蓝色”和“红色”,而不是“主要”和“次要”
    • “卡片”和“主页”而不是“变量A”和“变量B”
    • 对于某些客户来说,这可能更像是一般性情况;设计团队、业务团队和内容团队非常熟悉它们的主要颜色和次要颜色或者正在测试的变体。 但就灵活性和未来变化的任何潜力而言,使用特定术语可能更有效率。

要点

样式系统减少了复杂对话框的需要,但它们不是对话框的替代项。 它们有助于简化操作,但在某些情况下,您可能要使用组件属性或对话框而不是为其创建样式系统。

他们可以从开发角度简化流程。 您可以使用一个样式系统获得相同内容的多重外观。 同样,从创作角度来看,与其培训作者,作者必须记住使用哪个宫殿的组件,不如加快创作速度。

事情简单明了。 核心组件中的HTML非常详细。 在CSS级别执行所有这些操作可加快组件构建速度,并使代码更加清晰。

最后,样式系统的使用更多的是艺术而非科学。 正如我们前面讨论的那样,虽然有许多最佳实践,但您可以灵活地自定义组织的设置。

欲知更多信息,请查看我们的 客户成功网络研讨会 威尔·布里斯班和约瑟夫·范布斯柯克。

要了解有关战略和思想领导力的更多信息,请参阅 客户成功 集线器。

recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69