【产品小白】Axure的简单操作

发布于:2025-03-14 ⋅ 阅读:(19) ⋅ 点赞:(0)

1. Axure 入门

1.1 安装与创建项目

下载并安装:访问 Axure官网 下载并安装最新版本的 Axure RP。

创建新项目:启动 Axure 后,点击“File”>“New”创建一个新的项目,选择一个模板或者空白页面开始设计。

1.2 界面介绍

工具栏:位于顶部,包含常用工具(如选择工具、形状工具、文本工具、交互工具等)。

页面面板:左侧显示当前文件的页面结构,支持创建多个页面。

画布:中间是你进行设计的区域,所有的设计和原型内容都在此进行。

属性面板:右侧是属性面板,你可以在此调整选中元素的各种属性,如位置、尺寸、颜色、样式等。

动态面板:你可以在页面上创建并控制多个状态的元素。

2. Axure 基本操作

2.1 画形状和元素

矩形:点击工具栏中的矩形工具,或使用快捷键 R,然后拖动鼠标绘制矩形。你可以调整矩形的尺寸、颜色、边框等。

圆形:点击工具栏中的圆形工具,或使用快捷键 O,按住 Shift 键可以画出完美的圆形。

文本框:点击文本工具或使用快捷键 T,然后在画布上点击并输入文本。

2.2 图层管理

创建组:选中多个元素,右键选择“Group”或者使用快捷键 Ctrl+G 来将它们组合在一起。

排列和对齐:可以在工具栏中找到排列(Align)工具,帮助你对齐、分布图层。

3. 创建交互和动态效果

3.1 添加交互

选择元素:选中一个元素,如按钮、图标等。

添加交互:点击右侧的“Interactions”面板,点击“Add”添加交互事件。

设置触发条件和动作

触发条件:例如点击、悬停、拖动等。

动作:例如跳转到另一个页面、显示/隐藏元素、改变元素样式等。

设置动作:设置完触发事件后,你可以定义触发后的行为,如跳转页面、显示/隐藏、动态面板切换等。

3.2 动态面板

创建动态面板:动态面板是 Axure 的重要功能,可以为元素添加多个状态,从而实现不同的交互效果。

选中元素,右键选择“Create Dynamic Panel”,该元素会被转换成动态面板。

右侧会出现“States”部分,你可以为动态面板添加多个状态。

在“States”中,切换不同状态,设置每个状态下元素的表现。

设置交互动作,让动态面板在不同状态之间切换。

3.3 使用变量

创建变量:变量可以在交互中保存值,控制页面元素的显示与行为。

点击“Project”>“Global Variables”创建一个新的全局变量。

在交互中,可以通过“Set Variable Value”动作来改变变量的值。

动态显示内容:你可以根据变量的值动态控制文本、图片或按钮的显示内容。

4. 设计高保真原型

4.1 样式设置

文本样式:设置字体、大小、颜色、行间距等,确保原型界面具有一致的视觉风格。

颜色和渐变:可以在元素的属性面板中设置颜色、渐变、透明度等。

图标与图片:导入外部图标或图片,或者使用 Axure 自带的资源库。

4.2 响应式设计

使用自适应视图:Axure 支持自适应设计,你可以设置不同屏幕尺寸下的布局效果。

进入“Page”面板,点击“Adaptive Views”按钮,添加不同的视图尺寸。

在每个视图下设置元素的布局、显示或隐藏。

5. 原型预览与共享

5.1 预览原型

点击预览按钮:在工具栏中,点击“Preview”按钮,可以在浏览器中查看你制作的原型。你可以模拟交互、测试动画效果。

生成 HTML 文件:Axure 支持将原型导出为 HTML 文件,可以在本地查看或分享给其他人。

5.2 共享原型

发布到 Axure Cloud:点击“Share”按钮,将原型上传到 Axure Cloud,获取一个共享链接,方便团队成员查看和评论。

导出原型:你可以将项目导出为 HTML 文件,方便离线查看,或者导出为图片、PDF 等格式。

6. 进阶功能

6.1 条件逻辑

设置条件:在交互中,你可以设置条件,例如如果某个变量值为真,则执行某个动作。如果条件不成立,则执行其他动作。

使用“IF”语句:在设置交互时,点击“Add Condition”按钮,设置判断条件和相应的行为。

6.2 循环与时间延迟

循环:你可以通过“Repeat”动作,创建重复的交互。例如,在一个按钮被点击后,循环播放动画或切换状态。

时间延迟:使用“Wait”动作来设置延迟,模拟加载过程或动画效果。

7. 高级协作与插件

7.1 团队协作(现在收费了!😞)

实时协作:Axure RP 允许团队成员实时编辑同一个项目文件。多人协作时,可以通过评论功能进行实时讨论和反馈。

版本控制:Axure Cloud 支持版本控制,团队成员可以查看历史版本、回滚修改。

7.2 使用插件

Axure 插件:Axure 支持多种插件,可以扩展其功能。例如,导入 Font Awesome 图标库、创建自定义组件库等。(这个还是很好用的,现成的一拖改一改,很方便🤔)

在 Axure 中,点击“File”>“Plugin”进入插件管理,下载并启用所需的插件。

8. 导出与报告

8.1 导出页面

你可以选择将项目文件导出为 PNG、JPG 等格式,或者导出为 PDF 文件。

8.2 导出文档

自动生成规格文档:Axure 支持自动生成文档,方便开发人员查看设计规格和交互细节。(不过这个我还不太熟悉用法😅)


我画原型的第一个工具就是 Axure RP,即使现在用了很多例如figma、sketch等,还是优先想用Axure进行绘制。很适合用来创建高保真和互动性强的原型。