# 直播平台移动端页面设计详细说明 > 生成时间：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 │ │ - 长按: 显示操作菜单 (不感兴趣/举报) │ └─────────────────────────────────────────────────────────────────────┘ ```