鞋履电商设计：从鞋跟筛选到尺码核对

Marella的鞋履电商设计用米白底衬出酒红、绿和黑色鞋款，商品照片很醒目。更实用的细节在筛选与结账之间：鞋跟高度进入筛选，商品页显示尺码，购物车继续保留所选尺码。视觉选择与购买条件被放在同一条阅读路线上。

核心结论

• 鞋跟高度和尺码进入筛选，品类条件提前参与选择。
• 详情选中尺码与结账商品摘要相互呼应，购买对象持续可核对。

筛选字段来自鞋款本身

目录采用大小有变化的商品图片，留白较多，右侧展开的筛选面板则安静地列出类别、系列、尺码、颜色、鞋跟高度和价格。米白色与浅灰卡片让鞋的轮廓突出，控件主要用黑色强调，红色小点只在少量位置出现。

鞋跟高度是这组电商筛选设计中很具体的字段，它和尺码一样会直接影响选择。仅用价格或颜色做通用面板，读者仍需要进入每双鞋的详情寻找条件。页面把这些条件提前放出来，适合品类明确、规格对选购有明显影响的商城。

Apply位于面板底部，让组合条件有一次明确提交。实际使用时还应能看见已选条件，并单独撤销。View in stock only的范围也值得讲清：是款式有任意规格，还是当前尺码可买，截图没有给出完整规则。

照片讲外观，尺码讲这一件怎么选

商品详情用前、侧、后角度展示酒红短靴，最大图放在中间，右侧颜色点靠近补充图片。商品名称与价格在下，尺码一字排开，黑底选中项在浅灰规格里很容易找到，Size guide与Buy继续向下排列。

这是一种适合鞋履详情的分工：多角度照片解释轮廓，颜色和尺码确定具体组合。大照片没有把选择区挤到另一个页面，读者在当前详情里就能核对。颜色点若补上文字名称，还能与标题里的色款互相确认。

界达设计更看重选中状态在后续是否保留。打开尺码指南、返回照片或改变颜色后，都应能知道当前组合有没有变化。图里可以看出一种选中样式，不能确认缺货、指南打开与选择保存的行为。

填写地址时，鞋款身份还在旁边

结账左侧是快捷支付、联系与配送地址，右侧Your Cart把两件鞋的图片、名称、尺码和数量重新列出。数量调整与Remove紧邻商品，填写资料时仍能核对买的是哪一种，这个重复很有必要。

电话旁的说明气泡解释订单联系用途，促销订阅与保存地址则另外列出。字段的说明与选择关系清楚，读者更容易理解自己在填写什么。右侧折扣码与积分也各有输入和Apply，修改费用的动作没有散到正文外。

实际评审应检查改尺码或数量后总额怎样变化、已填地址是否保留，以及附加选择是否容易撤销。这些过程截图没有展示。界达设计会把“这一单的色款、尺码与费用能否始终核对”作为重点，米白与黑色风格只需继续保持清楚。

常见问题

购物车为什么还要显示尺码？

它记录这一单的具体选择，填写地址或支付前仍需核对。商品名称和图片无法替代规格。

设计检查清单

• 确认库存开关是否与已选尺码相关。
• 修改购物车后核对地址保留与费用变化。