Axure day2 基础教程完整指南

Axure 9 基础教程完整指南：从入门到精通

摘要

Axure RP 是一款专业的快速原型设计工具，广泛应用于产品经理、UX/UI设计师和交互设计师的工作流程中。本文将系统性地介绍 Axure 9 的基础功能、核心概念以及实际应用技巧，帮助读者快速掌握原型设计的核心技能，提升产品设计效率和交付质量。

一、Axure 简介与安装

1.1 什么是 Axure RP

Axure RP（Rapid Prototyping）是一款由 Axure Software Solutions 公司开发的快速原型设计工具。它允许设计师创建高保真的交互式原型，支持从简单的线框图到复杂的可交互原型的全流程设计。

Axure 的核心优势：

快速迭代：快速将想法转化为可视化原型
交互丰富：支持复杂的交互逻辑和动画效果
团队协作：支持多人协作和版本控制
输出多样：可生成 HTML、Word、PDF 等多种格式

1.2 Axure 9 新特性

Axure 9 相较于之前版本，带来了多项重要更新：

复制代码

全新界面设计：更现代化的 UI 布局
性能优化：大型文件加载速度提升 50%
云端同步：支持实时云端协作
智能标注：自动生成开发规范标注
组件库升级：内置更多预设组件

1.3 安装步骤

访问 Axure 官网下载安装包
运行安装程序，选择安装路径
首次启动需要登录 Axure 账户
根据需求选择试用版或授权版

系统要求：

组件	最低配置	推荐配置
操作系统	Windows 7+	Windows 10/11
内存	4GB	8GB 以上
处理器	双核 1.5GHz	四核 2.0GHz 以上
硬盘空间	500MB	2GB 以上

二、工作界面详解

2.1 界面布局总览

Axure 9 的工作界面采用经典的三栏布局设计，主要包含以下区域：

左侧面板：元件库、页面大纲、组件库
中间画布：设计编辑区域
右侧面板：交互、样式、说明属性

2.2 工具栏功能

工具栏位于界面顶部，提供常用操作的快捷入口：

常用快捷键：

Ctrl + N：新建文件
Ctrl + S：保存文件
Ctrl + Z：撤销操作
Ctrl + Y：重做操作
F5：预览原型
Ctrl + F5：在新窗口预览

2.3 画布设置

画布是进行原型设计的主要工作区域，支持以下操作：

缩放：使用鼠标滚轮或 Ctrl + 滚轮缩放画布
平移：按住空格键拖动画布
标尺：通过 View -> Rulers 显示/隐藏标尺
网格：通过 View -> Grid 设置网格辅助线

三、基础元件与使用

3.1 元件库介绍

Axure 9 提供了丰富的基础元件库，位于左侧面板的 "Widgets" 区域。

默认元件分类：

Common（常用元件）
Forms（表单元件）
Formatting（格式化元件）
Shapes（形状元件）

3.2 常用元件详解

3.2.1 矩形元件（Rectangle）

矩形是最基础的容器元件，可用于创建按钮、卡片、背景等元素。

属性设置：

css 复制代码

/* 矩形样式属性 */
Width: 100px           /* 宽度 */
Height: 40px           /* 高度 */
Background: #007AFF    /* 背景颜色 */
Border Radius: 4px     /* 圆角半径 */
Opacity: 100%          /* 不透明度 */
Font Size: 14px        /* 字体大小 */

3.2.2 文本元件（Text Paragraph）

文本元件用于添加说明文字、标题等内容。

使用示例：

3.2.3 图片元件（Image）

图片元件支持导入本地图片或使用在线图片链接。

支持的图片格式：

PNG（推荐，支持透明背景）
JPG（适合照片）
GIF（支持简单动画）
SVG（矢量图，无损缩放）

3.2.4 输入框元件（Text Field）

输入框用于收集用户输入信息，支持多种输入类型。

javascript 复制代码

/* 输入框类型设置 */
Text Field          // 单行文本
Text Area           // 多行文本
Password Field      // 密码输入
Number Field        // 数字输入
Email Field         // 邮箱输入
Phone Field         // 电话输入

3.3 元件操作技巧

3.3.1 选择与移动

单击选择：点击元件选中单个元件
框选：拖动鼠标框选多个元件
Shift + 点击：添加或取消选择元件
方向键：微调元件位置（1px）
Shift + 方向键：大距离移动（10px）

3.3.2 对齐与分布

Axure 9 提供了智能对齐功能，当元件移动到与其他元件对齐位置时，会自动显示对齐辅助线。

对齐工具栏：

复制代码

[左对齐] [居中] [右对齐] [顶对齐] [垂直居中] [底对齐]
[横向平均分布] [纵向平均分布]

3.3.3 层级管理

元件的堆叠顺序决定了遮挡关系，可通过以下方式调整：

置于顶层：右键 -> Order -> Bring to Front
置于底层：右键 -> Order -> Send to Back
上移一层：右键 -> Order -> Bring Forward
下移一层：右键 -> Order -> Send Backward

四、交互设计基础

4.1 交互概念

交互是 Axure 的核心功能，通过设置触发事件和响应动作，实现原型的动态效果。

交互三要素：

复制代码

事件（Event）    →  触发交互的条件
动作（Action）   →  执行的具体操作
目标（Target）   →  动作作用的对象

4.2 常用交互事件

4.2.1 鼠标事件

javascript 复制代码

// 鼠标点击事件
OnClick          // 单击时触发
OnDoubleClick    // 双击时触发
OnMouseEnter     // 鼠标移入时触发
OnMouseOut       // 鼠标移出时触发
OnMouseDown      // 鼠标按下时触发
OnMouseUp        // 鼠标松开时触发

4.2.2 键盘事件

javascript 复制代码

// 键盘输入事件
OnKeyUp          // 按键抬起时触发
OnKeyDown        // 按键按下时触发
OnFocus          // 获得焦点时触发
OnLostFocus      // 失去焦点时触发

4.2.3 页面事件

javascript 复制代码

// 页面级事件
OnLoad           // 页面加载时触发
OnResize         // 窗口大小改变时触发
OnScroll         // 页面滚动时触发

4.3 常用交互动作

4.3.1 导航动作

javascript 复制代码

/* 页面导航类动作 */
Open Link        // 打开链接页面
Close Window     // 关闭当前窗口
Back             // 返回上一页
Forward          // 前往下一页
Reload           // 重新加载页面

使用示例：

复制代码

事件：OnClick
动作：Open Link
目标：Page: 详情页
配置：
  - 当前窗口打开
  - 包含导航栏
  - 传递变量：item_id = [[This.ItemID]]

4.3.2 元件动作

javascript 复制代码

/* 元件操作类动作 */
Show             // 显示元件
Hide             // 隐藏元件
Toggle Visibility// 切换显示/隐藏
Set Text         // 设置文本内容
Set Opacity      // 设置不透明度
Bring to Front   // 置于顶层

4.3.3 动画效果

Axure 9 支持为动作添加过渡动画，增强用户体验。

动画类型：

动画类型	说明	适用场景
Fade	淡入淡出	元件显示/隐藏
Slide	滑动	菜单展开/收起
Flip	翻转	卡片切换
None	无动画	瞬时切换

动画时长设置：

复制代码

Slow         // 500ms（慢速）
Normal       // 300ms（正常）
Fast         // 150ms（快速）
Custom       // 自定义时长

4.4 交互案例实战

案例1：按钮点击跳转

复制代码

需求描述：点击登录按钮，跳转到首页页面

实现步骤：
1. 选择登录按钮元件
2. 在右侧面板点击 "New Interaction"
3. 选择事件：OnClick
4. 选择动作：Open Link
5. 设置目标：Home Page
6. 配置参数：Current Window

案例2：鼠标悬停效果

复制代码

需求描述：鼠标悬停在卡片上时，显示阴影效果

实现步骤：
1. 选择卡片元件
2. 添加 OnMouseEnter 事件
3. 动作：Set Opacity -> 100% (正常状态为90%)
4. 添加 OnMouseOut 事件
5. 动作：Set Opacity -> 90%
6. 动画时长：150ms

案例3：输入验证

javascript 复制代码

/* 需求描述：验证用户输入的邮箱格式 */

事件：OnLostFocus（失去焦点）
条件：If text of This is not valid

动作设置：
1. 显示错误提示文字
   - Target: error_message
   - Action: Show
   - Animation: Fade 300ms

2. 设置输入框边框颜色
   - Target: This
   - Action: Set Style
   - Border Color: #FF3B30

五、动态面板与母版

5.1 动态面板（Dynamic Panel）

动态面板是 Axure 中最强大的元件之一，可以包含多个状态，实现轮播图、选项卡、弹窗等复杂交互。

5.1.1 动态面板基本操作

创建动态面板：

复制代码

方法1：直接拖拽动态面板元件到画布
方法2：选中已有元件，右键 -> Convert to Dynamic Panel

状态管理：

javascript 复制代码

// 动态面板状态操作
Set Panel State       // 设置当前显示状态
Next State            // 切换到下一状态
Previous State        // 切换到上一状态
Toggle State          // 切换状态

5.1.2 轮播图实现

复制代码

需求：实现一个自动播放的图片轮播

1. 创建动态面板，命名为 "banner_panel"
2. 添加3个状态，每个状态放置一张图片
3. 设置自动切换交互

事件：OnLoad
动作：Set Panel State
目标：banner_panel
状态：Next State
配置：
  - 循环播放
  - 间隔时间：3000ms
  - 动画：Slide Left 500ms

5.2 中继器（Repeater）

中继器是 Axure 9 的数据驱动元件，可以批量生成重复性内容。

5.2.1 中继器基本结构

复制代码

中继器组成：
┌─────────────────────────┐
│  Data Set（数据集）      │  ← 定义数据字段
│  Item（列表项）          │  ← 定义每项样式
│  Interactions（交互）    │  ← 定义交互逻辑
└─────────────────────────┘

5.2.2 数据集设置

中继器数据集类似于 Excel 表格，每行代表一条数据，每列代表一个字段。

示例数据集：

javascript 复制代码

/* 商品列表数据集 */
ID    Name           Price      Image
001   iPhone 15      5999       img1.png
002   MacBook Pro    12999      img2.png
003   AirPods Pro    1999       img3.png
004   iPad Air       4799       img4.png

5.2.3 数据绑定

使用双中括号语法将数据绑定到元件：

复制代码

商品名称：[[Item.Name]]
商品价格：￥[[Item.Price]]
商品图片：[[Item.Image]]

5.2.4 数据过滤与排序

javascript 复制代码

/* 过滤商品价格大于5000的项 */

Add Filter
Name: high_price_filter
Condition: [[Item.Price > 5000]]

/* 按价格升序排序 */

Add Sort
Name: price_asc
Property: Price
Order: Ascending

5.3 母版（Master）

母版用于创建可复用的组件，修改母版后，所有引用处都会同步更新。

5.3.1 创建母版

复制代码

方法1：选中元件 -> 右键 -> Create Master
方法2：右键面板 -> Masters -> Add Master

常用母版类型：

导航栏
页脚
侧边栏
搜索框
用户信息卡片

5.3.2 母版使用

复制代码

母版使用流程：
1. 创建母版文件
2. 设计母版内容
3. 设置母版行为
   - Drop behavior（放置行为）
   - Location（位置锁定）
4. 拖拽母版到页面使用

母版行为设置：

复制代码

Drop behavior 选项：
├─ Any location（任意位置）
├─ Custom location（自定义位置）
└─ Break away（脱离母版）

六、函数与变量应用

6.1 内置函数

Axure 9 提供了丰富的内置函数，用于实现复杂的逻辑计算。

6.1.1 字符串函数

javascript 复制代码

// 字符串操作函数
[[text.length]]              // 获取字符串长度
[[text.toUpperCase()]]       // 转换为大写
[[text.toLowerCase()]]       // 转换为小写
[[text.substring(0,5)]]      // 截取字符串
[[text.replace('a','b')]]    // 字符串替换
[[text.indexOf('key')]]      // 查找子串位置

使用示例：

复制代码

场景：限制用户名长度不超过10个字符

OnTextChange 事件：
If [[This.text.length > 10]]
  Set text: [[This.text.substring(0,10)]]
  Show warning: 用户名不能超过10个字符

6.1.2 数学函数

javascript 复制代码

// 数学计算函数
[[Math.abs(x)]]              // 绝对值
[[Math.ceil(x)]]             // 向上取整
[[Math.floor(x)]]            // 向下取整
[[Math.round(x)]]            // 四舍五入
[[Math.max(a,b)]]            // 最大值
[[Math.min(a,b)]]            // 最小值
[[Math.random()]]            // 随机数（0-1）

实战案例：随机数生成器

javascript 复制代码

/* 生成1-100之间的随机整数 */

元件名称：random_button
OnClick 事件：
Set text of result_field to: [[Math.floor(Math.random() * 100) + 1]]

6.1.3 日期函数

javascript 复制代码

// 日期时间函数
[[Now]]                      // 当前日期时间
[[Now.getFullYear()]]        // 获取年份
[[Now.getMonth()]]           // 获取月份（0-11）
[[Now.getDate()]]            // 获取日期
[[Now.getDay()]]             // 获取星期（0-6）
[[Now.getHours()]]           // 获取小时
[[Now.getMinutes()]]         // 获取分钟
[[Now.getSeconds()]]         // 获取秒数

日期格式化：

javascript 复制代码

/* 格式化日期为 YYYY-MM-DD */

[[Now.getFullYear()]]-[[Now.getMonth() + 1]]-[[Now.getDate()]]

/* 输出示例：2024-01-15 */

6.2 变量使用

6.2.1 全局变量

全局变量在整个原型中共享，可用于页面间数据传递。

复制代码

变量创建：
1. Project -> Global Variables
2. 点击 Add Variable
3. 设置变量名和默认值

常用全局变量：

javascript 复制代码

OnLoadVariable        // 页面加载变量
Dragged               // 拖动状态
RepeaterItemCount     // 中继器项目数量
TargetItem            // 目标项目

6.2.2 局部变量

局部变量仅在特定交互或表达式中有效。

变量声明语法：

javascript 复制代码

/* 声明局部变量 */

[[LVAR1 = value]]

/* 使用示例 */
OnClick:
  Set text to: [[LVAR1.Text + ' 已添加到购物车']]

6.2.3 数据传递案例

复制代码

场景：商品列表点击跳转到详情页，传递商品ID

1. 商品列表页面设置：
   元件：商品卡片
   事件：OnClick
   动作：Open Link
   目标：详情页
   传递变量：product_id = [[Item.ID]]

2. 详情页接收数据：
   事件：OnLoad
   动作：Filter Repeater
   条件：[[Item.ID == product_id]]

七、团队协作与版本管理

7.1 团队项目（Team Project）

Axure 9 支持多人协作编辑同一个原型文件。

7.1.1 创建团队项目

复制代码

创建步骤：
1. File -> New Team Project
2. 选择项目存储位置
   - Axure Cloud（推荐）
   - Local Network（本地网络）
   - SVN / Git（版本控制）
3. 设置项目名称和权限

7.1.2 签入签出机制

复制代码

工作流程：
Checkout（签出）→ 编辑文件 → Checkin（签入）

操作说明：
- 签出后其他成员无法编辑该页面
- 编辑完成后务必签入释放权限
- 可以添加签入说明方便团队追溯

7.2 Axure Cloud 协作

Axure Cloud 是官方提供的云端协作平台。

主要功能：

功能	说明
云端预览	直接分享链接给利益相关者
评论标注	在原型上添加评论和反馈
版本历史	查看和恢复历史版本
团队管理	邀请成员并设置权限

7.3 发布与分享

7.3.1 发布到 Axure Cloud

复制代码

发布步骤：
1. 点击 Publish -> Publish to Axure Cloud
2. 选择工作区和项目
3. 设置发布选项
4. 点击 Publish 按钮
5. 复制分享链接

7.3.2 生成本地 HTML

复制代码

导出步骤：
1. File -> Publish Settings
2. 选择 Local Folder
3. 设置输出路径
4. 配置生成选项
5. 点击 Generate

生成选项说明：

复制代码

Include pages:          选择要生成的页面
Include folders:        包含文件夹
Default page:           设置默认首页
Include annotations:    包含注释说明
Include style:          包含样式文件
Compression:            启用压缩优化

九、常见问题解答

9.1 性能优化

Q：大型原型文件加载缓慢怎么办？

复制代码

优化方案：
1. 减少单页元件数量
   - 使用中继器替代重复元件
   - 合并多个静态图片为一张

2. 图片优化
   - 使用 WebP 格式
   - 控制单张图片大小 < 500KB
   - 使用适当尺寸，避免过大

3. 交互优化
   - 减少不必要的动画效果
   - 简化复杂的表达式
   - 使用按需加载策略

Q：如何减少文件体积？

复制代码

压缩方法：
1. 删除未使用的元件和页面
2. 压缩图片资源
3. 清理历史版本
4. 使用外部链接引用大图

9.2 交互设计

Q：如何实现复杂的条件判断？

javascript 复制代码

/* 多条件判断示例 */

If [[condition1 AND condition2]]:
  /* 两者都成立 */
  Action A
Else If [[condition1 OR condition2]]:
  /* 至少一个成立 */
  Action B
Else:
  /* 都不成立 */
  Action C

Q：中继器数据如何动态更新？

javascript 复制代码

/* 动态添加数据 */
OnClick:
  Add Row to Repeater:
    Field1: [[input1.text]]
    Field2: [[input2.text]]
    Field3: [[Now]]

/* 动态删除数据 */
OnClick:
  Mark rows to delete: [[Item.IsSelected]]
  Delete marked rows

9.3 发布分享

Q：如何保护原型隐私？

复制代码

隐私保护方案：
1. 设置访问密码
   - Axure Cloud -> Share -> Password Protect

2. 限制访问人群
   - 仅邀请指定成员
   - 设置访问权限

3. 设置过期时间
   - 临时分享链接
   - 定期更新访问凭证

Q：离线原型如何查看？

复制代码

离线查看方法：
1. 导出 HTML 文件到本地
2. 使用 Axure RP 浏览器扩展
3. 打开 index.html 文件即可
4. 无需网络连接即可预览

十、总结与进阶学习

10.1 核心要点回顾

本文系统性地介绍了 Axure 9 的基础功能和实际应用，主要涵盖以下内容：

复制代码

知识体系：
├─ 基础操作
│  ├─ 界面认知与设置
│  ├─ 元件使用与布局
│  └─ 页面管理技巧
├─ 交互设计
│  ├─ 事件动作机制
│  ├─ 动态面板应用
│  └─ 中继器数据驱动
├─ 高级功能
│  ├─ 函数与表达式
│  ├─ 变量与数据传递
│  └─ 团队协作管理
└─ 实战技巧
   ├─ 性能优化方法
   ├─ 常见问题解决
   └─ 最佳实践总结

10.2 学习建议

初学者学习路径：

复制代码

第一阶段（1-2周）：
├─ 熟悉界面操作
├─ 掌握基础元件
└─ 简单交互实现

第二阶段（2-4周）：
├─ 动态面板应用
├─ 中继器数据管理
└─ 复杂交互设计

第三阶段（持续）：
├─ 组件库建设
├─ 设计规范制定
└─ 团队协作流程

进阶提升方向：

组件库积累：建立个人和团队组件库
设计规范：制定统一的命名和设计规范
性能优化：学习大型项目性能优化技巧
插件开发：使用 JavaScript 扩展功能
自动化：结合 Figma/Sketch 实现设计到原型的自动化

10.3 参考资源

官方资源：

推荐学习资源：

Axure Widget Library - 官方元件库
Axure Templates - 原型模板
UX Design Resources - UX 设计最佳实践

相关工具：

工具名称	用途	特点
Figma	UI 设计	实时协作
Sketch	界面设计	macOS 平台
Adobe XD	原型设计	Adobe 生态
Principle	动效设计	高级动画

10.4 结语

Axure RP 是产品设计和交互设计的强大工具，掌握其基础功能只是开始，真正的精通需要在实际项目中不断实践和积累。

持续学习建议：

定期浏览 Axure 官方更新日志
参与社区讨论和经验分享
分析优秀原型的设计思路
建立个人知识库和组件库

希望本文能够帮助读者快速入门 Axure 9，在实际工作中发挥原型设计的价值，提升产品设计效率和质量。

投票

如果本文对您有帮助，欢迎点赞、收藏和评论，您的支持是我持续创作的动力！

Axure day2 基础教程完整指南

Axure 9 基础教程完整指南：从入门到精通

摘要

目录

一、Axure 简介与安装

1.1 什么是 Axure RP

1.2 Axure 9 新特性

1.3 安装步骤

二、工作界面详解

2.1 界面布局总览

2.2 工具栏功能

2.3 画布设置

三、基础元件与使用

3.1 元件库介绍

3.2 常用元件详解

3.2.1 矩形元件（Rectangle）

3.2.2 文本元件（Text Paragraph）

3.2.3 图片元件（Image）

3.2.4 输入框元件（Text Field）

3.3 元件操作技巧

3.3.1 选择与移动

3.3.2 对齐与分布

3.3.3 层级管理

四、交互设计基础

4.1 交互概念

4.2 常用交互事件

4.2.1 鼠标事件

4.2.2 键盘事件

4.2.3 页面事件

4.3 常用交互动作

4.3.1 导航动作

4.3.2 元件动作

4.3.3 动画效果

4.4 交互案例实战

案例1：按钮点击跳转

案例2：鼠标悬停效果

案例3：输入验证

五、动态面板与母版

5.1 动态面板（Dynamic Panel）

5.1.1 动态面板基本操作

5.1.2 轮播图实现

5.2 中继器（Repeater）

5.2.1 中继器基本结构

5.2.2 数据集设置

5.2.3 数据绑定

5.2.4 数据过滤与排序

5.3 母版（Master）

5.3.1 创建母版

5.3.2 母版使用

六、函数与变量应用

6.1 内置函数

6.1.1 字符串函数

6.1.2 数学函数

6.1.3 日期函数

6.2 变量使用

6.2.1 全局变量

6.2.2 局部变量

6.2.3 数据传递案例

七、团队协作与版本管理

7.1 团队项目（Team Project）

7.1.1 创建团队项目

7.1.2 签入签出机制

7.2 Axure Cloud 协作

7.3 发布与分享

7.3.1 发布到 Axure Cloud

7.3.2 生成本地 HTML

九、常见问题解答

9.1 性能优化

9.2 交互设计

9.3 发布分享

十、总结与进阶学习

10.1 核心要点回顾

10.2 学习建议

10.3 参考资源

10.4 结语

投票

标签