ffmpeg-gui/UI设计.md

# 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

+
低饱和色彩

+
高信息密度
```


整体风格：

> 一个现代化、专业、轻量的视频处理桌面工具。