# 循环时尚电商设计：策展图片与票据清单

原网页：https://www.jvds.cn/share/ui-design/fashion-buy-rent-outfit-u102
语言：zh-CN
发布：2026-10-19
作者：界达设计工作室（JVDS）

Loop这组循环时尚电商页面带有鲜明的杂志感：大字、细线、错落的人物图和大量留白，让浏览像在看一组经过挑选的穿搭。进入搭配与购物车后，页面又借用票据的长条结构，将单品、价格和件数集中起来。两种表达分别承担灵感和核对，衔接处最需要关心的是同一件商品能否一直被清楚辨认。

## 核心结论

- 目录的图像尺寸形成策展节奏，商品旁的按日单位解释租赁价格。
- 搭配页把整体照片、可选清单和票据并排，提供从造型到单品的两种视角。
- 票据式购物车适合汇总，但名称、颜色、件数和交易方式必须相互一致。

## 错落图片仍留下价格的锚点

Rent the Style大字横向延展，字中Style使用较柔和的衬线形式，与简洁的其他文字形成节奏。下面的Curated Picks等分类排成细线分隔的标签行，再进入商品区：左侧大幅浅蓝外套人物图，右侧两张较小图片，下方又以小图和物件组合延续。它没有使用全部等大的网格，更强调策展的观看顺序。

图片下方仍保留商品名与12 EUR / DAY，价格虽小，但单位没有藏进页面其他位置。对租赁商品来说，读者截取一张卡或跳到另一页时，仍应知道这是一天的费用。页面底部Curated Objects又把范围延伸到物件内容，需要在分类和购买方式上继续区分，避免看图时混淆可租与其他内容。

手机版保留大字、分类行和主图，信息密度明显更集中。桌面大图的空间感能吸引浏览，移动端则要检查标签是否完整可达、名称是否容易读，以及按日价格能否随当前商品一起出现。

![大小错落的租赁服装目录，商品图下标出按日价格](https://www.jvds.cn/upload/2026/1008/d187-tp/u102-i1.webp)

策展节奏让页面有观看重点，计价单位让单品仍能独立理解。

## 整套搭配分成照片、选择与汇总

The White Lotus搭配页把人物放在中央，用白色热点标记单品位置；左侧列出风格、所有者、品牌、尺寸和租赁条款，再用Review your look勾选清单让用户检查范围；右侧票据展示上衣、裤子、眼镜以及13 EUR / DAY总计。整体照片展示关系，清单承担拆选，票据承担费用汇总。

这三种视角应指向同一组商品。图中左侧上衣缩略图旁却写金属手镯，裤子旁写连衣裙，眼镜旁写高跟凉鞋；右侧票据则列衬衫、裤子和眼镜。图片和清单名称的对应没有闭合，会让人难以确定勾选影响的对象。

JVDS更偏好让热点、勾选行和汇总共用同一个商品身份：名称、图片、规格与选中状态一起变化。这样用户可以从整套造型进入单件选择，取消某一项后也知道[租赁范围和总价](https://www.jvds.cn/share/ui-design/ecommerce-checkout-ux)如何改变。租期与具体日期则应在继续下单时明确，不宜只凭按日总价让人估算。

![中央搭配照片、左侧勾选行与右侧租赁票据](https://www.jvds.cn/upload/2026/1008/d187-tp/u102-i2.webp)

三个区域都需要对应相同单品，才能支持从整套到拆选。

## 长票据把灵感收回订单内容

购物车使用窄长白色票据，顶部Cart之后逐件列出图片、名称、颜色、尺码、BUY与价格，数量控制和Remove留在每行。下半段加入人物搭配图，再以短行汇总金额和件数，底部蓝色Check Out与描边Continue Shopping形成主要与次要动作。视觉故事因此延伸到了订单核对。

清单中的22、8、14 EUR相加为44 EUR，与总额相符；三项都标BUY，区别于上一张租赁票据的按日价格。若产品同时支持购买和租赁，交易方式与单位需要在每行持续出现，混合订单还应分别交代各自条件。

属性文案也需要校对：浅色上衣旁写RED，上方名称为Pullover，下方汇总却写Sweater。长票据反复展示同一商品，重复可以帮助核对，也会放大[名称差异](https://www.jvds.cn/share/ui-design/cognitive-accessibility-clear-content-ux)。先统一这些内容，再检查增减数量、删除和继续购物后的同步，才能让这套视觉形式承担完整订单任务。

![长条购物车票据与手机商品列表，包含BUY和数量控制](https://www.jvds.cn/upload/2026/1008/d187-tp/u102-i3.webp)

票据有清楚的汇总节奏，商品属性应随每次重复保持一致。

## 常见问题

### 租赁与购买可以放在同一个购物车吗？

可以，但每件商品要显示交易方式、计价单位和相应条件。购买总价与按日租价不宜混成一个没有解释的数字，租期和日期也需要有核对位置。

## 设计检查清单

- 将造型热点、勾选行与票据建立同一商品对应。
- 让交易方式和计价单位跟随单品，补齐租期核对。
- 校对颜色名称与重复摘要，检查数量和删除后的同步。

## 让策展体验接到明确订单

如果循环时尚产品需要同时承载整套搭配、单品租赁和购买，界达设计工作室（JVDS）可协助规划UI/UX与电商网站设计、开发，梳理图文浏览和订单核对。

可以围绕商品身份、租期价格与搭配拆选，讨论目录、详情和购物车如何连接。

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