01-自适应视图

1989字约7分钟

2024-06-04

自适应视图-Axure教程

自适应视图是为特定屏幕尺寸设计的页面的替代版本。它们允许您创建一个页面，然后再创建不同的自适应视图。每个视图对应一种屏幕尺寸范围，您可以重新排列、调整大小和重新设置元件样式。当您在 Web 浏览器中查看页面时，将自动显示浏览器尺寸的对应视图。

向页面添加自适应视图

要将自适应视图添加到页面，首先单击画布以聚焦页面本身。然后，单击样式窗格中的添加自适应视图。

如果您已经在项目的其他地方创建了一组自适应视图，系统会提示您从现有集合中进行选择或创建一个新视图。如果您尚未创建任何自适应视图，您将被直接带到“自适应视图”对话框，您可以在其中创建一组新视图。

要从页面中移除自适应视图，请单击样式窗格右上角的移除视图。

创建和管理自适应视图

自适应视图被组织成集合，并且您可以在一个项目中拥有多个集合。要创建新的自适应视图集或编辑现有视图集，请单击样式窗格顶部的添加/编辑自适应视图（页面聚焦），或使用项目 → 自适应视图集菜单选项。

要将新的自适应视图添加到集合中，请单击“自适应视图”对话框左上角的添加，然后使用右侧的字段配置视图。您可以自定义页面尺寸或从预设下拉列表中的许多流行设备尺寸中进行选择。新视图会自动分配一个父视图来继承，但您可以随时在继承下拉列表中为视图选择不同的父视图。

自适应视图继承

自适应视图集包含一系列组织成继承链的视图。该链中的第一个链接是所有视图的基础视图。您添加到集合中的每个视图都直接从基本视图或集合中的另一个视图继承其元件和元件属性。

例如，一个简单的移动优先项目的继承链可能如下所示：

iPhone 12 (基础) > iPad 4 > Desktop Small

在iPhone视图中所做的编辑也将反映在iPad和Desktop Small视图中。
在iPad视图中所做的编辑将反映在Desktop Small视图中，但不会反映在iPhone视图中。
在Desktop Small视图中所做的编辑只会影响该视图。

如果您的项目需要更多平台粒度，您可以创建多个继承链。例如，您可能需要一个链用于 Android 设备，一个用于 iOS 设备，一个用于桌面浏览器。不过，我们建议您在学习使用此功能时仅使用单个继承链。

在自适应视图中编辑图表

将一组自适应视图添加到页面后，您可以通过单击画布顶部的名称来访问每个视图。视图名称的颜色表示它是否会受到您在画布上所做的编辑的影响：

深蓝色：当前显示在画布上的视图。编辑将影响此视图。
浅蓝：影响所有视图复选框被选中。编辑将影响所有视图。
灰色：影响所有视图复选框未被选中。编辑不会影响所有视图。

此外，如果您在子视图中编辑元件属性，则在父视图中对同一属性的编辑将不再影响子视图。例如，如果您在子视图中将按钮的填充颜色更改为粉红色，然后在父视图中将相同按钮的填充颜色更改为绿色，则该按钮在子视图中仍将是粉红色，而不是绿色。为了充分利用自适应视图编辑继承的优势，我们建议您采用自上而下的方法来编辑您的图表，从基础视图开始，然后沿着链向下工作。