第一部分：基础入门篇 - 熟悉界面与核心概念

在开始实例之前，我们先花5分钟快速了解 Axure 的“工作台”。

Axure 界面布局

打开 Axure,你会看到几个主要区域：

• 左侧【页面大纲】: 管理你的所有页面和模块，像网站的地图，可以在这里创建新页面、组织文件夹。
• 中间【画布】: 你设计和放置组件的地方，在这里拖拽元素、绘制交互。
• 右侧【元件库】: 你的“素材库”，包含了所有可用的 UI 元素，如按钮、文本框、图片、矩形等,你可以在这里自定义元件。
• 右侧【交互/说明】: 这是 Axure 的“灵魂”。
  • 交互：设置元件的行为，如点击、悬停等事件会触发什么动作（如跳转页面、显示/隐藏、用例等）。
  • 说明：给每个元件添加注释,方便自己和他人理解设计意图。
• 顶部【工具栏】: 包含预览、发布、撤销/重做等常用操作。

核心概念

• 元件: 画布上的任何东西都是一个元件，按钮、图片、文本框都是元件。
• 母版: 非常重要！ 母版是可复用的组件模板，网站的导航栏、页脚、搜索框，这些在多个页面都一样的部分，都应该做成母版，修改母版,所有引用它的页面都会自动更新。
• 交互: Axure 的交互逻辑是“事件 + 动作”。
  • 事件: 用户的行为，如 onClick (点击), onMouseEnter (鼠标悬停), onPageLoad (页面加载)。
  • 动作: 事件发生后的结果，如 Open Link (打开链接), Show/Hide (显示/隐藏), Set Widget Text (设置文本)。

第二部分：经典实例教程

标签页

这是最基础的交互效果,几乎所有网站都会用到。

目标效果: 点击不同的标签,下方内容区域切换显示对应的内容。

实现步骤:

1. 准备元件:

   • 从元件库拖出 3 个 矩形 作为标签（如“首页”、“产品”、“）。
   • 拖出 3 个 动态面板 作为内容区域，为了区分，可以给它们设置不同的背景色,将它们在画布上重叠放置。

2. 设置动态面板:

   • 选中第一个动态面板（如“首页内容”），在右侧 “交互” 面板中，找到 “状态管理”，将其默认状态设为 可见。
   • 选中另外两个动态面板（“产品内容”、“关于内容”），将它们的默认状态设为 隐藏。

3. 添加交互（关键步骤）:

   • 选中第一个标签“首页”的矩形。
   • 在右侧 “交互” 面板，点击 + 新建交互。
   • 事件: 选择 onClick (单击时)。
   • 动作: 选择 Set Panel State (设置面板状态)。
   • 目标: 选择 当前窗口。
   • 面板: 选择你创建的动态面板（比如叫 Panel_content）。
   • 状态: 选择 。
   • 勾选 “动画”，选择 向下滑入 或 淡入,效果更佳。
   • 点击 确定。

4. 重复步骤 3:

   • 为“产品”标签添加交互：onClick -> Set Panel State -> Panel_content -> 。
   • 为“标签添加交互：onClick -> Set Panel State -> Panel_content -> 。

5. 预览效果:

   • 点击顶部工具栏的 预览 按钮（蓝色三角形图标）。
   • 点击不同的标签，你会发现下方内容平滑切换，恭喜,你完成了第一个交互！

折叠面板

常用于 FAQs、设置选项等,节省页面空间。

目标效果: 点击标题，内容展开；再次点击,内容收起。

实现步骤:

1. 准备元件:

   • 拖出一个 矩形 作为标题栏。
   • 栏下方，拖出一个 动态面板 作为内容区域。
   • 在动态面板内,放入文本内容。

2. 设置动态面板状态:

   • 选中动态面板，在右侧 “交互” 面板的 “状态管理” 中，添加两个状态：展开 和 收起。
   • 在 展开 状态下，调整动态面板的高度,使其能完整显示内容。
   • 在 收起 状态下，将动态面板的高度调小（甚至为0，或者只显示一个边框）。
   • 设置默认状态为 收起。

3. 添加交互:

   • 栏矩形。
   • 添加交互：onClick。
   • 动作：选择 Toggle Panel State (切换面板状态)。
   • 目标：选择你的动态面板。
   • 勾选 “动画”，选择 向下滑入 或 淡入。

4. 预览效果:

   • 点击 预览栏，内容会展开；再次点击，内容会收起,完美！

登录表单验证

这是一个非常实用的表单交互,能极大提升用户体验。

目标效果:

• 输入框为空时,提交按钮置灰。
• 输入框获得焦点时,显示提示信息。
• 输入错误时,提示信息变红并显示错误文本。

实现步骤:

1. 准备元件:

   • 拖出两个 文本框 分别作为“用户名”和“密码”输入框。
   • 拖出一个 按钮 作为“登录”按钮。
   • 在每个输入框下方，各放置一个 文本标签，用于显示提示信息（如“请输入用户名”），初始时设置为 隐藏。

2. 设置按钮初始状态:

   • 选中“登录”按钮，在右侧 “样式” 面板中，设置一个置灰的颜色（如 #CCCCCC）。
   • 给按钮添加一个交互：onPageLoad (页面加载时) -> Disable (禁用) 按钮。

3. 实现输入时启用按钮:

   • 选中“用户名”输入框。
   • 添加交互：onTextChange (文本改变时) -> Enable (启用) 按钮。
   • 同样，为“密码”输入框也添加这个交互。

4. 实现聚焦提示:

   • 选中“用户名”输入框。
   • 添加交互：onFocus (获得焦点时) -> Show (显示) 它下方的提示信息标签。
   • 添加交互：onBlur (失去焦点时) -> Hide (隐藏) 提示信息标签。
   • 为“密码”输入框重复此操作。

5. 实现提交验证:

   • 选中“登录”按钮。
   • 添加交互：onClick。
   • 动作：选择 Show/Hide。
   • 目标：选择“用户名”下方的提示信息标签。
   • 选择 Hidden (隐藏)，并勾选 Animate (动画)。
   • 动作：再添加一个 Show/Hide，这次是 Show (显示) “密码”下方的提示信息标签。
   • （进阶）判断输入是否为空:
     • 在 onClick 的交互中，点击 + 添加动作，选择 Conditional Logic (条件逻辑)。
     • 条件：When [用户名输入框] 的 text is equal to (空字符串)。
     • 如果条件为真，则执行：Show 提示信息标签，并将该标签的文本设为“用户名不能为空”。
     • 为密码输入框也添加类似的条件逻辑。

6. 预览效果:

   预览后，尝试各种操作,感受表单的交互反馈。

导航栏下拉菜单

网站的常见组件,用于展示二级或三级菜单。

目标效果: 鼠标悬停在导航栏的“产品”上,显示其子菜单。

实现步骤:

1. 准备元件:

   • 拖出一个 矩形 作为导航栏主菜单项（如“产品”）。
   • 在它下方，拖出一个 垂直菜单 或多个 矩形 作为子菜单项，将整个子菜单组包裹在一个 动态面板 里,方便控制显示和隐藏。

2. 设置动态面板:

   • 选中子菜单的动态面板，在右侧 “交互” 面板的 “状态管理” 中，设置两个状态：隐藏 和 显示。
   • 默认状态为 隐藏。

3. 添加交互:

   • 选中主菜单项“产品”。
   • 添加交互：onMouseEnter (鼠标悬停时) -> Set Panel State -> 显示。
   • 再添加一个交互：onMouseLeave (鼠标离开时) -> Set Panel State -> 隐藏。

4. （优化）防止鼠标离开菜单时消失:

   • 这个问题很常见，当鼠标从主菜单快速移动到子菜单时，onMouseLeave 事件会触发,导致子菜单消失。
   • 解决方案: 将主菜单和子菜单的动态面板都放在一个大的 矩形 或 组合 里。
   • 为这个大的容器添加交互：onMouseEnter -> Set Panel State -> 显示。
   • 为这个大的容器添加交互：onMouseLeave -> Set Panel State -> 隐藏。
   • 这样，只要鼠标在整体菜单区域内,子菜单就不会消失。

5. 预览效果:

   预览，将鼠标悬停在“产品”上,子菜单应稳定显示。

第三部分：进阶技巧与资源

当你掌握了以上实例后,可以探索更高级的功能。

1. 变量:

   • 用于存储数据，比如登录后显示的用户名、购物车商品数量等。
   • 在顶部菜单 项目 -> 全局变量 中创建。
   • 可以通过 Set Variable 动作来赋值，通过 Get Variable 来使用。

2. 中继器:

   • Axure 最强大的功能之一！它是一个可以动态生成列表的元件。
   • 可以用它来制作：商品列表、评论列表、数据表格、瀑布流等。
   • 核心是设置 Item（项）的模板，然后通过 Repeater Set Data 动作用外部数据（如 Excel）来填充它。

3. 自适应视图:

   • 在 Axure 9+ 版本中，一个页面可以创建多个视图（如桌面、平板、手机）。
   • 你可以为不同视图设置不同的布局和元件样式,轻松制作响应式原型。

4. 发布与分享:

   • 点击 发布 按钮，Axure 会将原型生成一个 .html 文件和一堆资源文件。
   • 你可以将这些文件上传到服务器或使用 Axure Cloud 进行在线分享和协作。

推荐学习资源

• Axure 官方教程: 最权威,但可能稍显枯燥。
• Bilibili: 搜索“Axure教程”，有大量国内UP主制作的免费视频教程,非常系统。
• 优设网、站酷等设计社区: 经常分享 Axure 组件库和高级技巧。
• YouTube: 国外有很多高质量的 Axure 教程,可以开启字幕学习。

学习 Axure 的关键在于 “多练”，不要只看教程，亲手把每一个案例做一遍，然后尝试修改它们，创造出自己的交互效果，从模仿到创造，你的 Axure 技能会飞速提升！