AEM触屏UI的结构

AEM触屏UI具有多个基本原则，由几个关键元素组成：

控制台

基本布局和大小调整

虽然UI既适用于移动设备，也适用于桌面设备，但Adobe决定使用一种样式，该样式适用于所有屏幕和设备，而不是创建两种样式。

所有模块都使用相同的基本布局，在AEM中，这可以看成：

布局遵循响应式设计样式，并会根据您所使用的设备/窗口的大小来调整自身。

例如，当分辨率低于1024像素（与移动设备上的情况一样）时，显示屏将相应地进行调整：

标题栏

标题栏显示全局元素，包括：

• 徽标和您当前使用的特定产品/解决方案；对于AEM，它还会形成指向全局导航的链接
• 搜索
• 用于访问帮助资源的图标
• 用于访问其他解决方案的图标
• 等待您发送的任何警报或收件箱项目的指示器（并可访问）
• “用户”图标，以及指向用户档案管理的链接

工具栏

这与您的位置息息相关，而且还显示与控制以下页面中的视图或资产相关的工具。 工具栏特定于产品，但元素有一些通用性。

在任意位置，工具栏都会显示当前可用的操作：

还取决于当前是否选择了某个资源：

左边栏

可以根据需要打开/隐藏左边栏以显示：

• 时间线
• 引用
• 过滤器

默认值为 仅限内容 （隐藏的边栏）。

页面创作

创作页面时，结构区域如下所示。

内容框架

页面内容在内容框架中呈现。 内容框架完全独立于编辑器，可确保不会因CSS或Javascript而发生冲突。

内容框架位于窗口的右侧部分工具栏下。

编辑器框架

编辑器框架实现编辑功能。

编辑器框架是所有 页面创作元素. 它位于内容框架的顶部，包括：

• 顶部工具栏
• 侧面板
• 所有叠加图
• 任何其他页面创作元素；例如，组件工具栏

侧面板

其中包含两个默认选项卡，用于选择资产和组件；可以从此处拖放到页面上。

默认情况下，侧面板处于隐藏状态。 选择后，该窗口将显示在左侧，或滑过以覆盖整个窗口（当窗口大小低于1024像素的宽度时）；例如，在移动设备上)。

侧面板 — 资产

在资产选项卡中，您可以从资产范围中进行选择。 您还可以过滤特定术语或选择群组。

侧面板 — 资产组

在资产选项卡中，您可以使用下拉列表选择特定的资产组。

侧面板 — 组件

在组件选项卡中，您可以从组件范围中进行选择。 您还可以过滤特定术语或选择群组。

叠加

这些选项将叠加内容框架，并由 层 了解如何与组件及其内容进行（完全透明）交互的机制。

叠加图位于编辑器框架中（包含所有其他页面创作元素），但它们实际上会覆盖内容框架中的相应组件。

图层

层是一个独立的功能包，可激活它以：

• 提供页面的不同视图
• 允许您处理和/或与页面交互

与对单个组件执行的特定操作不同，这些层可为整个页面提供复杂的功能。

AEM附带了多个已实施的页面创作层；包括编辑、预览、注释。

层切换器

层切换器允许您选择要使用的层。 关闭后，它表示当前正在使用的层。

图层切换器可作为工具栏（位于窗口顶部的编辑器框架内）中的下拉菜单使用。

组件工具栏

单击组件的每个实例都将显示其工具栏（单击一次或慢速双击）。 工具栏包含可用于页面上的组件实例（可编辑）的特定操作（例如，复制、粘贴、打开编辑器）。

组件工具栏位于相应组件的右上角或右下角，具体取决于可用空间。

更多信息

有关触屏优化UI相关概念的更多详细信息，请继续阅读文章 AEM触屏UI的概念.

有关更多技术信息，请参阅 JS文档集 ，用于触屏优化页面编辑器。

Business.Adobe.com 资源

Content Insights Personalized Communications Version History Dynamic Forms Headless Cms Digital Signage