购物APP原型怎么做？商品、尺码与购买流程

购物APP原型先讲清一条路线：从商品信息进入尺码选择，确认价格与库存，再提交购买并看到结果。画出页面只是第一步，还要补“未选尺码”“已选尺码缺货”和“提交失败”这些分支。完成商品界面后，可用Pixso 交互原型把关键状态连接起来。

本例的渐变、阴影和圆角展示的是一套视觉练习参数，不是购物界面的通用规范。先用简单形状确认信息与按钮的位置，再加入视觉效果，可避免花很多时间画装饰，却没有说明用户怎样完成购买。

购物app原型交互线框图

商品已有明确入口时，用户通常需要尽快看到商品名称、价格、规格与购买条件。本例先制作一张介绍页；如果介绍页没有必要的新信息，也可以让流程直接从商品详情开始，不强迫每次购买都重看介绍。

1. 产品介绍界面

首先用画板工具创建介绍界面，再用文本工具输入产品介绍，用形状工具绘制开始按钮。原例以外阴影和圆角建立装饰风格；阴影只影响视觉，不会生成真实3D空间。按钮文字可改成清楚的“查看商品”，使其动作与下一张商品页对应。

2. 购买产品界面

跟上一步的操作一样，首先使用【画板】工具画出一个矩形，设置外阴影效果。接下来做出叠加的视觉效果，使用形状工具画出一个长方形，点击矩形，设置圆角半径为50，拖拽至画面下部分，再画出一个正方形，设置圆角半径为50，放至界面上方，选中需要组合的图层后执行编组，按照前后顺序排列好图层。

怎么制作这个使界面看起来更高级的椭圆形线条呢？使用形状工具，选择圆形，画出一个椭圆的形状，选择颜色，线性渐变。

顶部颜色：RGB 255、255、255，透明度100%。

中间颜色：RGB 238、241、244，透明度100%。

底部颜色：RGB 102、112、128，透明度100%。

点击高级属性，选择实线描边样式，直角顶点，斜度7.17°，这个看起来若隐若现闪着高级感的线条就制作出来啦。

3. 产品尺码框

在尺码区需要几个同尺寸、同间距选项时，可以用自动布局排列。先建立背景容器，加入三个矩形，把间距设为15、边距设为0，再统一圆角半径与描边。原例的圆角值30是半径数值，不是旋转角度；随后加入S、M、L等尺码文字，并为选中和不可选状态留出区别。

尺码相同，状态不能都画成白底

选中状态可以用边框、填色和标记共同表达，不只靠颜色深浅。即使暂时不接真实库存，也要在原型里画出缺货分支，避免评审时把所有尺码都能点误认为业务规则。

4. 产品购买框

用矩形绘制价格与购买区，圆角半径可先设为30；背景RGB为102、112、128，按钮区RGB为57、63、72。再填写明确的价格与按钮文字。深色底上的说明应保持清楚，购买按钮不要仅靠外观突出，还要让人理解点击后是加入购物车还是立即进入确认订单。

完成静态界面后，复制商品画板形成“未选”“已选”和“缺货”三个演示状态。在原型面板为尺码选项设置单击目标，再把购买按钮连接到确认订单画板。使用固定案例数据即可说明路径，不把原型里的数字当作真实商品库存。

从确认订单返回时，保留刚才选择的尺码

确认订单页至少显示商品名称、所选尺码、数量和价格。返回商品页时，仍应看见相同规格；若每次返回都清空选择，用户会怀疑订单内容是否改变。提交中需要可识别的等待状态，失败后回到仍保留输入的订单页，不能让用户重新挑选商品。

分别演示一次未选直接购买、选择缺货尺码、正常购买后返回，以及提交失败后重试。评审时让同事说出“正在买哪件、哪个尺码、接下来会发生什么”，比只问页面是否好看更容易暴露断点。

先把一件商品的选择与购买路线讲清楚，再把同一结构复用到其他商品。视觉参数可以继续调整，但商品名、规格、价格和返回路径应始终对应同一次购买。