From 51b768a2ba402fa06b0c7ce41f363ee3fb4e35f4 Mon Sep 17 00:00:00 2001 From: sansen Date: Wed, 29 Jul 2026 00:28:15 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CMakeLists.txt | 9 - README.md | 2 - UI设计.md | 799 ------------------------------------------------- build.bat | 51 ---- src/main.cpp | 5 - src/main.h | 14 - 功能模块.md | 419 -------------------------- 设计文档.md | 503 ------------------------------- 8 files changed, 1802 deletions(-) delete mode 100644 CMakeLists.txt delete mode 100644 README.md delete mode 100644 UI设计.md delete mode 100644 build.bat delete mode 100644 src/main.cpp delete mode 100644 src/main.h delete mode 100644 功能模块.md delete mode 100644 设计文档.md diff --git a/CMakeLists.txt b/CMakeLists.txt deleted file mode 100644 index b99fe3f..0000000 --- a/CMakeLists.txt +++ /dev/null @@ -1,9 +0,0 @@ -cmake_minimum_required(VERSION 4.0) -project(ffmpeg-gui) - -set(CMAKE_CXX_STANDARD 20) -set(CMAKE_AUTOMOC ON) -set(CMAKE_AUTORCC ON) -set(CMAKE_AUTOUIC ON) - -set(CMAKE_PREFIX_PATH "D:/Env/Qt") \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index e4741bd..0000000 --- a/README.md +++ /dev/null @@ -1,2 +0,0 @@ -# ffmpeg-gui - diff --git a/UI设计.md b/UI设计.md deleted file mode 100644 index 99cb089..0000000 --- a/UI设计.md +++ /dev/null @@ -1,799 +0,0 @@ -# FFmpeg-GUI UI 美术设计规范 - -## 1. 设计定位 - -## 产品类型 - -FFmpeg-GUI 是一款面向高级用户的视频处理桌面工具。 - -核心目标： - -- 快速配置媒体处理任务 -- 清晰展示媒体参数 -- 实时反馈任务状态 -- 降低 FFmpeg 使用门槛 - - -## 设计风格 - -采用： - -> Modern Flat Desktop UI（现代扁平桌面 UI） - - -设计参考： - -- Windows Fluent Design -- VS Code -- JetBrains IDE -- Figma -- OBS Studio - - -视觉关键词： - -``` -现代化 -扁平化 -专业 -简洁 -低干扰 -高信息密度 -卡片化 -``` - ---- - -# 2. 整体设计原则 - - -## 2.1 扁平化设计 - -避免： - -- 复杂渐变 -- 强烈阴影 -- 拟物化按钮 -- 过度装饰 - - -采用： - -- 纯色背景 -- 简洁边框 -- 轻量阴影 -- 清晰层级 - - ---- - -## 2.2 卡片化布局 - -所有功能区域采用独立卡片。 - - -示例： - -``` -┌────────────────┐ -│ 编码设置 │ -│ │ -│ 参数内容 │ -└────────────────┘ -``` - - -卡片用于区分： - -- 功能模块 -- 参数区域 -- 状态区域 - - ---- - -## 2.3 工具化设计 - -UI 服务于操作效率。 - - -重点突出： - -- 当前操作 -- 当前参数 -- 当前状态 - - -减少： - -- 装饰元素 -- 无意义动画 -- 多层页面 - - ---- - -# 3. 主界面布局 - - -采用： - -``` -Sidebar + Content + Task Panel -``` - - -整体结构： - -``` -┌────────────────────────────┐ -│ FFmpeg-GUI │ -├───────────┬────────────────┤ -│ │ │ -│ 功能导航 │ 参数配置区域 │ -│ │ │ -│ │ │ -├───────────┴────────────────┤ -│ 任务状态区域 │ -└────────────────────────────┘ -``` - - ---- - -# 4. 左侧导航设计 - - -## 功能 - -用于切换主要操作模块。 - - -包含： - -``` -重新封装 - -重新编码 - -字幕烧录 - -设置 -``` - - -## 尺寸 - -宽度： - -``` -140px - 200px -``` - - -## 样式 - -普通状态： - -- 灰色文字 -- 无明显背景 - - -选中状态： - -- 主色文字 -- 浅色背景 -- 左侧强调线 - - -示例： - -``` -│ -│ ▶ 重新编码 -│ -│ 重新封装 -│ -│ 字幕烧录 -│ -``` - ---- - -# 5. 卡片设计规范 - - -## 尺寸 - -圆角： - -``` -12px - 16px -``` - - -内边距： - -``` -16px - 24px -``` - - -卡片间距： - -``` -16px -``` - - ---- - -## 边框 - -使用弱边框： - -``` -1px -``` - - -颜色： - -浅色： - -``` -#E5E7EB -``` - - -深色： - -``` -#383838 -``` - - ---- - -## 阴影 - -使用轻微阴影。 - -目的： - -- 增加层次 -- 不产生浮夸效果 - - ---- - -# 6. 色彩规范 - - -## 默认主题 - -推荐： - -浅色主题 - - -原因： - -- 参数阅读更清晰 -- 长时间使用压力低 -- 符合现代工具软件趋势 - - ---- - -# 浅色主题 - - -## 背景 - -``` -#F5F6F8 -``` - - -## 卡片 - -``` -#FFFFFF -``` - - -## 输入区域 - -``` -#FAFAFA -``` - - -## 边框 - -``` -#E5E7EB -``` - - -## 主文字 - -``` -#111827 -``` - - -## 次文字 - -``` -#6B7280 -``` - - ---- - -# 深色主题 - - -## 背景 - -``` -#181818 -``` - - -## 卡片 - -``` -#202020 -``` - - -## 输入区域 - -``` -#2A2A2A -``` - - -## 主文字 - -``` -#FFFFFF -``` - - -## 次文字 - -``` -#AAAAAA -``` - - ---- - -# 7. 强调色 - - -## 主色 - -蓝色： - -``` -#1677FF -``` - - -用途： - -- 当前选中 -- 主按钮 -- 活跃状态 - - ---- - -## 状态颜色 - - -成功： - -``` -#52C41A -``` - - -运行： - -``` -#1677FF -``` - - -警告： - -``` -#FAAD14 -``` - - -失败： - -``` -#FF4D4F -``` - - ---- - -# 8. 字体规范 - - -## 默认字体 - -Windows: - -``` -Segoe UI -``` - - -跨平台： - -``` -Inter -Noto Sans -``` - - ---- - -## 字体大小 - - -窗口标题： - -``` -26px -``` - - -模块标题： - -``` -26px -``` - - -卡片标题： - -``` -22px - 24px -``` - - -正文： - -``` -20px - 22px -``` - - -辅助信息： - -``` -18px - 22px -``` - - ---- - -# 9. 控件设计 - - -## 按钮 - - -尺寸： - -高度： - -``` -36px - 40px -``` - - -圆角： - -``` -8px -``` - - -类型： - - -主要按钮： - -``` -蓝色背景 -白色文字 -``` - - -危险按钮： - -``` -红色背景 -白色文字 -``` - - -普通按钮： - -``` -灰色背景 -深色文字 -``` - - ---- - -## 输入框 - - -设计： - -- 白色/深色输入区域 -- 弱边框 -- 清晰焦点状态 - - -高度： - -``` -36px - 40px -``` - - ---- - -## 下拉选择 - - -用于： - -- 编码器选择 -- 输出格式 -- Preset - - -样式： - -与输入框统一。 - - ---- - -## 进度条 - - -用于： - -任务执行状态。 - - -要求： - -- 简洁 -- 清晰 -- 不抢占视觉 - - -示例： - -``` -████████──── 80% -``` - - ---- - -# 10. 状态展示 - - -任务状态使用颜色区分。 - - -``` -等待 - -灰色 - - -执行中 - -蓝色 - - -完成 - -绿色 - - -失败 - -红色 - - -取消 - -黄色 -``` - - -显示信息： - -``` -文件名称 - -操作类型 - -编码器 - -进度 - -FPS - -剩余时间 -``` - - ---- - -# 11. 图标设计 - - -风格： - -- 线性图标 -- 简洁 -- 单色 - - -避免： - -- 复杂插画 -- 多颜色图标 - - -使用场景： - -- 文件选择 -- 设置 -- 开始 -- 删除 -- 日志 - - ---- - -# 12. 间距规范 - - -基础间距： - -``` -8px -``` - - -常用： - -``` -8px -16px -24px -32px -``` - - -布局原则： - -组件之间： - -16px - - -区域之间： - -24px - 32px - - ---- - -# 13. 动效规范 - - -整体： - -轻量动画。 - - -允许： - -- 状态变化 -- 页面切换 -- 进度变化 - - -避免： - -- 大幅动画 -- 弹跳效果 -- 装饰动画 - - ---- - -# 14. FFmpeg-GUI 视觉目标 - - -最终效果： - -``` -打开软件 - -↓ - -快速选择功能 - -↓ - -配置参数 - -↓ - -执行任务 - -↓ - -查看状态 -``` - - -用户体验目标： - -- 参数清晰 -- 操作直接 -- 状态明确 -- 专业但不复杂 - - ---- - -# 总结 - -FFmpeg-GUI 使用： - -``` -Modern Flat Desktop UI - -+ -Card Layout - -+ -Fluent Design - -+ -低饱和色彩 - -+ -高信息密度 -``` - - -整体风格： - -> 一个现代化、专业、轻量的视频处理桌面工具。 \ No newline at end of file diff --git a/build.bat b/build.bat deleted file mode 100644 index 9b1c898..0000000 --- a/build.bat +++ /dev/null @@ -1,51 +0,0 @@ -@echo off -setlocal - -set "CLION_DIR=D:\JetBrains\CLion" - -set "PATH=%CLION_DIR%\bin\cmake\win\x64\bin;%CLION_DIR%\bin\mingw\bin;%PATH%" - -echo. -echo ======================================== -echo FFmpeg-GUI Build Script -echo ======================================== -echo. - -if not exist build ( - echo [1/3] Configuring... - cmake -B build -G "MinGW Makefiles" -S . - if errorlevel 1 ( - echo ERROR: CMake configuration failed! - exit /b 1 - ) -) else ( - echo [1/3] Build directory exists, skipping configure. -) - -echo. -echo [2/3] Building... -cmake --build build -if errorlevel 1 ( - echo ERROR: Build failed! - exit /b 1 -) - -echo. -echo [3/3] Copying runtime DLL... -if exist "%CLION_DIR%\bin\mingw\bin\libwinpthread-1.dll" ( - copy /y "%CLION_DIR%\bin\mingw\bin\libwinpthread-1.dll" build\ > nul - echo libwinpthread-1.dll copied. -) else ( - echo WARNING: libwinpthread-1.dll not found! -) - -echo. -echo ======================================== -echo Build succeeded! -echo Executable: build\ffmpeg-gui.exe -echo ======================================== -echo. -echo Run it: build\ffmpeg-gui.exe -echo. - -endlocal diff --git a/src/main.cpp b/src/main.cpp deleted file mode 100644 index 328479a..0000000 --- a/src/main.cpp +++ /dev/null @@ -1,5 +0,0 @@ -// -// Created by sansen on 2026/7/28. -// - -#include "main.h" diff --git a/src/main.h b/src/main.h deleted file mode 100644 index 789d4b0..0000000 --- a/src/main.h +++ /dev/null @@ -1,14 +0,0 @@ -// -// Created by sansen on 2026/7/28. -// - -#ifndef FFMPEG_GUI_MAIN_H -#define FFMPEG_GUI_MAIN_H - - -class main -{ -}; - - -#endif //FFMPEG_GUI_MAIN_H diff --git a/功能模块.md b/功能模块.md deleted file mode 100644 index fd5500b..0000000 --- a/功能模块.md +++ /dev/null @@ -1,419 +0,0 @@ -## 技术栈： -C++ + Dear ImGui + FFmpeg Library - -## 底层模块的划分： - -```text -UI层 - | -业务层 - | -FFmpeg封装层 - | -硬件/系统层 -``` ---- - -# FFmpeg-GUI 功能设计 - -## 1. 媒体信息分析（Media Analyzer） - -### 功能说明 - -解析输入媒体文件信息，为其他模块提供媒体数据。 - -### 支持信息 - -视频： - -* 编码格式 -* 分辨率 -* 帧率 -* 比特率 -* 色彩空间 -* HDR信息 -* 视频流数量 - -音频： - -* 编码格式 -* 声道 -* 采样率 -* 比特率 -* 音轨数量 - -字幕： - -* 字幕格式 -* 字幕语言 -* 字幕数量 - -输出： - -提供给： - -* 重新封装 -* 重新编码 -* 字幕烧录 - ---- - -# 2. 重新封装（Remux） - -## 功能说明 - -仅修改媒体容器，不改变媒体编码。 - -例如： - -``` -MKV → MP4 - -MOV → MP4 - -TS → MKV -``` - -## 操作流程 - -1. 选择输入文件 - -2. 选择输出格式 - -支持： - -* MP4 -* MKV -* MOV -* TS - -3. 选择媒体流处理 - -视频： - -* Copy -* 删除 - -音频： - -* Copy -* 删除 - -字幕： - -* Copy -* 删除 - -4. 开始任务 - -## 注意 - -重新封装不需要： - -* GPU选择 -* 编码参数 - -因为不存在编码过程。 - ---- - -# 3. 重新编码（Encoder） - -## 功能说明 - -重新压缩视频流。 - -支持： - -视频编码： - -* H264 -* H265 -* AV1 - -编码方式： - -* NVIDIA NVENC -* Intel QSV -* AMD AMF -* CPU Software Encoder - -## 操作流程 - -1. 选择输入文件 - -2. 选择输出格式 - -支持： - -* MP4 -* MKV - -3. 选择编码器 - -例如： - -``` -GPU: -RTX 4090 - -Encoder: -HEVC NVENC -``` - -4. 设置编码参数 - -基础： - -* 编码格式 -* 质量模式 -* Preset -* Profile -* Level - -视频： - -* 分辨率 -* 帧率 -* 比特率 - -音频： - -* Copy -* 重新编码 - -5. 开始任务 - ---- - -# 4. 字幕烧录（Subtitle Burn） - -## 功能说明 - -通过 FFmpeg Filter 将字幕渲染到视频。 - -字幕成为视频画面的一部分。 - -## 操作流程 - -1. 选择视频文件 - -2. 选择字幕文件 - -支持： - -* ASS -* SSA -* SRT - -3. 设置字幕参数 - -* 字体 -* 字号 -* 位置 -* 编码 - -4. 选择输出格式 - -5. 选择编码器 - -6. 开始任务 - ---- - -# 5. 硬件管理（Hardware Manager） - -## 功能 - -### GPU检测 - -支持： - -* NVIDIA -* Intel -* AMD - -获取： - -* GPU名称 -* 显存 -* 可用编码器 - -### 编码器检测 - -检测： - -``` -GPU - -↓ - -支持编码 - -↓ - -可用参数 -``` - -例如： - -``` -RTX 4090 - -支持: - -H264 NVENC - -HEVC NVENC - -AV1 NVENC -``` - -### 硬件优先级 - -例如： - -``` -1. NVIDIA GPU - -2. Intel QSV - -3. CPU -``` - ---- - -# 6. 任务管理（Task Manager） - -## 功能说明 - -管理 FFmpeg 工作任务。 - -## 功能 - -任务创建： - -* 添加任务 -* 设置任务参数 - -任务控制： - -* 开始 -* 暂停 -* 停止 -* 删除 - -状态： - -* 等待 -* 执行中 -* 已完成 -* 失败 -* 已取消 - -显示： - -* 当前文件 -* 操作类型 -* 编码器 -* 当前帧 -* FPS -* 进度 -* 剩余时间 - ---- - -# 7. FFmpeg核心封装层（新增） - -这个建议加入。 - -因为你使用 FFmpeg Library，不应该让业务直接调用： - -```cpp -avcodec_xxx() -avformat_xxx() -``` - -应该封装： - -``` -FFmpeg Core - -├── Decoder -├── Encoder -├── Muxer -├── Filter -└── MediaInfo -``` - -提供： - -``` -Encode() - -Remux() - -BurnSubtitle() - -Analyze() -``` - -上层不关心 FFmpeg API。 - ---- - -# 8. 软件设置 - -## 硬件设置 - -* GPU检测 -* GPU优先级 -* 默认编码器 - -## 输出设置 - -* 默认输出目录 -* 文件命名规则 - -## UI设置 - -* 主题 -* 深色/浅色 - ---- - -# 实现范围 - -## 核心必须 - -``` -媒体信息分析 - -FFmpeg Core封装 - -重新封装 - -重新编码 - -字幕烧录 - -硬件管理 - -任务管理 -``` - ---- - -程序内部： - -``` -Hardware Manager - | - ↓ -Encoder List - -hevc_nvenc -av1_nvenc -h264_qsv -libx265 -``` \ No newline at end of file diff --git a/设计文档.md b/设计文档.md deleted file mode 100644 index d817a73..0000000 --- a/设计文档.md +++ /dev/null @@ -1,503 +0,0 @@ -# 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 底层模块划分 - -```text -UI层（Dear ImGui） - | -业务层 - | -FFmpeg封装层 - | -硬件/系统层 -``` - -### 2.2 FFmpeg 核心封装层 - -不应该让业务直接调用底层 FFmpeg API： - -```cpp -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） - -**功能说明：** 仅修改媒体容器，不改变媒体编码。 - -```text -示例：MKV → MP4 | MOV → MP4 | TS → MKV -``` - -**操作流程：** - -1. 选择输入文件 -2. 选择输出格式（MP4、MKV、MOV、TS） -3. 选择媒体流处理 - -| 流类型 | 操作 | -|--------|------| -| 视频 | Copy / 删除 | -| 音频 | Copy / 删除 | -| 字幕 | Copy / 删除 | - -4. 开始任务 - -> ⚠ 重新封装不涉及编码，因此不需要 GPU 选择、编码参数。 - ---- - -### 3.3 重新编码（Encoder） - -**功能说明：** 重新压缩视频流。 - -**支持：** - -| 编码格式 | 编码方式 | -|----------|----------| -| H264、H265、AV1 | NVIDIA NVENC、Intel QSV、AMD AMF、CPU Software | - -**操作流程：** - -1. 选择输入文件 -2. 选择输出格式（MP4、MKV） -3. 选择编码器（如：RTX 4090 → HEVC NVENC） -4. 设置编码参数 - -| 类别 | 参数 | -|------|------| -| 基础 | 编码格式、质量模式、Preset、Profile、Level | -| 视频 | 分辨率、帧率、比特率 | -| 音频 | Copy / 重新编码 | - -5. 开始任务 - ---- - -### 3.4 字幕烧录（Subtitle Burn） - -**功能说明：** 通过 FFmpeg Filter 将字幕渲染到视频，字幕成为视频画面的一部分。 - -**操作流程：** - -1. 选择视频文件 -2. 选择字幕文件（ASS、SSA、SRT） -3. 设置字幕参数（字体、字号、位置、编码） -4. 选择输出格式 -5. 选择编码器 -6. 开始任务 - ---- - -### 3.5 硬件管理（Hardware Manager） - -**GPU 检测：** 支持 NVIDIA、Intel、AMD - -```text -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 封装 -重新封装 -重新编码 -字幕烧录 -硬件管理 -任务管理 -```