NEBULA UI · 7 个功能模块 · 20 个界面

YouTube 模块化设计稿

先以产品经理视角把 App 拆成 7 个功能模块并定义信息架构与页面关系,再由设计师逐个模块出高保真稿。 每个模块一个 HTML 文件,模块内的所有页面横向排列在同一个页面里、互不影响,可以直接交付前端开发。

Tailwind CSS CDN Lucide Static CDN Unsplash 375 × 812 基准 玻璃拟态 页面内无滚动条

MODULE 01

首页推荐

打开 App 后 3 秒内决定看什么:全局搜索 + 三个一级分流 + 分类 chips + 继续观看 + 推荐流。

3 个界面:首页推荐流 / 分类落地页 / 观看历史

MODULE 02

播放与观看

三种观看形态共用一套互动心智:标准播放页、短视频全屏流、合集与章节。

3 个界面:标准播放页 / 短视频全屏流 / 合集与章节

MODULE 03

探索与直播

话题层负责「顺着热点找内容」,直播层负责「此刻正在发生」,两者都强调实时性与信息密度。

3 个界面:探索首页 / 话题聚合页 / 直播间

MODULE 04

订阅与频道

留存核心。订阅流严格按时间倒序不重排,配套订阅管理与频道主页。

3 个界面:订阅流 / 订阅管理 / 频道主页

MODULE 05

创作中心

内容供给侧:工作台、数据分析、发布编辑。视觉上刻意做得更「工具」,密度高、装饰少。

3 个界面:创作者工作台 / 数据分析 / 发布与编辑

MODULE 06

搜索与通知

搜索是全屏覆盖层;通知拆成系统通知与站内消息两层,未读提示不共用同一个红点。

3 个界面:全屏搜索 / 通知中心 / 站内消息

MODULE 07

账号与设置

个人主页与数据、播放列表与下载管理、设置与无障碍,构成长尾功能。

3 个界面:我的 / 播放列表与下载 / 设置与无障碍