256 lines
9.2 KiB
Markdown
256 lines
9.2 KiB
Markdown
# 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设置页面
|
||
```
|