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

原网页：https://www.jvds.cn/share/ui-design/esmee-footwear-size-checkout-u084
语言：zh-CN
发布：2026-10-17
作者：界达设计工作室（JVDS）

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

## 核心结论

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

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

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

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

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

![红色筛选文字旁的鞋履商品网格，37.5处于选中状态](https://www.jvds.cn/upload/2026/1008/d187-tp/u084-i1.webp)

大图保留鞋的形态，筛选区交代当前查找范围。

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

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

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

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

![移动与平板鞋履详情中的37.5红底尺码格和加入购物车按钮](https://www.jvds.cn/upload/2026/1008/d187-tp/u084-i2.webp)

相同规格信息在两种尺寸里重新排列，选中状态保持一致。

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

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

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

![左侧结算表单与右侧两件鞋的尺码数量摘要](https://www.jvds.cn/upload/2026/1008/d187-tp/u084-i3.webp)

订单摘要延续规格信息，价格项目之间也需要一一对应。

## 常见问题

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

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

## 设计检查清单

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

## 让鞋履展示接到可核对的选择

制作鞋履电商时，可以围绕商品轮廓、规格状态和订单摘要安排信息，再把品牌色延续到各个页面。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可协助梳理购物页面与交互状态。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)