sansenhoshi/ffmpeg-gui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

文档更新

Browse Source
This commit is contained in:
sansen
2026-07-29 02:21:06 +08:00
parent 79f5fb8ac3
commit 2c4dd55f11
3 changed files with 345 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI.md
+255
View File
@@ -0,0 +1,255 @@
# FFmpeg-GUI UI Layout Design
## 整体布局
```text
┌──────────────────────────────────────────────────────┐
│ FFmpeg-GUI ⚙ ◐ │
│ │
├───────────────┬──────────────────────────────────────┤
│ │ │
│ │ │
│ 功能导航 │ 工作区 │
│ │ │
│ ┌───────────┐ │ ┌──────────────────────────────┐ │
│ │重新封装 │ │ │ 输入文件 │ │
│ └───────────┘ │ │ │ │
│ │ │ video.mp4 [选择文件] │ │
│ ┌───────────┐ │ └──────────────────────────────┘ │
│ │重新编码 │ │ │
│ └───────────┘ │ ┌──────────────────────────────┐ │
│ │ │ 编码硬件 │ │
│ ┌───────────┐ │ │ │ │
│ │烧录字幕 │ │ │ NVIDIA NVENC RTX 4090 │ │
│ └───────────┘ │ └──────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────┐ │
│ │ │ 详细参数 │ │
│ │ │ │ │
│ │ │ 编码器 HEVC │ │
│ │ │ 质量 CQ 23 │ │
│ │ │ Preset P6 │ │
│ │ └──────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────┐ │
│ │ │ 输出位置 │ │
│ │ │ D:/Output │ │
│ │ └──────────────────────────────┘ │
│ │ │
│ │ [开始任务] │
│ │ │
├───────────────┴──────────────────────────────────────┤
│ 任务进度 ▼ │
├──────────────────────────────────────────────────────┤
│ video.mp4 │
│ HEVC NVENC │
│ │
│ ████████████████──────── 50% │
│ │
│ 速度: 123 FPS 剩余时间: 02:30 [停止] │
└──────────────────────────────────────────────────────┘
```
---
# 页面结构
## 主页面
```text
App
├── Header
│
│ ├── AppName
│ │
│ ├── SettingButton
│ │
│ └── ThemeToggle
│
│
├── MainLayout
│
│ ├── Sidebar
│ │
│ │ ├── Remux
│ │ ├── Encode
│ │ └── Subtitle
│ │
│ │
│ └── Workspace
│
│ ├── FileSelector
│ │
│ ├── HardwareSelector
│ │
│ ├── AdvancedOptions
│ │
│ ├── OutputSelector
│ │
│ └── StartButton
│
│
└── TaskDrawer
├── TaskSummary
│
├── TaskProgress
│
├── TaskInfo
│
└── StopButton
```
---
# 设置页面
```text
┌──────────────────────────────────────────────┐
│ 设置 │
├──────────────────────────────────────────────┤
│ │
│ 硬件检测 │
│ │
│ ┌──────────────────────────────────────────┐ │
│ │ GPU │ │
│ │ NVIDIA RTX 4090 │ │
│ │ │ │
│ │ 支持编码 │ │
│ │ ✓ H264 NVENC │ │
│ │ ✓ HEVC NVENC │ │
│ │ ✓ AV1 NVENC │ │
│ └──────────────────────────────────────────┘ │
│ │
│ │
│ 硬件优先级 │
│ │
│ NVIDIA GPU │
│ Intel QSV │
│ AMD AMF │
│ CPU │
│ │
│ │
│ 输出设置 │
│ │
│ 默认目录 │
│ D:/Video │
│ │
│ 文件命名规则 │
│ {name}_{codec} │
│ │
└──────────────────────────────────────────────┘
```
---
# 组件设计
## Sidebar
特点：
- 宽度固定
- 当前选中高亮
- 图标 + 文本
```text
┌────────────┐
│ 重新转码 │
│ │
│ 重新封装 │
│ │
│ 烧录字幕 │
│ │
└────────────┘
```
---
## 工作区 Card
所有功能参数使用 Card。
```text
┌─────────────────────┐
│ 编码设置 │
├─────────────────────┤
│ 编码器 │
│ HEVC NVENC │
│ │
│ 质量 │
│ CQ 23 │
└─────────────────────┘
```
---
## 任务抽屉
默认收起(点击应该是由下往上展开)：
```text
┌──────────────────────┐
│ 任务进度 ▲ │
└──────────────────────┘
```
展开：
```text
┌──────────────────────┐
│ 当前任务 │
├──────────────────────┤
│ a.mp4 │
│ ███████ 80% │
│ FPS 120 │
│ [停止] │
├──────────────────────┤
│ b.mp4 │
│ ███ 20% │
│ FPS 90 │
│ [停止] │
└──────────────────────┘
```
---
# 视觉风格
## 核心关键词
```
Modern Flat
Card Based
Desktop Application
Low Density Shadow
High Readability
```
## 视觉规则
- 背景使用低饱和灰色
- 卡片使用纯色背景
- 圆角 12px
- 控件高度 36~40px
- 主按钮突出
- 参数区域避免复杂表单堆叠
整体感觉：
```
OpenList Desktop
+
HandBrake
+
现代IDE设置页面
```