Axure PR 9 认识元器件

---

大家好，我是大明同学。

接着上期内容，这期内容一起认识一下Axure设计原型图所使用的元器件。

形状

默认元件库的基础元件中的各种框、按钮、标题、占位符以及标签和段落都是形状元件，图标元件库中可用的图标也是形状，用钢笔工具绘制的任何元件也是形状元件。

Axure RP附带了各种现成的形状，可以在元件库中访问，要将形状添加到原型中，点击插入菜单，选中窗格中的图形拖放到画布上。

菜单界面左上角的插入菜单中包含许多形状，选择一个形状，单击并拖动到画布上，可以在拖动时按住SHIFT来限制其尺寸，也可以使用快捷方式绘制常用的形状:

·R矩形

·O椭圆形

·L线

·T文本(段落元件)

·P手绘钢笔工具

图片

图片元件可以将静态图片和动态GIF添加到设计中，支持:JPG，PNG，GIF，BMP和SVG文件类型。

将空白图片元件从元件库拖到画布上，双击图片或右键单击选择导入图片，就可以添加图片文件，加载图片时，图片元件将自动调整为导入图片的原始尺寸。

防止图片元件调整大小，在导入图片文件之前选择并双击大小调整手柄，调整大小手柄将从黄色变为白色，表示适合图片功能已关闭。

通过双击调整大小手柄或单击样式中的适合图片再次启用自动调整功能。

编辑图片

通过样式窗格顶部的颜色调整菜单调整图片的颜色，选中调整颜色框，使用滑块或下面的数字字段更改图片的色相，饱和度，亮度和对比度。

单击重置字段回到默认值，或取消选中颜色将图片切换回默认值，不会影响每个属性的选择。

裁剪和切片

右键单击所选图片，进行切割或裁剪，在上下文菜单中选择任一选项，也可以使用S和C快捷键。

* 还可以自定义顶部的工具栏，添加“切割”和“裁剪”按钮。

切片工具将图片分为几个部分，每个部分都成为一个新的图片元件，可以使用水平，垂直或交叉切割进行切片，裁剪工具包含几个选项:

裁切: 删除选择框外图片的所有部分

剪切: 删除选择框中的图片部分并将其复制到剪贴板

复制:复制选择框中的图片部分，并使原始图像保持不变

要水平或垂直翻转图片，右键单击它，然后转到变换图片→水平翻转或垂直翻转。

固定边角

右键单击图片元件，在上下文菜单中选择变换图片→固定边角。

三角形标记会出现在图片顶部和左侧，指示图片其余部分不会调整大小的区域，可以拖动三角形标记调整保留区域的大小。

* 无法在空白图片元件上保留角落，尝试执行此操作之前，确保将图片文件加载到元件中。

旋转图片

样式窗格顶部的旋转字段可以旋转画布上的选定图片，旋转角度支持正和负的度值，最多两位小数，正值将图片向右旋转，而负值将图片向左旋转。

清除图片

在样式窗格中，单击填充图片，然后单击预览图片右上方的红色X。

添加编辑文本

通过以下选项将文本添加到图片或编辑元件文本:

·右键单击图像，在上下文菜单中选择编辑文本。

·按住CTRL(Windows)或CMD(Mac)，双击图片以进入文本编辑模式。

·选择图片，开始输入。(仅当你禁用了单键快捷方式时，此选项才可用)

优化最大图片

大图会增加RP文件的大小，影响Axure RP和浏览器中的性能，优化图片可以减小文件大小，从而减小RP文件的大小，但是会降低图片质量。

大图导入Axure RP时，系统会询问是否进行优化，还可以通过右键单击，在上下文菜单中选择转换图片→优化图片来优化RP文件中已有的图片。

* 优化PNG将删除可能具有的任何透明度，而优化动画GIF将删除动画。

可以在一组形状，线条，图片或动态面板元件之间创建关系，通过“设置选择/选中”操作一次只能将一个元件设置为其选定状态。(类似于单选按钮组中单选按钮之间的关系。)

热区

热区是特殊元件，在浏览器中不可见，需要在没有合适设计区域的元件上增加交互事件时使用，例如在热区添加图片的特定区域或将锚点位置添加到长页面时。

* 不需要热区可向一组元件添加交互性，将元件放入元件组中，并在父组的事件上配置交互。

热区元件位于“默认”元件库的“通用”中，从“元件库”窗格中将其拖放到画布上。

默认情况下热区会用绿色遮罩覆盖，以便可以在画布上看到，可以在应用程序菜单的“视图”→“遮罩”中切换遮罩。

* 元件遮罩，包括热区遮罩不会再浏览器上显示。

线

Axure RP附带了一些现成的线，在元件库默认元件中访问这些线，包括“公共”水平线和垂直线以及“标记”中的箭头。

线条工具

使用“线条”工具在画布上绘制直线，工具可以在界面左上角“插入”菜单中找到，也可以通过“L”快捷键激活工具，然后在画布上单击并拖动以绘制线条，拖动时按住SHIFT将以45°增量捕捉线。

钢笔工具

使用钢笔工具绘制直线、曲线、锯齿状、波浪状、螺旋状或任何其他类型的线条，可在界面左上角的“插入”菜单中或通过 P 快捷方式使用。

钢笔工具的工作方式与其他矢量绘图应用程序中的等效工具类似:

·单击画布以添加新的矢量点。

·单击并拖动以添加弯曲点。

·拖动时按住 SHIFT 以将曲线手柄自动对齐到X或Y轴。

·拖动时按住 ALT 可独立移动拖动手柄。

·双击画布或按 ESC 创建一个开放路径形状。(一条线)

* 如果绘制具有两个直线矢量点的开放形状，在“概要”窗格中标记为“线”，弯曲点或者使用两个以上的点，标记为“形状”，可以像设置其他线元件一样进行样式设置。

曲线

除了使用“钢笔”工具绘制曲线外，还可以弯曲已经创建的直线，选择线并双击边框编辑其矢量点。

沿直线单击，添加任意数量的新点，双击一个点使其弯曲，或右键单击，在上下文菜单中选择“曲线”，可以拖动点的曲线手柄以调整曲线的宽度和方向。

线样式及箭头

使用“样式”窗格中的“边框”属性设置线条的样式:

·颜色

·线宽

·模式

·箭头(行的两端可以有不同的箭头)

通过以下选项将文本添加到线元件或编辑其当前文本:

·选择该行并按ENTER进入文本编辑模式。

·右键单击该行，然后在上下文菜单中选择“编辑文本”。

·选择行并开始输入。(仅当你禁用了单键快捷方式时，此选项才可用)

动态面板

动态面板是一个容器，它将其他元件保存在“状态”集合中，动态面板可以有一种或多种状态，并且一次只能看到其中一种状态，使用“设置面板状态”操作动态设置可见状态，动态面板适合创建轮播和幻灯片。

动态面板是唯一可以在浏览器中拖动或滑动的元件， 也是唯一可以固定到浏览器的元件。

元件库中有一个空的动态面板元件，从“元件库”窗格拖到画布上的动态面板将以一个可以添加元件的空状态开始。

* 默认情况下，动态面板的尺寸是固定的，点击启用“自适应内容”，可以调整大小。

选择一个或多个元件，单击鼠标右键，然后在上下文菜单中选择“创建动态面板”，可以使用画布上已有的元件创建新的动态面板。

动态面板默认情况下覆盖蓝色遮罩，可以在应用程序菜单的“视图”→“遮罩”中切换遮罩。

* 元件遮罩，包括动态面板遮罩，不会在浏览器中显示。

管理状态

双击画布上的动态面板进入编辑模式，状态包括蓝绿色边框和画布周围的工具栏指示。

在动态面板的状态下添加，删除和编辑元件，还可以通过单击画布右上方的“隔离”来切换动态面板外部元件的可见性。

单击画布顶部的当前状态名称，在显示的下拉菜单中，可以编辑动态面板本身的状态，执行以下操作:

·单击状态名在画布上查看包含元件。

·单击状态名右侧的复制状态图标可以复制状态。

·单击状态名右侧的刷除状态图标可以删除状态。

·单击下拉菜单底部的添加状态以创建新状态。

·上下拖动状态名称以对其进行重新排序(最上面的状态是默认情况下可见的状态)。

在“概要”窗格中选择一个动态面板状态或包含的一个元件，可以在画布上打开状态进行编辑。

拖动到“概要”窗格中，可以快速将现有元件移入或移出动态面板状态。

将鼠标悬停名称上，单击右侧的“添加状态”图标，可以将新状态添加到动态面板。

同样，鼠标悬停在名称上，单击右侧的“复制状态”图标可以复制状态，选择一个状态，按Delete键删除，或者右键单击并在上下文菜单中选择删除。

上下拖动或右键单击，使用上下文菜单中的选项，可以重新排列动态面板状态，顶部状态默认情况下可见的状态。

* 如果动态面板妨碍画布上的其他元件交互，可以通过“概要”窗格中单击名称右侧的“从视图隐藏”图标来暂时隐藏，在画布上隐藏面板，浏览器中仍将可见，要再次显示面板，再次单击该图标。

在动态面板上单击鼠标右键，然后在上下文菜单中选择“从首状态脱离”，可以将动态面板包含的所有元件放在面板外部的画布上。

* 如果动态面板只有一个状态，使用从首状态脱离也会删除该动态面板。

使用“样式”窗格中的以下选项来设置动态面板状态的样式，每个状态对每个属性都有自己的选项，因此可以为所有样式设置相同或不同的样式。

·填充颜色或图片:这些是背景属性，填充颜色或图片仅在动态面板未覆盖元件的区域中可见。

·边框颜色、类型和可见性:状态边框在所包含的元件上层呈现，因此粗边框可以在面板状态的边缘处重叠或切断元件。

·外阴影:阴影在动态面板下方渲染，在“样式”窗格中选择的移值始终可见。

·圆角半径和可见度:面板状态的圆角在其所包含的元件之前显示，因此圆角可以在面板状态的四角遮挡或割除元件。

* 选择动态面板本身时，对这些样式选项所做的更改仅应用于面板的第一个状态。

将动态面板设置为“自适应内容”可使宽度和高度依据包含元件自动调整大小。

在“样式”窗格中选中或取消选中“自适应大小”框，或双击动态面板的任意一个调整大小手柄。

* 通过“样式”窗格中的“ 宽”和“高”字段或拖动面板的调整大小手柄来手动调整动态面板的大小，“自适应内容”将被自动禁用。

通过调整动态面板的大小，让状态的内容更短或更窄使，动态面板的内容支持滚动，这将关闭“自适应内容”并隐藏任何超出动态面板边界的元件。

启用滚动，在“样式”窗格的“滚动”下拉列表中选择以下选项之一：

·按需滚动

·水平滚动

·垂直滚动

* 动态面板只能在浏览器中滚动，滚动条的样式由浏览器控制，模拟滚动条将出现在Axure RP的动态面板上，但不起作用。

使用“100%宽”动态面板使背景颜色或图片跨越浏览器窗口的整个宽度。

首先为动态面板的第一种状态设置背景颜色或背景图片，在“样式”窗格中选中“100%宽度”，在浏览器中查看原型时，背景颜色或图片将扩展窗口的整个宽度，调整窗口的大小，动态面板的宽度(及其背景)将自动调整。

* 属性仅调整动态面板本身的大小，包含的元件不受影响。

“固定到浏览器”选项将动态面板固定在相对于浏览器窗口的位置，在滚动页面时不会移动，使用此选项可以构建始终可见的导航标题和模式窗口之类的东西。

1.选择一个动态面板，在“样式”窗格中单击“固定到浏览器”。

2.在对话框中，选中“固定到浏览器”启用功能。

3.在下面，配置面板的水平和垂直位置。

* 根据Axure RP画布上动态面板的X和Y坐标自动设置“左”和“上”图钉选项的边距，更改边距，在画布上移动“动态面板”。

4.如果希望面板始终显示在页面上所有其他元件的前面，选