★ FEATURED ARTICLE 上周帮一个刚转岗的同事看他的原型文件打开一看三层动态面板叠着一层中继器元件命名清一色矩形 1组合 23交互用例挂了四十多条全堆在同一个按钮上。他自己也说功能是能跑但改一次要重来一遍改到自己都不想动。这个场景我太熟了——Axure 这个工具入门门槛低到半小时就能拖出一个页面可真正的操作功力全藏在那些看起来都一样、用起来差很多的细节里。这篇东西不讲概念、不背菜单只聊 Axure 原型制作里那些真正影响效率的部分操作画布怎么铺、元件怎么管、动态面板的状态怎么切、中继器的数据怎么喂、母版怎么拆、导出之后为什么别人的原型点着丝滑而你的卡成幻灯片。适合三类人看刚上手想少走弯路的新手、做了半年觉得能画但画不快的中级选手、以及需要把原型交给别人继续维护的协作方。所有操作都基于主流版本的通用界面个别菜单措辞随版本略有差异逻辑是一致的。1. 动手之前先想清楚Axure 到底该被当成什么工具用1.1 大多数人的第一个误区把它当画图软件我见过太多人打开 Axure 的第一件事是拖一个矩形、填色、调圆角然后一路画下去。画完之后发现要改一个按钮的样式得改三十处要调整页面结构得挪一百个元件。这不是手速问题是定位问题。Axure 的本质不是画界面而是描述界面在什么条件下做什么事。它的三个核心对象——元件、状态、事件——构成了整个工具的骨架。元件是静态的像素状态是动态面板里的多套界面事件是把这两者串起来的逻辑。你在动手之前如果脑子里没有这个区域有几个状态、切换的触发条件是什么那画出来的东西注定是散的。所以我个人的习惯是新建文件后先不动鼠标在草稿纸上把页面按区块切成几块每块标注三件事——静态还是要变化、变化有几种形态、由什么动作触发。这个过程大概花五分钟能省掉后面两小时的返工。1.2 画布尺寸与栅格一开始定错后面全是补丁画布尺寸是第一个必须做对的决定。默认的 1024×768 在今天明显偏小主流桌面端的建议值是1440×900或1280×800移动端按目标机型的逻辑分辨率来常见 375×812、390×844。这个数字一旦定下来后面所有页面的坐标、组件宽度、弹窗居中计算都要以它为基准中途改尺寸等于把整个文件的地基敲掉重浇。栅格Grid的设置也值得花两分钟。我一般开两组参考线一组 8px 的网格用来对齐图标和小控件一组 12 列的列宽参考线用来切分内容区。Axure 的栅格设置里可以自定义间距和分割数把网格尺寸设成 8分割数设成你需要的列数即可。提示栅格只是参考线不会被导出。别指望用它来约束元件自动吸附——Axure 的吸附能力有限真正靠得住的是对齐面板和手动输入的 X/Y 坐标值。页面结构同样在第一步就要铺好。我会按流程图 / 主流程页面 / 分支页面 / 组件库 / 废弃区五个文件夹分组废弃区专门放那些暂时删掉又可能回滚的页面。这个习惯看起来琐碎但当一个文件长到八十个页面时没有分组基本等于失忆。1.3 一个可以照抄的初始化清单下面这套初始化动作我每次新建文件都会走一遍熟练之后不到十分钟顺序操作关键参数目的1设置画布尺寸1440×900 或按机型统一坐标系2开栅格与参考线8px 网格 12 列视觉对齐基准3建页面文件夹五类分组避免后期混乱4建全局样式主色、字号、圆角各 3 档一处改全局改5建母版目录导航、页脚、弹窗壳复用基础6建元件库常用控件拖进自定义库减少重复绘制这套清单的价值不在于标准而在于把决定前置。你越早把这些常量固定下来后面改动的成本就越低。2. 基础操作里那些看似会了其实没会的细节2.1 选层与组合为什么你的拖动总是不听话新手最高频的挫败感来自点不中想点的元件。原因是 Axure 的选中遵循层级优先点击永远先选中顶层容器要往深处选就得用其他手段。三个必须形成肌肉记忆的操作按住 Ctrl 点击部分版本是 Cmd直接选中鼠标下方的那个元件不管它被包了几层。在概要面板Outline里找左侧的树状结构是唯一能看清真实层级的地方复杂页面我基本只从概要面板选对象。锁定与隐藏背景大图、装饰性元素一律锁定避免误拖。锁定的元素在画布上点不中只能从概要面板操作这恰恰是它的价值。组合CtrlG和动态面板是两回事这点要分清。组合只是把多个元件捆成一个整体便于移动和统一交互它不产生新的状态动态面板才会带来状态维度。很多人用组合去模拟展开收起结果发现没法做过渡动画就是因为用错了工具。还有一个容易忽略的点组合的嵌套层级越深交互用例的继承关系越复杂。我在实际项目里给自己定的规矩是组合不超过两层超过两层就说明这块该用母版或者拆页面了。2.2 对齐与分布手拖永远不如输入数值对齐这件事我的建议是彻底放弃眼估。工具栏的对齐按钮配合多选使用左对齐、水平居中、垂直分布都在那里。但真正精准的是右侧样式面板里直接输入 X/Y 坐标和宽高。几个实际场景的处理方式场景操作说明一组按钮等间距多选后点水平分布首尾元件位置先定好中间自动均分弹窗居中计算 X (画布宽 - 弹窗宽)/21440 宽画布放 600 宽弹窗X 填 420列表行高统一选中首行复制后按固定 Y 递增值排行高 56 时 Y 依次为 0、56、112图标与文字对齐用垂直居中而非目测文字行高会影响视觉重心参数计算这块补一句如果做的是响应式原型居中计算不能写死数字得靠设置尺寸动作配合百分比或者在自适应视图里分别布局。写死坐标的结果就是换个屏幕尺寸全乱。2.3 样式管理把改一次全改变成现实Axure 的样式功能Style是把一组视觉属性打包命名元件引用样式而不是引用具体数值。这个功能用的人不多但它是中大型文件的生命线。具体做法在样式面板里新建主按钮次按钮卡片容器这几个常用样式把填充、边框、圆角、字体、阴影都定义进去。之后所有按钮都套用样式需要改主色时只改样式定义一处全文件同步。这里有个坑要注意样式只覆盖它包含的属性。如果你在某个元件上手动改过颜色那个改动会覆盖样式改样式时这个元件不会跟着变。所以套用样式之后就别再手动微调视觉属性了要调就调样式本身或者给这个元件单独建一个变体样式。我在项目里被这个机制坑过不止一次明明改了全局色页面上总有几个按钮是旧的。3. 动态面板状态切换才是交互原型的核心3.1 三种典型用法与它们的适用边界动态面板Dynamic Panel是 Axure 里最被低估也最被滥用的元件。它解决的核心问题是同一块区域在不同时刻呈现不同内容。第一种用法是多状态切换比如标签页、轮播、步骤条。做法是把每种形态做成一个 State通过设置面板状态动作在它们之间跳转。参数上要注意两个选项一是循环wrap开启后最后一个状态再切会回到第一个做轮播必须有二是动画时长一般 200–300ms 比较自然超过 500ms 会让人觉得迟钝。第二种用法是显隐容器比如下拉菜单、气泡提示。这类场景其实只需要两个状态显示/隐藏用显示/隐藏元件动作配合淡入淡出动画就够了不一定要上动态面板。我见过把整个导航栏塞进动态面板只为了做个悬停高亮的纯属给自己找麻烦。第三种用法是滚动区域把内容放进动态面板并设为按需滚动。注意固定高度要设对内容超出才会出现滚动条。3.2 交互用例的组织顺序为什么你的动画总是不按预期走一个触发事件下挂多条动作时执行顺序是从上到下依次执行。这个规则听起来天经地义但实际踩坑率极高。典型错误是这样的点击按钮先设置面板状态切到第 2 页然后设置文本更新页码。看起来没问题但如果第二条动作用的是一个依赖状态变化的变量顺序反了结果就完全不同。更隐蔽的是等待动作——很多人用它来做延时结果等待之后的动作全都串行延后导致快速连点两次时逻辑彻底混乱。我的经验是给每条交互用例加上条件判断而不是靠顺序兜底。比如轮播的下一页按钮条件里写如果当前页码 总页数才执行切换否则切回第一页。这样即使连点也不会出现页码越界。注意条件判断写在动作上而不是用例上一个用例下不同动作可以有不同条件。这个细节很多人搞混结果条件写了却不生效。3.3 变量与函数让原型记住东西Axure 的变量分两种全局变量Global Variables在项目设置里定义全文件可见局部变量Local Variables只在单条动作里有效用来引用元件或中继器的值。全局变量最典型的用法是登录状态。定义一个isLogin默认值false登录成功时用设置变量值改成true页面加载时判断这个值决定显示哪套导航。这种做法能让原型的演示连贯性大幅提升观众不用每翻一页就重新登录一次。局部变量是很多人卡住的地方。它的本质是把某个对象临时取个名字方便在表达式里引用。比如要判断中继器的行数就得在中继器上加一个局部变量指向它自己然后在条件里写[[LVAR1.itemCount]]。不建这个局部变量表达式根本找不到对象。表达式里可以用的能力不算强但够用字符串拼接[[变量 单位]]、取整、简单的数学运算、日期取值。写表达式时要注意双中括号是必须的而且拼接数字和文字时最好显式转成同一类型否则偶尔会出现1212这种意料之外的结果。4. 中继器把重复劳动变成一次配置4.1 数据集字段怎么设计才算合格中继器Repeater解决的是一坨长得一样、内容不一样的问题——列表、表格、卡片流。它的结构分三块数据集Dataset、行模板Item 区域的视觉布局、交互每行独立的事件。数据集字段设计的原则只有一条字段只放会变的内容不放样式。比如商品列表字段应该是名称、价格、图片、标签而不是字体大小、颜色。样式靠模板统一控制数据只管内容。这条原则听起来简单但我在别人的文件里见过把整个 CSS 语义塞进数据集的改起来比手画还慢。字段类型上文本和图片是两大主力。图片字段填的是图片地址或本地路径本地路径在换机器后会失效所以做演示文件时我一般用占位图或者相对路径。行模板的搭建有个顺序技巧先在模板里放好一个完整的卡片用占位文字占位全部调好样式和间距之后再把文字替换成[[Item.字段名]]的绑定表达式。反过来做的话一旦某个绑定写错排查起来要一个个点开看。4.2 增删改查的实现路径中继器的四个核心动作记住名字基本就会用了动作作用常见参数新增行Add Rows往数据集里插数据行数、插入位置、各字段值更新行Update Rows修改已有行匹配条件、更新字段标记行Mark Rows打上标记便于批量操作标记名、匹配条件删除行Delete Rows移除行按标记或按条件新增和更新的分界点在于有没有唯一标识。如果数据结构里有 ID 字段更新时按 ID 匹配如果没有就只能按行号做很容易错位。所以我给所有中继器数据集都强制加一个 ID 字段哪怕是纯静态演示的数据。删除操作的最佳实践是先标记再删除点击某行的删除按钮时先给这一行打上标记通常是行内某个隐藏元件存 ID然后在中继器外部放一个确认删除按钮它的动作是按标记删除行。这样能避开行内事件在数据刷新后失效的问题。4.3 分页、排序与翻页的三个坑分页的实现思路是中继器每行渲染时判断自己的序号是否落在当前页范围内不在就隐藏。这里要用到两个内置值——Item.index当前行序号从 1 开始和通过局部变量取到的itemCount总行数。坑一行号从 1 开始但页码计算容易差一。当前页码是 3、每页 10 条时可见范围是 21 到 30公式写错成 20 到 30 就会出现 11 行。坑二每页条数变了但总数没重算。把每页 10 条改成每页 20 条之后总页数需要重新用Math.ceil(itemCount / pageSize)算很多人在原型里写死了总页数。坑三筛选和分页打架。先筛后分页和先分页后筛结果完全不同。正确顺序永远是先应用筛选条件用更新行配合过滤标记再按当前页渲染。排序的坑更隐蔽Axure 没有原生排序动作常见做法是把数据集按排序字段重新新增行一遍并删掉旧的相当于重建。这种做法性能一般数据量超过两百行时会明显卡顿所以演示用的排序我通常只做视觉上的箭头切换数据不重排。5. 母版与复用让修改只发生在一个地方5.1 母版的三种类型与选择依据母版Master是把一段可复用的界面存起来插入到多个页面。它在插入时可以选择三种形式普通母版插入后在页面里可以覆盖部分内容适合导航栏、侧边栏这类大体一致、局部微调的模块。背景母版放在页面背景层页面里的元件可以直接盖在上面适合页面级框架页头页脚加内容区。自定义元件库严格说不算母版但作用类似把常用控件沉淀成可拖拽的库。选择依据很简单需要每页不同的部分越少越适合用母版。导航栏只有当前项高亮不同就该用母版加覆盖如果一个模块每个页面的内容都完全不一样那它就不该是母版硬做成母版只会让你每次插入后都要覆盖一大半。母版的另一个价值是改一处全改。我做过一个项目客户中途要求把全局导航的二级菜单从悬浮改成手风琴因为导航是母版改完一处所有页面自动生效前后不到二十分钟。反过来如果当初是复制粘贴的二十个页面就是二十次改动。5.2 元件库的拆分策略自定义元件库Widget Library分两层考虑一层是通用控件库图标、按钮、输入框、面包屑这类跨项目都能用的另一层是项目组件库只服务当前项目比如业务专用的卡片、状态标签。拆分的依据是变更频率。通用控件的变更频率低一两年才更新一次可以打包成独立文件长期积累项目组件的变更频率高跟需求同步放在项目文件内部就好别混进通用库否则通用库会越来越臃肿。还有一个实操细节往自定义库里拖元件时最好顺便把元件的名称和分组整理好。库里出现一堆矩形 5组 7的感觉跟你打开别人的衣柜看到全是没分类的袜子是一样的。6. 导出、演示与交付最后一步最容易翻车6.1 生成 HTML 的参数怎么选发布原型的方式主要是生成 HTML 文件包。这里有几个参数值得看一眼参数建议值原因生成页面范围仅当前页 / 全部全部生成慢调试时只发当前页包含页面备注按需交付给开发时开对外演示时关图片压缩中等高质量会让包体积翻几倍字体嵌入只在必要时中文全字库嵌入会让包变得极大最后一条是重点。中文项目里嵌入字体会让导出包从几兆涨到几十兆加载肉眼可见地变慢。如果不是必须展示特殊字体效果直接用系统默认字体或者把特殊字体的文字转成图片少量标题文字。6.2 交付环节的备注与标注原型交付给开发时光有可点击的界面不够还得有说明。Axure 里三种说明方式各有用处元件备注Notes挂在单个元件上适合写这个按钮的行为定义。页面备注整页说明适合写这个页面的业务规则。说明字段不同版本叫法不同可以生成独立的说明面板开发对照着看。我个人的习惯是备注写给开发交互留给演示。不要在备注里描述点击后跳到下一页这种靠点就能知道的事备注只写为什么这么跳和什么情况下不跳。这才是开发真正需要的信息。还有一个交付细节容易被忽略导出之前一定要在某台没装过 Axure 的电脑上打开一次生成的 HTML。原因很现实——本地开发环境下缓存和路径都正常换台机器就出现图片裂掉、字体跑版的情况太常见了。7. 常见问题与排查实录7.1 交互不生效的排查顺序遇到点了没反应按这个顺序查八成能定位排查顺序检查项典型症状1事件是否绑在了正确的元件上点外层容器没反应点内层文字才触发2元件是否被透明遮罩盖住视觉上能看见点击被别的元件截走3条件判断是否永远为假表达式引用的变量还没赋值4动作的目标是否为当前元件该指向面板却指向了自己5页面是否有同名元件冲突复制页面后动作指向了旧页面第二条最坑。做弹窗的时候遮罩层是一个半透明矩形铺满全屏如果它的层级比关闭按钮高点击就永远打不到按钮上。解决办法是把关闭按钮移到遮罩之上或者给遮罩单独设置点击关闭。第三条也常见。变量默认值是false你写了个如果 isLogin 等于 true 才显示但演示时忘了先登录页面就一片空白。调试技巧是临时放一个文本框用设置文本把变量值实时显示出来问题一目了然。7.2 卡顿与文件体积原型越做越卡绝大多数情况是这两个原因动态面板套动态面板以及中继器里放复杂交互。每多一层嵌套渲染计算就多一次三层以上开始有明显延迟。缓解手段按性价比排序把重复的复杂模块做成母版减少实例数量、把不需要交互的静态内容从动态面板里挪出来、把一次渲染几百行的中继器改成分页每次渲染二十行、检查有没有隐藏但仍在运行的循环交互。文件体积方面最大的元凶是未压缩的大图。一张 3000 像素宽的背景图放进原型文件立刻膨胀十几兆。我的做法是图片进文件之前先统一压到实际显示尺寸的 1.5 倍以内够用且不糊。7.3 版本回退与文件异常Axure 文件是二进制格式损坏了很难手动修复。两个保命习惯一是手动另存版本。我一般在每天收工前另存一份带日期后缀的副本放在单独的备份目录里。听起来土但两周前那个改崩了想回到昨天的下午是它救了我。二是用共享项目而非单文件协作。多人同时改同一个文件靠微信传文件必然出现以谁的为准的灾难。共享项目本质上是把文件拆成可签入签出的单元冲突时也有记录可查。代价是需要一台能访问的服务器或者云端服务小团队按需选择。提示任何一个原型文件超过五十个页面、存在多人协作需求时就不要再继续用单文件了。迁移成本在项目早期很低越晚越高。7.4 几个我踩过的具体坑第一个坑是复制页面后交互全乱。Axure 复制页面时页面内的元件会被复制一份新的但跨页面跳转的链接依然指向原页面。解决方式是复制完成后立刻在概要面板里检查所有链接型动作逐个确认目标页面。第二个坑是改母版导致意外覆盖。给已经插入多处的母版改结构时如果某处实例上做过覆盖改动可能会让那些覆盖失效或者错位。所以给母版做结构性改动之前先记住哪几处有覆盖改完逐页检查。第三个坑是文字溢出没设对。中文文字在窄容器里断行规则和英文不同同一个文本框在演示机上可能就多出一行把下面整块内容挤歪。稳妥的做法是给固定高度的文字容器开自动调整高度或者干脆把高度留出余量。最后一个坑是动画叠加。一个元件同时挂了移动动画和显隐动画两个动画时长不一致视觉上会出现先跳一下再滑过去的诡异效果。原则是同一个元件在一个动作序列里只做一种动画。这套东西写下来其实没有一个需要天赋的技巧全是提前想一步和少给自己挖坑。我自己最深的体会是Axure 做得快的人不是快捷键背得多的人而是那些在动手前愿意花五分钟把命名、分组、母版、样式定下来的人。原型这东西最终是要交到别人手里的能让人一眼看懂、随手能改比炫技重要得多。
阅读完成 · 觉得有帮助？
