Axure中的“AdaptiveViews”（自适应视图）是什么

一、“Adaptive Views”（自适应视图）的作用

 

在Axure中（7和9的版本）我们更方便地创建自适应原型。我们可以通过这个功能——“Adaptive Views”（自适应视图）来实现这一点。

 

通过“Adaptive Views”（自适应视图），我们可以为某一屏生成不同的尺寸，并且针对不同的节点进行优化。节点是根据浏览器窗口的像素宽度和/或高度确定的。

 

二、如何规划自适应视图

 

如果我们的网站或应用有相关的尺寸统计，我们可以参考尺寸统计来设置节点。

 

当我们添加一个自适应视图时，可以根据宽度/高度来设置新的视图，也可以从软件提供的五个预设参数中选择。

 

五个预设参数如下：

Large display（大屏显示器）（1200×任意高度或以上）

Landscape tablet（平板电脑横屏）（1024×任意高度或以下）

Portrait tablet（平板电脑竖屏）（768×任意高度或以下）

Landscape phone（手机横屏）（480×任意高度或以下）

Portrait phone（手机竖屏）（320×任意高度或以下）

 

自适应视图继承父视图或基本视图中的属性。我们通常在基本视图（或默认视图）中完成主要的设计，再为每一个子视图添加额外的细节。

 

提示：在子视图中进行的修改不影响父视图。个人设计师或者团队在自适应视图设计过程中有两种主要的工作思路可供参考：

 

• 移动端优先：以最小尺寸为基本视图

每一个子视图以前一个视图为基础，逐渐放大

 

• 从大屏到小屏以最大尺寸为基本视图

每一个子视图以前一个视图为基础，逐渐缩小

 

三、如何管理自适应视图

 

我们可以参考以下步骤来管理自适应视图。

1．勾选检查窗口-属性标签下的“Adaptive-Enabled”复选框，在编辑窗口右上角会显示出自适应视图管理按钮。

 

提示：使用Axure 7的用户不需要做这一步，直接从步骤2开始操作。

 

2．单击工作区左上角“ManageAdaptive Views”（管理自适应视图）按钮，打开“Adaptive Views”对话框。

 

 

提示：

我们也可以从主菜单中打开“Adaptive Views”（自适应视图）对话框，其路径为“Project”（项目）—“AdaptiveViews”（自适应视图）。

 

 

3．单击绿色+按钮添加一个新的视图。

4．在“Presets”（预设）下拉菜单中，选择自己所需的尺寸设置内容。完成第一个尺寸的设置

 

 

5．再单击绿色+按钮继续添加新的视图。在“Presets”（预设）下拉菜单中，选设置第二个尺寸。

 

 

添加完所有需要的视图后，单击“OK”（确定）按钮关闭“Adaptive Views”（自适应视图）对话框。

 

提示：尺寸除了应用自带的尺寸之外，还可以进行自定义设置，输入自己实际所需的尺寸即可。

 

6．在所需的不同尺寸设置好之后，工作区的显示是这样子的。

 

此时我们可以看到自适应视图工具栏中多出了三个标签页，分别对应着我们设置的“Base”（基本）、“1024”和“768”三个不同视图。

 

提示：

通常情况下，工作区的顶端并不会显示基本视图或子视图的标签页。自适应视图的相关标签页仅在视图被创建之后才会显示。

 

标签页有蓝色、橙色、灰色和绿色四种颜色分别代表不同状态。在上述例子中，“基本”标签是蓝色的，表示这个视图当前是打开可编辑的状态。“1024”和“768”是橙色的，表示它们是子视图，如果当前选中视图的样式进行了更改，它们会受影响。

 

如标签页为灰色，表示它们不会被选中视图样式的更改所影响（例如，如果选中的是一个子视图，它的标签页将是橙色的，而相关父视图的标签页将为灰色）。如打开“768”视图之后，“1024”视图的标签页就是灰色的。

 

 

“Affect AllViews”（影响所有视图）选项被勾选，则标签页将变为绿色，这意味着所有的改动将影响所有的视图。 

 

 

“Adaptive Views”（自适应视图）是在7和8的版本中帮助我们制作不同尺寸页面的原型的。在Axure 9 之中取消了这一功能。如果你还在使用7或8的版本的话，这个功能可以了解一下。

 

参考内容：《Axure原型蓝图》-John Henry Krahenbuhl（卡恩布尔）著