Lumen · 视频社区 UI/UX 参考图
按功能拆分为 5 个独立 HTML，每个功能的所有页面集中在一个文件内、以独立 mockup 边框横向排列， 页面之间互不影响。所有图标通过 Lucide Static CDN 引入，界面使用 Tailwind 与玻璃拟态，mockup 内不出现滚动条。
FEATURE 01
首页推荐
首屏信息流、顶部筛选条、短视频沉浸页
12:04
把旧笔记本改成桌面工作站，我用了一周
@木作日记 · 24.3 万次播放
08:31
21:08
05:52
首页
搜索
创作
消息
我的包含页面
- · 推荐信息流
- · 沉浸式短视频流
- · 分类筛选抽屉
设计要点
顶部三分栏 + 指示条；卡片信息密度控制在 3 行以内； 底部 Tab 五个维度保持拇指可达区。
FEATURE 02
视频播放与互动
播放器控制、点赞投币、弹幕、相关推荐
把旧笔记本改成桌面工作站，我用了一周
@木作日记 · 已发布 3 天
包含页面
- · 竖屏播放器
- · 互动面板
- · 相关推荐
设计要点
进度条在拇指区上方；弹幕不超过两行； 互动按钮尺寸 ≥ 44px，点击区域外扩 8px。
FEATURE 03
搜索与筛选
搜索建议、筛选面板、结果页
桌面工作站
12:04把旧笔记本改成桌面工作站，我用了一周
@木作日记 · 24.3 万次播放 · 3 天前
06:20桌面改造全记录
@器材日记 · 8.2 万次播放
15:47预算 800 元的桌面方案
@桌面研究所 · 15.6 万次播放
高级筛选
时长 · 画质 · 字幕 · 观看量
包含页面
- · 搜索输入与建议
- · 筛选面板
- · 结果列表
设计要点
筛选条件以 chip 回显在输入框下方； 高级筛选收进底部抽屉，避免打断浏览。
FEATURE 04
订阅与频道
订阅流、频道主页、订阅管理
木作日记
32.6 万订阅 · 142 个视频
12:0408:31三个抽屉式收纳方案
9.4 万次播放 · 2 天前
包含页面
- · 订阅流
- · 频道主页
- · 订阅分组管理
设计要点
频道头像压在头图之上； 订阅按钮是唯一高对比实心元素，视觉优先级最高。
FEATURE 05
个人中心与创作
历史记录、创作中心、设置
林知夏
@zhixia · 1.2 万粉丝
86
关注
1.2万
粉丝
32
获赞
创作中心
本月4
新视频
186万
总播放
+18%
较上月
观看历史
236 条
稍后再看
18 条
离线缓存
2.4 GB
创作者中心
包含页面
- · 个人主页
- · 创作中心
- · 设置
设计要点
数据区使用等宽数字对齐； 创作者与观众身份分层，普通用户隐藏创作入口。