鞋履电商尺码设计：红色标记贯穿购物过程

Esmée Van Arden这组鞋履页面用红色文字和浅灰底形成很明确的视觉语言。鞋的轮廓、材质与颜色由大图承担，查找条件、规格和操作则由红色承担。从目录里的37.5，到详情选中的尺码，再到结算摘要中的同一数字，这条连续线索比单一页面的造型更值得看：它让选择有了可追踪的位置，也要求各处状态和数据相互对得上。

核心结论

• 大幅商品图与细窄筛选区形成分工，红色将条件和价格带入同一套视觉语言。
• 移动与平板详情保留相同规格要素，但调整图文排列和补充信息的顺序。
• 结算摘要继续显示尺码、数量与配送费用，数字之间的关系仍需逐项核对。

目录把轮廓展示与查找条件分开

ALL COLLECTIONS大标题下，左侧是排序、尺码、颜色与跟高筛选，右侧使用大小不同的商品格。主图中橄榄色穆勒鞋占据更宽位置，下一行靴子与平底鞋相对紧凑。商品名、简短描述和价格放在图片下方，留出较完整的轮廓展示面积。

37.5在左侧尺码中用更深红色和选中符号强调，Clear filters旁还显示当前筛选数量。它们能让读者看出条件已经生效。但目录筛选表达的是查找范围，商品详情里的尺码则属于一件商品的规格，两者需要各自确认。界面可以延续条件作为参考，同时让当前商品可用规格有明确状态。

红色贯穿所有文字，大小与浓淡因此承担了更多层级区分。排序和未选尺码明显偏淡，大标题与商品名称则更实。实际页面中，应在品牌色一致的前提下核对小字号条件的可读性，确保筛选功能不会只剩一个漂亮的边栏。

两个尺寸保留同一组选择要素

详情展示同时给出移动端与平板版。移动端先看成对鞋图，再向下读名称、价格、尺码与材质；平板版让图在左，购买信息独立放在右。两种排列都保留37.5红底选中格、Size Guide、材质与65 MM跟高，以及底部Add to Cart按钮。图文位置改变，核心购买信息仍有对应。

尺码用两行边框方格排列，选中项的实底与白字很明显。部分数字颜色更淡，图中没有明确解释它们是否缺货、不可选或只是较弱的样式。正式页面应把可选、选中和不可购买分清，必要时附上到货提醒等动作，避免用户靠颜色推测库存。

Care Instructions、Delivery & Returns与Style Note采用展开折叠形式，让补充说明与规格选择分开。平板图中保养信息已展开，移动图中保持收起，这说明展示包含不同状态；不能由此确认实际响应规则。需要核对的是展开后购买动作是否仍好找，以及尺码指南能否帮助当前这一款。

结算页把选择带到最后一次核对

结算左侧按地址、配送、联系资料和支付分区，右侧两张商品图下面继续写名称、37.5和数量，数量控制与Remove分开放置。Standard和Express配送同时列出时长与费用，使不同选择有可比较的信息。商品摘要不只有总额，仍保留用户修改规格与数量的线索。

示例中的两件价格是610和540，配送7，折扣0，而Total写1057；按照这些可见项目相加应为1157。截图没有显示其他抵扣，因此金额关系需要校对。视觉上的留白与红色统一已经建立了秩序，最终核对还需要数据一致才能闭合。配送切换、数量增减或移除商品后，应同步检查摘要与总额。

常见问题

筛选尺码能直接当作详情已选尺码吗？

可以作为进入详情时的偏好线索，但要结合当前商品的可用规格确认。目录条件与购买规格承担不同职责，结算里仍应显示实际选中的尺码。

设计检查清单

• 分别定义目录筛选与详情规格，检查状态如何延续。
• 给淡色尺码提供明确含义，核对尺码指南和购买按钮。
• 按价格、数量、运费与折扣逐项验算，并检查修改后同步。