1. 为什么用Axure做电商站原型是新手最划算的起点很多人第一次接触原型设计脑子里冒出来的第一个问题往往是我该学Figma还是Axure。这个问题本身没有标准答案但如果你的目标是做一个能跑通完整购物流程的电子商务网站原型而且你之前没有任何原型工具的使用经验那Axure依然是一个非常值得投入时间的选择。原因不复杂Axure在交互逻辑的搭建上足够笨笨到你必须把每一步想清楚而这种被迫想清楚的过程恰恰是初级设计师最需要的训练。电商网站的原型设计有个特点——页面数量多、状态变化多、跳转关系复杂。一个最基础的下单流程至少涉及首页、列表页、详情页、购物车、结算页、支付成功页六个核心页面每个页面还有登录态和未登录态的区别。用Axure做这套东西你会被迫去思考这个按钮点了之后到底发生什么购物车数量变化时哪些区域需要联动更新。这些思考在真实工作中就是产品经理和交互设计师每天在做的事。我见过不少新手用其他工具做电商原型页面画得很漂亮但一点立即购买就露馅了——要么跳到一个死页面要么弹窗关不掉。这就是因为工具帮你隐藏了太多逻辑细节而Axure不会帮你隐藏它要求你亲手把每一条交互链路接上。所以这篇内容适合两类人一是完全没有原型基础、想通过一个完整项目入门的产品或设计新人二是用过Axure但只画过静态页面、没做过完整业务流程的进阶者。接下来的内容我会按照一个真实的电商项目推进节奏来展开先做页面结构规划再逐个页面搭建然后串联交互逻辑最后做可用性自检。每一步我都会说清楚为什么这么做以及我踩过哪些坑。2. 动手之前先把信息架构理清楚2.1 电商网站的最小页面集合新手最容易犯的错误是打开Axure就开始拖矩形、摆按钮。这就像装修房子不画图纸直接买家具最后一定乱套。电商网站虽然看起来复杂但它的页面结构其实高度标准化。一个初级项目你只需要把下面这几个页面做扎实就够了页面名称核心功能关键元素首页引流与导航搜索框、轮播图、商品推荐位、分类入口商品列表页筛选与浏览筛选条件、排序栏、商品卡片、分页商品详情页决策与转化商品图、规格选择、数量选择、加入购物车按钮购物车页确认与调整商品清单、数量修改、删除、合计金额、结算按钮结算页信息填写收货地址、支付方式、订单摘要、提交按钮支付结果页反馈与引导成功提示、订单号、继续购物入口这六个页面构成了电商的最小闭环。你不需要一上来就做个人中心、订单管理、售后流程这些那些是第二阶段的事。先把主流程跑通比做二十个孤立页面有价值得多。2.2 用Axure的页面面板做结构映射Axure左侧的页面面板天然适合做信息架构的可视化。我的习惯是按下面的层级来组织电商原型/ ├── 01_首页 ├── 02_列表页 ├── 03_详情页 ├── 04_购物车 ├── 05_结算页 ├── 06_支付结果 └── 99_公共组件 ├── 顶部导航 ├── 底部信息 └── 登录弹窗为什么要单独建一个公共组件文件夹因为电商网站的顶部导航和底部信息在每个页面都会出现如果你每个页面都重新画一遍后期改一个logo位置就要改六个页面。Axure的母版功能就是解决这个问题的——把公共部分做成母版拖到每个页面里改一处全局生效。注意母版里的交互如果涉及当前页面高亮这类状态变化需要用母版引发事件或者在每个页面单独处理不能指望母版自己知道自己在哪个页面。2.3 先画低保真线框图别急着上颜色我强烈建议第一个电商项目全程用灰度和线框风格。原因有两个一是低保真能让你把注意力放在布局和逻辑上而不是纠结这个按钮用#FF6B35还是#FF5722二是低保真在评审时更容易收到有效反馈别人会跟你说这个筛选条件的位置不对而不是这个颜色我不喜欢。在Axure里你可以用矩形、占位符和文本标签快速搭出线框。商品图片用带叉号的占位符表示按钮用圆角矩形加文字价格用加粗文本。整个首页的线框搭建熟练之后半小时就能完成。3. 首页与列表页的搭建细节3.1 首页搜索框的交互设计搜索框看起来简单但它是电商首页交互最密集的区域之一。一个合格的搜索框原型至少要有三种状态默认态、聚焦态和输入态。默认态显示灰色提示文字搜索商品聚焦时提示文字消失、边框变色输入文字后右侧出现清除按钮。这些状态在Axure里通过设置交互样式来实现——选中输入框元件在交互面板里添加获得焦点时和失去焦点时的事件。更进阶一点你可以做一个搜索建议下拉。当用户在搜索框输入文字时下方弹出一个动态面板显示模拟的搜索建议列表。实现方式是给输入框添加文本改变时事件触发动态面板的显示。搜索建议的内容可以写死几条比如无线耳机运动鞋保温杯初级项目做到这个程度已经足够体现交互思维了。3.2 轮播图的自动播放与手动切换轮播图是首页的视觉焦点也是新手最容易做残的组件。Axure做轮播图的标准做法是用一个动态面板里面放多个状态每个状态是一张banner图。然后添加页面载入时事件设置面板状态循环切换间隔3000毫秒。但这里有个细节很多人忽略自动播放的同时要支持手动切换。你需要在轮播图左右两侧各放一个透明热区点击时切换到上一张或下一张。问题是手动切换后自动播放的计时器会乱掉。我的处理方式是给手动切换也设置一个等待3000毫秒后切换下一张的动作相当于手动操作后重新计时。底部的小圆点指示器同样用动态面板做每个圆点是一个状态与banner面板联动。点击某个圆点banner面板切换到对应状态圆点面板也切换到对应状态。3.3 商品列表页的筛选与排序逻辑列表页的核心是筛选和排序。初级项目不需要做真实的筛选计算但要把交互反馈做出来。比如点击价格从低到高商品卡片的顺序应该发生变化。在Axure里模拟排序可以用动态面板的多个状态来假装排序结果。状态一是默认顺序状态二是价格升序状态三是价格降序。点击排序选项时切换面板状态。虽然这是假的排序但评审时别人能看到点了排序有反应这就达到了原型的目的。筛选条件用复选框组来实现。选中某个筛选条件后可以在列表上方显示一个已选条件的标签区域让用户知道当前筛选了什么。这个标签区域默认隐藏有筛选条件被选中时才显示。商品卡片本身建议做成一个母版因为列表页里会重复出现几十次。母版里包含商品图占位、商品名称、价格、销量、评价数这些固定元素。这样做的好处是后期调整卡片间距或字体大小所有卡片同步更新。3.4 分页组件的正确做法分页组件很多人直接用几个矩形拼出来但更好的做法是用中继器。中继器是Axure里最强大的数据驱动元件虽然初级项目用不到它的全部功能但用它做分页有个好处你可以真实地模拟点击第二页内容变化的效果。具体做法是中继器里放商品卡片的数据行设置每页显示数量。然后在分页按钮上添加交互点击下一页时触发中继器的设置当前页动作。这样翻页时中继器里的内容会真实变化比切换动态面板状态更接近真实产品。4. 详情页到购物车的转化链路4.1 商品规格选择的状态联动详情页最复杂的交互是规格选择。假设一个商品有颜色和尺寸两个规格颜色有黑、白、蓝三种尺寸有S、M、L三种。用户选择不同组合时价格和库存状态可能不同。在Axure里实现这个逻辑需要用全局变量来记录当前选中的规格。每点击一个规格按钮就把对应的值赋给变量然后根据变量的组合来更新价格显示区域。比如选中黑色时设置变量Color为black选中M时设置变量Size为M然后添加一个条件判断如果Color等于black且Size等于M则价格显示为299这个逻辑用Axure的条件生成器来做虽然有点繁琐但做一遍之后你就理解了电商后台规格管理的底层逻辑。规格按钮本身要有选中态和未选中态的区分。选中态用深色边框加粗未选中态用浅灰边框。这个通过选中交互样式来实现不需要手动切换。4.2 加入购物车的反馈动画点击加入购物车按钮后用户需要明确的反馈。最简单的做法是弹出一个轻提示Toast显示已加入购物车1.5秒后自动消失。Axure里用动态面板做Toast设置为固定到浏览器居中显示后等待1500毫秒再隐藏。更细腻的做法是做一个飞入购物车的动画商品图片缩小并移动到右上角购物车图标的位置。这个效果用Axure的移动动作加上尺寸变化来实现虽然有点炫技成分但在演示时非常抓眼球。提示Toast的显示层级要设置好确保它浮在所有内容之上。在Axure里越靠下的元件层级越高所以Toast动态面板应该放在页面元件列表的最底部。4.3 购物车页的数量增减与金额计算购物车页的核心交互是数量增减和金额联动。数量增减用两个按钮加一个文本框实现点击时文本框数值加一点击-时减一最小为1。金额计算需要用到Axure的表达式功能。假设单价是99元数量是变量Qty那么小计金额就是99*Qty。在Axure里你可以在文本标签上设置文本改变时事件用表达式[[99*Qty]]来动态显示金额。合计金额则是所有商品小计的累加。删除商品用移除动作点击删除按钮后对应的商品行从购物车中消失。如果购物车里所有商品都被删除显示一个购物车是空的空状态提示。这里有个容易忽略的细节购物车图标上的数量角标要实时更新。这个角标应该是一个全局变量每次加入购物车或修改数量时都更新它。在Axure里全局变量的值可以在页面间传递所以从详情页加入购物车后回到首页也能看到角标变化。5. 结算流程与支付结果的闭环5.1 收货地址的填写与选择结算页的收货地址区域初级项目可以做成两种形式一种是直接展示一个已填好的地址卡片另一种是提供新增地址的弹窗表单。我建议两种都做用动态面板切换状态来模拟有地址和无地址两种情况。新增地址的表单包含姓名、手机号、详细地址三个输入框。这里可以加一个简单的表单验证如果手机号不是11位数字点击保存时提示请输入正确的手机号。Axure的条件判断可以检查文本长度虽然做不了正则验证但长度校验已经能体现表单验证的思路了。地址列表用中继器做支持设置默认地址。默认地址卡片上显示一个默认标签点击其他地址的设为默认按钮时标签位置切换。5.2 支付方式的单选切换支付方式通常有微信支付、支付宝、银行卡等选项。用单选按钮组来实现选中某个选项时右侧显示对应的说明文字或二维码占位图。在Axure里单选按钮组需要设置相同的单选按钮组名称这样它们才会互斥。选中状态的样式通过选中交互样式来定义一般是边框变色加一个勾选图标。支付方式下方通常还有发票信息、优惠券选择等次要信息。初级项目可以简化处理用一行文字加一个选择链接来表示点击后弹出对应的选择弹窗。5.3 提交订单到支付成功的完整跳转点击提交订单按钮后应该跳转到支付结果页。但在跳转之前建议加一个确认弹窗确认支付 ¥299用户点击确认后才跳转。这个确认步骤在真实产品中不一定有但在原型演示中能增加流程的完整感。支付结果页显示成功图标、订单号、支付金额和继续购物按钮。订单号可以用Axure的日期函数生成一个模拟值比如[[Now.getFullYear()]][[Now.getMonth()1]][[Now.getDate()]]加上几个随机数字。这样每次演示时订单号都不一样显得更真实。继续购物按钮点击后跳回首页同时清空购物车数据。清空购物车可以通过设置全局变量Qty为0来实现这样首页的购物车角标也会归零。6. 交互串联中那些没人告诉你的坑6.1 页面跳转时的变量丢失问题Axure的全局变量在整个原型运行期间都有效但如果你在浏览器里刷新页面所有变量都会重置。这在演示时问题不大但如果你把原型发布到Axure Cloud上让别人自己点对方刷新后数据就乱了。解决办法是在关键页面添加页面载入时事件检查变量是否为空如果为空则赋予初始值。比如购物车页面载入时如果Qty变量为空就设置为0。这样即使刷新页面也能正常显示。6.2 动态面板嵌套导致的交互失效做电商原型时动态面板嵌套几乎不可避免——轮播图是一个动态面板里面每张banner可能又是一个动态面板弹窗是一个动态面板里面的表单区域可能还有动态面板。嵌套层级太深时交互事件可能会被外层面板拦截。我的经验是动态面板嵌套不要超过三层。如果发现某个按钮点击没反应先检查它是不是被外层动态面板的透明区域盖住了。在Axure里你可以临时给动态面板设置一个半透明背景色来排查遮挡问题找到后把背景色设回透明。6.3 中继器数据绑定的常见错误中继器是Axure里学习曲线最陡的元件。新手常犯的错误是在中继器里放了文本标签但没有在每项加载时事件里绑定数据。结果中继器预览时显示的全是默认文字而不是数据表里的内容。正确的做法是双击中继器进入编辑模式选中文本标签在每项加载时事件里添加设置文本动作值选择对应的数据列。比如[[Item.name]]对应商品名称列[[Item.price]]对应价格列。另一个坑是中继器的分页设置。默认情况下中继器会显示所有数据你需要手动设置每页项目数。如果数据有20条每页显示8条那就会自动分成3页。分页按钮的交互要选择设置当前页而不是设置面板状态。6.4 原型演示时的性能优化当页面元件数量超过一定规模Axure原型的操作会变得卡顿。电商首页如果有几十个商品卡片每个卡片又是母版实例滚动时可能会掉帧。优化方法有几个一是把不需要交互的静态区域合并成图片减少元件数量二是关闭不必要的页面载入时动画三是把长列表用中继器分页显示而不是一次性铺满。如果原型是给客户演示用的还可以考虑导出HTML后只在关键页面保留完整交互次要页面用静态图代替。7. 从原型到可演示作品的最后一步7.1 用Axure Cloud做在线分享做完原型后最方便的分享方式是通过Axure Cloud发布。在Axure里点击发布菜单选择发布到Axure Cloud登录账号后就能生成一个在线链接。把这个链接发给别人对方在浏览器里就能直接操作你的原型不需要安装任何软件。发布时有个选项叫包含页面备注如果你在制作过程中给元件写了注释勾选这个选项后评审者可以在原型上看到你的设计说明。这个功能在团队协作时非常有用。7.2 生成规格说明文档Axure可以自动生成Word格式的规格说明文档包含页面截图、元件列表和交互描述。虽然自动生成的文档排版比较粗糙但作为交付物的一部分已经够用了。你可以在发布菜单里选择生成Word文档然后选择要包含的页面。我的习惯是在自动生成的基础上手动补充一些关键说明比如购物车数量上限为99件支付超时时间为15分钟这类业务规则。这些规则在原型里不一定能体现但开发人员需要知道。7.3 组织一次有效的原型评审原型做完后找几个人来试用一下。不要问你觉得怎么样而是给他们一个具体任务请你找到一款价格在200元以内的黑色运动鞋加入购物车并完成支付。观察他们在哪个步骤卡住那个地方就是需要优化的点。评审时准备一个记录表按页面记录问题和建议。常见的问题包括按钮位置不明显、跳转逻辑不符合预期、缺少返回入口、文字太小看不清。这些问题在真实开发前发现修改成本几乎为零如果等到开发完成再发现成本就高得多了。7.4 初级项目之后的进阶方向这个电商原型做完之后你已经掌握了Axure最核心的几个能力母版复用、动态面板状态切换、全局变量传值、中继器数据绑定、条件逻辑判断。接下来可以往几个方向深入一是做响应式版本同一套原型适配PC和移动端二是加入更多真实数据交互比如用中继器模拟商品搜索过滤三是尝试更复杂的业务场景比如优惠券叠加计算、多地址管理、订单状态流转。但不管往哪个方向走核心方法是不变的先把流程想清楚再用最简单的元件把流程串起来最后才考虑视觉美化。这个顺序反了做出来的东西就是花架子中看不中用。我在带新人的时候经常说一句话Axure画得丑没关系逻辑跑不通才是大问题。一个灰度的、粗糙的、但每个按钮都有正确反馈的原型比一个精美但点两下就卡死的原型有价值一百倍。电商网站的原型设计尤其如此因为它的核心价值就在于那条从浏览到支付的完整链路链路通了原型就成立了。