AEM触屏优化UI的结构

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

控制台

基本布局和调整大小

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

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

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

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

标题栏

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

• 徽标以及您当前使用的特定产品/解决方案；对于AEM，这也会构成指向全局导航的链接
• 搜索
• 用于访问帮助资源的图标
• 用于访问其他解决方案的图标
• 任何等待您的警报或收件箱项目的指示器（以及对该项目的访问权限）
• 用户图标以及指向配置文件管理的链接

工具栏

这与您的位置及界面工具相关，这些工具与控制以下页面中的视图或资产相关。 工具栏是特定于产品的，但是与元素有一些共同之处。

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

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

左边栏

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

• 时间线
• 引用
• 过滤器

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

页面创作

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

内容框架

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

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

编辑器框架

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

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

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

侧面板

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

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

侧面板 — 资产

在“资源”选项卡中，您可以从资源范围中进行选择。 您还可以根据特定术语进行筛选，或选择组。

侧面板 — 资产组

在资源选项卡中，有一个下拉列表，您可以使用它选择特定的资源组。

侧面板 — 组件

在“组件”选项卡中，您可以从组件范围中进行选择。 您还可以根据特定术语进行筛选，或选择组。

叠加

这些标记覆盖内容框架，并由 图层 实现与组件及其内容交互（完全透明）的机制。

叠加在编辑器框架中处于活动状态（包含所有其他页面创作元素），但它们实际上叠加了内容框架中的相应组件。

图层

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

• 提供页面的其他视图
• 允许您处理页面和/或与之交互

这些层为整个页面提供了完善的功能，而不是为单个组件执行特定操作。

AEM附带了已为页面创作实施的多个图层；例如，编辑、预览、注释。

图层切换器

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

图层切换器可以从工具栏的下拉菜单（在窗口顶部、编辑器框架中）中使用。

组件工具栏

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

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

更多信息

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

欲知更多技术信息，请参见 JS文档集 （触屏启用页面编辑器）。

Business.Adobe.com 资源

Auto Text Summarization Style System Cms Cloud Document Generation Content As A Service Content Management