元件使用.png

一、基本操作

1. 添加元件：从左侧元件库中直接拖拽元件至设计区域，也支持从其他页面复制元件并粘贴进来。
2. 移动元件

• 直接拖拽元件至任意位置。
• 使用方向键移动元件位置，每次移动1像素。
• Shift+方向键移动元件，每次移动10像素。
• Alt+拖拽元件（Mac系统为Option+拖拽元件），快速复制元件并将新元件移动到指定位置。
• Shift+Alt+拖拽元件（Mac系统为Shift+Option+拖拽元件），快速复制元件并水平或垂直移动元件至指定位置。

3. 改变元件尺寸

• 选中元件，拖动元件周围的手柄。
• 原型、矩形等形状类元件，拖拽手柄时按住Shift键，可以等比例调整元件的宽度和高度。
• 通过顶部工具栏或右侧样式面板中，直接输入元件的宽度值和高度值，也支持同时选中多个元件，改变这几个元件总的宽度与高度。

4. 旋转元件：选中元件，Windows按住Ctrl键，Mac按住Command键，将鼠标移至手柄周围并上下拖拽鼠标，也可以通过右侧的样式面板直接输入旋转角度。需要注意的是，样式面板的旋转角度为顺时针方向。
5. 元件组合：选中多个元件，右键菜单选择组合（windows快捷键Ctrl+G，Mac快捷键Command+G），也可以直接点击工具栏中的组合按钮。
6. 元件的对齐与分布：选中多个元件，可以通过右键菜单或顶部工具栏针对这些元件进行对齐和分布。对齐方式分为：左侧对齐、水平居中对齐、右侧对齐、顶部对齐、垂直居中对齐、底部对齐。分布方式分为水平分布和垂直分布，至少3个元件才可以设置分布方式。
7. 跳转链接：选中元件，点击右侧交互面板中的单击事件，设置跳转页面，选择页面打开方式（当前窗口/新窗口/弹出窗口/父级窗口）。
8. 元件选择模式：有“相交选中”和“包含选中”两种模式，位于工具栏的左上角。默认为“相交模式”，点击或拖动鼠标选择区域时，接触的所有元件都会被选中。“包含模式”和Visio相似，仅在选取完全包含元件时才能选中。

二、编辑元件样式

1. 工具栏/样式面板编辑：使用设计区域上方的工具栏或者右侧的样式面板可以编辑元件的样式，如填充、边框线、坐标、尺寸、字体、字号、文字颜色等。还可以选择多个元件，并进行对齐、分布、图层顺序调整等操作。
2. 双击编辑：双击元件直接对元件内容或属性进行编辑。比如双击图片元件，可以直接导入图片；双击矩形元件，可以直接编辑文本；双击下拉列表，直接编辑选项。
3. 右键编辑：有些元件属性，需要通过右键菜单显示特有的属性，这些属性与元件类型有关。
4. 元件属性和样式面板：在样式面板中可用找到元件的坐标、尺寸、填充、边线、阴影、边距、字体等通用样式。在右键的属性菜单中可以找到元件特定属性。

三、元件特定属性

1. 图片：固定边角范围，图片拉伸时不影响边角弧度。
2. 单行文本框

• 类型包含：文本、密码、邮箱、数字、电话、URL地址、搜索、文件、日期、月份和时间。
• 最大长度：允许输入的最大长度，这里的长度限制对中文、英文和数字都生效。
• 提示信息：鼠标点击文本框时，提示信息消失。
• 提示文字样式：设置提示文字内容的样式。
• 只读：生成原型后，文本框内容不可编辑，仅能查看。
• 禁用：将元件设置为禁用状态。
• 隐藏边框：隐藏输入框的边框线。
• 提交按钮：分配一个按钮，当按下回车键时，按钮执行鼠标单击事件。

3. 多行文本框 ：当文本高度超出多行文本框高度时，多行文本框自动出现垂直滚动条。
4. 内联框架

• 引用页面：支持引用内部页面和外部页面。
• 隐藏边框：支持隐藏边框线。
• 滚动条：分为按需滚动、始终滚动和从不滚动。
• 本地预览：分为无预览、视频预览、地图预览和自定义预览，自定义预览可以从本地导入图片，预览效果仅在Axure画布中有效。

5. 复选框

• 选中：默认为选中状态，可以切换为未选中。
• 对齐：默认复选框位于左侧，文字位于右侧，支持互换复选框和文字的位置。
• 禁用：默认为启用状态，可以设置为禁用状态。
• 提交按钮：分配一个按钮，当按下回车键时，按钮执行鼠标单击事件。

6. 单选按钮

• 选中：默认为选中状态，可以切换为未选中。
• 指定组：将多个单选按钮指定到一个组中，组中的成员同一时间只能有一个处于选中状态。
• 对齐：默认单选按钮位于左侧，文字位于右侧，支持互换单选按钮和文字的位置。
• 禁用：默认为启用状态，可以设置为禁用状态。
• 提交按钮：分配一个按钮，当按下回车键时，按钮执行鼠标单击事件。

7. 下拉列表/列表框

• 编辑列表项：可以一次添加一项，也可以一次添加多项。
• 移动项：可以上下移动列表项的位置。
• 删除项：在编辑窗口中，可以删除任意项。
• 选中项：默认选中第一项，也可以手动修改选中项。
• 禁用：默认为启用状态，可以设置为禁用状态。
• 提交按钮：分配一个按钮，当按下回车键时，按钮执行鼠标单击事件。

8. 菜单

• 添加菜单项：可以添加同级别菜单项，也可以添加子菜单项；添加同级别菜单项可以选择插入前方或后方。
• 删除菜单项：选中任意菜单项，可通过右键删除，支持一次性删除多个菜单项。
• 菜单填充：可以编辑填充像素大小，选择适用范围，适用范围包含：仅当前菜单、当前菜单和全部子菜单。

编辑像素后，我们会看到在菜单外部有一个更大的矩形元件，像素的大小，实际上就是菜单与矩形的边距，颜色可以通过样式面板或工具栏进行设置。

9. 树

• 添加节点：可以选择添加节点的位置，支持添加子节点。
• 移动节点：可以移动节点的位置，调增节点的层级。
• 删除节点：可一次性删除多个选中节点，删除父节点时，子节点将全部被删除。
• 编辑图标：Axure提供了三角图标和+-图标，也可以自定义导入本地图标；导入自定义图标时，可以选择适用范围，适应范围包含：当前节点/当前节点和同级节点/当前节点、同级节点和全部子节点。

同一节点，展开和折叠的图标可以不同，根据设计需要可分别导入图标。

四、元件样式面板说明

1. 位置和尺寸

• 位置：通过X坐标、Y坐标精确设定元件的具体位置。
• 尺寸：通过设定元件的宽度和高度，确定元件的具体大小。
• 旋转：输入数值，顺时针旋转任意角度。

2. 不透明度：可以设定元件填充内容、边线、文字的不透明度。
3. 排版

• 文字：设定字体类型、字的粗细、字体大小、字体颜色。
• 文本：设定文本行距、字间距，设定文本的对齐方式。

4. 填充：分为颜色填充和图片填充，图片填充时，可以选择图片显示的位置和图片布局方式。图片显示位置包含：左上、左侧、左下、顶部、居中、底部、右上、右侧和右下。图片布局方式包含：不重复、重复、水平重复、垂直重复、填充、适应和拉伸。
5. 边框：可以设置边框线的颜色、粗细、类型；矩形元件可以设置四条边的可见性，直线可以设置箭头样式。
6. 阴影：分为外部阴影和内部阴影，可以设置阴影的颜色、大小、方向及模糊度。

通过X坐标和Y坐标值，不仅可以设置阴影的大小，还可以改变阴影的方向。

7. 圆角：输入半径值，灵活控制圆角大小，还可以设置每个圆角的可见性。

矩形、梯形等四边形的元件，可以将四个直角设置圆角，并且设置每个圆角的可见性，圆形、三角形、五角星等其他形状类的元件不可以设置圆角。

8. 边距：通过输入具体数值，达到控制文本内容与矩形四条边的距离。

五、元件样式管理

1. 样式编辑：在这里可以设置元件的填充、边线、文字、文本布局和视觉五大类样式。

• 填充：分为颜色填充和图像填充，还可以设置填充位置（上下左右）。
• 边框线：线条的颜色、粗细、类型、可见性、圆角大小及可见性。
• 文字：字体、类型、颜色、字号、加粗、斜体、下划线、删除线。
• 文本布局：分为水平对齐、垂直对齐，设置文本行距和字间距，设置文本基线和文本变形。
• 视觉：包含阴影、不透明度，包含图像的色调、饱和度、亮度和对比度。

2. 添加和复制样式：可以添加新的元件并设置样式；选中元件，点击复制后，添加新元件并将老元件样式直接复制到了新元件中。
3. 移动位置：在元件样式管理器中，可以上下任意移动元件的位置，一次只能移动一个元件的位置。
4. 删除元件样式：这里仅仅是删除了自定义的元件样式，并没有删除系统元件，元件的默认样式也不会被清除。

---

结语：至此，关于元件的操作姿势，已经讲解完毕，下一节将讲述页面的属性和样式。

如果你对Axure或原型设计有兴趣，希望系统性地学习Axure知识，掌握更多Axure使用技巧；或者希望通过临摹交互案例，进一步提升高保交互设计能力。请点击下方关注按钮，查看更多连载作品。
点击获取案例作品源文件