Axure Mac 教程：从零开始，成为原型大师
第一部分：准备工作与界面概览
安装 Axure RP for Mac
- 下载：访问 Axure 官网，下载适用于 macOS 的版本。
- 安装：将下载的
.dmg文件拖拽到“应用程序”文件夹即可完成安装。 - 启动：首次启动可能需要在“系统偏好设置” -> “安全性与隐私”中允许运行。
- 许可：如果你是付费用户，请登录你的 Axure 账户激活，如果是试用版，可以免费使用 30 天。
认识 Axure Mac 界面
Axure 的界面主要分为以下几个核心区域：
（图片来源网络，侵删）
- 顶部菜单栏：包含文件、编辑、视图、原型、发布等所有操作命令。
- 左侧面板：这是你的“零件库”，包含所有可用的元件。
- 默认元件：按钮、图片、文本框、矩形、动态面板等基础元件。
- 流程图元件：用于绘制流程图和架构图。
- 图标库：丰富的矢量图标。
- 自定义元件：你可以将自己创建的元件保存到这里，方便复用。
- 中间画布：你的主要工作区，在这里拖拽元件、搭建页面和布局。
- 右侧面板：功能最强大的面板，包含三个主要标签页：
- 页面：管理你的所有原型页面，可以添加、删除、重命名和设置页面层级。
- 交互：这是 Axure 的灵魂所在，在这里为元件添加交互事件（如点击、悬停）和动作（如打开页面、显示/隐藏、设置文本等）。
- 说明：为你的设计添加注释，方便自己和团队成员理解设计细节。
- 底部/顶部工具栏：包含常用的操作按钮，如预览、撤销/重做、元件对齐、分布等。
第二部分：基础操作 - 创建你的第一个原型
创建新项目
- 打开 Axure，选择
文件->新建。 - 你会看到一个空白的画布和默认的
Page 1。
添加与编辑元件
- 添加元件：从左侧面板中，将一个“矩形”元件拖拽到画布上。
- 编辑元件：
- 选中元件：单击画布上的元件。
- 修改样式：在右侧面板的“样式”选项卡中，可以修改填充颜色、边框、圆角、阴影等。
- 修改文本：双击元件输入文字，或在右侧面板的“文本”选项卡中设置字体、大小、颜色等。
- 调整大小：拖拽元件四角的控制点，或使用右侧面板的“尺寸”选项卡精确输入数值。
页面管理
- 添加页面：在右侧面板的“页面”标签页中，点击左下角的 号。
- 重命名页面：双击页面名称，或右键点击页面选择“重命名”。
- 设置首页：右键点击某个页面，选择“设为首页”，这个页面在预览时将作为第一个打开的页面。
预览你的原型
- 预览：点击顶部菜单栏的
预览按钮，或按快捷键Cmd + Option + P。 - Axure 会在你的默认浏览器中生成一个可交互的 HTML 原型，你可以点击按钮、输入文字，体验基本的交互效果。
第三部分：核心功能 - 添加交互与动态效果
这是从“静态稿”到“动态原型”的关键一步，我们以最常见的“点击按钮，弹出另一个页面”为例。
场景：在首页点击“登录”按钮，跳转到“登录页面”。
步骤 1：创建目标页面
- 在右侧“页面”面板中，新建一个页面，命名为“登录页面”。
- 在“登录页面”的画布上，绘制一个登录框（包含用户名、密码输入框和登录按钮）。
步骤 2：设置交互
- 回到首页，选中“登录”按钮。
- 在右侧面板,切换到 “交互” 标签页。
- 添加事件：点击
+ 新建交互，在弹出的事件列表中，选择 “单击时” (onClick)。 - 添加动作：在右侧的动作列表中，选择 “打开链接” (Open Link)。
- 配置动作：
- 在下方的“目标”中，选择 “当前窗口”。
- 在“链接到”的下拉菜单中，选择你刚刚创建的 “登录页面”。
- 完成：点击
确定。
步骤 3：预览测试
（图片来源网络，侵删）
- 再次点击
预览按钮，在浏览器中点击首页的“登录”按钮，你应该就能成功跳转到“登录页面”了。
第四部分：进阶技巧 - 让原型更生动
动态面板 - 实现复杂交互和状态切换
动态面板是 Axure 最强大的元件，它可以像图层一样包含多个“状态”，每个状态可以有不同的内容和样式。
案例：实现一个标签页切换
- 创建动态面板：从左侧拖拽一个“动态面板”到画布上。
- 添加状态：在右侧“交互”面板下方，选中动态面板，点击“状态”管理。
- 默认有一个
State 1，将其重命名为“首页内容”。 - 点击
+ 添加状态，创建第二个状态，命名为“分类内容”。
- 默认有一个
- 编辑状态内容：
- 在“首页内容”状态中，放置一些首页的元件（如商品列表）。
- 在“分类内容”状态中，放置一些分类页面的元件（如分类列表）。
- 注意：编辑状态时，需要先在右侧面板的“状态”下拉菜单中选择要编辑的状态。
- 添加切换交互：
- 在画布外,创建两个按钮：“首页”和“分类”。
- 选中“首页”按钮，添加“单击时” -> “设置面板状态” 动作。
- 目标：选择你的动态面板。
- 选择状态：选择“首页内容”。
- 选中“分类”按钮，同样添加“单击时” -> “设置面板状态” 动作。
- 目标：选择你的动态面板。
- 选择状态：选择“分类内容”。
- 预览：点击预览，你会发现点击不同按钮，动态面板内的内容会无缝切换。
变量与函数 - 实现数据交互
变量可以用来存储和传递数据,比如用户输入的文本、计算后的数值等。
案例：实现一个简单的搜索框
- 创建元件：画布上放置一个文本框（命名为
searchInput）和一个按钮（命名为searchButton）。 - 设置变量：
- 在右侧“交互”面板中，点击
+ 添加全局变量。 - 变量名输入
searchKeyword，类型选择文本。
- 在右侧“交互”面板中，点击
- 添加交互：
- 当用户在文本框中输入时：选中
searchInput，添加“文本改变时” (onTextChange) 事件。- 动作：“设置文本” (Set Text)。
- 目标：选择
searchInput本身。 - 值：选择
fx函数图标。 - 在弹出的编辑器中,选择
this.value(代表当前元件的值)，然后点击确定。 - 再添加一个动作：“设置变量值” (Set Variable)。
- 目标：选择
searchKeyword。 - 值：同样选择
fx，输入this.value。
- 当用户点击搜索按钮时：选中
searchButton，添加“单击时”事件。- 动作：“显示提示” (Show Alert)。
- 提示信息：输入
fx，然后输入[[searchKeyword]]，Axure 会用变量的值替换这个文本。
- 当用户在文本框中输入时：选中
- 预览：在文本框中输入任何文字，然后点击搜索按钮，就会弹出一个提示框，显示你输入的内容。
条件逻辑 - 让交互更智能
你可以为交互添加条件,让某些动作只在特定条件下触发。
案例：实现一个“记住我”的复选框
- 创建元件：一个复选框（命名为
rememberMe），一个文本框（username）。 - 添加交互：
- 选中
username，添加“获得焦点时” (onFocus) 事件。 - 动作：“设置选中” (Set Selected)。
- 目标：
rememberMe。 - 添加条件：点击
+ 添加条件。- 条件：
[[rememberMe.checked]]==true(如果复选框被选中)。 - 点击
如果为真下方的+ 添加动作。 - 动作：“设置文本” (Set Text)。
- 目标：
username。 - 值：
fx->[[rp.GetPageByName("登录页面").username.value]](假设你之前在登录页面输入过用户名)。
- 条件：
- 选中
- 预览：在登录页面输入用户名并勾选“记住我”，然后跳转到其他页面再回来，当用户名框获得焦点时，它会自动填充之前保存的用户名。
第五部分：Mac 使用小贴士
- 快捷键：熟练使用快捷键能极大提升效率。
Cmd + Z/Cmd + Shift + Z：撤销 / 重做。Cmd + C/Cmd + V/Cmd + X：复制 / 粘贴 / 剪切。Delete：删除选中元件。Cmd + D：复制选中元件。Cmd + Option + P：预览。空格键：按住空格键可以临时切换到“抓手”工具，拖动画布。
- 对齐与分布：选中多个元件后，顶部工具栏会出现对齐和分布按钮，让你的布局更整齐。
- 样式复用：选中一个设置好样式的元件，右键选择“设置为样式”，可以为其他元件快速应用相同的样式。
- 自定义元件库：将常用的组合（如导航栏、卡片）创建为动态面板，然后右键保存为“自定义元件”，方便在整个项目中复用。
第六部分：资源与学习
- 官方资源：
- Axure 官方教程：https://www.axure.com/learn (内容非常全面，是学习的最佳起点)
- Axure 官方示例：下载官方示例文件，拆解学习别人的交互实现。
- 社区资源：
- Axure Share：https://axureshare.com/ (分享优秀的原型和模板)
- 优设网、站酷等设计社区：搜索“Axure 教程”，有大量中文教程和案例。
- 视频教程：在 Bilibili、YouTube 等平台搜索“Axure 教程”，有很多视频课程可供选择，适合喜欢看视频学习的用户。
希望这份教程能帮助你顺利上手 Axure for Mac！多动手实践，尝试复刻你喜欢的 App 界面，你的原型设计能力会飞速提升。
