AEM触屏UI的结构 structure-of-the-aem-touch-enabled-ui

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

控制台 consoles

基本布局和大小调整 basic-layout-and-resizing

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

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

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

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

标题栏 header-bar

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

工具栏 toolbar

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

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

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

左边栏 left-rail

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

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

页面创作 page-authoring

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

内容框架 content-frame

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

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

编辑器框架 editor-frame

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

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

侧面板 side-panel

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

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

侧面板 — 资产 side-panel-assets

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

侧面板 — 资产组 side-panel-asset-groups

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

侧面板 — 组件 side-panel-components

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

叠加 overlays

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

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

图层 layer

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

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

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

层切换器 layer-switcher

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

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

组件工具栏 component-toolbar

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

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

更多信息 further-information

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

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