1. 为什么我建议每个产品新人都拿电商网站练手做产品这行十来年带过不少新人也看过无数份作品集。有个现象特别明显十个新人里有八个第一个像样的原型作品都是电商网站。有人觉得这是偷懒觉得电商模板满天飞随便套一个就行。但我的看法恰恰相反——电商网站是产品设计里最诚实的题材它藏不住问题也骗不了人。你想想一个电商网站要同时处理浏览、搜索、筛选、加购、结算、支付、订单管理这一整条链路每一个环节都牵扯到信息架构、交互反馈、状态管理和异常处理。首页做得再花哨只要购物车逻辑没理顺用户走两步就卡住了。这种全链路压力测试的属性是其他题材很难替代的。所以拿电商网站练手不是因为它简单而是因为它足够典型典型到你能在一套原型里把产品设计的基本功全部过一遍。这篇内容面向的是刚接触Axure、想做出一个能拿得出手的电商原型的朋友。我不会只给你一堆步骤让你照抄而是把每一步背后的为什么讲清楚——为什么这样布局、为什么这个交互要这样设计、为什么某个参数要设成这个值。你看完之后应该能独立做出一个逻辑自洽、交互完整、能经得起追问的初级电商网站原型而不是一个只能看不能点的图片集。Axure这个工具说它简单也简单拖拖拽拽就能出东西说它难也难动态面板、中继器、全局变量这些概念新手很容易绕进去。我的策略是先跑通主流程再逐步加细节。别一上来就想着做得多完美先把用户从进站到下单这条路走通剩下的都是锦上添花。2. 动手之前把电商网站的信息架构想明白2.1 电商网站的四大核心模块拆解很多人打开Axure就开始画首页画着画着发现导航栏放不下、分类层级理不清然后推倒重来。这个坑我踩过后来学乖了——先在纸上或者思维导图工具里把信息架构理清楚再动手。一个初级电商网站核心模块其实就四块商品浏览模块首页、分类页、搜索页、商品列表页、商品详情页。这是用户逛的部分核心目标是让用户快速找到想要的商品。交易模块购物车、结算页、支付页、下单成功页。这是用户买的部分核心目标是降低决策成本、减少中途流失。用户模块登录注册、个人中心、订单列表、订单详情、收货地址管理。这是用户管的部分核心目标是让用户能追溯和管理自己的行为。辅助模块客服入口、帮助中心、关于我们。这些不是主线但缺了会显得不完整。你不需要在第一版里把每个模块都做全但心里要有这张地图。我通常建议新手先做浏览→详情→加购→结算→下单成功这条最短路径把这条路径上的每个页面都做扎实再回头补用户模块和辅助模块。2.2 页面层级与导航逻辑的确定信息架构理清之后下一步是确定页面之间的跳转关系。这里有个原则任何一个页面用户最多点三次就能回到首页。这是电商网站的黄金法则因为用户在任何环节都可能想重新开始。具体到Axure里你需要提前规划好哪些页面是一级页面首页、分类页、购物车它们之间通过底部导航或顶部导航互相直达。哪些页面是二级页面商品列表、商品详情它们从一级页面进入通过返回按钮回到上级。哪些页面是流程页面结算、支付、下单成功它们是一条单向链路用户只能前进或退出不能随意跳转。我习惯在Axure的页面面板里用文件夹把页面分组比如01-浏览02-交易03-用户这样页面多了也不会乱。另外给页面起名要有规律比如商品列表-分类A商品列表-搜索结果别用页面1页面2这种名字后期改起来你会疯。2.3 低保真还是高保真新手的选择策略这是新手最纠结的问题之一。我的建议很明确第一版做低保真第二版再考虑高保真。低保真的核心是验证逻辑用灰块、占位文字、简单线条把页面结构和交互关系表达清楚就行。它的好处是快你可以把精力放在流程设计上而不是纠结某个按钮用圆角还是直角。高保真则要求视觉细节到位配色、字体、间距、图标都要讲究适合用来做作品集展示或给客户演示。我见过太多新人一上来就追求高保真结果做了两周还在调首页的配色整个流程都没跑通。正确的做法是先用低保真把主流程跑通确认逻辑没问题再逐步替换视觉元素。Axure的好处是低保真和高保真可以平滑过渡——你先把结构搭好后面换样式只是改填充色和字体的事。3. Axure核心功能在电商原型中的实战用法3.1 动态面板让页面活起来的关键动态面板是Axure里最重要的功能没有之一。电商网站里到处都是需要变化的地方轮播图要自动切换、商品图片要能左右滑动、筛选条件要能展开收起、弹窗要能显示隐藏。这些全靠动态面板实现。以首页轮播图为例操作步骤是这样的拖一个动态面板到画布上设置好尺寸比如750×400。双击进入面板编辑状态添加多个状态State每个状态放一张不同的商品图。给面板添加载入时交互设置循环切换状态间隔3000毫秒切换时加上滑动动画时长500毫秒。再添加两个小圆形作为指示点通过状态改变时交互让指示点跟着高亮。这里有个细节要注意轮播图的切换动画时长不要超过500毫秒。我试过800毫秒的滑动用户会觉得卡顿因为等待时间太长。300到500毫秒是比较舒服的范围既有动感又不拖沓。再比如商品详情页的图片切换通常是一个大图加几个小缩略图。点击缩略图时大图切换到对应图片。这个用动态面板的多状态就能实现每个状态放一张大图缩略图点击时用设置面板状态动作切换到对应状态。3.2 中继器批量数据展示的利器中继器Repeater是Axure里最像编程的功能也是新手最容易放弃的地方。但电商网站的商品列表页、订单列表页、购物车列表页全都是重复的列表结构用中继器能省下大量重复劳动。中继器的核心逻辑是你只需要设计一行的样式然后告诉它有多少行数据它自动帮你复制。具体操作拖一个中继器到画布双击进入编辑状态。在里面设计好一行商品的布局商品图、标题、价格、加购按钮。在数据集面板里添加列比如商品图标题价格库存然后填入几行模拟数据。回到画布给中继器里的元素绑定数据双击商品图设置文本/图片为值选择对应的数据列。设置每项加载时的交互比如让价格文字根据数据自动变化。中继器最实用的场景是筛选和排序。比如用户点击价格从低到高列表要重新排列。这个用中继器的排序功能就能实现不需要手动调整每一行的位置。再比如用户选择只看有货用筛选功能把库存为0的商品隐藏掉。我踩过的一个坑是中继器的数据集里图片列要填图片的路径或名称而不是直接拖图片进去。如果你在数据集里放的是文字那绑定时就要用设置文本如果放的是图片就要用设置图片。这个对应关系搞错了列表就显示不出来。3.3 全局变量与条件逻辑购物车状态管理的核心购物车的数量增减和总价计算是电商原型里最能体现逻辑思维的地方。这里必须用到全局变量和条件判断。我的做法是这样的先定义几个全局变量cartCount购物车商品总数、cartTotal购物车总价、itemPrice当前商品单价。在商品详情页点击加入购物车时用设置变量值动作让cartCount加1让cartTotal加上itemPrice。在购物车页面每个商品旁边的和-按钮分别对应cartCount的加减同时更新cartTotal。顶部导航栏的购物车图标上放一个文本标签绑定cartCount变量这样用户在任何页面都能看到购物车里有几件商品。这里有个关键细节数量减到1时-按钮要禁用或提示不能再少了。这个用条件判断实现当cartCount小于等于1时点击-不执行减操作而是弹出一个提示。很多新手忘了这个边界处理导致用户能把数量减到0甚至负数逻辑就崩了。总价的计算也要注意精度。Axure的变量是数字类型直接相加可能出现小数精度问题。我的经验是价格统一用分作为单位存储显示时再除以100这样能避免0.10.20.30000000000000004这种尴尬。3.4 交互样式与状态切换按钮的反馈感电商网站里按钮的反馈感直接影响用户的操作信心。一个按钮点下去没反应用户就会怀疑是不是没点到。Axure的交互样式功能可以轻松解决这个问题。以加入购物车按钮为例我通常会设置三种状态默认状态橙色填充白色文字圆角8px。悬停状态颜色加深10%鼠标变成手型。按下状态颜色再加深按钮轻微缩小比如缩放95%模拟按下去的物理感。设置方法是选中按钮在交互样式面板里分别设置鼠标悬停鼠标按下的填充色和缩放。这样不需要写任何交互动作按钮就有了基本的反馈。再比如收藏按钮点击后要从空心星变成实心星。这个用切换动作配合两个不同状态的图标就能实现。我一般会放两个图标叠在一起默认显示空心星点击后隐藏空心星、显示实心星再点一次反过来。4. 从零到一完整电商原型实操流程4.1 首页搭建轮播、导航与商品推荐区首页是用户的第一印象但新手容易犯的错是什么都想放。我的原则是首页只放三样东西——轮播图、分类入口、推荐商品。轮播图按前面说的方法用动态面板做放3到5张图自动切换。分类入口用图标加文字的形式横向排列点击跳转到对应的分类列表页。推荐商品区用中继器做展示6到8个商品每个商品包含图片、标题、价格和加购按钮。这里有个布局技巧用网格Grid来对齐元素。Axure的网格功能可以让你拖拽元素时自动吸附保证间距一致。我通常设置网格大小为10px这样所有元素的间距都是10的倍数视觉上会很整齐。别小看这个细节作品集里那些看起来舒服的原型往往就是赢在间距统一。导航栏我建议做顶部导航底部导航双保险。顶部放Logo、搜索框、购物车图标底部放首页、分类、购物车、我的四个入口。这样无论用户在哪个页面都能快速到达核心功能。4.2 商品列表与筛选中继器的高级应用商品列表页的核心是筛选和排序。我用中继器实现了一个可用的筛选逻辑中继器的数据集里除了商品基本信息再加几列分类价格区间是否有货。页面上放几个筛选按钮比如全部数码服饰食品。点击某个筛选按钮时用设置中继器筛选动作让中继器只显示对应分类的商品。排序用下拉菜单实现选项有默认价格从低到高价格从高到低销量优先。选择后用设置中继器排序动作重新排列。这里有个性能上的注意点中继器的数据行数不要太多20行以内比较流畅。如果你要模拟大量数据可以只放20行然后在页面上标注共200件商品当前显示前20件。Axure毕竟不是真正的数据库行数太多会导致预览卡顿。筛选条件的组合也要考虑。比如用户先选了数码又选了价格1000-2000这时候应该是且的关系两个条件同时满足。实现方法是每次筛选时先重置中继器显示所有数据再依次应用每个激活的筛选条件。这个逻辑用几个条件判断就能串起来。4.3 商品详情与加购交互细节决定体验商品详情页是用户决策的关键页面信息要全但也不能乱。我的布局是顶部大图轮播下面是标题、价格、销量、评价数再下面是规格选择颜色、尺寸然后是加入购物车和立即购买两个按钮最后是详情描述和用户评价。规格选择用单选按钮组实现。用户选了颜色和尺寸之后加入购物车按钮才可点击。这个用条件判断当颜色和尺寸都有选中值时按钮启用否则按钮置灰点击时提示请先选择规格。加入购物车的交互我做了三层反馈按钮本身有按下动画。点击后顶部购物车图标旁边弹出一个小的已加入提示1.5秒后自动消失。购物车图标的数量角标加1。这三层反馈叠加起来用户会非常确定操作成功了。我见过很多原型只做了第一层用户点完不知道有没有加上体验就差了一截。立即购买则直接跳转到结算页跳过购物车。这个逻辑要区分清楚加购是暂存立即购买是直接结算。两者的区别在结算页会体现——从购物车来的可能有多件商品从立即购买来的只有当前这一件。4.4 购物车与结算状态管理与异常处理购物车页面是逻辑最复杂的地方。我用中继器展示购物车商品列表每一行有商品图、标题、单价、数量加减、小计、删除按钮。底部固定一个结算栏显示总价和去结算按钮。数量加减的逻辑前面说过了用全局变量控制。删除按钮点击后用删除行动作从中继器里移除该行同时更新cartCount和cartTotal。这里要注意删除前要弹窗确认因为删除是不可逆操作。弹窗用动态面板做包含确认删除和取消两个按钮。结算页要展示收货地址、商品清单、运费、优惠券、总价。收货地址默认显示一条点击可以切换或新增。运费我设了一个简单规则满99元包邮不满收10元运费。这个用条件判断实现当cartTotal大于等于99时运费显示免运费否则显示10元。异常处理是新手最容易忽略的。比如购物车为空时结算按钮要禁用页面显示购物车还是空的去逛逛吧。收货地址为空时结算按钮点击后提示请先添加收货地址。支付时如果用户取消要返回结算页而不是停留在支付页。这些异常分支看起来不起眼但正是它们让原型显得专业。我在评审新人作品时特别关注这些边界情况因为真实产品里异常流程的处理质量往往比正常流程更能体现设计功力。4.5 下单成功与订单管理闭环的最后一环下单成功页要简洁明了一个大大的对勾图标一句下单成功下面是订单号、预计送达时间、订单金额再放两个按钮——查看订单和继续购物。订单管理页用中继器展示订单列表每个订单包含订单号、下单时间、商品缩略图、总价、订单状态待付款、待发货、待收货、已完成。点击某个订单进入订单详情页展示完整的商品清单和物流信息。这里有个小技巧订单状态用不同颜色的标签区分。待付款用橙色待发货用蓝色待收货用绿色已完成用灰色。颜色是最快的识别方式用户扫一眼就能知道每个订单的状态。订单详情页的物流信息我通常用时间轴的形式展示已下单→已付款→已发货→运输中→已签收。每个节点用圆点和连线表示当前节点高亮。这个用几个矩形和圆形组合就能做出来不需要复杂的交互。5. 新手最容易踩的坑与排查技巧5.1 交互不生效的常见原因速查新手做Axure最崩溃的时刻就是明明设置了交互预览时却没反应。我把常见原因整理成了一张表遇到问题按顺序排查问题现象可能原因排查方法点击按钮无反应交互动作绑错了元素检查动作是否绑在了按钮上而不是按钮外面的容器动态面板不切换状态名称写错或状态为空双击面板确认状态存在且名称一致中继器不显示数据数据集列名与绑定不匹配检查绑定时的列名是否和数据集完全一致变量值不更新变量名拼写错误或作用域不对在全局变量面板确认变量名注意大小写跳转后页面空白目标页面不存在或链接失效检查页面面板里目标页面是否存在动画卡顿动画时长过长或元素过多把动画时长调到500ms以内减少同时运动的元素我特别要提醒的是大小写问题。Axure的变量名和函数名是区分大小写的cartCount和cartcount是两个不同的变量。我见过有人因为一个字母的大小写排查了半小时。5.2 原型卡顿与性能优化的实操心得Axure原型做大了之后预览会变卡。我总结了几条优化经验减少动态面板的嵌套层级。动态面板套动态面板每多一层渲染负担就重一分。能用一层解决的绝不用两层。图片压缩后再导入。Axure不会自动压缩图片你导入一张2MB的大图预览时就要加载2MB。我通常把图片压到200KB以内再导入。中继器数据行控制在20行以内。前面说过了行数太多会卡。避免在页面载入时做太多动作。有些新手喜欢在载入时初始化一堆变量、设置一堆状态这会让页面打开变慢。能延迟到用户操作时再执行的就延迟。预览时用Chrome或Edge。Axure生成的HTML在Chrome内核的浏览器里表现最稳定其他浏览器可能有兼容问题。5.3 从能看到好用的细节打磨清单原型做完之后别急着导出。花半小时做一轮细节检查能让作品质量提升一个档次。我的检查清单是这样的所有按钮都有悬停和按下状态吗所有输入框都有占位提示文字吗所有跳转都有返回路径吗空状态购物车为空、订单为空、搜索无结果都有处理吗加载状态点击后到跳转前有过渡吗错误提示未选规格、未填地址都覆盖了吗所有页面的导航栏和底部栏都一致吗文字有没有错别字价格格式统一吗比如都是¥99.00这份清单里的每一条都是我在实际项目中被用户或评审人问过的问题。提前检查一遍能避免很多尴尬。6. 关于Axure做电商原型我的一些个人体会做原型这件事工具只是载体真正值钱的是你对业务逻辑的理解。Axure能帮你把想法可视化但它不能替你想清楚用户为什么要这样操作这个环节会不会流失用户。我带新人的时候经常让他们先不要打开Axure而是拿一张纸把用户从进站到下单的每一步画出来标出每一步用户可能产生的疑问和情绪。比如用户看到商品详情页心里会想这个价格划算吗质量靠谱吗退货方便吗。你的原型要能回答这些疑问而不是只把信息堆上去。另外别追求一次做到完美。我的习惯是三版迭代第一版跑通主流程第二版补异常状态和细节交互第三版做视觉打磨。每一版做完都找人点一遍收集反馈再改。这个过程比闷头做一周然后拿出来被全盘否定要高效得多。最后分享一个我常用的技巧给原型加一个演示模式页面。这个页面用几个按钮控制跳转到不同模块方便你在演示时快速切换不用每次都从首页点起。这个页面不用做得好看自己用着方便就行。演示的时候你可以根据观众的反应灵活调整展示顺序而不是被固定的流程绑死。Axure这个工具学起来不难难的是用它表达清楚你的产品思维。电商网站是个很好的练习场因为它足够复杂也足够真实。把这一套做下来你对产品设计的理解会上一个台阶。
