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

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

概述

AEM Style System具有四个主要优势:

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

初始设置和使用

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

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

虽然这是初始设置,但我们的许多客户通过简化此过程(例如将其CSS上传到DAM)实现了额外的敏捷性,这样可以更新样式,而无需部署。 其他客户则拥有一组功能完备的实用工具类,这些实用工具类允许他们开发组件和样式,这些组件和样式随后无需部署或开发即可利用。

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

  1. 布局样式

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

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

  2. 显示样式

    • 不改变风格基本性质的细微变体

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

  3. 信息样式

    • 显示/隐藏字段
注意

要观看这些功能的演示,我们建议您观看 客户成功网络研讨会 和威尔·布里斯班和约瑟夫·范·布什柯克。

最佳实践

  • 先固化缺省样式
    • 在应用样式系统之前,在页面上放置组件时的布局和显示
    • 此应是最常用的演绎版
  • 尽量仅显示有效的样式选项
    • 如果暴露无效组合,请确保它们不会产生负面影响
    • 例如,指示图像位置且伴随控制图像位置的无效显示样式的布局样式
  • 选择组合显示样式上的布局样式
    • 减少必须进行质量检查的排列数目
    • 确保遵守品牌标准
    • 简化了内容作者的创作过程
    • 帮助创建一致的网站品牌标识
  • 保守风格
    • 跨类别和在类别中
  • 分配适当的时间以彻底测试组合样式
    • 有助于避免不良影响
  • 最大限度地减少样式选项和排列的数量
    • 太多选项可能会导致品牌外观缺乏一致性
    • 可能会导致内容作者混淆,需要组合才能达到预期效果
    • 增加必须进行质量检查的排列
  • 使用业务用户友好型样式标签和类别
    • "Blue"和"Red"而不是"Primary"和"secondary"
    • “卡片”和“主页”而不是“变体A”和“变体B”
    • 对于某些客户而言,这可能更具普遍性;设计团队、业务团队和内容团队非常熟悉他们的主要颜色和次要颜色,以及他们正在测试的变体。 但是,为了灵活性和未来变化的任何潜力,使用特定术语可能会更有效。

主要优点

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

它们可以从开发角度简化流程。 您可以使用一个样式系统实现同一内容的多个外观。 同样,从创作角度来看,不是培训作者,作者必须记住要在宫中使用的组件,这样可以加快创作速度。

事情简单。 核心组件中的HTML非常详细。 在CSS级别执行所有这些操作可加快组件生成速度,并且代码也更简洁。

最后,“风格系统”的使用更多是艺术,而不是科学。 正如我们所讨论的,我们提供了许多最佳实践,但您在如何自定义组织的设置方面将具有灵活性。

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

客户成功 中心。

在此页面上