Axure技巧全攻略：从产品出发，快速提升设计效率与实战技巧

昔日昙花

已于 2025-02-15 18:14:45 修改

阅读量1.5k

点赞数 20

文章标签： axure photoshop ui

于 2025-02-15 18:09:04 首次发布

本文链接：https://blog.csdn.net/weixin_47464840/article/details/145654290

版权

一、Axure介绍

Axure RP 是一款专业的快速原型设计工具，广泛应用于产品设计、网站设计和应用程序设计等领域。

页面设计：用户可以创建多个页面，使用各类形状、文本框、图片等设计页面布局，操作简便高效。

交互设计：Axure 提供了强大的交互功能，允许为页面元素添加点击事件、鼠标悬停效果、表格数据操作模拟等，更好地展示数据交互效果。

动态面板：通过动态面板，能够模拟复杂用户操作和界面变化，极大提升高保真效果。

二、Axure应用场景

（1）高保真：模拟用户的页面浏览和交互过程，展示网页的布局、导航和交互效果；

（2）原型研发设计：使用界面原型的方式，介绍产品细节，方便团队开发出产品；

（3）产品设计：快速创建产品原型，并进行交互设计和用户测试；

（4）产品优势：使用高保真原型参与项目竞选，体现公司的实力提升企业形象；

（5）需求反馈跟踪：使用高保真原型获取用户反馈并优化；

三、Axure功能界面

1.1基本功能工具栏

复制、粘贴：在使用Axure快捷键进行操作时，复制、粘贴、剪切和保存的功能与编辑Word文档相似，具体如下：Ctrl+X为剪切，Ctrl+C为复制，Ctrl +V为粘贴，Ctrl+S为保存。不同的地方在于格式化快捷键分为两个步骤：首先使用 Ctrl+C获取某个元件的格式，其次使用 Ctrl + Alt + V 将获取到的格式应用到另一个元件上。

选择模式：选择模式主要分为两种：相交选择和包含选择。相交选择模式：鼠标只需选中元件的任意部分，即可选中该元件。这种模式适合快速选择元件，尤其是在元件较多且相互重叠的情况下。包含选择模式：鼠标必须完全覆盖当前元件的所有面积，才能选中该元件。这种模式更加严格，确保只有完全覆盖的元件才会被选中。连接功能：主要用于在绘制流程图、UML类图等时，将两个元件进行连接。通过拖动鼠标，可以创建连接线，并将两个元件连接起来。

控点：首先选中元件，点击控点，元件四周会出现菱形的小方块儿（编辑点），拖动方块可以任意改变元件形状。如果需要将直角变为圆弧，可以按住Ctrl键，同时将鼠标左键移动到拖动点处，待出现一个拖杆形状的时候，即可调整出有弧度的曲线效果，可用于在微信、客服等聊天窗口时使用，可以很好的体现高保真的效果。

组合、取消组合：首先在Axure的画布上，使用鼠标拖动或按住Shift键依次点击，选中需要组合的多个元件，点击顶部菜单栏中的“组合”按钮。组合后的元件可以作为一个整体进行移动、缩放和样式调整。取消组合后，每个元件都将恢复为独立状态，可以单独进行样式修改，而不会影响到其他元件。组合快捷键：Ctrl+G，取消组合快捷键：Ctrl+Shift+G。

对齐方式：用于快速调整多个元件的位置，分别有左对齐（Ctrl + Shift + L）、居中对齐、右对齐（Ctrl + Shift + R）、顶部对齐、居中对齐、底部矩形、横向对齐、垂直对齐8种对齐方式。对对齐规则是以水平或垂直方向上的第一个元件作为参照，移动其他元件与第一个元件对齐。

1.2样式工具栏

文本样式：选中需要调整格式的文本元件，调整字体大小、类型、颜色、对齐方式、背景颜色、边框线条样式等样式设置。

元件样式：可调整元件的尺寸、位置坐标、线框样式、线框可见性、阴影、填充图片、圆角样式、边距等样式设置。

1.3元件库和母板

创建元件库：在菜单栏中选择“文件” > “新建元件库”，在界面设计常用的元件并保存到元件库文件夹下。保存完成后，在元件库中选择需要引入的元件，即可使用该元件，可以根据需求要对元件进行调整和修改，不用重新设计该元件。

1.4Axure9快捷键使用

元件引入方式：点击R键，画矩形；点击L键，画线段；点击O键，画椭圆，摁住Shift键，画圆形；点击P键，绘画；点击T键，输入文字；

元件操作方式：点击S键，裁剪或切割图片；点击>键，预览原型；点击C键，图片裁剪；点击/键，发布原型到Axure云；点击X键，给元件添加交互功能；点击N键，给元件添加注释说明；点击1~9键，元件透明度10%~90%；

Axure快捷键的使用由个人喜好来选择，若不想使用快捷键，可通过“文件”-->“Preferences”-->“画布”来取消启动单快捷键方式。

四、Axure主要元件

1.1基本元件

基础元件：利用Axure自带的丰富元件库，如矩形、椭圆、图像、占位符、按钮、标题、文本、线段等，可以快速搭建一个手机端商城的原型。通过合理布局和样式调整，实现一个功能齐全、交互流畅的商城界面。如下图：

搜索框提示语配置：在交互功能中配置搜索框的提示语，选定配置类型为“文本”，在提示文字选项中输入指定的提示语，设置当鼠标键入后隐藏，可修改其提示语样式。

热区：热区是一个透明的元件，用于定义用户可以点击的区域，添加交互用例，例如“鼠标单击时”，选择“跳转到页面”等动作，触发相应的交互效果。

动态面板：动态面板包含多个状态的容器，双击动态面板，进入状态编辑模式，通过“设置面板状态”动作，默认展示动态面板中的第一个状态，设置点击按钮在不同状态之间的切换。

中继器： 用于创建数据集合或列表，可快速生成多个相似的元素，并根据数据源的变化自动更新这些元素，展示数据之间的不同状态变化，包括新增、删除、修改等操作。中继器还提供了一些强大的交互功能，例如筛选、排序和分页等，实现对数据的动态操作和响应。以下通过（1）（2）（3）（4）（5）（6）点对中继器使用进行说明讲解。

（1）新增操作：给弹窗的“确认”按钮添加交互功能，单击确定按钮后，获取输入框中的内容，通过配置函数变量，将获取的内容新增一行到继器中。

（2）删除操作：首先给复选框添加选中标记行的交互功能，其次对删除按钮添加删除中继器当前行交互功能，点击删除按钮后，界面会模拟将中继器中标记的行进行删除。

注意：复选框需要在中继器摸板中才能生效。

（3）更新操作：给更新按钮添加“更新行”的交互方式，将输入框中的内容与中继器变量进行关联，选择需要修改的行，点击更新按钮即可实现更新功能。

（4）每页显示条数：给下拉选择框设置交互功能，当下拉框选项改变时，对中继器设置每页显示的项目数。在局部变量中设置选中项值，由中继器获取局部变量值，从而对中继器中当前页显示的项目数进行动态关联。

（5）翻页功能： 给翻页按钮设置交互功能，给“上一页”按钮设置页面“上一个”功能，“下一页”按钮设置页面“下一个”功能。跳转到指定页码时，可通过添加鼠标单击功能，在单击时跳转到设置的页数中。

（6）全选功能： 给单选框设置“选中”功能，设置选中时为“真”，并且标记选中的行；设置改变时，选中时为“假”，取消标记中的行。

（7）跳转指定页：给跳转按钮“设置当前页”交互功能，获取页码框中的页码内容，给按钮设置跳转到输入框中指定的页码中。

1.2表单元件

文本框、文本域：用于实现提示文字和不同类型文字显示效果，可通过对元件的交互配置功能进行配置。

下拉列表框、复选框、单选按钮：鼠标双击下拉元件，进入编辑选项页，对下拉列表进行新增；单选按钮要实现单选效果需要同时选中两个单选按钮，鼠标右键，点击“指定单选按钮组”，设置组名即可实现单选功能。

五、交互动效

1.1显示/隐藏

首先，在Axure画布上创建或选中需要遮罩后展示的窗口（如弹出框、对话框等），在“样式”面板中，勾选“隐藏”选项，将窗口设置为初始隐藏状态。在右侧的“交互”面板中，新建一个交互用例，选择“鼠标单击时”作为触发事件，以“显示/隐藏”动作作为交互动作。在“显示/隐藏”动作的配置中，选择点击按钮后需要展示的目标元件（即之前隐藏的窗口）。

交互效果分为以下三种：
- 遮罩效果：选择“显示/隐藏”动作后，目标元件将以遮罩的形式显示或隐藏。
- 弹出效果：选择“显示/隐藏”动作后，目标元件将以弹出窗口的形式显示或隐藏。
- 展开元件：选择“显示/隐藏”动作后，目标元件将以展开或收起的形式显示或隐藏。

1.2动态滑动

首先，绘制页面的基本结构。通常，页面可以分为顶部导航栏、底部导航栏和中间的内容区域。顶部和底部导航栏通常属于“非动态展示区域”，而中间的内容区域则设置为“动态展示区域”。在内容区域中引入“动态面板”组件，双击动态面板进入编辑状态，在其中添加需要展示的内容。内容的高度应超出动态面板的高度，以便用户可以滑动查看，手机端选择“纵向滚动”效果，电脑PC端选择“横向滚动”效果。

六、实战技巧

1.1动态面板运用场景

首先，确定需要实现联动效果的区域，例如table标题栏和对应的内容区域。将这些区域作为动态面板的主体部分，动态面板组件到页面中，放置在需要联动的区域。双击动态面板进入编辑模式，为动态面板添加多个状态，每个状态对应一种显示内容。为table标题添加热区，选中热区，为其添加“鼠标单击时”的交互动作，选择“设置面板状态”，然后选择目标动态面板的名称，指定切换到对应的状态。

1.2交互样式运用场景

首先引入地图组件，素材地图地址：Axure 全国（含省、市、区）SVG 地图元件库 - Axhub

选中右键点击地图图形，选择“转换 SVG 图片为形状”，将地图分解为多个可编辑的矢量形状，选中地图中的某一块区域，设置“鼠标悬停”事件，改变区域的填充颜色；设置“选中”事件，当点击地图某一区域时，改变区域的样式填充颜色；设置“鼠标点击”事件，实现不同状态之间的样式切换。

1.3视频嵌入运用

在 Axure 画布中，引入“内联框架”组件，放置在需要展示视频的位置。双击内联框架，打开“链接属性”对话框。在“链接到URL或文件”选项中，输入提取的视频播放在线地址。注意的是，地址必须是网络URL地址，本地文件无法通过内联框架播放。为了能更好的展示移动端交互效果，可以对下滑展示部分引入动态面板组件，将该动态面板设置为“纵向滚动（垂直）”方式。