sansenhoshi/ffmpeg-gui

Fork 0

Files

T

sansen 2f5172cd62 init project

2026-07-28 19:43:09 +08:00

9.0 KiB

Raw Blame History

FFmpeg-GUI 设计文档

技术栈

C++ + Dear ImGui + FFmpeg Library

1. 产品定位

FFmpeg-GUI 是一个面向高级用户的视频处理工具。

UI 设计目标：

简洁
高效
专业
低干扰
强信息表达

整体风格：

现代化扁平设计（Modern Flat Design）

参考方向：

VS Code
JetBrains IDE
Blender
OBS Studio
Figma

2. 架构设计

2.1 底层模块划分

UI层（Dear ImGui）
 |
业务层
 |
FFmpeg封装层
 |
硬件/系统层

2.2 FFmpeg 核心封装层

不应该让业务直接调用底层 FFmpeg API：

avcodec_xxx()
avformat_xxx()

应该封装为统一接口：

FFmpeg Core

├── Decoder
├── Encoder
├── Muxer
├── Filter
└── MediaInfo

提供高层 API：

Encode()
Remux()
BurnSubtitle()
Analyze()

上层不关心 FFmpeg 内部细节。

3. 功能模块设计

3.1 媒体信息分析（Media Analyzer）

功能说明： 解析输入媒体文件信息，为其他模块提供媒体数据。

支持信息：

类别	字段
视频	编码格式、分辨率、帧率、比特率、色彩空间、HDR信息、视频流数量
音频	编码格式、声道、采样率、比特率、音轨数量
字幕	字幕格式、字幕语言、字幕数量

输出提供给： 重新封装、重新编码、字幕烧录

3.2 重新封装（Remux）

功能说明： 仅修改媒体容器，不改变媒体编码。

示例：MKV → MP4 | MOV → MP4 | TS → MKV

操作流程：

选择输入文件
选择输出格式（MP4、MKV、MOV、TS）
选择媒体流处理

流类型	操作
视频	Copy / 删除
音频	Copy / 删除
字幕	Copy / 删除

开始任务

⚠ 重新封装不涉及编码，因此不需要 GPU 选择、编码参数。

3.3 重新编码（Encoder）

功能说明： 重新压缩视频流。

支持：

编码格式	编码方式
H264、H265、AV1	NVIDIA NVENC、Intel QSV、AMD AMF、CPU Software

操作流程：

选择输入文件
选择输出格式（MP4、MKV）
选择编码器（如：RTX 4090 → HEVC NVENC）
设置编码参数

类别	参数
基础	编码格式、质量模式、Preset、Profile、Level
视频	分辨率、帧率、比特率
音频	Copy / 重新编码

开始任务

3.4 字幕烧录（Subtitle Burn）

功能说明： 通过 FFmpeg Filter 将字幕渲染到视频，字幕成为视频画面的一部分。

操作流程：

选择视频文件
选择字幕文件（ASS、SSA、SRT）
设置字幕参数（字体、字号、位置、编码）
选择输出格式
选择编码器
开始任务

3.5 硬件管理（Hardware Manager）

GPU 检测： 支持 NVIDIA、Intel、AMD

GPU → 支持编码 → 可用参数

示例：

RTX 4090
支持: H264 NVENC | HEVC NVENC | AV1 NVENC

硬件优先级：

1. NVIDIA GPU
2. Intel QSV
3. CPU

程序内部：

Hardware Manager
        |
        ↓
Encoder List

hevc_nvenc
av1_nvenc
h264_qsv
libx265

3.6 任务管理（Task Manager）

功能说明： 管理 FFmpeg 工作任务。

功能	说明
任务创建	添加任务、设置任务参数
任务控制	开始、暂停、停止、删除
状态	等待、执行中、已完成、失败、已取消
显示信息	当前文件、操作类型、编码器、当前帧、FPS、进度、剩余时间

3.7 软件设置

分类	设置项
硬件设置	GPU检测、GPU优先级、默认编码器
输出设置	默认输出目录、文件命名规则
UI设置	主题、深色/浅色

4. 整体布局设计

4.1 主窗口结构

┌──────────────────────────────┐
│ FFmpeg-GUI                   │
├──────────────┬───────────────┤
│              │               │
│ 功能导航     │ 参数配置区域  │
│              │               │
│              │               │
├──────────────┴───────────────┤
│ 任务状态区域                 │
└──────────────────────────────┘

4.2 页面区域设计

顶部标题栏

功能： 软件名称、当前模块名称、全局状态
高度： 40px - 50px
风格： 简洁、无复杂按钮、弱视觉存在

FFmpeg-GUI        Encode

左侧功能栏

用途： 切换主要功能（重新封装、重新编码、字幕烧录）
宽度： 160px - 220px

状态	样式
默认	灰色文字 + 低亮度背景
选中	强调色背景 + 白色文字

┌──────────┐
│          │
│ ▶ 编码   │
│          │
│   封装   │
│          │
│   字幕   │
│          │
└──────────┘

参数配置区域

核心操作区域，采用分组 + 卡片 + 折叠区域的布局方式：

输入文件

┌────────────────┐
│ video.mkv      │
└────────────────┘

编码设置

┌────────────────┐
│ HEVC NVENC ▼   │
└────────────────┘

任务区域

固定底部，不影响参数修改，支持多任务显示：

任务

video01.mkv

HEVC NVENC

██████████──── 70%

FPS:120
剩余时间:03:20

5. 设计原则

5.1 扁平化

避免	采用
复杂渐变	单色背景
高光效果	简洁边界
拟物化按钮	清晰层级
大量阴影	少量强调色

5.2 工具化设计

软件不是娱乐应用，而是生产力工具。

重点突出：

当前任务状态
当前配置
操作反馈

减少：

装饰元素
无意义动画
复杂导航

5.3 信息密度适中

FFmpeg 需要显示大量参数，设计目标：

更多信息 + 清晰层级 + 快速定位

避免： 大面积留白、过大的控件、过多卡片嵌套

6. 色彩设计

默认主题：暗色主题

原因：视频工具常用暗色环境，减少视觉疲劳，符合专业软件习惯。

6.1 基础颜色

用途	色值
背景	`#181818`
面板	`#202020`
输入框	`#2A2A2A`
边框	`#383838`
主要文字	`#FFFFFF`
次级文字	`#AAAAAA`

6.2 强调色

用途	色值	场景
蓝色	`#3B82F6`	当前选择、操作按钮、状态提示
绿色	`#22C55E`	成功
红色	`#EF4444`	错误
黄色	`#EAB308`	警告

7. 控件设计

7.1 按钮

风格： 扁平、圆角、无立体效果
高度： 32px - 40px

状态	样式
默认	深色背景
Hover	增加亮度
Active	强调色

7.2 输入框

深色背景、弱边框、清晰焦点状态

┌────────────────┐
│ input.mp4      │
└────────────────┘

7.3 下拉框

用于编码器选择、输出格式、Preset 等，设计为简洁文本选择器。

7.4 进度条

用途： 任务状态显示
要求： 清晰、不抢占视觉

████████────── 60%

8. 图标设计

风格： 线性图标、简洁、单色
避免： 彩色复杂图标、过度装饰
使用场景： 文件选择、删除任务、设置、开始任务

9. 字体设计

原则： 清晰优先。

平台	推荐字体
Windows	Segoe UI
跨平台	Noto Sans

字体层级：

用途	字号
标题	20px - 24px
正文	16px
辅助信息	16px

10. 动效设计

轻量动画。

允许	避免
页面切换、状态变化、进度变化	大量动画、弹跳效果、装饰动画

11. 状态反馈

任务状态与颜色对照：

状态	颜色
等待	灰色
运行	蓝色
完成	绿色
失败	红色
取消	黄色

● Encoding
● Completed
● Failed

12. 整体视觉关键词

现代 · 扁平 · 专业 · 克制 · 高信息密度 · 工具化 · 暗色 · 低干扰

打开软件后，用户可以快速选择操作、配置参数、执行任务，并清晰看到 FFmpeg 当前状态。

13. 实现范围

核心必须

媒体信息分析
FFmpeg Core 封装
重新封装
重新编码
字幕烧录
硬件管理
任务管理

9.0 KiB Raw Blame History Unescape Escape

FFmpeg-GUI 设计文档

技术栈

1. 产品定位

2. 架构设计

2.1 底层模块划分

2.2 FFmpeg 核心封装层

3. 功能模块设计

3.1 媒体信息分析（Media Analyzer）

3.2 重新封装（Remux）

3.3 重新编码（Encoder）

3.4 字幕烧录（Subtitle Burn）

3.5 硬件管理（Hardware Manager）

3.6 任务管理（Task Manager）

3.7 软件设置

4. 整体布局设计

4.1 主窗口结构

4.2 页面区域设计

顶部标题栏

左侧功能栏

参数配置区域

任务区域

5. 设计原则

5.1 扁平化

5.2 工具化设计

5.3 信息密度适中

6. 色彩设计

6.1 基础颜色

6.2 强调色

7. 控件设计

7.1 按钮

7.2 输入框

7.3 下拉框

7.4 进度条

8. 图标设计

9. 字体设计

10. 动效设计

11. 状态反馈

12. 整体视觉关键词

13. 实现范围

核心必须

9.0 KiB

Raw Blame History