小星球
LITTLE PLANET
直播、动态与聊天，
都在小星球。
一款从 0 到 1 完整设计的直播社交 App。
正在呈现画面项目介绍
ABOUT THE PROJECT看直播，分享日常，
也让交流继续。
小星球是一款面向年轻人的直播社交平台。在这里，可以观看感兴趣的直播，与主播实时互动，也可以分享日常、结识新朋友。直播与生活分享相结合，为年轻人提供轻松交流、表达自己的空间。
- 产品类型
- 直播社交
- 设计类型
- 从 0 到 1 完整设计
- 主要场景
- 直播 / 分享 / 交流
设计流程
DESIGN PROCESS从页面结构规划到视觉规范，再推进界面设计与交互细节。
- 01
梳理页面结构
梳理一级入口与二级页面，明确功能关系、内容层级和主要使用路径。
结构规划 - 02
统一视觉规则
确定色彩、字体与图标风格，统一组件、间距和布局规则。
视觉规范 - 03
搭建核心界面
围绕关键使用场景展开界面设计，建立可复用的组件与页面模板。
界面设计 - 04
细化交互状态
完善操作反馈与空白、加载、异常等状态，检查流程衔接和细节。
交互细节
设计规范
VISUAL SYSTEM黑白构成界面的基础，黄色标记当前状态与主要操作。下方整理主要色彩的搭配与用途。
主要强调色Yellow
#FFDF00选中状态 / 主要操作 / 重点信息
深色基础Charcoal
#101113内容背景 / 直播场景
浅色基础White
#FFFFFF主要文字 / 深色背景中的内容
辅助信息Gray
#8C8C8C说明文字 / 次要状态
文字规范
TYPOGRAPHY按标题、正文和辅助信息划分字级，用字重区分重点。
| 字号 | 字重 | 使用场景 |
|---|---|---|
| 25 | Bold | 重要标题、重点数据 |
| 18 | Bold | 页面标题、导航标题 |
| 16 | Medium | 按钮、主要内容 |
| 14 | Medium | 小标题、操作文字 |
| 12 | Regular | 正文、辅助信息 |
| 10 | Regular | 备注、说明文字 |
字级与字重 · 单位 pt
布局规范
LAYOUT & SPACING以 iPhone X 一倍图尺寸规划布局，统一模块边距、卡片间距与圆角。
顶部品牌与搜索入口之后，直播推荐以大图和双列内容展开；下方继续展示直播内容，底部保留四个导航入口。
16pt
直播封面推荐卡片
10pt
分类标签操作入口
16pt10pt
- 左右边距
- 16 pt
- 双列间距
- 12 pt
- 内容间距
- 16 pt
四个入口，四种场景。
MAIN SCREENS从内容浏览开始，进入动态、聊天与个人空间。点击界面可以查看完整大图。
更多页面与交互细节
SCREEN COLLECTION继续查看内容互动、直播管理、消息通知，以及登录与资料页面。
发现与互动
DISCOVER & CONNECT8 个页面
直播现场
LIVE EXPERIENCE8 个页面
交流与通知
MESSAGES3 个页面
登录与资料
ACCOUNT FLOW5 个页面
小星球 / 直播社交 App回到项目开头