Appearance
我的发布与我的参与产品规范
版本: V2.0
更新日期: 2026-01-22
交互原型: 内容广场原型
核心目标: 统一管理用户发布和参与的所有内容,提供一致的操作体验。
原型预览
| 我的发布 - 全部视图 | 我的发布 - 闲置管理 |
|---|---|
![]() | ![]() |
| 我的参与 |
|---|
![]() |
一、模块入口
位置:「我的」页 → 「内容广场」卡片区域
┌────────────────────────────────────────┐
│ ┌────────────────────────────────────┐│
│ │ 🖊️ 我的发布 ││ ← 点击进入
│ │ 动态、活动、闲置 ││
│ └────────────────────────────────────┘│
│ ┌────────────────────────────────────┐│
│ │ 🏆 我的参与 ││ ← 点击进入
│ │ 报名的活动 ││
│ └────────────────────────────────────┘│
└────────────────────────────────────────┘二、我的发布 (My Creations)
2.1 页面结构
┌──────────────────────────────────────────┐
│ ← 我的发布 │
├──────────────────────────────────────────┤
│ [全部] [动态] [闲置] [搭子] [拼车] [拼房] │ ← 类型筛选
├──────────────────────────────────────────┤
│ (当闲置被选中时显示) │
│ [我卖出的] [我发布的] │ ← 子 Tab
│ [全部] [在卖] [已下架] │ ← 状态筛选
├──────────────────────────────────────────┤
│ │
│ [卡片列表区域] │
│ │
└──────────────────────────────────────────┘2.2 类型筛选 Tabs
| 筛选 Tab | 内容 |
|---|---|
| 全部 | 按时间倒序展示所有发布内容 |
| 动态 | 发布的图文/视频 |
| 闲置 | 发布的二手商品(含子管理功能) |
| 搭子 | 发起的找搭子活动 |
| 拼车 | 发起的拼车活动 |
| 拼房 | 发起的拼房活动 |
| 聚会 | 发起的聚会活动 |
| 里程 | 发起的里程挑战(B端权限) |
| 团购 | 发起的团购活动(B端权限) |
2.3 闲置管理(Tab 选中时展开)
当用户选择「闲置」筛选时,页面展开二级管理功能:
| 层级 | 选项 | 说明 |
|---|---|---|
| 子 Tab | 我卖出的 | 已成交的商品记录 |
| 我发布的 | 当前发布的商品 | |
| 状态筛选 (我发布的) | 全部 | 所有商品 |
| 在卖 | 当前在售 | |
| 已下架 | 主动下架的商品 |
三、我的参与 (My Joined)
3.1 页面结构
┌──────────────────────────────────────────┐
│ ← 我的参与 │
├──────────────────────────────────────────┤
│ [全部] [搭子] [拼车] [拼房] [聚会] [里程] │ ← 类型筛选
├──────────────────────────────────────────┤
│ [全部] [待进行] [已结束] │ ← 状态筛选
├──────────────────────────────────────────┤
│ │
│ [卡片列表区域] │
│ │
└──────────────────────────────────────────┘3.2 筛选维度
| 维度 | 选项 |
|---|---|
| 类型 | 全部/搭子/拼车/拼房/聚会/里程/团购 |
| 状态 | 全部/待进行/已结束 |
四、卡片规范
4.1 统一卡片布局
所有卡片采用左图右文布局:
┌────────────────────────────────────────────┐
│ ┌──────┐ ✏️ ⋮ │ ← 统一操作图标
│ │ 封面 │ 标题文字... │
│ │ 图片 │ [状态标签] 时间 │
│ │[角标]│ 发起人信息 (参与时) │
│ └──────┘ 📍 地点 N/M人 │
└────────────────────────────────────────────┘4.2 操作按钮规范
关键决策:所有卡片类型统一使用右上角图标按钮,不使用底部文字按钮。
| 图标 | 功能 | 适用场景 |
|---|---|---|
| ✏️ | 编辑 | 修改内容 |
| ⋮ | 更多 | 删除/下架/取消/重新上架等 |
设计原则:
- 全部视图与具体筛选视图保持一致
- 不同内容类型使用相同按钮样式
- 具体操作通过「更多」菜单展开
4.3 封面规格
| 类型 | 封面比例 | 尺寸 |
|---|---|---|
| 动态/闲置 | 1:1 | 80px × 80px |
| 活动类 | 4:3 | 112px × 84px |
4.4 角标规则
| 角标 | 适用类型 | 背景色 |
|---|---|---|
| 闲置 | 二手商品 | 琥珀色 |
| 搭子 | 找搭子活动 | 深灰半透明 |
| 拼车 | 拼车活动 | 深灰半透明 |
| 拼房 | 拼房活动 | 深灰半透明 |
| 聚会 | 聚会活动 | 深灰半透明 |
| 里程 | 里程挑战 | 深灰半透明 |
| 团购 | 团购活动 | 深灰半透明 |
4.5 状态标签
| 状态 | 样式 | 场景 |
|---|---|---|
| 在卖 | 蓝色 | 闲置商品在售中 |
| 已下架 | 灰色 | 闲置商品已下架 |
| 报名中 | 绿色 | 活动正在招募 |
| 已满员 | 琥珀色 | 活动名额已满 |
| 进行中 | 蓝色 | 活动正在进行 |
| 已结束 | 灰色 | 活动已完成 |
| 待进行 | 蓝色 | 已报名待参加 |
| 待核销 | 橙色 | 团购券待使用 |
五、交互规范
5.1 卡片点击
| 区域 | 行为 |
|---|---|
| 卡片主体 | 跳转内容详情页 |
| 发起人头像/昵称 (参与视图) | 跳转 IM 私聊 |
| ✏️ 编辑按钮 | 进入编辑页 |
| ⋮ 更多按钮 | 弹出操作菜单 |
5.2 更多菜单选项
我的发布:
| 内容类型 | 菜单选项 |
|---|---|
| 动态 | 删除 |
| 闲置 - 在卖 | 下架 / 删除 |
| 闲置 - 已下架 | 重新上架 / 删除 |
| 活动类 | 取消活动 / 删除 |
我的参与:
| 场景 | 菜单选项 |
|---|---|
| 活动待进行 & 可取消 | 取消报名 |
| 活动已结束 | 无操作 |
5.3 取消报名规则
| 条件 | 是否可取消 |
|---|---|
| 活动未开始 & 在可取消时间范围内 | ✅ |
| 活动已开始 | ❌ |
| 活动已结束 | ❌ |
六、空状态
| 场景 | 文案 | 行动按钮 |
|---|---|---|
| 我的发布 - 空 | 还没有发布过内容,分享你的滑雪故事吧! | [去发布] |
| 我的参与 - 空 | 还没有参加过活动,去发现页看看? | [去发现] |
| 闲置 - 空 | 暂无闲置商品 | [发布闲置] |
| 某类型筛选 - 空 | 暂无内容 | 无 |
七、验收标准
7.1 功能验收
- [ ] 可正确展示所有内容类型
- [ ] 「全部」筛选显示所有内容,无操作按钮差异
- [ ] 类型筛选正常工作
- [ ] 闲置子管理(我卖出的/我发布的 + 状态筛选)正常
- [ ] 状态标签与实际状态一致
- [ ] 操作按钮样式统一(✏️ ⋮)
7.2 交互验收
- [ ] 点击卡片跳转详情页
- [ ] 点击发起人触发私聊(参与视图)
- [ ] 编辑按钮进入编辑页
- [ ] 更多菜单展开正确选项
- [ ] 取消报名遵循规则
7.3 视觉验收
- [ ] 卡片布局与发现页保持一致
- [ ] 角标、状态标签样式正确
- [ ] 空状态显示正确
八、原型索引
| 文件 | 说明 |
|---|---|
| index.html | 完整交互原型 |
变更记录
| 版本 | 日期 | 变更内容 |
|---|---|---|
| V1.0 | 2026-01-22 | 初版草稿 |
| V2.0 | 2026-01-22 | 根据原型迭代更新:统一操作按钮样式、闲置管理集成、移除类型差异化按钮 |



