AEM触屏优化UI的结构

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

控制台

基本布局和大小调整

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

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

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

例如，当分辨率低于1024px（如在移动设备上）时，将相应地调整显示屏：

标题栏

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

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

工具栏

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

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

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

左边栏

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

• 时间轴
• 引用
• 筛选器

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

页面创作

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

内容帧

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

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

编辑器帧

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

编辑器框架是所有​页面创作元素​的容器（摘要）。 它位于内容框架的顶部，包括：

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

侧面板

它包含两个默认选项卡，允许您选择资产和组件；它们可以从此处拖放到页面上。

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

侧面板——资产

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

侧面板——资产组

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

侧面板——组件

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

叠加

这些组件覆盖内容框架，并由层使用，以了解如何与组件及其内容进行（完全透明）交互的机制。

叠加位于编辑器框架中（与所有其他页面创作元素一起），但实际上它们叠加了内容框架中的相应组件。

层

图层是可以激活的独立功能束，用于：

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

图层为整个页面提供复杂的功能，而不是对单个组件执行特定操作。

AEM附带有已用于页面创作的多个层；包括编辑、预览、注释等。

层切换器

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

图层切换器可从工具栏（位于窗口顶部，在编辑器框架中）下拉出。

组件工具栏

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

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

更多信息

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

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