YOUTUBE MOBILE · MODULE SYSTEM

把复杂产品,拆成可以逐一检查的屏幕。

首页、播放、发现、个人中心与创作中心,共 15 个关键界面。统一采用深色画布、玻璃拟态、红色品牌强调与高密度内容层级,所有屏幕按 iPhone 390 × 844 独立排布。

5 个功能模块 15 个界面 390 × 844 Tailwind CSS Lucide Static Unsplash
首页模块 01 / HOME

首页

推荐流、搜索与结果、订阅动态。信息密度与缩略图节奏是重点。

查看 3 个界面
3 SCREENS
播放模块 02 / WATCH

播放

播放器、评论与章节、全屏体验。控制栏、动作栏与相关推荐的整体关系。

查看 3 个界面
3 SCREENS
发现模块 03 / DISCOVER

发现

趋势、Shorts 沉浸式浏览与直播/游戏分区。强调探索感和快速切换。

查看 3 个界面
3 SCREENS
个人中心模块 04 / PROFILE

个人中心

个人主页、频道与播放列表、设置。身份、内容资产与账户控制的层级。

查看 3 个界面
3 SCREENS
创作中心模块 05 / STUDIO

创作中心

仪表盘、视频分析、上传流程。创作者日常从洞察到发布的完整闭环。

查看 3 个界面
3 SCREENS

DESIGN TOKENS

统一视觉语言

玻璃拟态用于浮层与底部导航;内容卡片保持纯黑/深灰;红色只承担品牌、直播与主动作,避免信息噪音。

YouTube Red Surface / #0F0F0F Elevated / #1C1C1C Glass / 8% Text / #F1F1F1 Live / Shorts