很多朋友会问Axure到底该怎么入手网上教程一大堆但大多不是太浅就是太散。如果你已经跟着学了一天装好了工具、摸清了基本菜单那么今天这篇就是给你准备的。我们直接进“day2”从画一个能看得见、点得动的原型开始把搭建页面、添加交互、预览导出这几个核心流程完整走一遍。这篇教程适合的人群很明确刚接触Axure、想在第二天就做出一个带基本交互的原型页面的新手。你不必是设计师也不必懂代码只要跟着操作就能理解Axure最核心的“元件 交互”这套逻辑。我会把每个步骤背后的为什么也讲清楚而不只是告诉你“点这里、点那里”这样你以后换一个需求也能自己举一反三。1. Axure界面与基础配置1.1 认识Axure的工作界面刚打开Axure你会看到一排密密麻麻的面板容易被吓住。但拆开来看其实就五个核心区域菜单栏和工具栏、页面面板、元件库面板、画布区以及右侧的检视面板样式、交互、说明。这五个区域就是你从今往后每天都要打交道的伙计一定要先把它们认熟。页面面板在左侧最上方按树状结构列出你整个原型的所有页面。就像网站的目录一样你可以在这里添加、删除或重命名页面。元件库面板在左侧下方里面按分类放好了矩形、按钮、文本框、图片等基础元件。你直接拖到画布上就能用不需要自己画这是Axure效率高的一个关键原因。画布就是中间那块白底区域相当于真实的屏幕。你所有的页面设计、元件摆放都在这里完成。右侧的检视面板是最需要关注的选中任意元件你可以在“样式”标签下调整它的位置、大小、颜色、边框在“交互”标签下给它添加点击、悬停等行为规则在“说明”标签下写注释方便团队协作时理解你的设计意图。刚开始不用急着把所有功能都摸透记住一个核心口诀就行了左面板管页面和元件中间管布排右面板管属性和交互。只要这个框架搭起来后续所有操作都是往这些面板里填具体内容。1.2 设置画布和网格在动手画图之前先把画布环境配置好别让它用默认值糊弄你。点击菜单栏的“画布”找到“网格”和“对齐”设置。网格的意义在于让你的元件摆放更整齐就像格子纸一样元件会自动吸附到网格线上。对于初学者来说建议把网格大小设置为10像素这样对齐按钮、间距控制都会非常直觉。还有一个容易忽略但非常重要的设置页面尺寸。在“页面样式”里你可以给当前页面指定设备类型比如手机、平板或PC。如果你做的是移动端原型就选iPhone或安卓的预设尺寸做PC端就选1366×768这类常见分辨率。选对了尺寸预览时才不会出现内容变形或超出屏幕的情况。这里有一个我从实践中总结出来的经验设置网格只是辅助真正让你排版整齐的是“对齐工具”。在工具栏里有一排对齐按钮比如左对齐、右对齐、水平居中、垂直居中。每次拖完几个元件全选它们按一下对齐按钮位置马上就正了。这项操作在day2阶段比任何高级功能都用得频繁。2. 核心组件与页面搭建2.1 常用基础组件快速上手Axure的元件库就是你的积木箱。day2阶段你只需要掌握四类常用元件容器类矩形、占位符、文本类文本框、文本标签、按钮类主要按钮、连接按钮、表单类下拉列表、复选框。别的花哨元件以后用到了再学先把这几个玩熟练已经能搭建出百分之八十的信息页面。拖一个矩形到画布上你会看到右面板中有两个维度可以调整样式和属性。样式里最常用的是“填充颜色”和“边框圆角”。很多新手做卡片时直接从元件库拖一个“卡片”元件但自己用矩形加圆角、加填充色反而更灵活。比如你想做一个搜索框用矩形加圆角边框颜色调成灰色再在里面放一个文本标签写“请输入关键字”一个像模像样的搜索框就出来了。文本元件需要注意的坑是双击进入编辑状态后输入的文字会自动适应当前字号但如果你先调字号再输入文字块可能会超出画布范围。切记输入文字前先预设好字号和颜色。另一个常用操作是给按钮设置“禁用”状态在样式面板的“启用”下拉里选择“禁用”按钮会变灰预览时不可点击。这是很多教程不会专门提但真实项目里非常实用的功能。在摆放这些基础元件时我强烈建议你养成一套习惯给每个元件命名。在检视面板顶部有个名称框比如放一个标题就取名叫“页面标题”放一个输入框就叫“用户名输入框”。不要小看这件小事等你后面要为多个元件写交互规则时名称混乱会让你完全找不到要找的元件白白消耗大量时间和心情。2.2 元件的层级与组合管理随着页面内容增多你会遇到元件重叠、相互遮挡的问题。Axure和绘图软件一样有图层的概念。在左侧概览面板或称之为“大纲面板”里每个元件都按添加顺序排成列表更像Photoshop的图层列表。排在下方的元件会显示在前面这就是遮挡关系。调整图层顺序最直接的方式是右键单击或右键选择元件在菜单里找到“上移一层”“下移一层”“置于顶层”“置于底层”这四个命令。当你做弹窗或浮层时这个功能几乎是必须的浮层必须置于顶层否则会被其他元件盖住点击事件也可能会被拦截。另一个强烈推荐的功能是“组合”。当你选中多个元件后按快捷键CtrlGMac是CmdG就能把它们打包成一个组合。组合的好处很多你可以整体移动它们不会意外散架可以统一设置透明度或隐藏状态还可以给整个组合添加同一个交互事件。比如做一个卡片里面有图、有标题、有按钮你把这几个元件组合成一个整体后面需要让整个卡片“点击跳转”就给这个组合添加交互而不是分别给图、标题、按钮各写一遍。管理好图层和组合是页面从“随手画”升级到“结构化搭建”的关键一步。后续你为复杂页面添加交互时能省下大量返工时间。我见过很多新手省事不分组等到要调整时鼠标拖半天还经常拖错最后只能全部删掉重画。3. 交互设计与动态效果3.1 给你的页面加第一个交互事件Axure最核心的魅力就是把静态页面变得“活”起来。你不需要写一行代码就能实现点击按钮弹提示、鼠标悬停变色、输入内容动态校验这些效果。而这一切的起点就是“交互事件”。选中画布上的一个按钮在右侧检视面板切到“交互”标签点击“新建交互”。这时弹出一个菜单里面列着各类事件“单击时”、“鼠标悬停时”、“双击时”、“获得焦点时”等等。对于day2阶段你只需要先掌握“单击时”就够了。以“点击按钮提示弹窗”为例点击“新建交互” → 选择“单击时” → 在弹出的规则面板里选择“显示”动作或者“弹窗提示”取决于具体版本。如果你选择“显示”需要指定要显示哪个元件通常你需要预先在画布上放好一个隐藏的提示框元件。然后设置动画为“弹出”持续时间选个500毫秒一个点击提示效果就完成了。这里很多人一开始会犯一个错直接在元件库拖一个“提示框”出来以为能直接用但实际预览时发现它并不弹出来。原因是弹出提示前提示框本身的默认状态是“可见”的你得先在样式面板或交互规则里把它设为“隐藏”然后再用“显示”动作把它展示出来。这个“显示/隐藏”的切换逻辑是所有交互的基础思维模式。做完第一个交互你一定要在预览模式里试一下。预览快捷键是F5或者点工具栏的“预览”按钮。看到自己点一下按钮提示框真的冒出来那种成就感是充电五分钟续航一整天。从这一刻起你才真正开始用Axure做原型而不是当绘画软件用。3.2 使用动作与动画提升体验除了一键显示隐藏之外Axure的动作系统还有不少值得玩的。常用的动作包括“移动”、“旋转”、“设置大小”、“设置文本”、“设置选中状态”、“链接到外部网页”等。day2阶段我们不必全部掌握但有一个动作值得优先体验“移动”。想象这样一个场景页面上有一个小圆点你点击一个“向右”按钮它唰的一下移动到右边去。怎么实现先放一个圆点元件再放一个按钮。给按钮添加“单击时”事件选择“移动”动作目标元件选择圆点然后设置移动方向为“向右”距离填200像素动画选“线性”持续时间1秒。预览一下你就能看到一个非常流畅的位移动画。做这种动效时“动画”选项里的曲线类型线性、缓入、缓出、弹性很关键。线性就是匀速缓入是开始慢后面快缓出是开始快后面慢。拿弹窗举例用“缓出”会更有弹出来甚至弹过头再回来的感觉相比直线生硬地出现视觉体验会好很多。你可以都试一遍感受每个曲线的区别以后做设计时凭直觉就能选对。另外Axure的“条件逻辑”在day2可能有点复杂但有一个入门级的用法通过“如果…否则…”给按钮做正反向切换。比如点击一次按钮圆点左移再点击一次圆点右移。这个可以通过在交互规则里添加“条件判断”来实现。即使你暂时不学我也建议你知道有这个功能因为交互越复杂条件判断越重要。4. 原型预览与导出4.1 在Axure中预览原型的多种方式做完了几个页面你自然想看看效果。Axure的预览功能很强大不是简单地把静态页面拼在一起而是会把你的交互规则一并运行起来相当于一个简易的网站模拟器。最常用的预览方式是点击工具栏的“预览”按钮它会在浏览器中打开当前页面。如果你的原型包含多个页面会在左侧自动生成一个页面导航树方便你切换。这个功能非常适合自己检查效果或者把链接发给同事快速评审。除了整页预览Axure还支持“预览当前页面”和“预览所有页面”。我习惯在编辑阶段只预览当前页速度更快等整体推进到一定阶段再预览所有页面验证页面跳转逻辑。如果你在页面面板里点击右键还能看到一个“生成原型文件”的选项可以把它生成成一个本地文件夹分享给不需要安装Axure的人浏览。这里要提醒一下预览不是在Axure里直接看而是调用你的电脑默认浏览器。如果你没有默认浏览器或者浏览器禁用JavaScript原型交互可能不会正常运行。所以如果预览时发现交互没反应先检查一下浏览器是否设置正常以及有没有拦截弹窗。很多莫名的Bug其实都出在这个环节。4.2 导出为HTML文件与团队协作当你的原型需要交付时导出一个完整的HTML文件夹是最常见的做法。点击“发布”菜单选择“生成HTML文件”然后设置输出路径Axure会生成一个包含html、css、js的文件夹。只要把这个文件夹打包发出去对方用浏览器打开里面的index.html就能看到你的完整原型并且交互、动效都在。在生成HTML时有几个细节值得注意。首先是“页面标题”设置它会显示在浏览器标签页上最好按项目来命名别留默认值。其次是“移动端适配”如果你以手机600px宽度制作在生成时会有一个“移动设备自适应”的选项勾选后手机浏览器打开会自动缩放。这个选项很实用能让你在手机上直接验收移动端原型效果。对于团队协作我个人的经验是除非对方技术上比较熟练否则不要丢一堆文件出去。更好的做法是把生成出来的整个文件夹打包成一个zip压缩包再通过网盘或协作工具发送。这样对方拿到手解压打开就够了不用关心里面那些源码。另外Axure的云分享功能在团队协作时也很好用可以把原型链接发到群里大家直接在网页上评论留言但前提是你们团队有使用那个服务的权限。导出和分享是整个day2教程的临门一脚。很多新手埋头做了一下午最后不知道该怎么把成果交给别人其实在这一环节走通一次流程你就真正完成了“从0到1”的闭环。5. 常见问题与排查技巧实录5.1 样式显示不一致怎么解决在day2学习过程中你大概率会遇到一种情况在Axure里看着很正常的样式出现在预览里却变了不是字体不对就是颜色失真。这通常是因为Axure自带的默认样式和你在Windows或Mac上的浏览器渲染不一致导致的。解决办法是在样式面板里为元件设置固定的字体、字号和颜色不要用默认继承的“自动”。特别是在中文环境中默认字体往往是宋体但在macOS上会显示成苹方在Windows上会显示成微软雅黑。如果你希望效果一致可以统一指定一个字体族比如“微软雅黑, 苹方, sans-serif”。另一个常见问题是透明度和阴影效果在Axure里看起来正常但预览时边缘可能发白这时你可以检查一下元件是否不小心加了“投影”效果。还有一个很隐蔽的坑你拖元件时可能不小心把透明度调低了自己没注意到。选中元件看样式面板里的“不透明度”是不是100%如果不是就拉回来。这种问题往往是鼠标误触但会让人排查半天所以自检顺序应是元件是否被覆盖、透明度、颜色值、圆角大小。5.2 交互效果不生效的原因排查交互写好了但预览时怎么点都没反应这是新手最崩溃的时刻。我把排查思路总结成一个顺序你照着执行绝大多数情况能在三分钟之内定位问题。第一步确认交互事件选对了。你写的是“单击时”但鼠标可能点的是双击或者你按住鼠标拖动了一下事件根本没触发。第二步确认目标元件状态。如果你要通过“显示”动作展示一个元件这个元件初始必须设为“隐藏”否则动作执行了你看不出变化。第三步检查元件是否有遮挡。比如提示框被其他元件完全盖住即使显示了也看不见选中元件后在概览面板把它“置于顶层”试试。第四步预览时打开浏览器的开发者工具F12看看控制台有没有红色报错信息。很多交互失效本质是代码或样式冲突报错会给你直接线索。另外Axure的交互规则是按顺序执行的。如果一个事件同时加了好几个动作Axure会从上到下依次执行你可以在交互面板里调整顺序。比如“显示提示框”和“移动提示框”两个动作顺序不同效果会不一样。写完后务必自己按照用户习惯点一遍不要想当然认为“写了就是有效”。5.3 文件卡顿与保存的实用心得Axure文件在图形和交互复杂到一定程度后流畅度会显著下降。即使是一个day2练习做的页面如果你把几十张高分辨率图片拖进去也会把软件拖得很卡。我的经验是做原型初期尽量用占位符和简易色块代替真实图片在评审前的最后一轮再替换成高清图。这样既能保证交互逻辑没问题又不会影响自己操作的流畅度。CtrlSMac是CmdS这个动作无论如何强调都不为过。Axure偶尔会崩溃特别是在拖了大量元件或连续复制粘贴多次之后。有一次我在做一套带复杂交互的流程图忘了保存结果软件闪退半天的心血全部归零那种感觉真的让人崩溃。从那以后我养成了一个习惯每完成一个页面或一组交互就立刻按一下保存快捷键这实际上花不了几秒钟但能让你彻底远离做白工的噩梦。还要留意Axure文件的版本兼容问题。升级软件后旧文件一般能正常打开但如果你在某个讨厌的版本里保存过而对方还在用旧版本功能上可能会出现不兼容体验。所以交接文件时最好在文档里注明所使用的Axure版本号这样能省去很多不必要的沟通成本。6. day2学习验收清单写到这儿我对今天这套基础教程的完成度已经很满意了。但为了让“day2”这个主题落在实处我想再留一张验收清单给你。你跟着做一遍如果能顺利通过说明你已经超过大部分刚接触Axure的人一块木板。能独立安装并启动Axure认识页面面板、元件库、画布和检视面板四大核心区域会设置网格和页面尺寸能针对当前项目指定合适的设备类型熟练拖拽并调整矩形、文本、按钮等基础元件掌握对齐、组合等布局操作会新建页面并管理页面层级能独立搭建一个带导航栏和内容区的简单页面会给按钮添加“单击时”事件控制某个元件的显示与隐藏会使用“移动”动作让元件沿指定方向产生位移动画能用F5预览原型交互效果在浏览器中正确运行能把自己做好的原型导出成HTML文件夹并打包分享给他人遇到交互失效时能在5分钟内定位并解决常见问题这些清单里的每一项都是今天教程里覆盖过的内容。如果你全能做到明天就可以直接挑战中阶教程比如动态面板、变量和中继器的内容。那些东西能给你的原型注入更高级的自动化和数据能力但正是建立在今天这些扎实的基础之上的。最后我再分享一个自己做项目时的体会Axure本质上不是“画图软件”而是“思考工具”。真正的价值不在于把页面画得多么精美而在于通过可点击的原型把产品逻辑、用户流程和交互反馈放到真实的操作上下文里验证。很多传说中的“需求评审”其实就是靠这样一个能跑起来的原型来锚定各方想法的。今天你走通的每一步都是为明天有能力表达复杂产品想法积累的资本。