电商产品经理做Axure高保真原型制作，要适配商品详情页交互场景的方法

作为电商产品经理，你是不是也遇到过这样的情况：想做商品详情页的 Axure 原型，却不知道怎么还原 “加购”“规格选择”“图片放大” 这些核心交互？明明画了界面，开发看了却问 “这个按钮点了之后啥反应”“规格选错了咋提示”？别慌，云哥做过不少电商原型，今天就把适配商品详情页交互场景的方法拆解给你，跟着做，你也能做出让开发看懂、让用户有真实体验的原型，一起往下看吧！

一、先想清楚：电商商品详情页，核心交互场景有哪些？

可能有人会问，商品详情页不就是看图片、看文字吗？交互场景能有多少？还真不少，而且每个场景都影响用户下单。云哥整理了电商详情页最核心的 3 个交互场景，做原型前先把这些理清，才不会漏东西：

1. 商品规格选择场景：比如选手机的 “颜色”“内存”，选衣服的 “尺码”“版型”，选完之后价格、库存得跟着变，还得有 “规格已售罄” 的提示，这是用户下单前必走的步骤，交互必须做细。
2. 商品图片交互场景：用户想看清商品细节，会点小图切换大图，还会放大大图看纹理，有的还会看商品视频，这些图片和视频的切换、放大交互，直接影响用户对商品的判断。
3. 加购与购买场景：用户选好规格后，点 “加入购物车” 要弹成功提示，点 “立即购买” 要跳结算页，要是没选规格就点按钮，还得提示 “请选择规格”，这些交互是转化的关键，不能出错。

二、规格选择交互：最容易踩坑！这几步能还原真实场景

规格选择是详情页的 “重灾区”，很多新手做原型时，只放了下拉框让选规格，却没做 “选规格后价格变”“售罄规格置灰” 的效果，开发根本不知道怎么实现。云哥教你用 Axure 做最贴近真实的规格选择交互，详细步骤都在这：

1. 先搭界面：用 “单选按钮组” 做规格选项别用文本标签当规格，不好做交互。拖几个 “单选按钮”，比如 “颜色” 下面放 “黑色”“白色”，“内存” 下面放 “8G+128G”“8G+256G”，然后把同一类的单选按钮设为 “单选按钮组”，这样用户就只能选一个颜色、一个内存，跟真实 APP 一样。
2. 做 “规格联动价格”：用 “动态面板” 切换价格选不同规格价格不一样，怎么实现？先拖一个 “动态面板”，里面建多个 “状态”，每个状态对应一组规格的价格，比如 “黑色 + 8G+128G” 对应 “2999 元”，“白色 + 8G+256G” 对应 “3299 元”；然后给每个单选按钮添加 “选中时” 的交互，根据选中的规格，切换动态面板的对应状态。这样用户选完规格，价格就自动变了，比单纯写死价格真实多了。
3. 处理 “售罄规格”：用 “禁用” 状态加提示要是某个规格卖完了，比如 “黑色 + 8G+128G” 没货了，得把这个选项置灰，还得提示 “已售罄”。选中对应的单选按钮，在右侧属性面板里勾选 “禁用”，再把文字颜色设为灰色；然后添加 “鼠标悬停时” 的交互，显示一个 “文本标签”，写 “该规格已售罄”，位置就放在规格旁边。这样用户看到置灰选项，hover 一下就知道为啥不能选，体验跟真实电商 APP 一样。

这里给大家做个表格，对比新手常犯的错和正确做法，一看就明白：

三、商品图片交互：3 个技巧，让用户像 “摸” 到商品一样

用户买东西前，肯定要反复看图片，图片交互做得不好，用户看不清细节，就可能放弃下单。云哥教你 3 个 Axure 技巧，还原电商详情页的图片交互：

1. 小图切换大图：用 “动态面板 + 触发区” 实现先拖一个 “动态面板” 当大图展示区，里面每个状态放一张大图；然后在旁边放几个小图，给每个小图添加 “鼠标单击时” 的交互，切换大图动态面板的对应状态。比如点 “小图 1”，大图就显示 “大图 1”，跟淘宝、京东的图片切换一样。这里有个小技巧，给选中的小图加个 “边框” 样式，比如红色边框，这样用户知道自己当前看的是哪张图，体验更好。
2. 大图放大：用 “动态面板 + 放大镜” 模拟用户想看清大图细节，比如衣服的花纹、手机的接口，这时候需要放大功能。怎么做呢？先建一个 “大图动态面板”，再建一个 “放大镜动态面板”（就是一个小圆形，半透明），还有一个 “放大区域动态面板”（里面放超高清的大图）；然后给大图动态面板添加 “鼠标移动时” 的交互，让放大镜跟着鼠标动，同时根据鼠标位置，切换放大区域动态面板里超高清大图的显示位置。比如鼠标移到大图的左上角，放大区域就显示超高清大图的左上角细节，跟真实的放大镜效果一样。
3. 图片与视频切换：用 “选项卡” 控件现在很多电商详情页会放商品视频，用户可以在图片和视频之间切换。用 Axure 的 “选项卡” 控件最方便，“选项卡 1” 写 “图片”，内容放图片动态面板；“选项卡 2” 写 “视频”，内容放一个 “矩形” 当视频播放区，再放一个 “播放按钮” 图标。然后给选项卡添加 “选中时” 的交互，切换对应的内容区。这样用户点 “视频” 就能看视频，点 “图片” 回到图片，操作很直观。

四、加购与购买交互：别只做跳转！这些细节要注意

“加入购物车” 和 “立即购买” 是转化按钮，交互做得不好，用户想下单都下不了。很多新手只给按钮加了 “跳转页面” 的交互，却漏了关键提示，云哥教你补全这些细节：

1. 未选规格提示：先判断，再跳转用户没选规格就点 “加购” 或 “购买”，这时候不能直接跳转，得提示 “请选择商品规格”。怎么做判断呢？给按钮添加 “鼠标单击时” 的交互，先加一个 “条件判断”：如果 “颜色单选按钮组未选中” 或者 “内存单选按钮组未选中”，就显示一个 “提示面板”（比如红色背景的文本，写 “请选择商品规格”），位置放在按钮上方；如果两个规格都选中了，再执行跳转（加购跳购物车页，购买跳结算页）。这样就避免了用户没选规格就进入下一步，减少操作失误。
2. 加购成功提示：用 “弹出面板” 加 “自动隐藏”用户选好规格点 “加入购物车”，得告诉用户 “加购成功”，不然用户不知道有没有加进去。拖一个 “弹出面板”，里面写 “已成功加入购物车”，再放一个 “去购物车” 按钮和 “继续浏览” 按钮；然后给 “加入购物车” 按钮添加交互，先判断规格已选，再显示弹出面板；最后给弹出面板添加 “显示时” 的交互，设置 “等待 2 秒后隐藏”，这样用户看到提示后，不想操作的话，面板会自动消失，不用手动关，跟真实电商 APP 一样。

五、云哥的一点心得：做电商原型，要 “站在用户和开发两边想”

做了这么多年电商原型，云哥发现，好的详情页原型，不只是 “好看”，更要 “好用”—— 开发能看懂每个交互逻辑，用户能有真实体验。给大家两个小建议：

1. 多去 “抄” 真实电商的交互：做原型前，打开淘宝、京东，把商品详情页的每个交互都走一遍，比如选规格、看图片、加购，记下来他们是怎么处理细节的，比如售罄提示的位置、加购成功提示的样式，这些都是经过市场验证的好体验，咱们借鉴过来，原型就不会脱离实际。
2. 给交互加 “备注”：有些复杂交互，比如规格联动库存，开发可能看不出你的逻辑，这时候在 Axure 里给对应的元件加 “备注”，比如 “选规格后，库存文本会根据后台数据更新”，开发看原型的时候，鼠标 hover 一下就能看到备注，减少沟通成本。

其实电商商品详情页的交互，看着复杂，拆解开每个小场景，用 Axure 的动态面板、条件判断这些功能都能实现。新手不用怕，先从规格选择、图片切换这些基础场景练起，做两遍就熟练了。希望今天的方法，能帮到正在做电商原型的你！