2.1 菜单栏和工具栏_Axure RP 9 高保真原型设计实例教程-QQ阅读男生都市网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

2.1　菜单栏和工具栏

菜单栏和工具栏位于Axure的上部，主要用于整体设置及快捷设置。本节主要讲解菜单栏中笔者认为重要的或常用的功能，如新建、保存、导出和备份文件；设置视图；设置项目；设置页面和元件的布局；预览、生成和发布原型；使用帮助等。另外，也对工具栏中重要的或常用的功能进行了重点讲解。

2.1.1　新建、保存、导出和备份文件

在“文件”菜单中有4个“新建”选项——“新建”“新建元件库”“新建团队项目”“新建团队元件库”。

当选择“新建元件库”选项时，要注意保存后的文件名是以.rplib结尾的。在元件库区域，单击“+”后，可以导入自己制作的元件库。在设计原型时，如果有使用频率较高的自定义元件，那么建议自制成库，并且导入文件中备用。选择导入的元件库时，单击按钮，可以选择“编辑元件库”或者“移除元件库”选项。

至于“新建团队项目”和“新建团队元件库”选项，按照软件要求的步骤，登录Axure云账号，新建项目文件夹名以及项目文件，创建即可。

另外，在Axure中，原型可以被导出为图片格式文件，如PNG、JPG、GIF、Bitmap等格式均可。

最后，在“文件”菜单中通过自动备份设置，能够保证用户的劳动成果，在一些不可预测的紧急状态下，不会蒸发得无影无踪。所以用户务必要勾选“启用备份”选项，备份间隔时间可以根据个人情况进行设置，但建议尽可能使间隔时间短一些。

2.1.2　设置视图

在“视图”菜单中，一般采用默认设置。也可根据个人需要，对某些配置进行修改。其中，日常使用会涉及的设置包括：“网格设置”“辅助线设置”“元件对齐设置”等。

“网格”选项卡中包括“间距”、“样式”和“颜色”3个参数。默认的“间距”是“10像素”，“样式”是“交点”，“颜色”是蓝色。

默认的“网格设置”对应的内容，可以通过勾选“显示网格”选项进行查看。

调整参数，将“间距”设置为30像素，“样式”设置为“线段”，“颜色”设置为橙色，修改后网格效果变化明显。

“辅助线”选项卡中包括“底层显示辅助线”“始终在标尺中显示位置”“全局辅助线颜色”“页面辅助线颜色”“页面尺寸辅助线颜色”“打印辅助线颜色”等参数。

在设置之前，需要先了解各个选项的具体含义。

“底层显示辅助线”是指辅助线置于元件底层。

“始终在标尺中显示位置”是指在刻度尺上显示辅助线的水平或者垂直坐标值。

“全局辅助线”是指将一条辅助线拖入至A位置，那么所有页面的A位置上都会有这条辅助线。

“页面辅助线”是指当前页面的辅助线，与全局辅助线的区别在于，全局辅助线辐射所有页面，而页面辅助线仅在当前页中显示。

“页面尺寸辅助线”是指页面尺寸边界的辅助线。

“打印辅助线”是指打印边界的辅助线，类似Excel中打印预览时的打印辅助线。

勾选“底层显示辅助线”选项后，辅助线都置于矩形底层；勾选“始终在标尺中显示位置”选项后，水平刻度尺上显示两条辅助线的X坐标值；全局辅助线是紫红色，页面辅助线是天蓝色，页面尺寸辅助线是紫色的虚线，打印辅助线是灰色的实线，效果如下图所示。

“元件对齐”选项卡中包括“边缘对齐”和“对齐辅助线颜色”两个参数。

拖入一个“矩形1”，再拖入一个“矩形2”，拖曳“矩形2”时不要松开鼠标，使“矩形2”靠近“矩形1”，当两个矩形水平或者垂直对齐时，会显示红色的虚线。这条虚线的颜色即元件之间，对齐辅助线的颜色。因为没有勾选“边缘对齐”选项，所以默认是“无”，只有在两个元件零接触时才会显示出来，下图红框内显示的即边缘对齐。勾选“边缘对齐”选项后，“垂直”和“水平”均设置为50像素，对齐效果将发生变化。

2.1.3　设置项目

“项目”菜单中的选项相对比较重要，包括“元件样式管理器”“页面样式管理器”“说明字段设置”“全局变量”“自适应视图”等选项。

“元件样式管理”对话框中都是系统默认的元件样式，可以进行增加、删除、修改、查找元件样式等操作。下图所示为新增的样式，其被命名为“我是新的样式”。

从元件库里拖入一个“矩形1”，在“样式”面板中，可以为元件启用自定义的样式。

“页面样式管理”对话框中是系统默认的页面样式，支持增加、删除、修改、查找页面样式等操作，但只有一个样式时，样式是不可以删除的。下图红框内所示为默认的页面样式。

下图所示为新增的页面样式，将其命名为“我的新页面样式”。

单击“确定”按钮后，在页面样式中选择刚刚自定义的页面样式，效果如下图所示。

在“说明字段设置”对话框中，包含“编辑元件说明”、“编辑元件字段集”和“编辑页面说明”选项卡。

如果想要增加说明的类型，则可在原有基础上，新添加3种字段，并设置为不同的类型。切换到“编辑元件字段集”选项卡，新建一个字段集，然后将刚刚新建的字段都纳入其中。拖入“矩形1”，在“说明”面板中添加的字段都显示出来了，表明这时可以对预设的字段添加说明了。

关于“编辑页面说明”选项卡，其操作与“编辑元件说明”选项卡一样，在“说明字段设置”对话框中新添加自定义页面字段，然后显示在“说明”面板中。

“全局变量”，其命名需要符合规范。这里要注意“全局”两个字，全局意味着包含所有页面。可以把它想象成一个背着空箱子的信差，把所有页面想象成各个收件人。你在这个箱子里赋予了什么值，就可以请信差背着这个值跑向其指定收件人处。全局变量的使用频率较高，是非常重要的配置。后面会在第4章的“锚点链接”案例中，重点讲解全局导航的用法。

“自适应视图”，根据预设的页面尺寸，可快速切换至不同的硬件规格上查看不同的页面布局。

例如，笔者打算做一款产品的原型设计，但这款产品的业务形态包括Web、iPad和iPhone，3个载体的尺寸又各不相同，分成3个文件制作非常麻烦，因此可以采用自适应视图的方式来制作。

这里需要注意继承的问题。如下图所示，Landscape Tablet是父视图，iPhone XR/XS Max、iPad 4是子视图。子视图继承父视图中的内容。

在“样式”面板中，单击“添加自适应视图”按钮，选择刚刚新建的视图设置。

这里有一个“影响所有视图”选项，如果勾选该选项，那么在任意视图中，对元件做出的位置、尺寸、样式的变更都将会影响其他视图，导致所有视图“长得一样”；如果不勾选该选项，那么在每个视图中均可以设置相应尺寸下的样式。不过还得注意一点：如果不勾选该选项，仅仅是样式不同，那么文字、图片甚至交互，都还是一样的。

关于自适应视图，这里打个比喻来帮助大家理解。

第一，继承，可以理解为儿女（子视图）获得了父母（父视图）的遗传基因（内容是一样的），兄弟姐妹间（子视图之间）是独立的。

第二，不勾选“影响所有视图”选项，则表明，虽然大家是一家人（存在继承关系），但还是有高矮胖瘦之分（样式不同）。儿女（子视图）长大了由不得父母（父视图），他们有很多父母不知道的秘密（子视图添加元件时，父视图不会添加），父母灌输给他们的话，儿女也左耳进右耳出了（父视图添加元件时，子视图也添加，但子视图可以将其删除而不影响父视图元件的存在），不过，他们的三观还是与父母保持一致的（文字、图片、交互等与父视图保持一致）。

第三，勾选了“影响所有视图”选项，则所有视图之间元件的位置、尺寸和样式的变化将会互相影响。