UI / UX Reference · 功能:视频浏览与播放

YouTube 移动端参考图

以「浏览 → 搜索 → 播放 → 频道 → Shorts → 订阅」的完整链路拆解该功能,全部页面写入同一个 HTML, 每页一个独立 mockup 边框横向排列,互不影响。风格参照 YouTube 移动端:纯黑底、红色品牌色、玻璃拟态浮层。

YouTube cast notification search avatar
全部 音乐 游戏 直播 学习 美食
视频封面 12:36 LIVE
频道头像

从零搭建一个全栈项目的完整流程:架构、开发与上线复盘

工程手记 · 12 万次观看 · 3 天前

更多
封面 08:24

一间安静工作室的五年进化史

Design Notes · 4.2 万次观看

封面 22:10

机械键盘润滑全攻略(新手避坑版)

键圈日常 · 8.9 万次观看

封面 16:02
头像

深夜城市摄影:手持 10 分钟出片指南

光影研究所 · 1.4 万次观看 · 1 周前

首页首页 ShortsShorts 发布 订阅订阅 我的我的

① 首页 Feed · 分类 Chips / 大卡 + 双列卡 / 直播标识

返回
全栈项目实战 搜索
筛选
筛选 时长 10 分钟以上 本周
封面 31:20

全栈项目从 0 到 1:需求拆分、技术选型与上线部署完整实录

工程手记 · 36 万次观看 · 2 个月前

含完整代码仓库

更多
封面 18:45

复盘三个失败的全栈项目:踩过的坑和后来的解法

老曹聊技术 · 12 万次观看 · 3 周前

第 2 集 · 系列「工程避坑」

更多
封面 05:12

用 5 分钟看懂一次完整的 CI/CD 上线流程

DevLog · 7.8 万次观看 · 5 天前

Shorts · 单集

更多
封面 44:08

深夜电台:程序员的松弛感从哪里来

夜间频率 · 3.1 万次观看 · 1 个月前

更多

② 搜索结果 · 实时筛选 Chips / 横向缩略图列表

收起 正在观看
视频画面
暂停
14:3231:20

全栈项目从 0 到 1:需求拆分、技术选型与上线部署完整实录

36 万次观看 · 2 个月前 · #全栈 #项目实战

1.2 万 分享 下载 保存
频道

工程手记

86.4 万订阅

订阅

评论 · 2,314

全部评论

阿禾 · 2 天前

第 4 章的部署部分讲得很清楚,跟着做真的上线了! 回复 · 👍 312

接下来播放

08:24

续集:把这套架构迁移到新项目

工程手记 · 9.6 万次观看

③ 播放页 · 玻璃操作条 / 评论预览 / 接下来播放

频道横幅
搜索 更多
头像

工程手记 认证

@engineering-notes · 86.4 万订阅 · 428 个视频

每周拆解一个真实项目:从需求、架构到上线,把工程经验讲给同行听。

订阅 已开启通知 赞助
首页 视频 Shorts 直播 播放列表
31:20

全栈项目从 0 到 1 完整实录

36 万次观看 · 2 个月前

16:02

深夜城市摄影:手持 10 分钟出片

1.4 万次观看 · 1 周前

08:24

一间安静工作室的五年进化史

4.2 万次观看 · 3 周前

18:45

复盘三个失败的全栈项目

12 万次观看 · 3 周前

④ 频道页 · 横幅 / 认证标识 / 分栏与网格

Shorts 画面
Shorts
相机 搜索
1.2 万 不喜欢 234 分享 配音 音乐
工程手记 订阅

一条命令部署你的第一个服务,零基础也能听懂 #程序员 #部署

原声 · 工程手记

首页 Shorts 订阅 我的

⑤ Shorts · 竖屏沉浸 / 右侧动作栏 / 底部滑动进度

全部 今天 继续观看 未观看 搜索

工程手记

全部
31:20

全栈项目从 0 到 1:完整实录(新)

工程手记 · 2 小时前

今天首发,已为你置顶

键圈日常

个性化
22:10

机械键盘润滑全攻略(新手避坑版)

键圈日常 · 1 天前

光影研究所

少量
16:02

深夜城市摄影:手持 10 分钟出片指南

光影研究所 · 1 周前

首页 Shorts 订阅 我的

⑥ 订阅页 · 频道分组 / 通知级别 / 新视频流