布局模板和设计视频

布局模板和设计视频
使用布局模板和卡设计移动应用程序的外观。(8 分钟)
Adobe

了解布局、卡和浏览页面

布局模板用于确定如何在浏览页面中显示集合。集合中的项目在浏览页面布局中显示为卡。当您创建布局模板时,要执行以下操作:

  • 定义布局属性,如列数、边距和装订线值以及单元格形状。
  • 创建卡并定义卡外观。
  • 基于元数据设置映射规则以确定哪些内容与卡关联。

浏览页面的外观由布局设计、卡设计和集合项目的元数据设置决定。

浏览页面的 3 列布局
此浏览页面使用 3 列布局。该布局包含表示横幅、文章和其他集合的全宽、2x1 和 1x1 卡。

卡决定了浏览页面上的内容外观。缩略图图像可按不同的方式显示在不同大小的卡上,具体取决于布局设置。例如,在更新元数据后,之前显示在 3x1 卡上的缩略图图像可更改为显示在 1x1 卡上。

卡布局
黄色区域表示在 3 列布局(左)和具有不同单元长宽比的 5 列布局(右)中显示的同一 2x2 卡。

请注意下列事项:

  • 在布局模板内,您可以为平板电脑、手机和 Web 定义不同的布局(有时称为“再现”)。
  • 目前尚不支持将卡固定到网格上的特定位置。
  • 目前尚不支持使用映射规则确定内容的顺序。映射规则决定应用于卡的内容。

使用布局模板创建卡和布局

浏览页面创作工具是一种用于创建卡和布局的新方法。目前,您可以使用新的浏览页面创作工具或现有的“卡”和“布局”选项卡来设计浏览页面。

利用浏览页面创作工具,您可以使用相同的界面来创建布局、设计卡以及将卡映射到内容。在创建过程中,您可以指定在调整浏览页面设置时要查看的现有集合。您也可以更改目标设备大小,启用和禁用网格以及单击卡区域来编辑该文本或图像区域的设置。您甚至可以对已导入的集合中的项目进行重新排序。

您可以导入已创建的布局,以便基于现有布局的设置创建一个新版布局。

布局模板需要使用版本 2015.8(2015 年 12 月)或更高版本构建的应用程序。

 

  1. 创建集合并添加内容。

  2. 在点播门户(https://aemmobile.adobe.com) 中,单击“内容和布局” > “布局模板”

  3. 单击“创建”以从头定义布局模板。

  4. 定义布局属性。

    定义布局属性

    在浏览页面布局工具的右侧,指定布局名称,然后定义布局属性(如列数、边距和装订线间距)。

    导入集合

    单击“导入集合”,然后导入您的某个集合,这样便能查看您所做的更改对目标内容产生的影响。 保存布局时,您可以选择将布局应用于集合。您甚至可以重新排列集合中的项目。保存布局模板时,将会保存对集合所做的这些更改。

    预览菜单

    使用预览菜单可选择横向或纵向方向。选择目标设备大小。当您对布局进行更改时,请选择多个不同大小的设备进行预览,以确保您的设计适合所有目标设备。

  5. 创建卡。

    创建卡

    单击加号以创建卡。在最右侧的面板中,指定卡的名称并更改设置。在最右侧的面板中,选项的更改取决于所选的卡区域。

    要编辑文本区域,请展开左侧的卡属性并选择要处理的项(如图像或文本区域)。如果您不希望显示卡的元数据,请单击元数据旁边的“隐藏”图标。

    您还可以单击中心预览区域来编辑该区域的设置。试用预览区域上方的设置以更改缩放、显示布局或卡或者显示/隐藏内容。

  6. 定义卡的映射规则。

    定义卡的映射规则

    单击“映射”,然后单击所选卡旁的“添加规则”。

    定义映射属性。例如,您可以为重要性高的横幅设置一个规则。在设置映射规则时,您可以预览集合中分配给该卡的内容。

    拖动集合中的项可更改其顺序。当您保存布局模板时,系统将应用这些更改。

  7. (可选)创建其他布局(称为“再现”)来为平板电脑、手机和 Web 定义不同的外观设置,如后文所述。

  8. 保存并关闭布局模板。

    当您保存布局模板时,如果尚未为导入的集合分配布局,则系统会提示您将布局模板应用于该集合。

  9. 将布局模板分配给集合。

    您可在编辑布局模板或编辑集合属性时为集合分配布局模板。

    向集合分配布局

布局设置

布局可帮助确定集合浏览页面的外观。

如果要对手机和平板电脑使用不同的布局,可以在一个布局模板内定义多个布局(称为“布局再现”),如后文所述。 

指定这些布局设置。

单元长宽比

使用此选项可更改单元格形状(以宽度:高度比率表示)。例如,1:1 单元格是正方形,4:3 单元格是宽度大于高度的长方形,3:4 单元格是高度大于宽度的长方形。如果您指定了正数值,例如 3.5,则会创建 3.5:1 的长宽比。

列数

指定列的数量。请注意卡具有的列数不能多于布局的列数。

装订线和边距单位

指示要使用设备独立像素 (DIP) 还是百分比来指定装订线和边距值。装订线用于确定卡之间的间距。边距用于确定卡的外边缘和设备视图区域之间的间距。

布局背景颜色

指定浏览页面背景的颜色。此颜色显示在边距和装订线中,并且可通过卡透明度显示。

背景图像

如果选择此选项,则为集合背景图像指定的图像将显示浏览页面中。如果同时指定了“背景图像”和“布局背景颜色”,则“背景图像”优先。如果背景图像包含透明度,则显示背景颜色。背景图像为全屏并自动缩放来填充。它也是静态的:卡在集合背景前面滚动。

卡设置

在创建卡时,您将指定设计特征,定义卡跨越的布局单元格的数量,并指定其他属性。但是,您不用指定与卡关联的内容 - 您将在设置映射规则时执行此操作。

实际的卡形状和大小由卡所应用于的布局决定。例如,应用于 3 列布局的 3x2 卡看起来与应用于 12 列布局的 3x2 卡差别很大。

指定设置时,预览区域使用导入的集合内容显示卡的大致外观。

在为信息卡指定设置时,请务必理解一些概念,如卡上的不同项目如何互相交互。

顺序或层次结构

卡背景位于布局的上方。卡图像区域位于卡背景的上方。卡文本区域位于卡图像区域的上方。

卡图像

将根据需要对集合、文章、横幅和集合背景的图像进行居中、缩放和裁剪以填充卡图像区域。

卡将显示在集合浏览页面中。卡可以具有某些属性,它们是半透明的并显示集合的背景颜色或图像。卡的某些部分可以是半透明的,用于提高文本的易读性或为图像着色,但卡图像是不透明的。

卡格式

在指定“图像左侧”或“图像右侧”卡格式时,请确保显示卡的布局上留下足够的空间,让图像区域和文本区域元数据能够并排显示。要防止文本区域被裁剪,您可能需要更改布局的单元长宽比或增加卡宽度。

背景、边框和边距

卡可以具有颜色和透明度。卡颜色充当卡图像和文本区域的背景。

卡背景可由图像、文本区域和边框覆盖。图像和文本区域位于卡背景前面。图像和文本区域都具有边距。

边距会将图像和文本区域从卡的边缘移开。指定边距反映了您如何显示半透明卡背景。图像可以具有带透明度的颜色叠加,用来为图像着色。文本区域也可以具有填充,用来将标签(元数据)从文本区域的边缘移开。

文本区域还具有支持透明度的颜色背景。您可以使用颜色背景来增加对比度或提高文本的可读性。

边框是不透明的,用于将所有内容从卡的边缘向内推。如果您希望为卡设置半透明且与布局背景交互的边缘,请对图像或文本区域使用边距。如果只是希望在卡之间设置间距,请在布局中使用装订线。

卡设置选项
卡图像区域位于卡背景的上方。卡文本区域位于卡图像区域的上方。

设备独立像素 (DIP)

设备独立像素 (DIP) 是供应用程序使用的像素的抽象,基础系统随后会将其转换为物理像素。例如,通过指定 10 dip 边框,在 1024x768 SD iPad 和 2048x1536 HD iPad 上显示时将具有相同的相对大小。

元数据字段

定义元数据字段时,您可以在同一个字段中包含文本和最多两个元数据项目。例如,如果您将元数据字段定义为 {{title}} by {{author}},则卡将显示类似“Fishing in Argentina by Jane Doe”的文章元数据。或者,您也可以为 {{title}}{{author}} 创建单独的字段,以便让元数据显示在卡的不同行上。

如果映射到卡的内容不包括指定字段的元数据,则忽略该字段,除非该字段包含其他文本,如 by {{author}} 中的“by”。默认情况下,卡包含三个元数据字段。单击最左侧窗格中的“眼睛”图标来隐藏或显示每个元数据字段。

选择{{发布日期(默认)}}元数据项时,设备区域和语言用于确定格式。例如,日期在英语(美国) 中显示为 MM/DD/YYYY,在德语中为 DD/MM/YYYY。

您可以使用门户的“字体和应用程序自定义”部分选择已上传的任何自定义字体。请参阅自定义 AEM Mobile 应用程序:使用自定义字体

将内容映射到卡

设置映射规则,以确定哪些卡应用于基于元数据的内容。例如,您可以创建一个将大卡应用于任何优先级设置为“高”的文章的映射规则,并可以创建另一个将较小的卡应用于任何优先级设置为“正常”的文章的映射规则。

对于每块内容,将按顺序评估映射规则。将应用第一个与内容元数据匹配的映射规则。内容必须符合所有指定的规则设置。例如,如果映射规则包含设置为“横幅”的类型和设置为“高”的重要性,则内容必须是具有高重要性的横幅才能应用该规则。

例如,假设您创建了一个 3x1 卡和一个 1x1 卡。创建类型设置为“文章”且重要性设置为“高”的第一个映射规则。对于 1x1 卡,创建另一个未指定元数据的映射规则。在此示例中,3x1 规则应优先于 1x1 规则;否则,1x1 卡将分配到高重要性文章。

规则设置中使用的元数据区分大小写。创建包含“blue”内部关键字的规则不适用于包含“Blue”关键字的内容。如果内容包含多个关键字,则映射规则只需要与其中一个关键字匹配即可符合该设置。

请注意,卡映射并不决定内容在浏览页面上的顺序。它只决定映射到卡上的内容。

活动规则

使用“活动规则”选项仅将卡应用于符合标准的指定数目的项目。例如,您可以创建一个仅将宽卡应用于集合中第一项的映射规则。编辑规则时,选择“活动规则”>“有时”,然后指定要对其应用此规则的项目数。

在此示例中,此规则仅将大卡应用于集合中的第一个项目。

映射元素

使用“映射元素”选项,将卡应用于符合标准的每 n 张卡。例如,如果要创建交替卡,请创建一张将规则应用于每 2 张卡(从符合规则的第 1 个项目开始)的卡。在此示例中,每个以第 2 个项目开始的其他项目将根据匹配标准的下一规则进行格式化。

此规则将卡应用于其他所有项目。将下一符合条件的规则应用于其他交替项。

手机和平板电脑的布局呈现

 

布局再现提供了设计灵活性,允许您在平板电脑、手机和桌面 Web 查看器上为同一集合定义不同外观。使用这个新功能,现在可以在保持设计控制的同时为所有支持的平台提供相同内容。创建布局模板时,您可以为平板电脑、手机和 Web 定义不同的布局和卡设置。每个目标设备的再现设置决定了浏览页面的外观,具体取决于该设备。

布局再现对于具有 1 个顶级集合的项目特别有用,但是,在您将任何相同集合同时用于手机和平板电脑时,布局再现对于具有 2 个顶级集合的项目也很有效。

在下面的示例中,此布局模板中的卡在平板电脑和手机上具有不同的外观。

当您创建布局模板时,初始仅创建平板电脑再现。这是应用到平板电脑、手机和 Web 的默认再现,除非添加了新的手机或 Web 布局。为手机或 Web 添加一个布局(也称为“再现”)时,新的再现会继续采用默认平板电脑再现的设置。此后,对卡或布局设置的任何更改都将仅应用到该再现。(卡映射规则应用到所有再现。)

注意:

如果您在这一过程中过早创建了一个布局,以后发现这样做过早了,可以删除该再现,更改应用到所有再现的设置,然后重新创建再现。

  1. 创建一个布局模板。创建卡并应用映射规则。指定应用到所有目标设备的设置。

    作为最佳做法,我们建议您以平板电脑布局为基础,向其中添加卡和映射规则,然后更改应用到所有设备的卡和布局设置。接着,创建一个手机布局并更改仅应用到手机的设置,还可以接着创建应用到 Web 的布局(如果必要)。这样,可以避免为每个再现指定相同的设置。

  2. 要创建手机再现,请单击“手机”>“添加布局”,然后单击“创建布局”。选择“手机”后,指定手机特有的卡和布局设置。

  3. 要创建桌面 Web 查看器的再现,请单击“Web”>“添加布局”,然后单击“创建布局”。选择“Web”后,指定桌面 Web 查看器特有的卡和布局设置。

  4. 保存布局模板,并将它应用到集合。测试结果。

    布局再现需要使用版本 2015.8(2015 年 12 月)或更高版本构建的应用程序。

要删除一个布局,请单击以显示布局下拉菜单,然后单击垃圾桶图标。您不能删除默认布局。

要更改目标预览大小,请从“设备”菜单中选择不同的大小。

要更改默认布局,请单击以显示布局下拉菜单,然后选择“设置默认”。然后将该默认布局用于任何未指定的设备类型。例如,如果您只有手机和平板电脑布局,并将手机设置为默认布局,则将手机布局应用到 Web。

使用菜单更改预览选项、设置默认布局或删除布局。

卡的顺序

一般来说,集合中的内容的顺序决定了布局中的内容的顺序。但是,如果卡的排列在布局中沿着边缘留下了空白,则内容的顺序可能会更改,因为边缘空白可能由排位靠后的较小的卡填充。例如,假设某个 3 列网格中的第一篇文章是 2x1 卡,第二个项目映射到 3x1 卡,第三个项目映射到 1x1 卡。在这种情况下,1x1 卡将显示在第二个项目上方的顶行的空白中。

设置卡的顺序
第三个项目移动到第二个项目前面以填充空白。

删除卡和布局

要删除布局或布局模板,您必须先从集合中删除对它的所有引用。具体而言,编辑集合以分配其他布局。在向集合应用其他布局后,如果这些集合已发布过,则您必须重新发布它们。然后,您可以取消发布布局或布局模板并将其删除。

要删除不是布局模板一部分的卡,必须首先删除对它的所有引用。具体而言,编辑布局以删除或编辑引用了该卡的所有映射规则。删除或编辑布局映射规则后,如果这些布局已发布过,则您必须重新发布它们。然后,您可以取消发布卡并将其删除。(如果卡是布局模板的一部分,您可以随时删除它。)

您无法删除默认卡或默认布局。

将布局复制到其他项目

您可以将一个项目中的布局模板复制到同一帐户内的其他项目。如果目标项目包含一个具有相同名称的布局模板,则您可以确定是覆盖现有布局还是复制一个新布局。

  1. 选择您要复制的布局模板,然后选择“将布局复制到其他项目”

  2. 在您帐户中的可用项目列表中,选择您要将布局复制到哪一项目。

  3. 如果您希望使用复制的布局替换目标项目中名称相同的布局,请选择“覆盖(若存在)”

    如果您未选择此选项,则在目标项目具有与复制的布局相同的名称时会显示一条错误消息。

  4. 单击“复制到目标”

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略