企业官网建设流程全解析

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画得丑没关系，逻辑跑不通才是大问题。一个灰度的、粗糙的、但每个按钮都有正确反馈的原型，比一个精美但点两下就卡死的原型有价值一百倍。电商网站的原型设计尤其如此，因为它的核心价值就在于那条从浏览到支付的完整链路，链路通了，原型就成立了。