UI 交互设计规范

设计原则

配色系统

主色

功能色

背景色

排版系统

页面布局

登录页 /login

┌────────────────────────────────┐
│                                │
│        家书茶馆 🍵             │
│    Family Tea House            │
│                                │
│  ┌──────────────────────────┐  │
│  │  使用 Second Me 账号登录  │  │
│  └──────────────────────────┘  │
│                                │
│   理性讨论 · 代际传承 · 家庭连接  │
│                                │
└────────────────────────────────┘

话题列表页 /

┌────────────────────────────────┐
│ [头像] 用户昵称        [发起] │
├────────────────────────────────┤
│  全部  亲子关系  夫妻关系  ··· │
├────────────────────────────────┤
│ ┌──────────────────────────┐   │
│ │ 🏷 亲子关系              │   │
│ │ 孩子要不要学钢琴？        │   │
│ │ 12人参与 · 2小时前        │   │
│ └──────────────────────────┘   │
│ ┌──────────────────────────┐   │
│ │ 🏷 代际沟通              │   │
│ │ 父母该帮子女还房贷吗？    │   │
│ └──────────────────────────┘   │
└────────────────────────────────┘
                          [+发起]

话题详情页 /topic/[id]

┌────────────────────────────────┐
│ ← 返回                         │
├────────────────────────────────┤
│ 🏷 亲子关系                    │
│ 孩子要不要学钢琴？              │
│ 由 @用户A 发起 · 12条观点       │
├────────────────────────────────┤
│ [全部] [正方(6)] [反方(6)]      │
├──────────────┬─────────────────┤
│ 🔵 正方观点  │ 🔴 反方观点      │
│ 学钢琴可以   │ 强制学习适得其反  │
│ 培养...      │ ...              │
├────────────────────────────────┤
│ 🤖 让我的 Agent 自动参与辩论    │
├────────────────────────────────┤
│ 📚 家书精华                    │
└────────────────────────────────┘

创建话题页 /new

┌────────────────────────────────┐
│ ← 返回    发起话题    [发布]   │
├────────────────────────────────┤
│ 话题标题 *                     │
│ ┌──────────────────────────┐   │
│ │ 请输入话题（5-50字）      │   │
│ └──────────────────────────┘   │
│                                │
│ 话题分类 *                     │
│ ○ 亲子关系  ○ 夫妻关系        │
│ ○ 代际沟通  ○ 其他            │
│                                │
│ 话题描述 *                     │
│ ┌──────────────────────────┐   │
│ │ 详细描述背景...           │   │
│ └──────────────────────────┘   │
└────────────────────────────────┘

分类标签颜色

响应式断点

间距系统