# 虚拟衣橱App设计：拍摄确认与搭配保存

原网页：https://www.jvds.cn/share/ui-design/closetly-wardrobe-capture-filter-outfit-u140
语言：zh-CN
发布：2026-10-22
作者：界达设计工作室（JVDS）

Closetly这组虚拟衣橱App使用白灰底、柔和阴影和较大的衣物图，把界面保持得轻。它展示了从拍摄一件衣服到浏览衣橱，再到组合搭配的连续任务。这里最有意思的并非人物预览本身，而是单件与组合怎样被区分：一件衣服需要先被确认，一个搭配需要再确定包含哪些衣物，保存动作才有明确对象。

## 核心结论

- 拍摄流程先定位衣物，再给结果确认与重试，让录入对象可见。
- Clothes按衣物品类整理，Collections按场合整理，两层分类各有用途。
- 搭配页同时展示人物、已加入单件和候选列表，保存组合应保留可回查的成员。

## 拍摄结果给用户一次核对机会

第一张手机先显示沙发上的棕色羽绒服，Point the camera at the item提示靠近拍摄按钮；第二张用白色轮廓线圈出衣物；第三张把衣物放大并弱化背景，底部给Try again与Done。提示、识别范围和结果各占一步，让用户可以先看清对象，再决定是否保留。

黑色Done与浅色Try again形成主要、次要动作，按钮位于一块半透明底部区域。这个位置没有覆盖主要衣物，但录入结果仍应让用户检查边缘、颜色和完整性。若袖口被截断或背景残留，重试应回到合适一步，而不是迫使用户退出全部过程。

界面没有在结果页展示名称与分类填写。可以把确认后的整理步骤接上衣物类型、颜色或备注，使图片进入衣橱时就有可找的属性。拍摄的目标是记录一件可重复使用的对象，保留一个好看的剪影只是其中一部分。

![羽绒服拍摄、白色轮廓定位与结果确认三种状态](https://www.jvds.cn/upload/2026/1008/d187-tp/u140-i1.webp)

录入过程中先让对象可见，再用重试与确认决定保留。

## 单件与组合用不同分类组织

Closet顶部保留搜索与Upload，中间Clothes和Collections分段切换。Clothes下方是All、Tops、Bottoms、Shoes等品类，图片网格展示单件；Collections下方改为Casual、Work、Sport等场合，卡片展示人物搭配。相似的网格外形里，分类内容已经表达了两种[整理任务](https://www.jvds.cn/share/website-design/website-taxonomy-categories-tags)。

单件适合按衣物类型查找，组合适合按使用场合回看。JVDS更偏好让这两种对象保留不同名称与明确返回关系：进入组合能看见所含单件，查看单件也能找到相关搭配。这样衣橱不只是两套图片墙，用户能在拥有的物品与计划的穿着之间来回整理。

卡片右上心形用红色表示选中，Favorite入口又提供集中查看。红色在整体灰白界面中很突出，适合表达个人偏好。底部半透明导航覆盖靠下的卡片区域，需要在滚动结束位置留足空间，确保最后一行可以完整看到和选择。

![Clothes单件品类与Collections场合分类的两种衣橱网格](https://www.jvds.cn/upload/2026/1008/d187-tp/u140-i2.webp)

切换对象后分类含义一起改变，形成单件与搭配两层整理。

## 人物预览旁还留着具体衣物

Model页中央是完整人物，上衣、裤子和鞋附近贴小缩略图，每个缩略图旁有红叉。下方Shoes类别与候选鞋卡并列，第三张卡右上是绿色勾，底部Save collection为黑色宽按钮。人物让人看整体印象，周围缩略图和候选列表则交代目前用了哪些单件。

红叉更像移除当前衣物，绿勾更像选择候选，两种标记有不同任务。可以给移除与替换[分别保留反馈](https://www.jvds.cn/share/ui-design/ui-component-states-design-system)，选另一双鞋之后，也同步更新人物旁的小图与候选状态。这样的对应比只让人物图片改变更易核对，尤其当候选外观相近时。

保存应明确产生一个组合，而不是覆盖某件衣服或替换全部衣橱。名称、场合与成员可以在保存前后有简短核对，之后在Collections里找到相同内容。人物预览承担组合观看，衣物清单承担成员确认，两者保持同步，虚拟衣橱才能支持之后的重复整理。

![人物搭配旁的可移除衣物缩略图和选中鞋卡](https://www.jvds.cn/upload/2026/1008/d187-tp/u140-i3.webp)

整体预览与成员选择并列，让保存组合有具体对象。

## 常见问题

### 衣物收藏与保存搭配是一回事吗？

它们可以分开。心形表达单件或组合的个人偏好，保存搭配则记录一组具体成员；命名和反馈应让用户知道当前操作作用于哪一层。

## 设计检查清单

- 确认拍摄结果后补齐衣物属性，并保留合适的重试入口。
- 区分单件品类与组合场合，让两层对象互相可查。
- 同步候选、成员和人物预览，检查保存与移除后的状态。

## 把衣物录入接到日常搭配整理

如果虚拟衣橱产品需要处理拍摄录入、分类检索和组合保存，界达设计工作室（JVDS）可协助UI/UX设计与网站设计、开发，明确单件和搭配的关系。

可以先梳理一次录入与换装过程，讨论结果确认、属性整理和集合管理的页面安排。

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