307 lines
25 KiB
Markdown
307 lines
25 KiB
Markdown
# 直播平台移动端页面设计详细说明
|
||
|
||
> 生成时间：2024年12月29日
|
||
> 版本：V1.0
|
||
> 设计范围：Android移动端全部核心页面
|
||
> 设计原则：以直播为核心，社交为辅助，用户体验优先
|
||
|
||
---
|
||
|
||
## 目录
|
||
|
||
1. [设计规范总览](#一设计规范总览)
|
||
2. [首页模块](#二首页模块)
|
||
3. [直播间模块](#三直播间模块)
|
||
4. [开播模块](#四开播模块)
|
||
5. [缘池社区模块](#五缘池社区模块)
|
||
6. [许愿树模块](#六许愿树模块)
|
||
7. [消息模块](#七消息模块)
|
||
8. [个人中心模块](#八个人中心模块)
|
||
9. [通用组件](#九通用组件)
|
||
|
||
---
|
||
|
||
## 一、设计规范总览
|
||
|
||
### 1.1 品牌色彩体系
|
||
|
||
| 颜色类型 | 色值 | 使用场景 |
|
||
|----------|------|----------|
|
||
| 主题色 | #FF6B6B | 按钮、选中状态、强调元素、品牌标识 |
|
||
| 主题色-浅 | #FF8E8E | 渐变、hover状态、次要强调 |
|
||
| 主题色-深 | #E85555 | 按下状态、深色强调 |
|
||
| 成功色 | #52C41A | 成功提示、在线状态、通过状态 |
|
||
| 警告色 | #FAAD14 | 警告提示、待处理状态 |
|
||
| 错误色 | #FF4D4F | 错误提示、直播中标识、删除操作 |
|
||
| 链接色 | #1890FF | 链接文字、可点击文字 |
|
||
|
||
### 1.2 中性色体系
|
||
|
||
| 颜色类型 | 色值 | 使用场景 |
|
||
|----------|------|----------|
|
||
| 标题文字 | #333333 | 页面标题、卡片标题、重要文字 |
|
||
| 正文文字 | #666666 | 正文内容、次要标题 |
|
||
| 辅助文字 | #999999 | 提示文字、时间、描述 |
|
||
| 禁用文字 | #CCCCCC | 禁用状态、占位符 |
|
||
| 分割线 | #EEEEEE | 列表分割、区域分割 |
|
||
| 背景色 | #F5F5F5 | 页面背景、卡片间隔 |
|
||
| 卡片背景 | #FFFFFF | 卡片、弹窗、输入框背景 |
|
||
|
||
### 1.3 字体规范
|
||
|
||
| 字体类型 | 字号 | 字重 | 行高 | 使用场景 |
|
||
|----------|------|------|------|----------|
|
||
| 超大标题 | 24sp | Bold | 1.4 | 页面主标题 |
|
||
| 大标题 | 20sp | Bold | 1.4 | 弹窗标题、重要数字 |
|
||
| 标题 | 18sp | Medium | 1.4 | 导航标题、区块标题 |
|
||
| 副标题 | 16sp | Medium | 1.5 | 卡片标题、列表标题 |
|
||
| 正文 | 15sp | Regular | 1.6 | 帖子内容、消息内容 |
|
||
| 正文-小 | 14sp | Regular | 1.5 | 用户名、标签文字 |
|
||
| 辅助文字 | 13sp | Regular | 1.4 | 时间、位置、统计 |
|
||
| 小文字 | 12sp | Regular | 1.4 | 标签、按钮、角标 |
|
||
| 超小文字 | 10sp | Regular | 1.2 | 底部导航文字 |
|
||
|
||
### 1.4 间距规范
|
||
|
||
| 间距类型 | 数值 | 使用场景 |
|
||
|----------|------|----------|
|
||
| 页面边距 | 16dp | 页面左右边距 |
|
||
| 大间距 | 24dp | 区块之间间距 |
|
||
| 中间距 | 16dp | 卡片之间间距 |
|
||
| 小间距 | 12dp | 元素之间间距 |
|
||
| 紧凑间距 | 8dp | 紧密排列元素 |
|
||
| 最小间距 | 4dp | 图标与文字间距 |
|
||
|
||
### 1.5 圆角规范
|
||
|
||
| 圆角类型 | 数值 | 使用场景 |
|
||
|----------|------|----------|
|
||
| 超大圆角 | 24dp | 底部弹窗顶部 |
|
||
| 大圆角 | 16dp | 卡片、对话框 |
|
||
| 中圆角 | 12dp | 按钮、输入框 |
|
||
| 小圆角 | 8dp | 图片、标签 |
|
||
| 最小圆角 | 4dp | 小标签、徽章 |
|
||
| 全圆角 | 50% | 头像、圆形按钮 |
|
||
|
||
---
|
||
|
||
## 二、首页模块
|
||
|
||
### 2.1 首页主界面 (MainActivity)
|
||
|
||
**页面功能：**
|
||
- 展示直播间列表，用户可浏览和进入直播间
|
||
- 提供分类筛选，快速找到感兴趣的直播
|
||
- 搜索功能入口
|
||
- 开播入口
|
||
- 侧边栏导航入口
|
||
|
||
**页面布局：**
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ 系统状态栏 (沉浸式, 背景色跟随页面) │
|
||
├─────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 顶部导航栏 │ │
|
||
│ │ 高度: 56dp | 背景: #FFFFFF | 底部阴影: 2dp │ │
|
||
│ │ │ │
|
||
│ │ ┌────┐ ┌─────────────────────────────────┐ ┌────┐ ┌────┐ │ │
|
||
│ │ │ ☰ │ │ 🔍 搜索直播、主播... │ │ 📷 │ │ 👤 │ │ │
|
||
│ │ │ │ │ │ │ │ │ │ │ │
|
||
│ │ │24dp│ │ 搜索框 │ │24dp│ │32dp│ │ │
|
||
│ │ │ │ │ 高度: 36dp │ │ │ │圆形│ │ │
|
||
│ │ │菜单│ │ 圆角: 18dp │ │扫码│ │头像│ │ │
|
||
│ │ │按钮│ │ 背景: #F5F5F5 │ │ │ │ │ │ │
|
||
│ │ └────┘ └─────────────────────────────────┘ └────┘ └────┘ │ │
|
||
│ │ │ │
|
||
│ │ 点击菜单: 打开侧边栏 │ │
|
||
│ │ 点击搜索框: 跳转搜索页 │ │
|
||
│ │ 点击扫码: 打开扫码页面 │ │
|
||
│ │ 点击头像: 跳转个人中心 │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 顶部Tab切换栏 │ │
|
||
│ │ 高度: 44dp | 背景: #FFFFFF │ │
|
||
│ │ │ │
|
||
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
|
||
│ │ │ 关注 │ │ 推荐 │ │ 附近 │ │ │
|
||
│ │ │ │ │ (选中) │ │ │ │ │
|
||
│ │ │ #666666 │ │ #FF6B6B │ │ #666666 │ │ │
|
||
│ │ │ │ │ ════════ │ │ │ │ │
|
||
│ │ └──────────┘ └──────────┘ └──────────┘ │ │
|
||
│ │ │ │
|
||
│ │ 选中样式: 文字#FF6B6B, 下方3dp红色指示条 │ │
|
||
│ │ 未选中样式: 文字#666666 │ │
|
||
│ │ 切换动画: 指示条滑动动画 200ms │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 分类标签栏 │ │
|
||
│ │ 高度: 40dp | 背景: #FFFFFF | 可横向滑动 │ │
|
||
│ │ 左右边距: 16dp | 标签间距: 12dp │ │
|
||
│ │ │ │
|
||
│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ → │ │
|
||
│ │ │全部│ │热门│ │游戏│ │才艺│ │户外│ │音乐│ │聊天│ │更多│ │ │
|
||
│ │ │选中│ │ 🔥 │ │ 🎮 │ │ 🎤 │ │ 🏕️ │ │ 🎵 │ │ 💬 │ │ ··· │ │ │
|
||
│ │ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ │ │
|
||
│ │ │ │
|
||
│ │ 选中样式: 背景#FF6B6B, 文字#FFFFFF, 圆角16dp │ │
|
||
│ │ 未选中样式: 背景透明, 文字#666666 │ │
|
||
│ │ 标签尺寸: 高度28dp, 内边距水平12dp │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 直播间列表区域 │ │
|
||
│ │ 布局: 瀑布流 (StaggeredGridLayout) | 列数: 2 │ │
|
||
│ │ 边距: 左右16dp | 列间距: 8dp | 行间距: 12dp │ │
|
||
│ │ 支持: 下拉刷新 + 上拉加载更多 │ │
|
||
│ │ │ │
|
||
│ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │
|
||
│ │ │ │ │ │ │ │
|
||
│ │ │ ┌───────────────┐ │ │ ┌───────────────┐ │ │ │
|
||
│ │ │ │ │ │ │ │ │ │ │ │
|
||
│ │ │ │ 直播封面 │ │ │ │ 直播封面 │ │ │ │
|
||
│ │ │ │ 比例 3:4 │ │ │ │ 比例 3:4 │ │ │ │
|
||
│ │ │ │ 圆角 12dp │ │ │ │ 圆角 12dp │ │ │ │
|
||
│ │ │ │ │ │ │ │ │ │ │ │
|
||
│ │ │ │ ┌─────┐ │ │ │ │ ┌─────┐│ │ │ │
|
||
│ │ │ │ │LIVE │ │ │ │ │ │12.5w││ │ │ │
|
||
│ │ │ │ │ 🔴 │ │ │ │ │ │ 👁 ││ │ │ │
|
||
│ │ │ │ └─────┘ │ │ │ │ └─────┘│ │ │ │
|
||
│ │ │ │ │ │ │ │ │ │ │ │
|
||
│ │ │ └───────────────┘ │ │ └───────────────┘ │ │ │
|
||
│ │ │ │ │ │ │ │
|
||
│ │ │ 王者荣耀五排上分 │ │ 深夜唱歌陪伴你 │ │ │
|
||
│ │ │ (标题: 14sp, 2行) │ │ (标题: 14sp, 2行) │ │ │
|
||
│ │ │ │ │ │ │ │
|
||
│ │ │ ┌────┐ 小明 │ │ ┌────┐ 小红 │ │ │
|
||
│ │ │ │头像│ 游戏 │ │ │头像│ 才艺 │ │ │
|
||
│ │ │ │24dp│ │ │ │24dp│ │ │ │
|
||
│ │ │ └────┘ │ │ └────┘ │ │ │
|
||
│ │ │ │ │ │ │ │
|
||
│ │ └─────────────────────┘ └─────────────────────┘ │ │
|
||
│ │ │ │
|
||
│ │ (更多直播间卡片...) │ │
|
||
│ │ │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 悬浮开播按钮 │ │
|
||
│ │ 位置: 右下角, 距右边16dp, 距底部导航16dp │ │
|
||
│ │ 尺寸: 56dp x 56dp | 圆形 │ │
|
||
│ │ 背景: 渐变 #FF6B6B → #FF8E8E │ │
|
||
│ │ 阴影: 6dp │ │
|
||
│ │ 图标: 📹 白色 24dp │ │
|
||
│ │ │ │
|
||
│ │ ┌─────────────────┐ │ │
|
||
│ │ │ 📹 │ │ │
|
||
│ │ │ 开播 │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ └─────────────────┘ │ │
|
||
│ │ │ │
|
||
│ │ 点击: 检查登录状态 → 跳转开播准备页 │ │
|
||
│ │ 动画: 点击缩放0.9 + 涟漪效果 │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
├─────────────────────────────────────────────────────────────────────┤
|
||
│ 底部导航栏 │
|
||
│ 高度: 56dp | 背景: #FFFFFF | 顶部分割线: 1dp #EEEEEE │
|
||
│ │
|
||
│ ┌───────────┬───────────┬───────────┬───────────┬───────────┐ │
|
||
│ │ 🏠 │ 🎣 │ 🌳 │ 💬 │ 👤 │ │
|
||
│ │ 首页 │ 缘池 │ 许愿树 │ 消息 │ 我的 │ │
|
||
│ │ #FF6B6B │ #999999 │ #999999 │ #999999 │ #999999 │ │
|
||
│ │ (选中) │ │ │ (红点) │ │ │
|
||
│ └───────────┴───────────┴───────────┴───────────┴───────────┘ │
|
||
│ │
|
||
│ 图标尺寸: 24dp | 文字: 10sp │
|
||
│ 选中: 图标+文字 #FF6B6B | 未选中: 图标+文字 #999999 │
|
||
│ 消息Tab: 有未读时显示红点 (8dp圆形, 右上角偏移) │
|
||
│ 切换动画: 图标缩放弹跳效果 │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**直播间卡片详细设计：**
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ 直播间卡片 (LiveRoomCard) │
|
||
│ 宽度: (屏幕宽度 - 16*2 - 8) / 2 │
|
||
│ 背景: #FFFFFF | 圆角: 12dp | 阴影: 无 │
|
||
├─────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 封面图片区域 │ │
|
||
│ │ 比例: 3:4 (宽:高) | 圆角: 12dp (仅顶部) │ │
|
||
│ │ 加载占位: 灰色渐变动画 │ │
|
||
│ │ 加载失败: 显示默认封面图 │ │
|
||
│ │ │ │
|
||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ 封面图片 │ │ │
|
||
│ │ │ (Glide加载) │ │ │
|
||
│ │ │ (centerCrop) │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ ┌──────────┐ ┌──────────┐ │ │ │
|
||
│ │ │ │ 🔴 LIVE │ │ 👁 12.5w │ │ │ │
|
||
│ │ │ │ │ │ │ │ │ │
|
||
│ │ │ │ 左上角 │ │ 右上角 │ │ │ │
|
||
│ │ │ │ 直播标签 │ │ 观看人数 │ │ │ │
|
||
│ │ │ └──────────┘ └──────────┘ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ 直播标签: │ │ │
|
||
│ │ │ - 位置: 左上角, 距边缘8dp │ │ │
|
||
│ │ │ - 背景: #FF4D4F (半透明80%) │ │ │
|
||
│ │ │ - 圆角: 4dp │ │ │
|
||
│ │ │ - 文字: "LIVE" 10sp 白色 │ │ │
|
||
│ │ │ - 左侧红点: 6dp 动画闪烁 │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ 观看人数: │ │ │
|
||
│ │ │ - 位置: 右上角, 距边缘8dp │ │ │
|
||
│ │ │ - 背景: #000000 (半透明50%) │ │ │
|
||
│ │ │ - 圆角: 4dp │ │ │
|
||
│ │ │ - 图标: 👁 12sp │ │ │
|
||
│ │ │ - 文字: 人数 10sp 白色 │ │ │
|
||
│ │ │ - 格式: <1万显示具体数, ≥1万显示x.xw │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 信息区域 │ │
|
||
│ │ 内边距: 8dp │ │
|
||
│ │ │ │
|
||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
||
│ │ │ 直播标题 │ │ │
|
||
│ │ │ 字号: 14sp | 颜色: #333333 | 字重: Regular │ │ │
|
||
│ │ │ 最大行数: 2 | 超出: 省略号 │ │ │
|
||
│ │ │ 行高: 1.4 │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ "王者荣耀五排上分，来一起玩！" │ │ │
|
||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||
│ │ │ │
|
||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
||
│ │ │ 主播信息 │ │ │
|
||
│ │ │ 上边距: 6dp │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ ┌────┐ 小明 │ │ │
|
||
│ │ │ │头像│ 游戏 │ │ │
|
||
│ │ │ │24dp│ │ │ │
|
||
│ │ │ │圆形│ 头像: 24dp圆形, 2dp白色边框 │ │ │
|
||
│ │ │ └────┘ 昵称: 12sp #333333, 最多6字 │ │ │
|
||
│ │ │ 分类: 12sp #999999 │ │ │
|
||
│ │ │ 间距: 头像与文字4dp, 昵称与分类2dp │ │ │
|
||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 交互效果: │
|
||
│ - 点击: 整个卡片可点击, 跳转直播间详情页 │
|
||
│ - 按下: 卡片缩放0.98, 透明度0.9 │
|
||
│ - 长按: 显示操作菜单 (不感兴趣/举报) │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
```
|