小星球官网
LITTLE PLANET WEB
从网页，走进小星球。
产品官网
正在呈现画面
项目介绍
ABOUT THE PROJECT小星球官网
小星球官网是直播社交平台的产品入口。网站介绍产品内容，提供 App 与直播助手下载，并连接账户充值等服务，让用户从了解产品自然进入使用。
- 产品类型
- 产品官网
- 设计类型
- 从 0 到 1 完整设计
- 主要场景
- 了解 / 下载 / 充值
设计流程
DESIGN PROCESS围绕产品介绍、客户端下载和账户充值，串起官网的浏览与服务入口。
- 01
梳理官网结构
规划产品介绍、App 下载、直播助手与充值的一级导航，理清各区块的内容层级。
信息架构 - 02
延续产品视觉
延续小星球的黑黄配色与星球、轨道元素，让官网与 App 保持相同的识别。
品牌衔接 - 03
组织下载内容
区分 iOS、Android 和直播助手的下载入口，用产品画面说明各自的使用场景。
内容组织 - 04
完善充值流程
依次组织账号、充值金额、支付方式与确认信息，让账户服务的操作顺序清楚。
服务流程
设计规范
VISUAL SYSTEM延续小星球的黑黄配色，以产品内容和明确的下载入口组织网页。
主要强调色Yellow
#FFDA16选中状态 / 主要操作 / 重点信息
深色基础Charcoal
#101113内容背景 / 场景衬托
浅色基础White
#FFFFFF主要文字 / 深色背景中的内容
辅助信息Gray
#8C8C8C说明文字 / 次要状态
布局规范
LAYOUT & SPACING依据官网的顶部导航、左侧介绍与右侧 App 预览标注布局。
品牌与导航沿顶部展开。左侧产品说明和下载按钮，右侧 App 预览，下方延续场景背景；各服务页面沿用这条浏览顺序。
16px
下载按钮服务选项
12px
导航选中表单操作
16px12px
- 内容边距
- 24 px
- 按钮间距
- 16 px
- 图文间距
- 40 px
核心界面
MAIN SCREENS从主要使用场景开始，查看产品的核心界面。点击图片可以查看完整大图。
