# 鞋履电商设计：从鞋跟筛选到尺码核对 原网页：https://www.jvds.cn/share/ui-design/marella-size-checkout-continuity-u037 语言：zh-CN 发布：2026-10-12 作者：界达设计工作室（JVDS） Marella的鞋履电商设计用米白底衬出酒红、绿和黑色鞋款，商品照片很醒目。更实用的细节在筛选与结账之间：鞋跟高度进入筛选，商品页显示尺码，购物车继续保留所选尺码。视觉选择与购买条件被放在同一条阅读路线上。 ## 核心结论 - 鞋跟高度和尺码进入筛选，品类条件提前参与选择。 - 详情选中尺码与结账商品摘要相互呼应，购买对象持续可核对。 ## 筛选字段来自鞋款本身 目录采用大小有变化的商品图片，留白较多，右侧展开的筛选面板则安静地列出类别、系列、尺码、颜色、鞋跟高度和价格。米白色与浅灰卡片让鞋的轮廓突出，控件主要用黑色强调，红色小点只在少量位置出现。 [鞋跟高度](https://www.jvds.cn/share/ui-design/filter-sort-ux-enterprise-product)是这组电商筛选设计中很具体的字段，它和尺码一样会直接影响选择。仅用价格或颜色做通用面板，读者仍需要进入每双鞋的详情寻找条件。页面把这些条件提前放出来，适合品类明确、规格对选购有明显影响的商城。 Apply位于面板底部，让组合条件有一次明确提交。实际使用时还应能看见已选条件，并单独撤销。View in stock only的范围也值得讲清：是款式有任意规格，还是当前尺码可买，截图没有给出完整规则。 ![MARÉLLA鞋款目录及包含尺码、颜色、鞋跟高度、价格和库存的筛选面板](https://www.jvds.cn/upload/2026/1008/d187-tp/u037-i1.webp) 商品目录右侧展开面板｜鞋履特有条件与通用条件并列，Apply确认整个组合。 ## 照片讲外观，尺码讲这一件怎么选 商品详情用前、侧、后角度展示酒红短靴，最大图放在中间，右侧颜色点靠近补充图片。商品名称与价格在下，尺码一字排开，黑底选中项在浅灰规格里很容易找到，Size guide与Buy继续向下排列。 这是一种适合鞋履详情的分工：多角度照片解释轮廓，颜色和尺码确定具体组合。大照片没有把选择区挤到另一个页面，读者在当前详情里就能核对。颜色点若补上文字名称，还能与标题里的色款互相确认。 界达设计更看重选中状态在后续是否保留。打开尺码指南、返回照片或改变颜色后，都应能知道当前组合有没有变化。图里可以看出一种选中样式，不能确认缺货、指南打开与选择保存的行为。 ![MARÉLLA酒红靴多角度照片、三枚颜色点与35到41尺码，36显示选中](https://www.jvds.cn/upload/2026/1008/d187-tp/u037-i2.webp) 商品详情中下部｜角度照片说明形态，颜色与尺码明确当前购买组合。 ## 填写地址时，鞋款身份还在旁边 结账左侧是快捷支付、联系与[配送地址](https://www.jvds.cn/share/ui-design/ecommerce-checkout-ux)，右侧Your Cart把两件鞋的图片、名称、尺码和数量重新列出。数量调整与Remove紧邻商品，填写资料时仍能核对买的是哪一种，这个重复很有必要。 电话旁的说明气泡解释订单联系用途，促销订阅与保存地址则另外列出。字段的说明与选择关系清楚，读者更容易理解自己在填写什么。右侧折扣码与积分也各有输入和Apply，修改费用的动作没有散到正文外。 实际评审应检查改尺码或数量后总额怎样变化、已填地址是否保留，以及附加选择是否容易撤销。这些过程截图没有展示。界达设计会把“这一单的色款、尺码与费用能否始终核对”作为重点，米白与黑色风格只需继续保持清楚。 ![MARÉLLA结账左侧联系和地址字段，右侧两件鞋款、尺码、数量及折扣积分输入](https://www.jvds.cn/upload/2026/1008/d187-tp/u037-i3.webp) 结账左右两栏｜填写信息时订单仍在右侧可核对，电话用途由相邻提示解释。 ## 常见问题 ### 购物车为什么还要显示尺码？ 它记录这一单的具体选择，填写地址或支付前仍需核对。商品名称和图片无法替代规格。 ## 设计检查清单 - 确认库存开关是否与已选尺码相关。 - 修改购物车后核对地址保留与费用变化。 ## 让商品展示和规格选择连起来 如果你的服饰或鞋履商城需要改善筛选、规格选择与结账摘要，可以从最常见的选购条件开始梳理。 界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可一起梳理页面内容、界面结构与实现需求。 [联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)