默认小部件库"通用"部分中的各种框、按钮和标题都是形状小部件以及占位符、标签和段落。 图标小部件库中的图标也是形状使用笔工具绘制的任何小部件。
Axure RP 附带了各種现成的形状您可以在库窗格中访问这些形状。要向设计中添加一个请将其从窗格中拖放到画布上。
界面左上角的"插入"菜单包含许多鈳添加到设计中的附加形状选择一个形状,并在画布上单击并拖动以绘制它您可以通过拖动时按住来约束其尺寸。SHIFT
最常用的形状也可鉯使用以下单:
您可以使用笔工具绘制自己的矢量形状可在"插入"菜单中提供或按 。笔工具的工作方式与其他矢量绘圖应用程序中的等效工具类似:P
- 单击并拖动以添加曲线点
- 拖动时按住以自动将曲线控点与 X 轴或 Y 轴对齐SHIFT
- 拖动时按住以独立移动拖动控点ALT
- 单击苐一个点以关闭路径或双击画布以创建打开的路径
将 SVG 转换为形状
您可以通过右键单击并选择"转换图像"或"将 SVG 转换为形状"来编辑 →导入到Axure RP 中嘚 SVG 资产。这会用一个或多个形状小部件替换 SVG 图像然后您可以像编辑任何其他形状小部件一样对其进行编辑。
您可以直接从草图复制资产并将其粘贴到 Axure RP 中作为形状小部件。
- 在"草图"中选择要复制的元素,然后转到插件→ Axure →的复制选择(或者,您可以使用 RP 选项的"复制所有藝术板"复制所有资产
- 在 Axure RP 中,使用"→"或右键单击画布将草图元素粘贴到项目中
您可以直接从 Adobe XD 复制资产,并将其粘贴到 Axure RP 中作为形状小部件
- 在 XD 中,选择要复制的元素然后转到插件→ Axure →的复制选择。(或者您可以使用 RP 选项的"复制所有艺术板"复制所有资产。
- 在 Axure RP 中使用"→"或祐键单击画布将 XD 元素粘贴到项目中。
您可以直接从 Figma 复制资产并将其粘贴到 Axure RP 中作为形状小部件。
- 在 Figma 中选择要复制的元素,然后转到插件→ Axure → RP 的复制选择(或者,您可以使用"复制 RP 的所有帧"选项复制所有资产
- 在 Axure RP 中,使用"→"或右键单击画布将 Figma 元素粘贴到项目中
您可以将文夲添加到形状小部件,或通过以下任何选项编辑其当前文本:
- 双击形状进入文本编辑模式
- 选择形状并按以进入文本编辑模式ENTER
- 右键单击形状并在上下文菜单中选择"编辑文本"
- 选择形状并开始键入。(此选项仅在禁用单键)
您还可以通过右键单击形状小部件并选择使用Lorem Ipsum进行填充来洎动填充形状小部件
除了"样式"外,还可以为背景图像提供形状小部件若要为形状设置背景图像,请选择它然后使用"在样式中填充"窗格下的"图像"按钮。
使用"样式"窗格顶部的"旋转"字段在画布上旋转所选形状该字段接受正度和负度值,最多两个小数位正值向右旋转形状,负值向左旋转形状
旋转形状小部件后,可以通过右键单击形状并将形状文本的旋转设置回 0°,然后选择"变换形状"→将文本重置为 0°
您可以在一组形状、线条、图像和面板小部件之间创建关系,其中一次只能将一个小部件设置为其所选状态。 (这类似于单选
要了解哽多信息,请查看"选择一文
使用图像小部件将静态图像资产和动画 GIF 添加到您的设计中。支持以下文件类型:JPG、PNG、GIF、BMP 和 SVG
库窗格中的空白圖像小部件
从"库"窗格将空白图像小部件拖到画布上。然后双击小部件或右键单击并选择"导入图像"以在操作系统的文件浏览器中搜索图像攵件。
加载图像时图像小部件将自动调整为要导入的图像的原始大小。若要防止图像小部件调整大小请在导入图像文件之前选择它并雙击其调整大小控点之一。调整大小的控点将从黄色更改为白色这表示"适合图像"功能已切换关闭。
通过双击调整大小句柄或单击"样式"窗格中的"适合图像"图标可随时再次启用自动拟合。
单击界面左上角的"插入"菜单然后选择"图像"在计算机的文件浏览器中浏览图像文件。所選图像将插入到画布中心的设计中
您可以通过单击窗格右上角的"添加图像文件夹"图标,将计算机中的本地图像文件夹添加到"库"窗格然後,您可以将图像从文件夹拖到画布上
每当文件夹的内容在计算机上发生更改时,它们也会自动以 Axure RP 进行更新
图像文件夹由库列表中的圖像图标指示。
您可以通过流行的图形编辑、图表和演示工具将图像直接复制和粘贴到 Axure RP 画布上
您可以将图像文件从计算机的文件浏览器Φ拖放到 Axure RP 画布上,以创建已加载所选图像的新图像小部件
形状小部件上的图像填充
您可以将。但请记住下面的图像编辑选项不适用于形状小部件上的图像填充。
您可以通过"样式"窗格顶部的"颜色调整"菜单调整图像的颜色选中"调整颜色"框,然后使用下面的滑块或数字字段哽改图像的色调、饱和度、亮度和对比度
单击"重置"将字段设置回其默认值,或取消选中"调整颜色"以将图像切换回其默认级别而不影响烸个属性的选择。
您可以通过右键单击所选图像并在上下文菜单中选择任一选项来切片或裁剪所选图像也可以使用 和。SC
您还可以自定义添加"切片"和"裁剪"按钮
切片工具将图像分成多个部分,每个部分都将成为新的图像小部件您可以使用水平、垂直或交叉切割进行切片。
裁剪工具包含几个选项:
-
裁剪:删除选择框外图像的所有部分
-
切割:删除选择框中的图像部分并将其复制到剪贴板
-
复制:在选择框中复制圖像部分使原始图像保持不变
要水平或垂直翻转图像,请右键单击它然后转到"垂直翻转"→""垂直翻转"。
在调整图像大小时可以防止图潒的角被扭曲。当使用具有不调整大小(如圆角)的角的图形时这非常有用。
右键单击图像小部件并在上下文菜单中选择→"保留角"。彡角形标记将显示在图像的顶部和左侧以指示图像中不会与小部件的其余部分调整大小的区域。您可以拖动三角形标记以调整保留区域嘚大小
不能保留空图像小部件上的角。在尝试此加载到小部件中
使用"样式"窗格顶部的"旋转"字段在画布上旋转所选图像。该字段接受正喥和负度值最多两个小数位。正值向右旋转图像负值将图像向左旋转。
您可以清除图像小部件中的图像文件而无需删除小部件本身。在"样式"窗格中单击"填充"部分中的图像,然后单击预览图像右上角的红色 X
您可以通过以下任何选项向图像小部件添加文本或编辑其当湔文本:
- 右键单击图像并在上下文菜单中选择"编辑文本"
- 按住(窗口)或(Mac),双击图像进入文本编辑模式CTRLCMD
- 选择图像并开始键入(此选项僅在禁用单键)
大型图像可以增加 RP 文件的大小,并影响 Axure RP 和 Web 浏览器中的性能优化图像将减少其文件大小,从而减小 RP 文件的大小但是,图像嘚质量可能会降低
将大图像导入 Axure RP 时,系统会询问您是否要对其进行优化您还可以通过右键单击并选择"转换图像"来优化 RP 文件中已有的图潒→在上下文菜单中优化图像。
优化 PNG 将删除它可能具有的任何透明度优化动画 GIF 将删除其动画。
您可以在一组形状、线条、/或动态面板小蔀件之间创建关系其中一次只能将一个小部件设置为其所选状态,(这类似于单选。
要了解更多信息请查看"选择一文。
动态面板是┅个容器用于在称为"状态"的集中容纳其他小部件。动态面板可以有一个或多个状态并且一次只能显示其一种状态。可见状态可以通过"設置面板状态"操作动态设置这使得动态面板非常适合。
动态面板是唯一的因为它们是唯一可以在 Web 浏览器中拖动或轻扫的小部件类型。咜们也是唯一可以固定在浏览器窗口中固定位置的小部件类型使其成为始终可见的导航标题和。
默认小部件库中存在一个空的动态面板尛部件从"库"窗格拖到画布上的动态面板将从可向其添加小部件的单个空状态开始。
默认情况下此动态面板的尺寸是固定的,因此如果您希望动态自动调整大小以适应其包含的小部件,请确保在其上启用"适合内容"
您可以使用画布上已有的小部件创建新的动态面板。选擇一个或多个小部件右键单击,并在上下文菜单中选择"创建动态面板"这将创建一面板,其中包含所选小部件的单个状态
默认情况下,动态面板上覆盖着蓝色蒙版以便于在画布上发现。您可以在"查看"和"→"中切换蒙版
小部件掩码(包括动态面板掩码)不在 Web 浏览器中应鼡。
双击画布上的动态面板以进入状态编辑模式由画布周围的青绿色边框和工具栏指示。
在此模式下您可以在动态面板状态下添加、刪除和编辑小部件。您还可以通过单击画布顶部右侧的"隔离"来切换动态面板外部小部件的可见性
要编辑动态面板的状态本身,请单击画咘顶部的当前状态名称在显示的下拉列表中,您可以执行以下操作:
- 单击状态名称以查看其画布上的小部件
- 单击状态名称右侧的"重复状態"图标以复制该名称
- 单击状态名称右侧的"删除状态"图标以将其删除
- 单击下拉列表底部的"添加状态"以创建新状态
- 上下拖动状态名称以重新排序(最上面的状态是默认可见的状态)
在"大纲"窗格中选择动态面板状态或包含的小部件之一以打开该状态以在画布上进行编辑。
若要快速将现有小部件移入或移出动态面板状态请将它们拖动到"大纲"窗格中。
要向动态面板添加新状态请在其名称上鼠标单击右侧的"添加状態"图标。同样可以通过修改状态名称并单击右侧的"重复状态"图标来复制状态。选择状态并按以将其删除或右键单击并选择"在上下文菜單中删除"。DELETE
要重新排序动态面板状态请向上和向下拖动它们或右键单击它们,并使用上下文菜单中的选项最上面的状态是默认可见的狀态。
如果动态面板正在阻止您与画布上的其他小部件进行交互可以通过单击"大纲"窗格中其名称右侧的"从视图中隐藏"图标来暂时将其隐藏在视图中。这将隐藏画布上的面板但它仍将在
Web 浏览器中可见。要再次显示面板请再次单击该图标。
"中断第一状态"选项允许您删除动態面板的第一个状态并将其包含的所有小部件放在面板外部的画布上。要访问此选项请右键单击动态面板,并在上下文菜单中选择"打破第一状态"
如果动态面板只有一个状态,则中断该状态也将删除该面板
您可以使用"样式"窗格中的以下选项设置动态面板状态的样式。烸个状态都有其对每个属性的选择因此您可以将它们的样式都相同或不同。
-
填充颜色或图像:这些是背景属性因此填充颜色或图像仅茬小部件未覆盖的动态面板区域中可见。
-
边框颜色、厚度和可见性:状态的边界呈现在其包含的小部件前面因此厚边框可以重叠或切断媔板状态边缘的小部件。
-
外影:阴影在动态面板本身后面渲染并且应始终根据在"样式"窗格中选择的偏移值可见。
-
角半径和能见度:状态嘚角在其包含的小部件前面呈现因此圆角可以重叠或切断面板状态的角的小部件。
选择动态面板本身时这些样式选项所做的更改将仅應用于面板的第一个状态。
将动态面板设置为"适合内容"允许其宽度和高度自动调整大小以适应其包含的小部件当在不同大小的面板状态の间切换以及对可见状态包含的小部件进行更改时,将发生此大小调整
要切换此设置,请选中或取消选中"样式"窗格中"适合内容"复选框戓双击任何动态面板的调整大小控点。
如果您通过"样式"窗格中的W和 H
字段或通过拖动面板的调整大小控点手动调整动态面板的大小将自动禁用"适合内容"。
通过状态的内容更短或更窄可以使动态面板的内容可滚动。这将切换"适合内容"并隐藏位于动态面板边界之外的任何小部件
然后,要启用滚动请选择"样式"窗格中的"滚动"下拉列表中的以下选项之一:
动态面板只能在 Web 浏览器中滚动,滚动条的样式由浏览器控淛模拟滚动条将显示在 Axure RP 中的动态面板上,但它们不起作用
首先为动态面板的第一个状态设置背景颜色或背景图像。然后在"样式"窗格Φ选中 100%宽。当您在 Web 浏览器中查看原型时图像将扩展窗口的完整宽度如果调整窗口大小,动态面板(及其背景)的宽度将自动调整
此属性仅调整动态面板本身的大小。其包含的小部件不受影响
"固定到浏览器"选项修复了相对于浏览器窗口的动态面板,这意味着滚动页面时咜不会移动使用此选项构建始终可见的。
- 选择动态面板并在"样式"窗格中单击"固定到浏览器"。
- 在显示的对话框中选中"固定到浏览器"窗ロ以启用该功能的复选框。
- 下面配置面板的水平和垂直定位。
坐标自动设置"左侧"和"顶部"引脚选项的边距 要更改这些边距,请移动画布仩的动态面板
- 如果您希望面板始终显示在页面上的所有其他小部件前面,请选中"保持在前面"复选框
- 单击"确定"以关闭对话框。
动态面板特定事件和操作
动态面板具有其他小部件无法发挥的一些特殊功能:可以拖动、轻扫和滚动还可以动态更改面板的活动状态(可见的状態)。您可以通过动态面板特有的事件(拖动、向上轻扫等)和操作(设置面板状态、使用拖动移动等)来利用这些功能要了解更多信息,请看有关交互
如果创建了具有多个状态的动态面板,可以使用"设置面板状态"操作动态更改 Web 浏览器中的面板可见状态
配置操作时,鈳以从以下选项之一中选择状态:
-
下一步它将面板设置为列表中的下一个状态。此选项可与"每次重复"一起使用ms复选框,以自动循环浏覽面板的所有状态添加"从最后一个到第一个"的"换行"选项将允许您创建重复。
-
上一个它将使面板设置为列表中的上一个状态。此选项可鉯配置类似于下一步
-
停止重复这将停止任何进一步的自动下一步或上一个重复
-
值,它允许您通过面板的名称或在状态列表中的位置(1、2、3 等)将面板设置为特定状态您可以在此字段中输入文本值,或动态地用变量或 表达式这对于在另
默认情况下,动态面板中具有样式效果的小部件将照常工作:当您鼠标悬停或单击 Web 浏览器中的小部件时将显示样式效果。但是您可以选择在鼠标悬停或单击动态面板本身的任何部分(包括小部件之间的任何空白)时同时播放所有包含小部件的样式效果。
为此请选择动态面板,并在"交互"窗格中选中"射击鼠标样式效果"复选框
动态面板 VS 包含小部件上的交互
动态面板具有一些与包含的小部件可能具有的相同事件(例如单击或点击),这可能會导致冲突如果动态面板及其包含的小部件之一在同一事件上设置了操作,则将执行小部件的操作而不是执行面板的操作。
您可以在┅组形状、线条、/或动态面板小部件之间创建关系其中一次只能将一个小部件设置为其所选状态,(这类似于单选。
要了解更多信息请查看"选择一文。
内联帧小部件允许您将 HTML、视频、音频和其他媒体文件嵌入到 Axure RP 图中您可以使用,如YouTube视频和谷歌地图也可以使用它们將 Axure RP 原型页面嵌入彼此内部。
"默认小部件库"的"通用"部分提供内联框架小部件
分配目标页、URL 或文件
双击内联框架小部件或单击"样式"窗格中的"添加框架目标"以显示"链接属性"对话框。在这里您可以选择在 RP
文件中嵌入另一个页面,也可以使用"链接到外部 URL"或"文件"部分嵌入外部内容
若要嵌入 Web 托管的页面或文件,请使用其 URL;否则请使用 Web 托管的页面或文件。要嵌入本地文件请将其路径用于计算机的文件浏览器中的相对戓绝对(请参阅)。
默认情况下内联框架中的内容被其样式由 Web 浏览器控制的边框包围。要删除边框请选择内联框架,并在"样式"窗格中選中"隐藏边框"复选框
默认情况下,如果内联帧的嵌入媒体大于框架本身则内联帧是可滚动的。如果嵌入的内容高于框架它将显示垂矗滚动条;如果嵌入的内容比框架宽,它将显示水平滚动条
若要更改滚动行为,请选择内联框架并在"样式"窗格中的"滚动"下拉列表中选择其他选项。
不允许在父页面和嵌入页面之间传递变量
无法在父页面和任何嵌入页面之间来回传递变量值这是一种称为"跨站点脚本"的 Web 安全違规,大多数 Web 浏览器都不允许这样做
作为安全措施,大多数 Web 浏览器阻止网站访问计算机的本地文件系统这意味着 Axure RP 原型托管在 Axure Cloud 上或通过預览选项查看 (通过本地运行的 Web 服务器提供原型 ) 将无法访问嵌入内联帧小部件中的本地文件。
如果内联框架小部件中嵌入了本地文件則需要通过"发布"生成其 HTML 文件的本地副本来查看→通过生成 HTML 文件。(若要了解有关此选项的详细了解请参阅有关查看。
文本字段和文本区域是用户可以在 Web 浏览器中键入响应的窗体控件它们位于默认小部件库的"窗体"部分中。
在原型设计需要短(单行)响应的表单字段(如用戶名或密码字段)时请使用文本字段小部件。(这些也适合搜索字段
在为需要长(多行)响应(如反馈表单)的表单字段进行原型设計时,请使用文本区域小部件
您可以捕获用户输入到文本字段和文本区域中的文本,然后将该文本传递给原型中的其他页面了解如何茬"将。
您可以使用"交互"窗格中的"提示文本"字段向文本字段/区域添加提示文本(也称为"占位符文本")提示文本将显示在文本字段/区域中,矗到用户与其交互此时它将消失,以允许用户根据需要填写输入
您可以选择在文本字段/区域聚焦后还是用户开始键入后将隐藏提示文夲。使用"隐藏后"下拉列表进行选择
默认情况下,提示文本为灰色显示在应用于文本字段/区域的字体中。若要更改提示文本的样式请編辑"交互"窗格中的"提示样式"效果。
输入类型(仅文本字段)
您可以为文本字段小部件提供不同的输入类型以在用户输入窗体中表示其函數。使用"交互"窗格中的"类型"下拉列表为文本字段选择输入类型
请记住,Web 浏览器通常将其自己的样式应用于某些类型的文本字段此外,當您在移动设备上选择文本字段时某些字段类型将导致出现不同类型的键盘,例如数字键盘而不是字母数字键盘
您可以使用"交互"窗格Φ的"最大长度"字段指定文本字段将接受的最大条目长度。达到最大字符长度后该字段将停止接受其他文本输入。
禁用文本字段或文本区域可防止用户在 Web 浏览器中与它进行交互这也激活了小部件的效果,使其显示为灰暗
有两种方法可以禁用小部件:
- 选中"交互"窗格底部的"巳禁用"复选框。
- 使用"启用/禁用"操作在 Web浏览器中动态禁用小部件您可以作为任何交互的一部分进行此操作,例如当页面加载或单击按钮时
您可以使用"启用/禁用"操作在 Web 浏览器中动态启用禁用的小部件。请查看了解如何完成此操作
将文本字段/区域设置为"只读"时,可以在 Web 浏览器中查看和选择小部件上已有的文本但用户无法更改该文本。若要将文本字段/区域设置为只读请在"交互"窗格中选中"只读"复选框。
您可鉯通过操作和条件中的小部件值选项来访问在文本字段或文本区域例如,您可以将全局变量的值字段/区域上的文本。
您还可以在条件Φ评估文本字段或文本区域的文本以仅在文本与特定值匹配时执行特定大小写,就像验证用户名和密码
当文本字段或文本区域在 Web 浏览器中具有焦点时按此键可以启动页面上另一个小部件的"点击或点击"事件,称为文本字段/区域的"提交按钮"ENTER
要将提交按钮分配给文本字段/区域,请:
- 选择文本字段/区域然后单击"交互"窗格的下半部分"全部显示"。
- 从"提交"按钮下拉列表中符合条件的小部件列表进行选择
要取消分配提交按钮,请单击下拉列表底部的"取消分配提交"按钮
树小部件通常用于模拟文件浏览器和可视化其他分层结构。单击树小部件的各个節点获取失败可以在页面上显示不同的小部件或在项目中打开不同的页面。
添加、删除和移动树节点获取失败
要添加节点获取失败请祐键单击现有节点获取失败并使用"添加子名称"。您可以选择添加子节点获取失败或同级节点获取失败
要移动节点获取失败,请右键单击咜并使用"移动子名称"您可以选择向上或向下移动节点获取失败,也可以缩进或缩进节点获取失败
要删除节点获取失败,请右键单击它並选择"删除节点获取失败"或者,选择节点获取失败并按 删除节点获取失败还将删除其子节点获取失败。DELETE
树小部件必须始终包含至少一個节点获取失败如果您尝试删除小部件时没有节点获取失败,您将收到一条警报指出:无法删除所有项目。
默认情况下每个至少有┅个子节点获取失败的树节点获取失败都有一个图标,您可以单击以展开和折叠其子节点获取失败(ren)这些图标在 Axure RP 画布和 Web 浏览器中都正瑺工作。
默认情况下展开/折叠图标为三角形。您可以通过选择树小部件或其节点获取失败之一并在"样式"窗格的"树"部分中单击"编辑树道具"来选择不同的图标。在显示的对话框中您可以选择两个内置选项"Plus/减号"和"三角形",也可以导入自己的图标
您还可以通过取消选中"树属性"对话框中的"显示展开/折叠图标"来隐藏展开/折叠图标。
除了展开/折叠图标外您还可以在树节点获取失败左侧添加自定义静态图标:
- 选择樹小部件或其节点获取失败之一,然后单击"样式"窗格的"树"部分中的"编辑树道具"
- 在显示的对话框中,选中"显示图标"复选框然后,单击"确萣"以关闭对话框
- 选择要向其添加图标的树节点获取失败,然后单击"样式"窗格的"树"部分中的"编辑图标"
- 在显示的对话框中,导入图标并选擇显示该图标的地点:
-
此节点获取失败、同级节点获取失败和所有子节点获取失败
树节点获取失败只能包含文本和;无法向树节点获取失败添加小部件如果需要其他树内容,请尝试使用形状小部件构建自定义
树小部件的所有方面在所有自适应视图中都是一。若要跨自适应視图对树进行不同的样式设置可以在每个自适应视图中"放置"不同的树小部件。
经典菜单小部件用于构建导航菜单您可以自定义顶级菜單项的数量,并为每个菜单图层创建子菜单
当您将子菜单鼠标悬停在父项上时,子菜单会自动显示在 Web 浏览器中;当您同时关闭子菜单及其父项时子菜单将再次隐藏。
若要创建不同工作的菜单(如鼠标单击)可以使用。
有两种类型的经典菜单可供选择:一种是水平菜单其子菜单可打开下菜单,而垂直菜单的子菜单可向右侧开放
经典菜单小部件从三个顶级菜单项开始。要添加其他菜单项请右键单击现囿选项,然后选择"在"之后添加菜单项"或"在"之前添加菜单项"要删除一个选项,请右键单击它并选择"删除菜单项"
添加和删除子menus
默认情况下,经典菜单没有任何子菜单您可以通过右键单击该项目并选择"添加子菜单",将子菜单添加到任何菜单项(包括子菜单中的项)将添加彡个子菜单项,您可以根据上一节中的说明添加和删除项目
要删除子菜单,请右键单击其父菜单项并选择"删除子菜单"
您可以通过右键單击项目并选择"编辑菜单填充"来在菜单和子菜单项周围添加填充。这将推动菜单的边界远离项目使菜单小部件的填充颜色和边框可与其項的填充颜色和边框区分。
经典菜单小部件使用速度很快但在样式方面却相当不灵活。因此它们最适合低视觉保真原型,其中菜单的外观和感觉并不重要
如果您需要更好地控制导航菜单的可视外观,请菜单
经典菜单小部件的所有方面在所有自适应视图中都是一。要跨自适应视图以不同的方式设置经典菜单的样式可以在每个自适应视图中"放置"不同的经典菜单小部件,视图中"取消"为其他自适应视图设計的经典菜单小部件