针对移动设备优化应用程序布局

查看应用程序

首先，您将查看应用程序以确定需要针对小屏幕设备修改的元素。

登录到您的 ArcGIS 组织账户。
注：
如果您没有组织账户，请参阅软件访问权限选项。
在功能区上，单击应用程序按钮，然后选择 Experience Builder。
提示：
或者，您可以直接访问 Experience Builder 站点。
随即显示 Experience Builder。主页列出了您最近创建的体验。
单击新建按钮。
模板列表随即显示。模板具有您可以修改的预配置布局和微件。您将使用为本教程创建的公园信息应用程序模板创建一个应用程序。
单击 ArcGIS Online 选项卡。
在搜索栏中，键入 Great Smoky Mountains National Park owner:Learn_ArcGIS。在结果列表中，对于 Great Smoky Mountains National Park (Tutorial)，单击创建。
提示：
正确的模板具有一个显示公园照片的缩略图。指向模板名称，您可以查看模板的全名。
使用模板创建应用程序。您将转到一个编辑器，可以在其中根据需要进行更改。
该应用程序包含七个页面，可以从主页导航到这些页面。虽然该应用程序看起来已经完成，但它仅适用于桌面屏幕。您将更改显示以查看小屏幕设备的显示效果。
在功能区上，单击编辑页面以适应小屏幕设备按钮。
注：
通过按钮旁边的尺寸下拉菜单，可以预览应用程序以获得更具体的屏幕尺寸。但是，您只能为三种通用设备模式重新排列布局。
应用程序布局随即发生变化。
应用程序中的许多元素现在过小，而无法阅读文本，标题文本也不再适合页眉。
默认情况下，应用程序的页眉和正文使用自动布局。在此布局中，Experience Builder 会自动进行更改。您需要对此应用程序进行多项自定义更改，以针对移动设备进行优化。

编辑正文

该应用程序的主页包含两个组成部分：页眉和主体。页眉位于页面的顶部，包含标题、徽标和导航按钮。正文是页面的下半部分，包含主要内容。首先，您将编辑正文。

对于正文，单击自定义。
随即出现一条消息，提示您启用自定义后，可以通过独立于其他设备模式的方式，手动排列微件。
对是否确定启用？，单击确定。
您现在可以对正文进行编辑。首先，您将更改当前条件按钮。在小屏幕上，其文本会被截断。
单击当前条件按钮微件。
随即出现一个窗格，其中包含用于编辑微件的选项。
在当前条件窗格中，单击样式选项卡。
您将使按钮居中，调整其宽度，并更改其相对于正文中心的位置。
单击水平居中按钮。
在大小和位置下，对于宽度，键入 50。在相对位置图表上，单击数字，然后键入 5。
这些更改将自动应用至预览中的按钮。现在，按钮的宽度足以显示所有文本。它还被移动到正文的顶部，为您调整其余内容留出更多空间。
在功能区上，单击保存按钮。
注：
对小屏幕设备的微件进行大小和位置更改不会更改其他屏幕尺寸的设置。如果单击编辑页面以适应大屏幕设备按钮，您将看到该布局未发生任何变化。但是，删除某个微件的情况除外。在一个视图中删除一个微件会在所有视图中删除该微件，因此请注意，切勿删除任何要保留的内容。
接下来，您将修复在小屏幕上被挤压的五张卡片。尽管您可以像对当前条件按钮执行的操作一样尝试对其进行移动和调整大小，但由于它们过大，因此无法在当前状态下全部显示在屏幕上。
您会将卡片移至待定列表。待定列表是在一种屏幕尺寸中隐藏微件而不将其从其他屏幕尺寸中删除的方法。如果您希望在不同的设备模式下使用不同的微件，或者如果您希望更改除大小或位置之外的微件设置，则建议使用待定列表。
单击访客指南卡片（最左边的卡片）。在微件工具栏上，单击移至待定列表按钮。
该微件随即从视图中消失，但并未从应用程序中将其删除，该微件仍现实在其他屏幕尺寸上。（如果删除了该微件，则也会从其他屏幕尺寸中将其删除。）
注：
要查看待定列表，请在插入微件窗格上单击待定选项卡。您可以随时从待定列表中重新添加微件。
将其他四张卡片移至待定列表。
现在您已经释放了空间，您将添加按钮来替换移至待定列表的卡片。当前条件按钮不会占用很多空间并且在移动设备上可读，因此您将复制其样式。
单击当前条件按钮。在工具栏上，单击复制按钮。
随即出现名为 Current Conditions 2 的按钮副本。您将对其重命名并更改其文本。
在当前条件 2 窗格中，单击窗格标题，然后键入 Visitor Guide。对于文本，将文本替换为 Visitor Guide。
要将此按钮与当前条件按钮区分开来，需要更改其外观。复制按钮时出现的快速样式窗口提供了一些默认样式选项，但您可以在按钮窗格的高级部分中进行更具体的更改。
在访客指南窗格中的背景下，单击填充颜色。
您需要将颜色更改为《国家公园管理局风格指南》中使用的棕色阴影。
在颜色选取器中，单击更多。对于 HEX，键入 #6f4930。
接下来，您将设置按钮的链接，使其转到应用程序的相应页面。
在访客指南窗格中，单击设置链接。
在设置链接窗格中，对于链接至，选择页面。对于选择页面，选择访客指南。
单击确定。在应用程序预览中，关闭快速样式窗口，然后拖动访客指南按钮，使在当前条件按钮下方约 25% 位置居中。
提示：
移动按钮时屏幕上出现的蓝色参考线显示了按钮与其他元素的距离。红色参考线显示了按钮与其他元素的对齐方式。
复制访客指南按钮四次。通过以下方式编辑每个重复按钮的名称、文本和链接：
- 对于第一个按钮，将名称和文本编辑为 Park History，然后设置指向 Park History 页面的链接。
- 对于第二个按钮，将名称和文本编辑为 Trail Information，然后设置指向 Trail Information 页面的链接。
- 对于第三个按钮，将名称和文本编辑为 Biodiversity，然后设置指向 Hemlock Forests 页面的链接。
- 对于第四个按钮，将名称和文本编辑为 Visitor Survey，然后设置指向 Visitor Satisfaction Survey 页面的链接。
在应用程序预览中，拖动每个按钮，使其位于前一个按钮下方 5% 的中心位置。
这些按钮即使在小屏幕上也清晰易读，并且具有与原始桌面应用程序中的卡片相同的导航选项。
保存应用程序。

编辑页眉

现在您已经完成了正文的编辑，您将编辑页眉。标题包含三个微件：一个用于标题，一个用于徽标，一个包含指向所有应用程序页面的链接。目前，微件被切断且相互重叠。

对于标题，单击自定义。对是否确定启用？，单击确定。
在应用程序预览中，指向页眉并单击编辑页眉。单击标题 (Great Smoky Mountains National Park)。
Hemlock Title 窗格随即出现，其中包含标题微件的设置。您将缩小字号。
您可能还记得，仅可更改微件的大小和位置设置，而不会影响其他设备模式下的微件。这意味着更改文本大小也会在桌面应用程序中更改它，而无需调整文本大小。
为避免此问题，您将复制标题并将原始标题移动至待定列表。然后，您将更改重复标题的文本大小，使标题适合移动设备的大小，而无需在其他设备上进行更改。
在应用程序预览中，在标题的微件工具栏上，单击复制按钮。
默认选中重复的标题。
再次选择原始标题。在微件工具栏上，单击移至待定列表按钮。
选择重复的标题。在 Hemlock Title 2 窗格中的文本格式下，将文本大小更改为 16 像素。
重复标题未与页眉中心对齐，因此您需要调整其样式设置。
在 Hemlock Title 2 窗格中，单击样式选项卡。对于宽度，键入 225 像素。
单击水平居中按钮。单击捕捉到顶部按钮，然后选择垂直居中。
页眉中的标题居中，但仍与其他微件重叠，导致其不可读。接下来，您将缩小徽标。由于重叠，单击应用程序预览上的徽标存在难度，因此您将打开页面上所有微件的列表以更改其设置。
在左侧工具栏上，单击页面按钮。
随即显示应用程序中所有微件的列表，按页面排序。默认情况下，显示主页。
在大纲的页眉下，选择徽标。
随即在应用程序预览中选择徽标，并显示其设置面板。您只希望调整它的大小并更改其位置。
在应用程序预览中，拖动徽标的一角以将其调整为大约 62 像素的宽度。将徽标重新定位到标题的左侧。
提示：
您可以调整徽标（或任何其他微件）的大小和位置，方法是使用微件窗格中的大小和位置工具，或者在预览中调整微件的大小和重新定位。使用您偏好的任何方法。
接下来，您将更改指向其他页面的链接菜单。由于您已在正文中创建了按钮，因此无需在页眉上显示所有链接。您将使用专为小屏幕尺寸定制的图标替换当前菜单。
在页面窗格中的大纲下，单击菜单。
在应用程序预览的微件工具栏上，单击复制。将原始菜单移动到待定列表并重新选择复制的菜单。
在菜单 2 窗格的内容选项卡上，对于类型，选择图标。
单击样式选项卡。将宽度更改为 30 像素，并将图标重新定位到标题的右侧。
更改后，页眉过高。您将针对小屏幕设备降低其高度。
在页面窗格中，单击主页。
主页窗格随即出现，其中包含主页选项。
在主页窗格中的页眉下，将高度更改为 70 像素。
注：
更改页眉高度可能会重新定位页眉中的某些元素。如有必要，请重新放置。
保存应用程序。或者，在功能区上，单击实时视图以查看和测试您完成的应用程序主页。