UI 设计需求文档（Barter Zone）

版本: v1.0 | 日期: 2026-05-18 | 关联 PRD: v2.0

一、设计原则

原则	说明
移动优先	所有页面以 375px 宽度为基准设计，兼容 320px~428px
简洁直观	核心操作不超过 3 步完成
AI 可视化	Agent 分析过程对用户透明，展示进度和结果
一致性	统一色彩、间距、圆角、动效规范
无障碍	支持字体放大、高对比度、屏幕阅读器

二、设计规范

2.1 色彩

用途	色值	说明
主色	#1890FF	按钮、链接、选中态
辅色	#52C41A	成功、在线状态
警告	#FAAD14	提示、待处理
危险	#FF4D4F	错误、下架、纠纷
背景色	#F5F5F5	页面背景
卡片背景	#FFFFFF	卡片、弹窗
文字主色	#333333	标题、正文
文字辅色	#999999	描述、时间、标签

2.2 字体

场景	大小	字重
页面标题	18px	600
卡片标题	16px	500
正文	14px	400
辅助文字	12px	400
标签/徽章	10px	500

2.3 间距

• 页面内边距：16px
• 卡片内边距：12px
• 卡片间距：12px
• 元素间距：8px（小）/ 12px（中）/ 16px（大）
• 圆角：8px（卡片）/ 4px（按钮）/ 16px（弹窗）

2.4 阴影

• 卡片：0 2px 8px rgba(0, 0, 0, 0.06)
• 浮层：0 4px 16px rgba(0, 0, 0, 0.12)
• 按钮悬浮：0 2px 4px rgba(0, 0, 0, 0.1)

三、核心页面设计

3.1 TabBar（底部导航）

┌─────────────────────────────────┐
│  🏠 首页  │  📷 发布  │  💬 消息  │  👤 我的  │
│  (默认)   │ (突出)   │ (红点)   │         │
└─────────────────────────────────┘

• 首页：灰 → 选中蓝
• 发布：绿色圆形浮出按钮（居中）
• 消息：未读红点
• 我的：灰 → 选中蓝

3.2 首页

┌──────────────────────────────┐
│ 🔍 搜索物品或技能...          │  ← 固定顶部
├──────────────────────────────┤
│ [推荐] [附近] [数码] [家居] ..│  ← 分类标签横向滚动
├──────────────────────────────┤
│ ┌──────────┐ ┌──────────┐   │
│ │  [图片]  │ │  [图片]  │   │  ← 瀑布流两列
│ │  标题     │ │  标题     │   │
│ │  🏷数码  │ │  🏷家居  │   │
│ │  想换:图书│ │  想换:手办│   │
│ │  👤用户A │ │  👤用户B │   │
│ └──────────┘ └──────────┘   │
│ ┌──────────┐ ┌──────────┐   │
│ │  ...     │ │  ...     │   │
│ └──────────┘ └──────────┘   │
├──────────────────────────────┤
│  🏠        📷        💬  👤 │  ← TabBar
└──────────────────────────────┘

瀑布流卡片规格：

• 图片高度：自适应（120px~200px）
• 标题：1行，溢出省略号
• AI 标签：圆形小标签，灰色底
• 期望交换物：1行灰色文字
• 用户信息：头像小圆 + 昵称

3.3 发布页

┌──────────────────────────────┐
│  发布物品                    │
├──────────────────────────────┤
│ ┌──────┐┌──────┐┌──────┐┌──┐│
│ │ 图片1 ││ 图片2 ││ 图片3 ││＋││  ← 图片上传区
│ └──────┘└──────┘└──────┘└──┘│
│                              │
│ ⚡ AI 正在分析图片...         │  ← 分析中状态
│ 或                           │
│ ✅ 已识别：iPhone 14 / 95新  │  ← 分析完成
│                              │
│ 标题: [________________]     │
│ 描述: [________________]     │
│       [________________]     │  ← textarea
│       [________________]     │
│                              │
│ ── 我想换 ──                 │
│ [________________________]   │  ← 期望描述
│ [数码] [图书] [家居] [其他]  │  ← 标签多选
│                              │
│ 📍 地点: [杭州市西湖区]       │  ← 可选
│                              │
│      [ 🚀 发布物品 ]          │
└──────────────────────────────┘

AI 分析状态动画：

• 加载中：渐变呼吸动画 + 文字"AI 正在分析..."
• 完成：卡片式展示识别结果，支持点击修改
• 失败：提示重新上传或手动填写

3.4 物品详情页

┌──────────────────────────────┐
│  ← 返回          ♡ 收藏      │
├──────────────────────────────┤
│  ┌────────────────────────┐  │
│  │                        │  │
│  │      图片轮播          │  │  ← 支持缩放
│  │                        │  │
│  │      1 / 5             │  │
│  └────────────────────────┘  │
├──────────────────────────────┤
│  iPhone 14 Pro 256G          │  ← 标题
│  🏷 数码  🏷 手机  🏷 95新   │  ← AI标签
│                              │
│  💡 AI 估值: ¥3,500~4,000   │  ← 估值区间
│                              │
│  九成新，无磕碰，电池健康96%  │  ← 描述
│  买来半年，因为换了华为所以   │
│  想换掉...                   │
│                              │
│  ── 期望交换 ──              │
│  想换华为 Mate 60 或等值     │
│  数码产品                    │
├──────────────────────────────┤
│  👤 用户A  ⭐ 4.8  ✓实名    │  ← 发布者信息
│     已完成 12 次交换         │
├──────────────────────────────┤
│      [ 💡 我想换这个 ]       │  ← 主操作按钮
├──────────────────────────────┤
│  ── 你可能也感兴趣 ──        │
│  ┌────┐  ┌────┐  ┌────┐    │  ← 横向滚动
│  └────┘  └────┘  └────┘    │
└──────────────────────────────┘

3.5 交换管理页

┌──────────────────────────────┐
│  我的交换                    │
├──────────────────────────────┤
│ [收到的] [发出的] [进行中]    │  ← Tab 切换
│ [已完成] [纠纷]              │
├──────────────────────────────┤
│                              │
│  ┌────────────────────────┐  │
│  │ 我的物品    →  对方物品 │  │
│  │ [图]iPhone   [图]华为   │  │
│  │              待确认     │  │
│  │  用户B · 2分钟前        │  │
│  │  [同意] [拒绝] [查看]   │  │
│  └────────────────────────┘  │
│                              │
│  ┌────────────────────────┐  │
│  │ 我的物品    →  对方物品 │  │
│  │ [图]手办    [图]模型    │  │
│  │              进行中     │  │
│  │  用户C · 1天前          │  │
│  │  [联系对方] [查看详情]   │  │
│  └────────────────────────┘  │
│                              │
└──────────────────────────────┘

状态颜色规范：

状态	颜色	图标
待确认	蓝色	⏳
已同意	绿色	✅
已拒绝	灰色	❌
进行中	橙色	🔄
已完成	绿色	🎉
纠纷中	红色	⚠️

3.6 个人中心页

┌──────────────────────────────┐
│  ┌────────────────────────┐  │
│  │  (头像)                │  │
│  │  用户名                │  │
│  │  ⭐ 4.8 · 12次交换     │  │
│  │  ✓ 实名认证 · 📍 杭州  │  │
│  └────────────────────────┘  │
├──────────────────────────────┤
│                              │
│  📦 我的物品         12  >  │
│  ❤️ 我的收藏          8  >  │
│  🔄 交换记录          15 >  │
│  ⭐ 我的评价          12 >  │
│                              │
├──────────────────────────────┤
│  📊 交换统计                 │
│  ┌──────────┐┌──────────┐   │
│  │ 完成交换  ││ 好评率   │   │
│  │   12     ││  96%     │   │
│  └──────────┘└──────────┘   │
├──────────────────────────────┤
│  ⚙️ 设置                     │
│  🚫 黑名单管理               │
│  🔒 隐私设置                 │
└──────────────────────────────┘

四、交互规范

4.1 加载状态

场景	规范
页面加载	骨架屏（Skeleton），非 Spinner
按钮提交	按钮 loading 态 + 禁用重复点击
AI 分析	进度条 + 文字提示 + 动画
下拉刷新	标准 pull-to-refresh 动画
上拉加载	Spinner + "加载中..."

4.2 反馈机制

操作	反馈
发布成功	全屏成功动画 + Toast "发布成功"
发起交换	Toast + 跳转到交换详情
收藏	心形动画 + 红色填充
表单错误	输入框红色边框 + 下方错误提示
网络错误	全屏断网提示 + 重试按钮

4.3 手势交互

• 图片：左右滑动切换，双指缩放
• 卡片：长按预览，左滑快捷操作（收藏/分享）
• 列表：下拉刷新，上拉加载更多

五、动效规范

场景	动效	时长
页面切换	右滑入 / 左滑出	300ms
弹窗出现	从底部滑入 + 背景渐暗	250ms
卡片点击	缩小 0.98 → 恢复	150ms
AI 分析完成	结果卡片淡入 + 上移	400ms
Toast	从顶部滑入 → 停留 2s → 滑出	250ms

六、适配要求

6.1 设备适配

设备	宽度	备注
iPhone SE	375px	最小适配宽度
iPhone 14/15	390px	主要设计基准
iPhone 14/15 Pro Max	430px	最大宽度
Android 主流	360px~412px	需测试

6.2 系统适配

• iOS：支持刘海屏/灵动岛安全区域
• Android：适配状态栏、虚拟导航栏
• 微信内嵌：隐藏分享按钮、配置分享内容
• 深色模式：M2 阶段支持

6.3 网络适配

• 弱网：图片渐进式加载，文字优先展示
• 离线：本地缓存已浏览内容，提示网络状态
• 图片懒加载：滚动到可视区域再加载