从0到1设计电商零售原型：写给入门PM与创业者的保姆级教程

你好，我是灵雀。在「灵池」原型站里，我经常看到很多刚入行的产品经理或准备做电商创业的朋友，面对五花八门的竞品、复杂的交易链路，总是一头雾水。很多人以为电商原型就是把商品图片和“加入购物车”按钮摆上去，但真正动起手来，却往往被支付、订单、库存、售后这些环节搞得焦头烂额。今天，我们就从零开始，拆解一套电商零售App的原型设计全流程，帮你避开80%的坑。

第一步：先画“骨架”，别急着画“皮肤”

很多新手一上来就打开原型工具拖拽组件，这是大忌。电商产品流程长、角色多，你首先要做的是用一张核心业务流程图把“用户-商品-订单-支付”这条主线走通。用简单的方框和箭头，画出从“浏览-搜索-详情-加购-结算-支付-订单生成”的完整闭环。这一步决定了你的信息架构是否完整。

在原型层面，你需要先规划出五个最核心的页面层级：

• 首页：��载运营入口、搜索、分类导航和推荐位（不要放太多功能，聚焦“逛”）。
• 商品详情页（PDP）：这是转化率的核心，必须包含商品图集、价格库存、规格选择、用户评价、底部操作栏（加入购物车/立即购买）。
• 购物车：重点是编辑模式（改数量、删除、失效商品置灰）和结算跳转。
• 结算页：地址管理、配送方式、优惠券选择、金额明细（商品金额、运费、优惠抵扣）。
• 我的订单/个人中心：订单状态流（待付款/待发货/待收货/已完成/售后）。

这一阶段请使用黑白灰线框图，不要加任何视觉设计。你的目标是让任何人看到这个线框图，都能清楚地说出“这个页面能干什么”。

第二步：给关键页面加上“业务逻辑”注释

原型不只是静态页面，更是沟通工具。对于电商这种强逻辑产品，你需要用备注或标注把交互规则写清楚，否则开发会一脸茫然。以下三个地方最容易出错，请务必标注：

1. 库存与规格联动

在商品详情页，当用户选择“颜色”和“尺码”时，价格和库存要实时变化。你的原型旁要注明：如果某规格SKU库存为0，该选项置灰不可点击；若切换规格后价格变动，需显示“价格已更新”。

2. 购物车选中状态

需要明确“全选”按钮和“单选框”的交互关系：当所有商品取消勾选时，底部结算按钮应置灰并显示“未选商品”；当有部分商品库存不足时，是否允许拆单结算？这些都需要用文字说明。

3. 支付结果回调

结算页跳转支付后，不要只画一个“支付成功”弹窗。要备注：支付成功后需轮询后端接口获取订单状态，如果支付失败，订单如何恢复？是否允许继续支付？这些异常流程的注释，比多画十个页面更有价值。

第三步：用“低保真”快速验证，再用“高保真”提升说服力

很多创业者在原型阶段就急于追求视觉精致，甚至直接拿竞品的截图改一改。我强烈建议：先用Axure或墨刀画可点击的低保真原型（用简单的矩形和文字），找5-10个目标用户做快速可用性测试。重点观察他们能否在3秒内找到搜索框，能否顺利从详情页走到支付页，购物车里的数量加减是否容易误触。

只��在验证了核心流程的合理性之后，才值得投入时间去做高保真设计。这时候你可以开始考虑：底部Tab栏只有3个还是5个？（建议核心电商不超过5个）首页的Banner轮播和金刚区图标怎么分布？（推荐位不宜超过两屏）商品卡片是两列瀑布流还是单列大图？（取决于你的客单价和品类，奢侈品适合单列，快消品适合双列）。

高保真原型不需要像素级还原UI，但要把按钮的按压状态、页面加载的loading状态、网络异常时的空状态都画出来，这些细节最打动投资人和开发同事。

结语：原型是思维的具象化，不是画图而已

设计电商零售原型，本质上是在设计一套交易规则。即使你只做一个垂直品类的小程序，也一定要在原型阶段把库存扣减逻辑、优惠券叠加规则、售后申请入口这三件事想清楚。记住，原型最大的价值是让你在写一行代码之前，就能“看见”产品未来的样子和可能暴露的问题。

如果你在搭建过程中觉得某些页面（比如复杂的订单状态流转）无从下手，不妨来「灵池」翻翻电商零售分类下的现成模板，参考别人的组件拆分和逻辑注释，会让你事半功倍。我是灵雀，期待你的第一个电商原型出炉。

更多优质原型模板，欢迎访问灵池免费原型站 7app.cn