★ FEATURED ARTICLE 简介这份教程是面向产品经理、交互设计师的Axure RP入门与操作指南系统介绍从界面认识到线框图、交互、注释、动态面板等功能帮助零基础读者快速掌握原型设计工具的核心用法。资源包为1个doc文档压缩后大小4.73MB内容按“Axure介绍→界面与功能→工具栏→站点地图→部件库→交互与动态面板→注释与变量”等模块层层递进并配有界面截图与步骤说明。目前已有164人学习下载。文档从几款常见原型工具的对比讲起说明Axure相对Word、Visio、PS等软件在表达交互与注释上的优势再结合4.6稳定版讲解具体操作也提及5.0版本的新特性。读者按章节动手练习无需编写HTML与JavaScript即可绘制带注释的wireframe并能一键生成HTML演示和Word版原型设计文档可直接用于需求评审与团队协作。1. 原型设计工具为什么选 Axure七个工具的对比与一个反直觉结论做原型设计这件事工具选错了后面全是在补坑。纸笔适合记录灵感但保真度不够也没法表达页面跳转Word 能画线框、能写批注可交互演示很弱PPT 演示方便却撑不下大篇幅的功能说明Visio 画流程是把好手注释字段聊胜于无PS/FW 和 DW 要么上手重要么得先会 HTML——这些工具没有一个是冲着原型设计来的。Axure RP 不一样它把带注释的 wireframe、页面流程、交互触发和 HTML/Word 输出放在同一条流程里不用写一行代码就能让原型在浏览器里跑起来直接拿去给开发演示。这份图文教程从 4.6 版本讲起从界面、站点地图、模板复用、widgets一直讲到交互注释和自动出稿。适合刚接触 Axure 的产品经理、交互设计师按顺序跟练也适合想系统补一遍基础的老手查漏。需要提前说的是高版本保存的文件低版本打不开这不算 bug但沟通协作时确实会翻车我会在后面的章节展开。2. 界面与信息栏九个功能区怎么认、信息栏怎么帮你精确对位第一次打开 Axure RP多数人会被一堆面板吓到命令区、工作区、站点地图、器具箱、复用模块、页面笔记……其实它和 Office 是一个套路先把每个面板的功能边界搞清楚后面画 wireframe 时就能少走弯路。这一章我带你把主界面过一遍重点说说最容易被人忽略的右下角信息栏那是给 UI 交像素数值的关键工具。2.1 欢迎界面与主界面三个特殊命令菜单运行 Axure RP 后先弹出来的是欢迎界面。左侧是文档区显示最近打开的文件也能快捷新建文档和打开默认文件夹中间是认证区注册用户显示注册名和认证图标未注册用户会看到注册引导右侧是 Axure RP 学习中心提供在线视频教程、官方讨论组和博客入口。如果不希望每次启动都看到这个面板勾选 “Dont show this at startup” 即可。需要留意的是欢迎界面里会明确提示你4.6 高版本创建并保存的文件低版本无法查看。关闭欢迎界面后就进入主界面。整体是淡蓝色调的 UI和 Office 风格接近。我把九个功能区整理成一张表后面提到某个面板时你直接对照功能区名称作用1命令区文件、编辑、查看、帮助、table以及 Axure 特有的 wireframe、object、generate 三个命令2工具栏和 Office 工具栏风格一致复制粘贴、撤销重做、对齐等常用操作在这3工作区实际画原型的地方可同时打开多份文档4站点地图以树形目录管理所有页面文件和流程图文件模拟真实网站的页面关系5器具箱存放所有画 wireframe 和流程图的对象拖拽进工作区即可使用6复用模块区存放 master 模板文件供站点地图中的多个页面反复调用7页面笔记对当前整页做注释说明针对页面整体8页面载入时交互设置页面初次打开时的触发条件针对页面整体9注释与交互区针对页面中单个 widget 设置交互条件和注释是最常用的面板命令区有几个 Axure 特有的菜单需要单独说明。wireframe 菜单包含所有画线框图的操作命令object 菜单用来操作工作区里的对象包括组合、排序、锁定和脚注generate 菜单则是自动生成 HTML 演示文件和 Word 说明文档生成规则也能自己定义。这三个菜单没有对应的工具栏按钮很多新手找不到入口画完原型要出文档时记得回到命令区找 generate。页面笔记和页面载入时交互针对的是整个页面注释与交互区针对的是页面里的单个元素两者在生成文档时的表现也不一样。这个区别后面讲注释时还会提到先记住它们的定位不同就不会混淆。注意4.6 高版本保存的文件低版本无法查看。团队协作前先统一下版本这个提示不是摆设。2.2 右下角的信息栏不被注意的像素度量工具在功能区 6、7、8 的下方有一行系统信息很多人会忽略它但它是交 wireframe 时最重要的工具之一。信息栏左边显示当前文档的保存情况右边在你选中某个 widget 时显示这个 widget 的高、宽以及距离页面顶部和左边的像素距离。也就是说你完全可以在 Axure 里度量出每个元素的精确像素位置。我的操作习惯是这样的先把一个矩形从器具箱拖到工作区选中它盯着右下角信息栏看宽高数值然后用键盘的方向键微调位置每按一下信息栏里的左边距和上边距数值都会跟着变。这一步非常重要因为 UI 设计师拿到 wireframe 后必然会问“这里多少像素”“那里多少像素”信息栏就是你的度量尺。具体操作可以按四步走从器具箱里拖一个 rectangle 到工作区作为某个模块的占位。选中它在信息栏右侧读取高、宽、距页面顶部、距页面左侧四个数值。用方向键移动 widget观察信息栏数值变化移动到目标位置。把这个位置数值记下来写进注释字段方便对接时直接引用。参数说明信息栏的数值单位是 px页面坐标系的原点在左上角距左侧对应 x 值距顶部对应 y 值。对齐时先调 x 再调 y比同时动两步更稳。配合工作区多张文档同时打开你可以在一个页面里画好标准尺寸的控件复制到其他页面时用信息栏确认位置一致这样整套原型的页面间距能保持统一。3. 站点地图与文档管理sitemap 的父子目录与 flow/wireframe 双页面类型站点地图是 Axure 里管理所有页面的地方它模拟的是真实网站的页面关系。很多新手在这里只是机械地加页面、命名完全没有目录意识结果文件一多就开始乱。这一章把 sitemap 的父子关系、页面类型和右键菜单讲透你会发现文档组织其实是在理产品思路而不是在做杂务。3.1 站点地图的结构父子关系与增删升降级sitemap 的目录结构和 Windows 资源管理器很像是树形父子关系。每个节点既可以是一个页面 page也可以是一个流程图 flow。工具栏上提供了六类操作我按实际使用频率列一下操作作用增加一个子页面为当前选中的页面创建一个子页面页面上移 / 页面下移在同级页面中调整前后排列次序页面降序将当前页面变成它上方同级页面的子页面页面升序把当前页面提升为父页面的同级页面删除页面删除所选页面同时删除其子页面编辑页面在工作区打开所选页面进行编辑这里最关键的坑在“删除页面”——它会把所选页面的全部子页面一起删掉而且没有拆分选项。我见过有人想清理一个废弃分支结果把下面七八个画好的页面全删了。后面避坑章我会展开说这里先提一句删之前一定要展开目录确认有没有子页面。右键菜单还提供了几个工具栏没有的操作。复制功能有两种复制页面只复制所选页面本身不包含子页面复制分支则会把所选页面连同所有子页面一起复制生成一个新分支。这个差异很适合用来做版本备份。另外右键菜单里的“生成流程表”可以把所选页面及其子页面的关系直接生成一张流程图布局方式有两种标准模式按父子关系从上到下排列阶梯模式从左上到右下阶梯式排列。画完页面框架后生成一张流程表能快速检查目录结构是否合理。3.2 flow 与 wireframe 的两种组合方式从流程图推导页面框架sitemap 里的每个页面都能在右键菜单里被标记为两种类型wireframe 或 flow。wireframe 类型的文件图标显示页面图标表示这是一个线框页面flow 类型的文件图标显示流程图标表示这是一个流程图页面。用这两种类型标记页面能让阅读者一眼分清哪些是流程说明、哪些是实际页面。我总结出两种常用的组合方式你可以根据产品阶段来选择。第一种是 flow 为父、wireframe 为子先画整体流程图再根据流程图推导页面框架把页面挂在流程分支下。这样的好处是页面结构有流程逻辑支撑开发看目录时能顺着流程找到对应页面特别适合从零开始的新项目。第二种是 wireframe 为父、flow 为子在某个页面的线框图下挂一个子流程图用来解释页面里某个特殊部分的具体逻辑适合对复杂模块做补充说明。两种方式不是二选一的排他关系复杂产品里往往是“你中有我我中有你”。核心原则是让目录结构表达产品逻辑能用树形关系讲清楚的事情就不要堆在一张图里。3.3 文档管理习惯命名规范和 LOFI/HIFI 分组这一节说点软性的东西但实际影响很大。我刚带项目的时候发现不少刚从学校出来的同事对文档命名和放置完全随心所欲文件名是“新建文档(2)”“未命名3”这种页面层级也是想到哪加到哪。结果每次找历史文档都要翻半天偶尔还会误删请假时别人根本没法接手。我一般的做法是命名用“序号-模块-页面名”的格式比如“01-登录注册-手机号登录”让文件名本身能说明在流程中的位置页面层级严格按照功能模块划分同一模块的页面放在同一个父节点下同时在 sitemap 里用 flow 和 wireframe 区分流程和页面让目录结构自带说明。还有一点值得提的是 LOFI 和 HIFI 的分组。低保真和低保真原型面向的读者不同低保真适合早期讨论结构高保真适合给 UI 和开发确认细节。在 sitemap 里把两套分开建目录分别维护演示时按需展示比混在一起到处改方便得多。这个习惯养成之后出 PRD、做评审、交接文档都会顺很多。4. widgets 与 masters组件体系全解析从模板复用到动态面板器具箱里囤着所有画 wireframe 和流程图的对象这些在 Axure 里叫 widgets复用模块区里的文件则叫 masters是可以被多个页面反复调用的模块。这两个概念是 Axure 组件体系的核心理解它们的关系后你才能摆脱“每次画新页面都重新画一遍页头页脚”的体力劳动。4.1 masters 模板复用normal、底层定位与自定义组件masters 面板和 sitemap 面板看上去很像文档操作也类似但它们有本质区别sitemap 里的文件是最终展示页面masters 里的文件只是页面的一部分是一个可复用的模块。这对应到程序开发里就是 include 概念——把重复出现的一段内容单独抽出来然后在需要的页面里引用它。用过 Dreamweaver 的人可以把它理解成 template。masters 的功能条和 sitemap 基本一样唯一多出来的是“增加文件夹”因为 masters 靠文件夹组织文件文件之间没有父子关系。右键菜单里和 sitemap 的差异也不大。重点要看的是右键菜单里的“行为”设置这是 Axure 4 版本之后加入的关键功能决定了一个 master 在页面里的自由度行为特点适用场景normal 普通页面中的实例与 master 完全一致功能设置、说明文字全部同步页头、页脚、通用提示块place in background 底层定位定位于页面底层并锁定 widgets 在创建时的原始位置固定页头、页脚、侧边栏等明确定位的模块custom widgets 自定义组件类似自创一个 widget母件决定功能和位置但页面中可重新定义说明和功能需要同一模块在不同页面有不同表现的场景custom widgets 这个行为容易理解偏差。它和普通 master 的根本区别在于normal 行为的模块在页面中完全等同于 master 原件改一个全变custom widgets 行为则是“母子关系”母件只决定了模块的功能和位置进入具体页面后各部分的功能和说明可以按页面重新定义。想做“大体相同、局部有差异”的模块时选它比建多个 master 副本要干净得多。右键菜单里还有两个批量操作一个是把所选 master 批量应用到多个页面一个是从多个页面批量移除。选择时会弹出 sitemap 树形目录提供了 check all、uncheck all、check all children、uncheck all children 四种选项按页面层级批量勾选。在弹出面板里还能设置 position 和 optionsposition 里有两个命令“place in background”把模板放到页面背景层“specify location”可以指定距离左侧和顶部的像素位置来精确放置模板options 里的多选框默认是勾上的意思是“只有页面中没有此模块时才置入”不勾选时如果强制置入页面里已存在的同模块会被再次插入产生重复。最后提醒一下 usage report 功能右键 master 文件选择使用报告会列出所有使用了这个模板的页面双击文件名即可在工作区打开对应页面。这是一个好用但容易被忽略的维护工具模块改版后想确认影响范围用它最快。4.2 wireframe 线框工具从占位符到动态面板器具箱里的 wireframe 工具对应着 web 页面里的各种图形元素有 HTML 基础的人学这部分会非常快。我把 20 个工具的作用和常见使用场景列成一张表方便你对照工具名称作用使用场景image 图片插入图片占位也可放真实图片产品图、广告图区域text panel 文本插入普通文本对应 text 标签说明文字、正文内容hyperlink 超链接插入带链接的文本对应 a 标签导航文字、链接入口rectangle 矩形插入矩形可编辑样式板块边界、区域占位placeholder 占位符插入占位区域复杂区域、升级中暂不需修改的区域button 按钮插入按钮对应 button 标签表单提交、强化提示链接table 表格插入表格数据列表展示不建议做页面布局text field 文本输入框单行文本输入搜索框、登录框、注册框text area 文本区多行文本编辑文章编辑、留言板块droplist 下拉列表框下拉选项搜索分类范围、跳转链接listbox 列表选择框列表选项多项选项的列表选择checkbox 多项选择表单多选兴趣爱好、多选项设置radio button 单项选择表单单选非此即彼性别、单选设置horizontal / vertical line 水平线垂直线分割页面区域板块区隔button shape 形状按钮图形化按钮可编辑边角导航按钮、多帧切换按钮image map region 图像映射区制造不可见区域大图中的热区触发、说明标注inline frame 框架页面内嵌框架类似 iframe后台系统分栏、嵌子页面dynamic panel 动态面板多状态叠加的动态区域点击切换、轮播、交互演示menu 水平/垂直菜单制作导航菜单可添加浮动子菜单这里挑几个需要在意的工具展开。placeholder 占位符用来表达页面上那些“现在不处理”或“情况复杂”的区域画图时先用它占住位置配合注释文字说明细节能避免在低保真阶段纠缠具体内容。image map region 图像映射区是专门为图片热区设计的在一张大图上划出不可见区域就能给这块区域单独加说明或交互现实中电商页面的大图 Banner 就是这么处理的。dynamic panel 动态面板是 Axure 表现交互的核心工具它的图标本身就说明了结构多个 state 叠加成一个动态区域默认显示某一个 state当用户触发按钮、图片或下拉列表时可以切换到另一个 state。不同 state 之间的关系类似 Photoshop 的图层也类似 CSS 里的 layer。操作方式是右键 dynamic panel 新增 state双击打开单个 state 进行编辑编辑方式和编辑普通页面一致。比如做一个 Tab 切换就把每个 Tab 的内容分别画在独立 state 里再用按钮的点击事件触发 state 切换。inline frame 对应 HTML 里的 iframe常用来做后台系统的左右分栏布局左侧载入导航、右侧载入管理页面。它的缺点是暂时不支持百分比只能按像素度量所以画出来的效果和实际浏览器里的表现会有差距这一点后面避坑章再展开。菜单工具可以用来画水平或垂直导航选中菜单项后右键添加子菜单就能生成带悬浮子菜单的导航结构。整套 wireframe 工具对应着实际页面里的基本元素画线框图时尽量按标准区分普通文本和链接文本让设计人员一眼看出哪些是可点击的这比画得花哨更重要。4.3 flow 流程工具画清楚逻辑比画得标准更重要flow 工具组是为画流程图准备的。和程序工程师沟通时用口水讲半天不如一张简明流程图产品经理这时候需要的是理性思维和清晰思路如果自己思路不清开发大概率会跟着一起乱。这套工具基本涵盖了流程图、页面框架图和用例图常用的图形图形默认含义使用建议rectangle 矩形执行的处理流程执行框画页面框架时可指代一个页面和命令框用颜色区分rounded rectangle 圆角矩形程序的开始或结束起止框beveled rectangle 斜角矩形无固定标准自行定义含义我几乎不用diamond 菱形决策或判断If...Then...Else 判断框file 文件表达一个文件生成的文件或调用的文件bracket 括弧注释或条件叙述流程走到某个位置时的执行说明semicircle 半圆形页面跳转、流程跳转跳转标记triangle 三角形控制传递和线条结合画数据传递trapezoid 梯形手动操作手动执行的步骤ellipse 椭圆按顺序数据的流程或结束小圆表示顺序流程椭圆常作结束hexagon 六边形准备流程起始parallelogram 平行四边形数据或确定的数据处理资料输入actor 角色执行操作的角色来自用例图角色可以是人、机器或系统database 数据库保存数据的数据库数据存储节点image 图片表示一张图片置入画好的图或外部环境这里插一段个人观点Axure 把流程图、框架图、用例图常用的图形都囊括进了 flow 工具但它并不打算维护一套标准流程图的规范而是尽量贴近交互设计的工作内容。所以用这些图形时不必死抠某个图形的通用标准理解和沟通是第一位的。对于那些大家公认的图形比如菱形代表判断、圆角矩形代表起止则遵循共同的准则这样表达目的能达到。Axure 里没有提供的标准图形比如不规则图形、侧面双矩形你可以自己定义符号标准就像 PRD 文档里加上名词解释一样。我一般会给团队定一个简单的图例说明把自定义图形的含义写清楚挂在项目的第一页这样任何接手的人都不会误解。5. 常见问题与避坑Axure 4.6 里五个高频翻车点这一章是血泪经验的汇总。下面五条都是实际使用中高频出现的问题每一条都按“现象→原因→解决”的顺序写遇到同类情况可以直接对照处理。5.1 在 sitemap 误删页面子页面一起消失现象想清理一个暂时不用的父页面点了删除结果这个父页面下面挂着的七八个子页面全部一起消失了包括已经画好的线框图。 原因sitemap 的删除命令设计成“删除所选页面及其子页面”工具栏和右键菜单的删除操作都是这个逻辑执行时不会单独提示你要连带删除子页面。 解决删除任何页面之前先展开目录确认它下面有没有子分支不确定是不是还要的内容先右键复制分支做备份再删把“复制分支”当作后悔药用日常画完一个阶段就生成一张流程表看整体结构减少误操作的几率。5.2 高版本文件低版本打不开演示现场翻车现象用 4.6 画好的原型发到同事机器上对方用低版本打开直接报错或一片空白或者自己用 5.0 beta 编辑过文件回到 4.6 就打不开了。 原因Axure 高版本创建并保存的文件低版本无法查看。这个限制在欢迎界面里有明确提示但很多人从没注意过。 解决团队协作前规定统一版本号所有成员安装同一版本对外交付时确认接收方使用的版本必要时让对方升级用 beta 版本演示完记得把文件转换回团队实际使用的稳定版本再做正式交付。5.3 inline frame 不支持百分比iframe 对不齐现象用 inline frame 嵌一个后台管理页面按百分比设置宽度结果没生效放到浏览器里预览宽度和设计稿对不上。 原因Axure 4.6 的 inline frame 是按像素度量的不支持百分比设置这是工具本身的局限和实际浏览器渲染效果存在差距。 解决画图时按像素精确设置 iframe 的宽高不要依赖百分比在注释里标注清楚这个模块的实际页面宽度和开发沟通时说明 iframe 在原型里只是示意实际表现以浏览器为准避免误解。5.4 master 被全局同步局部修改改不动现象把页头做成 master放到多个页面后想在某个页面里单独微调一下页头高度结果一改所有页面都跟着变了改成 place in background 后元素被锁定在原始位置完全动不了。 原因normal 行为的 master 在页面里和原件完全一致任何修改都会同步到所有实例place in background 行为还会把位置也锁定。不同行为意味着不同的自由度用错自然改不动。 解决需要同一模块在不同页面有差别时改用 custom widgets 行为它允许页面里对模块的各部分重新定义说明和功能只是定位需求就选 place in background不要总用一个默认行为。5.5 表格控件加行列费劲用表格布局直接翻车现象在 wireframe 里画一个后台数据表格加行、加列、调列宽都特别别扭想排一个复杂布局费了半天还没画对。 原因table 控件在 Axure 里确实难用增加行、列修改行列宽度都不方便这是工具的一个明显短板。 解决把表格当数据列表展示用不要拿它做页面布局复杂的表格结构可以在 PS 里画好图片再置入 image 占位或者用矩形加水平线、垂直线拼出框架再用注释说明每列字段含义灵活度和可读性都比原生表格控件好。6. 自定义注释字段与一键出稿用 F5/F6 把原型变成可交付的文档Axure 的注释功能是最能体现它“为产品经理而生”这一特点的地方。默认的注释面板里是一堆英文选项比如 specification、status、benefit这些字段来自欧美公司的文档习惯不一定适合你所在团队的沟通方式。更合理的做法是完全无视默认字段按自己的需求重新定义一套。具体的操作路径是在注释与交互面板里选择“自定义字段和视图”进入字段管理窗口。新增字段时先选择类型Axure 提供了四种字段类型说明示例Text 文本大段文字说明功能描述、交互逻辑说明Number 数字只包含数字参数值、序号Date 日期日期数据计划上线时间Selectlist 选择列表预设选项供选择优先级高/中/低比如你要给对象加一个“优先级”说明字段就选 Selectlist 类型命名为“优先级”点击添加时还能编辑选项每一行代表一个选择项。字段添加后可以对它进行管理包括删除、重命名、上下移动排序。这里有个细节Selectlist 类型的字段随时可以重新编辑选项不需要反复重建字段。字段建好后在“自定义视图”里创建一个视图把常用的字段勾选进去就形成一套属于自己的注释模板。之后选中页面或任意 widget在注释面板里按自己的字段填写说明即可。真正让这套工作流高效起来的是踩过坑后的一个习惯我刚开始做原型时直接用默认英文选项生成出来的文档和开发同事的认知对不上一处对不上返工过两次。从那以后每个项目一开始我先花十分钟把字段全部改成团队自己的称呼和选项再开始画原型。注释写完后出稿只需要两个快捷键。按 F5 生成 HTML 演示文件生成的页面里会保留注释入口点击即可弹出对应元素或页面的说明文字演示给开发同事看时他们能自己点开说明查看不用在旁边一直口头解释。按 F6 生成 Word 版本的说明文档Axure 会根据每个元素的标签和编号自动生成对应的表格说明文档字段、优先级、功能说明都在表格里对应好这份文档可以直接当 PRD 来用。验证方法也很简单生成 HTML 后逐页点击检查动态面板的 state 切换、菜单的悬浮子菜单、热区的点击响应是否生效生成 Word 后核对表格编号是否连续、字段内容是否完整。如果发现某块交互生成后没有响应先回到原文件检查这个 widget 是否真的设置了交互事件和注释而不是修改已生成的 HTML。这套流程走顺之后从画线框到出交付文档基本能一条龙完成。希望帮到你。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
