init project

2026-07-28 19:43:09 +08:00
parent 236d28f18f
commit 2f5172cd62
7 changed files with 1800 additions and 0 deletions
@@ -0,0 +1,799 @@
+# 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
+
+
+低饱和色彩
+
+
+高信息密度
+```
+
+
+整体风格：
+
+> 一个现代化、专业、轻量的视频处理桌面工具。