9.2 KiB
9.2 KiB
FFmpeg-GUI UI Layout Design
整体布局
┌──────────────────────────────────────────────────────┐
│ FFmpeg-GUI ⚙ ◐ │
│ │
├───────────────┬──────────────────────────────────────┤
│ │ │
│ │ │
│ 功能导航 │ 工作区 │
│ │ │
│ ┌───────────┐ │ ┌──────────────────────────────┐ │
│ │重新封装 │ │ │ 输入文件 │ │
│ └───────────┘ │ │ │ │
│ │ │ video.mp4 [选择文件] │ │
│ ┌───────────┐ │ └──────────────────────────────┘ │
│ │重新编码 │ │ │
│ └───────────┘ │ ┌──────────────────────────────┐ │
│ │ │ 编码硬件 │ │
│ ┌───────────┐ │ │ │ │
│ │烧录字幕 │ │ │ NVIDIA NVENC RTX 4090 │ │
│ └───────────┘ │ └──────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────┐ │
│ │ │ 详细参数 │ │
│ │ │ │ │
│ │ │ 编码器 HEVC │ │
│ │ │ 质量 CQ 23 │ │
│ │ │ Preset P6 │ │
│ │ └──────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────┐ │
│ │ │ 输出位置 │ │
│ │ │ D:/Output │ │
│ │ └──────────────────────────────┘ │
│ │ │
│ │ [开始任务] │
│ │ │
├───────────────┴──────────────────────────────────────┤
│ 任务进度 ▼ │
├──────────────────────────────────────────────────────┤
│ video.mp4 │
│ HEVC NVENC │
│ │
│ ████████████████──────── 50% │
│ │
│ 速度: 123 FPS 剩余时间: 02:30 [停止] │
└──────────────────────────────────────────────────────┘
页面结构
主页面
App
├── Header
│
│ ├── AppName
│ │
│ ├── SettingButton
│ │
│ └── ThemeToggle
│
│
├── MainLayout
│
│ ├── Sidebar
│ │
│ │ ├── Remux
│ │ ├── Encode
│ │ └── Subtitle
│ │
│ │
│ └── Workspace
│
│ ├── FileSelector
│ │
│ ├── HardwareSelector
│ │
│ ├── AdvancedOptions
│ │
│ ├── OutputSelector
│ │
│ └── StartButton
│
│
└── TaskDrawer
├── TaskSummary
│
├── TaskProgress
│
├── TaskInfo
│
└── StopButton
设置页面
┌──────────────────────────────────────────────┐
│ 设置 │
├──────────────────────────────────────────────┤
│ │
│ 硬件检测 │
│ │
│ ┌──────────────────────────────────────────┐ │
│ │ GPU │ │
│ │ NVIDIA RTX 4090 │ │
│ │ │ │
│ │ 支持编码 │ │
│ │ ✓ H264 NVENC │ │
│ │ ✓ HEVC NVENC │ │
│ │ ✓ AV1 NVENC │ │
│ └──────────────────────────────────────────┘ │
│ │
│ │
│ 硬件优先级 │
│ │
│ NVIDIA GPU │
│ Intel QSV │
│ AMD AMF │
│ CPU │
│ │
│ │
│ 输出设置 │
│ │
│ 默认目录 │
│ D:/Video │
│ │
│ 文件命名规则 │
│ {name}_{codec} │
│ │
└──────────────────────────────────────────────┘
组件设计
Sidebar
特点：
- 宽度固定
- 当前选中高亮
- 图标 + 文本
┌────────────┐
│ 重新转码 │
│ │
│ 重新封装 │
│ │
│ 烧录字幕 │
│ │
└────────────┘
工作区 Card
所有功能参数使用 Card。
┌─────────────────────┐
│ 编码设置 │
├─────────────────────┤
│ 编码器 │
│ HEVC NVENC │
│ │
│ 质量 │
│ CQ 23 │
└─────────────────────┘
任务抽屉
默认收起(点击应该是由下往上展开)：
┌──────────────────────┐
│ 任务进度 ▲ │
└──────────────────────┘
展开：
┌──────────────────────┐
│ 当前任务 │
├──────────────────────┤
│ 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设置页面