1. 为什么用Axure做电商网站原型依然值得投入1.1 从一张草图到可点击的购物流程很多刚入行的产品新人会问现在工具这么多Figma、墨刀、即时设计都能画原型为什么还要专门学Axure做电子商务网站设计我刚开始带新人的时候也思考过这个问题后来在多个中小型电商项目中反复验证发现Axure在复杂交互逻辑的表达上依然有不可替代的优势。电子商务网站的核心不是好看而是流程跑得通——用户从进入首页、浏览商品列表、查看详情、加入购物车、填写收货信息到最终提交订单这条链路涉及大量条件判断、状态切换和动态面板切换Axure在这些环节的原型还原度是最高的。这个教程面向的是刚接触Axure的产品助理、交互设计初学者以及需要快速验证电商产品思路的创业者。你不需要有编程基础但需要对电子商务的基本业务流程有概念。学完之后你应该能独立完成一套包含首页、分类页、商品详情页、购物车页和订单确认页的初级电商网站原型并且每个页面之间的跳转逻辑是连贯的、可演示的。我见过太多新人一上来就追求视觉精美结果做了十几个静态页面点来点去发现购物车加不进去、数量改不了、总价不会变。这就是典型的“画页面”思维而不是“做产品”思维。Axure教程 | 初级电子商务网站设计这个主题重点应该放在交互逻辑的搭建上视觉层面够用就行。下面我会从整体设计思路开始拆解然后逐步深入到每个核心页面的实操细节最后分享一些我在实际项目中踩过的坑和总结出来的排查技巧。1.2 初级电商原型的功能边界在哪里在动手之前先明确“初级”二字的含义。一个初级电子商务网站原型不需要包含真实的支付接口、不需要做用户登录注册的完整验证、不需要考虑库存并发和订单状态机。它应该聚焦在三个核心能力上商品展示能力、购物车管理能力、订单信息填写能力。具体来说商品展示要能体现分类浏览和详情查看购物车要能实现添加商品、修改数量、删除商品、自动计算总价订单确认要能展示收货表单和订单摘要。这三个能力串起来就是一个最小可演示的电商闭环。我建议你在做原型之前先用纸笔把这三个环节的页面跳转关系画出来确认逻辑没有断点再打开Axure开始操作。这个习惯能帮你省下大量返工时间。另外要提醒的是Axure的元件库虽然丰富但电商场景中很多组件需要自己组合。比如商品卡片你需要用矩形做背景、用图片元件占位、用文本标签放标题和价格再把这些元件编组。不要指望现成的元件能直接满足需求学会组合和复用才是效率的关键。2. 动手前的环境准备与元件规划2.1 页面结构规划与命名规范打开Axure之后第一件事不是拖元件而是规划页面结构。我习惯在左侧页面面板中建立清晰的文件夹层级一级目录叫“电商原型”下面分“公共页面”“商品模块”“交易模块”“用户模块”四个子文件夹。公共页面放母版和全局元件商品模块放首页、分类页、详情页交易模块放购物车和订单确认页用户模块放个人中心占位页。命名规范同样重要。页面名称不要用“页面1”“页面2”而是用英文或拼音简写比如“Home”“Category”“ProductDetail”“Cart”“Checkout”。这样做的好处是当你在交互中需要跳转页面时下拉列表里能快速找到目标页面不会因为一堆“页面1”而选错。母版命名也要统一比如“Header”“Footer”“ProductCard”“NavBar”后面复用的时候一目了然。注意Axure的文件体积会随着页面和母版数量增加而变大建议每完成一个模块就保存一次并且定期使用“文件-清理”功能删除未使用的元件和样式保持文件轻量。2.2 母版设计与全局样式统一电商网站有几个区域是每个页面都要出现的顶部导航栏、底部版权信息、商品卡片。这些内容必须做成母版否则改一个地方就要改十几个页面效率极低。顶部导航栏母版包含Logo占位、搜索框、购物车图标和用户头像。购物车图标上要加一个动态面板显示数量角标这个角标后面会通过全局变量来控制。底部版权信息母版比较简单放一些占位文字和链接即可。商品卡片母版稍微复杂一些需要包含商品图片占位、商品标题、价格、原价划线效果、销量文字和“加入购物车”按钮。商品卡片母版的宽度建议设置为280像素这样在首页网格布局中可以一行放四个在分类页列表布局中可以一行放一个灵活适配。全局样式方面我建议在“项目-全局样式”中提前定义好主色、辅色、文字颜色和圆角半径。电商网站通常用暖色调刺激购买欲比如橙色或红色作为主色灰色作为辅助文字色。圆角半径统一设置为4到8像素按钮和卡片都用这个值视觉上会更协调。这些样式定义好之后拖元件的时候直接套用不用每次都手动调颜色和圆角。2.3 全局变量的提前规划Axure的全局变量是电商原型实现动态计算的关键。在这个初级教程中我们至少需要定义三个全局变量CartCount购物车商品总数量、CartTotal购物车商品总金额、CurrentProduct当前查看的商品名称。CartCount和CartTotal用于在导航栏角标和购物车页面中显示实时数据CurrentProduct用于在详情页点击“加入购物车”时传递商品信息。定义变量的位置在“项目-全局变量”中。新建变量时名称用英文默认值设为0或空字符串。注意变量的数据类型Axure不强制区分数字和文本但在做加法运算时要确保参与运算的值是数字类型否则会拼接字符串而不是求和。我踩过这个坑当时购物车总价一直显示“0100200”这种拼接结果排查了半天才发现是变量默认值带了引号。3. 核心页面实操从首页到购物车的完整链路3.1 首页布局与商品卡片交互首页是用户进入电商网站的第一印象布局上通常采用“轮播图分类入口商品推荐”的结构。轮播图用Axure的动态面板实现面板设置三个状态每个状态放一张占位图片添加“自动循环”和“滑动切换”的交互。分类入口用图标加文字的组合横向排列四到六个点击后跳转到分类页并传递分类参数。商品推荐区域用中继器来实现是最优解。中继器是Axure中处理重复列表的利器你只需要设计一行商品卡片中继器会自动根据数据行数复制。在中继器的数据表中列名设置为“商品图片”“商品名称”“价格”“原价”“销量”每行填入对应的占位数据。然后在中继器内部把商品卡片的各个元件与数据列绑定。这样你只需要维护数据表就能快速生成几十个商品卡片。商品卡片上的“加入购物车”按钮需要添加交互鼠标点击时先更新全局变量CartCount等于CartCount加1再更新CartTotal等于CartTotal加上当前商品价格最后在导航栏购物车角标上显示CartCount的值。这里有个细节商品价格需要从数据表中读取可以用“设置变量值”动作将CartTotal设置为CartTotal加上中继器当前行的价格数据。这个操作在Axure中叫“中继器数据项”引用刚开始可能不太熟悉多试几次就掌握了。提示中继器的数据表支持从Excel复制粘贴你可以先在Excel中准备好商品数据然后直接粘贴到Axure中继器数据表中效率比手动输入高很多。3.2 分类页的筛选与排序逻辑分类页的核心功能是筛选和排序。筛选通常按价格区间、品牌、销量等维度排序则按价格升降序或销量降序。在Axure中实现这些功能需要用到中继器的“筛选”和“排序”动作。先在中继器上方放置筛选条件元件比如三个矩形按钮分别代表“价格从低到高”“价格从高到低”“销量优先”。点击按钮时触发中继器的“排序”动作选择对应的数据列和排序方式。价格排序要注意数据格式如果价格列是文本类型排序会按字符串比较出现“100”排在“20”前面的错误。解决办法是在数据表中把价格列设置为数字类型或者在排序前用“设置变量值”动作将文本转换为数字。筛选功能稍微复杂一些。假设我们要按价格区间筛选可以放置两个文本框让用户输入最低价和最高价再加一个“筛选”按钮。点击按钮时触发中继器的“筛选”动作条件设置为“价格大于等于最低价且价格小于等于最高价”。Axure的筛选条件支持“与”“或”逻辑也支持包含、等于、大于等比较运算符。实测下来筛选和排序组合使用时建议先筛选再排序否则排序结果会被筛选动作重置。分类页还有一个常见需求是分页。Axure中继器自带分页功能在“中继器-分页”设置中开启设置每页显示数量然后放置“上一页”“下一页”按钮绑定“设置当前页码”动作即可。分页按钮的启用禁用状态可以通过判断当前页码和总页数来动态切换这个细节能让原型看起来更专业。3.3 商品详情页的动态面板切换商品详情页是用户决策的关键页面通常包含商品主图、缩略图切换、规格选择、数量选择、加入购物车按钮和详情描述。主图和缩略图的切换用动态面板实现动态面板设置多个状态每个状态放一张大图缩略图点击时用“设置面板状态”动作切换到对应状态。规格选择比如颜色、尺码可以用矩形组合模拟。每个规格选项是一个矩形点击时改变矩形的选中样式比如边框变粗、背景变色同时用“设置变量值”动作记录用户选择的规格。如果要做“未选择规格时加入购物车按钮不可点击”的效果可以给加入购物车按钮添加“启用/禁用”交互当规格变量为空时禁用按钮选择规格后启用。数量选择器用两个按钮和一个文本框实现。减号按钮点击时判断文本框中的值是否大于1如果大于1则减1加号按钮点击时直接加1。文本框的值变化后要同步更新“小计”文本小计等于单价乘以数量。这个计算用“设置文本”动作将小计文本设置为“单价变量乘以数量变量”的结果。注意单价变量需要从上一个页面传递过来或者在中继器中提前设置好。加入购物车按钮的交互是详情页的核心。点击时先判断规格是否已选如果未选则弹出提示“请选择规格”如果已选则更新CartCount和CartTotal并弹出“加入成功”的提示。提示可以用Axure的“显示/隐藏”动作控制一个提前做好的提示框显示后等待1秒自动隐藏。这个等待动作在“其他-等待”中设置时间设为1000毫秒。3.4 购物车页面的增删改与总价计算购物车页面是电商原型中交互最复杂的部分。列表用中继器实现每行包含商品图片、名称、单价、数量选择器、小计和删除按钮。数量选择器的加减操作要同步更新中继器数据表中的数量列然后重新计算小计和总价。具体操作是给加号按钮添加交互先更新中继器当前行的数量数据为“当前数量加1”然后更新小计文本为“单价乘以新数量”。这里要注意中继器数据更新后需要触发中继器的“更新”动作让界面刷新。删除按钮的交互是“删除行”删除后中继器会自动重新计算行数但总价需要手动重新计算。总价的计算逻辑是遍历中继器所有行的小计并求和。Axure没有直接的求和函数但可以用“设置变量值”动作配合中继器的“数据项”引用逐行累加。更简单的办法是给中继器添加一个“加载时”交互用“设置变量值”将CartTotal重置为0然后遍历每一行将CartTotal设置为CartTotal加上当前行的小计。这个遍历操作在Axure中需要用“触发事件”配合“等待”来实现稍微有点绕但做一次就能掌握。注意购物车页面的数量选择器如果直接绑定中继器数据修改数量后需要手动触发中继器更新否则界面不会刷新。我建议在数量文本框的“失去焦点”事件中触发更新这样用户输入完数量后点击其他地方数据就会同步。4. 交互逻辑进阶让原型真正跑起来4.1 页面间传参与状态保持电商原型中页面之间的参数传递非常频繁。比如从首页点击某个商品进入详情页详情页需要知道是哪个商品从详情页加入购物车后购物车页面需要知道加了什么。Axure中页面传参主要靠全局变量和页面加载时的“设置文本”动作。以商品详情页为例在首页商品卡片的点击事件中先用“设置变量值”动作将CurrentProduct设置为当前商品的名称然后跳转到详情页。详情页的“页面加载时”交互中用“设置文本”动作将商品标题文本设置为CurrentProduct变量的值。这样无论从哪个商品点进来详情页都能显示对应的商品名称。状态保持是指用户从详情页返回首页时首页的滚动位置、筛选条件等状态不丢失。Axure默认不保存页面状态但可以通过“返回时”交互来恢复。比如在首页的“页面加载时”检查一个全局变量FilterStatus如果该变量有值则自动应用对应的筛选条件。这个技巧在演示时能让原型看起来更像真实产品。4.2 条件判断与动态提示条件判断是Axure交互的灵魂。电商场景中常见的判断包括数量不能小于1、购物车不能为空、总价超过一定金额免运费等。Axure的条件判断在“添加条件”中设置支持“值等于”“值大于”“值包含”等运算符。以“购物车为空时显示空状态”为例在购物车页面的“页面加载时”添加条件如果CartCount等于0则显示空状态提示框隐藏商品列表否则隐藏空状态提示框显示商品列表。这个判断让原型在不同状态下呈现不同界面演示效果更真实。动态提示框的设计也有讲究。提示框通常用动态面板做设置“显示”和“隐藏”两个状态。显示时用“淡入”动画隐藏时用“淡出”动画时间设为200到300毫秒。提示框的位置固定在页面顶部居中或底部居中避免遮挡主要内容。提示文字要简洁明确比如“已加入购物车”“请先选择规格”“数量不能少于1件”。4.3 母版复用与全局更新母版复用是Axure提升效率的核心手段。当你修改了顶部导航栏母版中的购物车角标样式所有使用该母版的页面都会同步更新。这个特性在电商原型中尤其有用因为导航栏几乎每个页面都有。但母版也有局限性。母版中的元件不能直接与页面中的元件交互必须通过全局变量或“触发事件”来通信。比如导航栏母版中的购物车图标点击后要跳转到购物车页面这个跳转动作可以直接在母版中设置因为页面跳转不依赖页面内的元件。但如果要在母版中显示当前页面的标题就需要用全局变量传递页面标题然后在母版的“页面加载时”读取变量并设置文本。全局更新还有一个场景是主题色切换。如果你在全局样式中定义了主色后来想改成另一种颜色只需要修改全局样式中的主色值所有套用了该样式的元件都会自动更新。这个功能在需要快速调整视觉风格时非常省事。5. 常见问题排查与效率提升技巧5.1 交互不生效的排查思路Axure新手最常遇到的问题就是“点了没反应”。排查思路可以按以下顺序进行第一检查交互是否绑定到了正确的元件上有时候元件被其他透明元件遮挡点击事件被上层元件拦截了第二检查交互的触发条件是否满足比如条件判断中的变量值是否与预期一致第三检查动作的顺序是否正确比如先跳转页面再设置变量变量设置可能不会生效第四检查中继器的数据表是否有数据空数据表会导致列表不显示。我遇到过一个典型案例购物车总价一直显示为0。排查后发现是中继器的“加载时”交互中遍历累加的动作放在了“设置变量值为0”之前导致每次累加后又被重置。调整动作顺序后问题解决。这个经验告诉我Axure的交互动作是按顺序执行的顺序错了结果就错了。5.2 中继器数据绑定的常见坑中继器数据绑定有几个容易出错的地方。第一数据列的名称必须与元件绑定的名称完全一致包括大小写和空格。第二中继器内部的元件命名要规范否则在“数据项”引用时找不到目标。第三中继器的“每项加载时”交互中设置文本的动作要引用正确的数据列比如[[Item.价格]]而不是[[Item.price]]。还有一个坑是中继器的分页和筛选同时使用时筛选后的结果可能跨页显示异常。解决办法是在筛选动作后重置当前页码为1确保筛选结果从第一页开始显示。这个细节在Axure的官方文档中没有明确说明是我在实际项目中反复测试后总结出来的。5.3 原型演示前的检查清单在把原型发给别人演示之前建议按照以下清单逐项检查检查项检查内容常见问题页面跳转所有按钮和链接是否都能跳转到正确页面跳转目标选错或未设置变量初始值全局变量是否在页面加载时重置上次演示的数据残留中继器数据数据表是否完整、列名是否匹配空数据或列名拼写错误交互顺序动作执行顺序是否逻辑正确先跳转后设值导致失效提示框提示框是否会自动隐藏忘记设置等待和隐藏动作母版同步修改母版后是否所有页面已更新部分页面未使用母版这个清单看起来简单但每次演示前过一遍能避免80%的现场翻车。我刚开始做原型的时候有一次给团队演示点开购物车发现总价是上一次演示的残留数据场面非常尴尬。从那以后我养成了在关键页面加载时重置变量的习惯。5.4 提升效率的快捷键与技巧Axure有一些快捷键能显著提升操作速度。CtrlD快速复制元件CtrlG编组CtrlShiftG取消编组CtrlAltM添加母版F5预览原型。这些快捷键用熟了操作速度能提升一倍。还有一个技巧是使用“元件样式”功能。如果你经常使用某种样式的按钮或卡片可以在“项目-元件样式”中定义好样式之后拖元件时直接套用不用每次都调颜色、边框和圆角。这个功能类似于Word中的样式能保证整个原型的视觉一致性。另外Axure支持从Sketch或Figma导入设计稿如果你有现成的视觉稿可以直接导入作为背景然后在上面叠加交互元件。这样既能保证视觉还原度又能节省画图时间。不过导入的图片会增加文件体积建议在最终演示前将图片压缩一下。6. 从原型到可演示产品的最后一步6.1 生成HTML演示文件与分享Axure最强大的功能之一是生成HTML原型。点击“发布-生成HTML文件”选择输出目录Axure会生成一套完整的HTML、CSS和JavaScript文件。你可以直接在浏览器中打开index.html进行演示也可以把整个文件夹打包发给别人。生成HTML时有几个选项需要注意在“发布”设置中勾选“包含页面说明”可以让演示时显示页面注释勾选“启用标记”可以让查看者在原型上添加评论勾选“自动缩放”可以让原型在不同分辨率的屏幕上自适应显示。这些选项根据演示场景选择如果是给客户演示建议开启自动缩放和标记功能。如果不想生成文件也可以使用Axure的“预览”功能直接在Axure中打开浏览器预览。预览的优点是实时更新修改后刷新浏览器就能看到最新效果。缺点是预览链接有时效性不适合长期分享。6.2 演示时的讲解节奏与重点原型演示不是把每个页面都点一遍而是有节奏地引导观众走完核心流程。我通常的演示节奏是先用30秒介绍整体结构然后花2分钟走完“首页浏览-详情查看-加入购物车-订单确认”的主流程最后花1分钟展示筛选、排序、数量修改等细节交互。演示时要边操作边讲解比如点击“加入购物车”时说明“这里会更新购物车角标数量同时累加总价”。遇到加载或等待动作时不要干等可以趁机解释背后的逻辑。如果观众提问先记录问题等主流程走完再统一回答避免打断演示节奏。提示演示前把浏览器缩放调到100%关闭无关标签页确保演示环境干净。如果使用投影仪提前测试分辨率避免原型显示不全。6.3 后续扩展方向与学习路径这套初级电商原型完成后你可以从几个方向继续深入。第一个方向是增加用户登录和注册流程用Axure的表单验证功能模拟登录状态切换。第二个方向是增加订单列表和订单详情页用中继器展示历史订单数据。第三个方向是增加优惠券和促销活动模块用条件判断实现满减逻辑。学习路径上建议先熟练掌握中继器的筛选、排序和分页这是电商原型中最常用的功能。然后学习动态面板的多状态切换和拖拽交互用于实现图片轮播和滑动删除。最后学习Axure的函数和表达式比如[[Math.floor()]]取整、[[new Date()]]获取日期这些能让原型的数据计算更灵活。我在实际项目中体会到Axure的价值不在于画出多漂亮的界面而在于快速验证产品逻辑。一个能跑通核心流程的粗糙原型远比十个精美但点不动的静态页面有价值。刚开始做电商原型时不要追求大而全先把“浏览-加购-下单”这条最小闭环跑通再逐步叠加功能。每次做完一个模块自己先完整点一遍确认没有断点再交给别人看。这个习惯坚持下来你的原型质量会提升得很快。