AEM触屏UI具有多个基本原则,由几个关键元素组成:
虽然UI既适用于移动设备,也适用于桌面设备,但Adobe决定使用一种样式,该样式适用于所有屏幕和设备,而不是创建两种样式。
所有模块都使用相同的基本布局,在AEM中,这可以看成:
布局遵循响应式设计样式,并会根据您所使用的设备/窗口的大小来调整自身。
例如,当分辨率低于1024像素(与移动设备上的情况一样)时,显示屏将相应地进行调整:
标题栏显示全局元素,包括:
这与您的位置息息相关,而且还显示与控制以下页面中的视图或资产相关的工具。 工具栏特定于产品,但元素有一些通用性。
在任意位置,工具栏都会显示当前可用的操作:
还取决于当前是否选择了某个资源:
可以根据需要打开/隐藏左边栏以显示:
默认值为 仅限内容 (隐藏的边栏)。
创作页面时,结构区域如下所示。
页面内容在内容框架中呈现。 内容框架完全独立于编辑器,可确保不会因CSS或Javascript而发生冲突。
内容框架位于窗口的右侧部分工具栏下。
编辑器框架实现编辑功能。
编辑器框架是所有 页面创作元素. 它位于内容框架的顶部,包括:
其中包含两个默认选项卡,用于选择资产和组件;可以从此处拖放到页面上。
默认情况下,侧面板处于隐藏状态。 选择后,该窗口将显示在左侧,或滑过以覆盖整个窗口(当窗口大小低于1024像素的宽度时);例如,在移动设备上)。
在资产选项卡中,您可以从资产范围中进行选择。 您还可以过滤特定术语或选择群组。
在资产选项卡中,您可以使用下拉列表选择特定的资产组。
在组件选项卡中,您可以从组件范围中进行选择。 您还可以过滤特定术语或选择群组。
这些选项将叠加内容框架,并由 层 了解如何与组件及其内容进行(完全透明)交互的机制。
叠加图位于编辑器框架中(包含所有其他页面创作元素),但它们实际上会覆盖内容框架中的相应组件。
层是一个独立的功能包,可激活它以:
与对单个组件执行的特定操作不同,这些层可为整个页面提供复杂的功能。
AEM附带了多个已实施的页面创作层;包括编辑、预览、注释。
层是一个强大的概念,会影响用户对页面内容的查看以及与页面内容的交互。 在开发您自己的层时,您需要确保该层在退出时清理。
层切换器允许您选择要使用的层。 关闭后,它表示当前正在使用的层。
图层切换器可作为工具栏(位于窗口顶部的编辑器框架内)中的下拉菜单使用。
单击组件的每个实例都将显示其工具栏(单击一次或慢速双击)。 工具栏包含可用于页面上的组件实例(可编辑)的特定操作(例如,复制、粘贴、打开编辑器)。
组件工具栏位于相应组件的右上角或右下角,具体取决于可用空间。
有关触屏优化UI相关概念的更多详细信息,请继续阅读文章 AEM触屏UI的概念.
有关更多技术信息,请参阅 JS文档集 ,用于触屏优化页面编辑器。