5.7 KiB
5.7 KiB
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
+
低饱和色彩
+
高信息密度
整体风格：
一个现代化、专业、轻量的视频处理桌面工具。