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