个人学习-视频播放系统 UI 设计方案

优雅极简主义 · 沉浸式体验 · 响应式设计

主背景 #0a0a0f
卡片 #141419
强调色 #6366f1
圆角 12-16px

前台视频页 - PC端

首页
VideoFlow

视频列表

03:24

山间晨雾

清晨的山谷被薄雾笼罩

02:45

海浪轻语

宁静的海滩，海浪轻拍

04:12

森林秘境

阳光穿透茂密的树叶

03:56

城市夜景

繁华都市的霓虹灯光

01:12 / 03:24

山间晨雾

清晨的山谷被薄雾笼罩，宛如仙境。阳光穿透云层，洒下金色的光芒，整个山谷笼罩在一层神秘的面纱之中。

1,250 次播放 · 2024-01-15

前台视频页 - 移动端

响应式
VideoFlow
01:12 03:24

山间晨雾

清晨的山谷被薄雾笼罩，宛如仙境。

1,250 次播放 · 2024-01-15

更多视频

02:45

海浪轻语

宁静的海滩

04:12

森林秘境

阳光穿透树叶

03:56

城市夜景

繁华都市霓虹

管理员登录页

私密

Admin

视频管理系统

按 Enter 键登录

VideoFlow Admin System

管理后台 - 上传视频

后台
视频管理

上传新视频

选择视频文件

MP4, WebM, OGG

选择封面图

JPG, PNG, WebP

正在上传: mountain.mp4 65%

管理后台 - 视频列表

后台
视频管理

12

总视频数

8.5K

总播放量

1.2G

存储占用

视频 时长 操作
山间晨雾
03:24
海浪轻语
02:45
森林秘境
04:12
城市夜景
03:56

管理后台 - 编辑视频

弹窗
视频管理

上传新视频

编辑视频

设计规范说明

配色方案

主背景 #0a0a0f
卡片 #141419
强调 #6366f1
次要文字

圆角规范

卡片/容器：16px

按钮：10px

输入框：12px

标签/小元素：6px

阴影层级

基础：0 1px 3px rgba(0,0,0,0.3)

悬停：0 8px 30px rgba(0,0,0,0.4)

聚焦：0 0 0 3px rgba(99,102,241,0.2)

动效规范

快速：150ms

正常：250ms

缓慢：350ms

缓动：cubic-bezier(0.16, 1, 0.3, 1)

页面清单

1 前台视频页 - PC端 (左列表右播放)
2 前台视频页 - 移动端 (上下排列)
3 管理员登录页 (私密无按钮)
4 管理后台 - 视频上传
5 管理后台 - 视频列表
6 管理后台 - 编辑弹窗
备案号: 沪ICP备2026018159号-1