跳到主要内容

视频模板设计规范

一、模板设计原则​

1. 通用性原则​

  • 可配置性: 所有可变元素应该通过参数控制
  • 可扩展性: 支持未来功能添加
  • 兼容性: 支持多平台、多分辨率

2. 性能原则​

  • 渲染效率: 优化渲染速度
  • 资源占用: 控制内存和CPU使用
  • 批量友好: 支持高效批量生成

3. 美学原则​

  • 视觉统一: 保持品牌风格一致
  • 简洁明了: 避免过度设计
  • 用户友好: 符合目标受众审美

二、模板结构定义​

1. JSON配置格式​

{
  "template_id": "product_showcase_v1",
  "name": "商品展示模板",
  "description": "适用于电商商品展示的短视频模板",
  "version": "1.0.0",
  "author": "VideoMatic",
  "category": "ecommerce",
  "tags": ["产品", "电商", "展示"],

  "video_config": {
    "duration": 15,
    "resolution": {
      "width": 1080,
      "height": 1920
    },
    "fps": 30,
    "format": "mp4",
    "codec": "h264"
  },

  "assets": {
    "background_video": {
      "type": "video",
      "required": false,
      "default": "assets/default_bg.mp4",
      "description": "背景视频"
    },
    "background_music": {
      "type": "audio",
      "required": false,
      "default": "assets/default_bgm.mp3",
      "description": "背景音乐"
    }
  },

  "layers": [
    {
      "id": "background",
      "type": "video",
      "source": "{{background_video}}",
      "start_time": 0,
      "end_time": 15,
      "z_index": 1,
      "effects": [
        {
          "type": "blur",
          "intensity": 10
        },
        {
          "type": "brightness",
          "value": 0.7
        }
      ]
    },
    {
      "id": "product_image",
      "type": "image",
      "source": "{{product_image}}",
      "start_time": 0,
      "end_time": 15,
      "z_index": 10,
      "position": {
        "x": "center",
        "y": "center"
      },
      "size": {
        "width": "80%",
        "height": "auto"
      },
      "animations": [
        {
          "type": "fade_in",
          "start_time": 0,
          "duration": 0.5
        },
        {
          "type": "scale",
          "from": 0.9,
          "to": 1.0,
          "start_time": 0,
          "duration": 0.5,
          "easing": "ease_out"
        }
      ]
    },
    {
      "id": "product_name",
      "type": "text",
      "content": "{{product_name}}",
      "start_time": 1,
      "end_time": 15,
      "z_index": 20,
      "style": {
        "font_family": "PingFang SC",
        "font_size": 48,
        "font_weight": "bold",
        "color": "#FFFFFF",
        "stroke": {
          "color": "#000000",
          "width": 2
        },
        "shadow": {
          "color": "#000000",
          "blur": 5,
          "offset_x": 2,
          "offset_y": 2
        }
      },
      "position": {
        "x": "center",
        "y": 200
      },
      "animations": [
        {
          "type": "slide_from_bottom",
          "start_time": 1,
          "duration": 0.8
        }
      ]
    },
    {
      "id": "price",
      "type": "text",
      "content": "¥{{price}}",
      "start_time": 2,
      "end_time": 15,
      "z_index": 20,
      "style": {
        "font_family": "DIN",
        "font_size": 72,
        "font_weight": "bold",
        "color": "#FF4757"
      },
      "position": {
        "x": "center",
        "y": 1400
      },
      "animations": [
        {
          "type": "bounce_in",
          "start_time": 2,
          "duration": 0.6
        }
      ]
    }
  ],

  "audio": {
    "background_music": {
      "source": "{{background_music}}",
      "volume": 0.3,
      "fade_in": 1.0,
      "fade_out": 1.0
    },
    "narration": {
      "source": "{{narration_audio}}",
      "volume": 1.0,
      "required": false
    }
  },

  "variables": [
    {
      "name": "product_image",
      "type": "image",
      "required": true,
      "description": "商品图片",
      "validation": {
        "min_width": 800,
        "min_height": 800,
        "formats": ["jpg", "png", "webp"]
      }
    },
    {
      "name": "product_name",
      "type": "text",
      "required": true,
      "description": "商品名称",
      "validation": {
        "max_length": 30
      }
    },
    {
      "name": "price",
      "type": "number",
      "required": true,
      "description": "商品价格",
      "validation": {
        "min": 0,
        "max": 999999
      }
    },
    {
      "name": "background_video",
      "type": "video",
      "required": false,
      "default": "assets/default_bg.mp4"
    },
    {
      "name": "background_music",
      "type": "audio",
      "required": false,
      "default": "assets/default_bgm.mp3"
    }
  ],

  "transitions": [
    {
      "type": "fade",
      "duration": 0.5,
      "at": 0
    }
  ],

  "thumbnail": "thumbnails/product_showcase_v1.jpg",
  "preview_video": "previews/product_showcase_v1.mp4"
}

三、图层类型规范​

1. 视频图层 (Video Layer)​

必填字段:

{
  "id": "unique_id",
  "type": "video",
  "source": "path/to/video.mp4",
  "start_time": 0,
  "end_time": 10
}

可选字段:

{
  "z_index": 1,
  "position": {"x": 0, "y": 0},
  "size": {"width": 1080, "height": 1920},
  "opacity": 1.0,
  "effects": [],
  "animations": [],
  "loop": false,
  "speed": 1.0
}

支持的特效:

  • blur (模糊)
  • brightness (亮度)
  • contrast (对比度)
  • saturation (饱和度)
  • hue (色相)
  • grayscale (灰度)
  • sepia (复古)

2. 图片图层 (Image Layer)​

必填字段:

{
  "id": "unique_id",
  "type": "image",
  "source": "path/to/image.jpg",
  "start_time": 0,
  "end_time": 10
}

可选字段:

{
  "z_index": 10,
  "position": {"x": "center", "y": "center"},
  "size": {"width": "80%", "height": "auto"},
  "opacity": 1.0,
  "rotation": 0,
  "effects": [],
  "animations": []
}

支持的动画:

  • fade_in / fade_out
  • slide_from_left / slide_from_right / slide_from_top / slide_from_bottom
  • zoom_in / zoom_out
  • rotate
  • bounce_in / bounce_out
  • shake

3. 文字图层 (Text Layer)​

必填字段:

{
  "id": "unique_id",
  "type": "text",
  "content": "文字内容",
  "start_time": 0,
  "end_time": 10
}

样式配置:

{
  "style": {
    "font_family": "PingFang SC",
    "font_size": 48,
    "font_weight": "normal",  // normal, bold, lighter
    "color": "#FFFFFF",
    "align": "center",  // left, center, right
    "vertical_align": "middle",  // top, middle, bottom
    "line_height": 1.5,
    "letter_spacing": 0,
    "text_transform": "none",  // uppercase, lowercase, capitalize
    "stroke": {
      "color": "#000000",
      "width": 2
    },
    "shadow": {
      "color": "#000000",
      "blur": 5,
      "offset_x": 2,
      "offset_y": 2
    },
    "background": {
      "color": "#000000",
      "opacity": 0.5,
      "padding": 10,
      "border_radius": 5
    }
  }
}

文字动画:

{
  "animations": [
    {
      "type": "typewriter",
      "speed": 0.05,
      "start_time": 1
    },
    {
      "type": "word_by_word",
      "interval": 0.2,
      "start_time": 1
    }
  ]
}

4. 形状图层 (Shape Layer)​

支持的形状:

  • rectangle (矩形)
  • circle (圆形)
  • line (线条)
  • polygon (多边形)

配置示例:

{
  "id": "shape_1",
  "type": "shape",
  "shape": "rectangle",
  "start_time": 0,
  "end_time": 15,
  "properties": {
    "width": 200,
    "height": 100,
    "fill_color": "#FF4757",
    "stroke_color": "#FFFFFF",
    "stroke_width": 2,
    "border_radius": 10
  },
  "position": {"x": 100, "y": 100}
}

四、动画系统​

1. 支持的动画类型​

淡入淡出​

{
  "type": "fade_in",
  "start_time": 0,
  "duration": 0.5
}

滑动​

{
  "type": "slide_from_bottom",
  "start_time": 1,
  "duration": 0.8,
  "easing": "ease_out"
}

缩放​

{
  "type": "scale",
  "from": 0.8,
  "to": 1.0,
  "start_time": 0,
  "duration": 0.5,
  "easing": "ease_in_out"
}

旋转​

{
  "type": "rotate",
  "from": 0,
  "to": 360,
  "start_time": 0,
  "duration": 2,
  "loop": true
}

弹跳​

{
  "type": "bounce_in",
  "start_time": 2,
  "duration": 0.6
}

2. 缓动函数 (Easing)​

支持的缓动函数:

  • linear - 线性
  • ease - 标准缓动
  • ease_in - 加速
  • ease_out - 减速
  • ease_in_out - 先加速后减速
  • bounce - 弹跳效果
  • elastic - 弹性效果

五、变量与数据绑定​

1. 变量类型​

文本变量​

{
  "name": "title",
  "type": "text",
  "required": true,
  "default": "默认标题",
  "validation": {
    "min_length": 1,
    "max_length": 50,
    "pattern": "^[\\u4e00-\\u9fa5a-zA-Z0-9\\s]+$"
  }
}

数字变量​

{
  "name": "price",
  "type": "number",
  "required": true,
  "default": 0,
  "validation": {
    "min": 0,
    "max": 999999,
    "decimal_places": 2
  },
  "format": "¥{value}"
}

图片变量​

{
  "name": "product_image",
  "type": "image",
  "required": true,
  "validation": {
    "min_width": 800,
    "min_height": 800,
    "max_size": 5242880,  // 5MB
    "formats": ["jpg", "png", "webp"]
  }
}

视频变量​

{
  "name": "clip",
  "type": "video",
  "required": false,
  "validation": {
    "max_duration": 30,
    "formats": ["mp4", "mov"],
    "max_size": 104857600  // 100MB
  }
}

音频变量​

{
  "name": "voiceover",
  "type": "audio",
  "required": false,
  "validation": {
    "formats": ["mp3", "wav"],
    "max_duration": 60
  }
}

2. 数据绑定语法​

基础绑定:

{
  "content": "{{product_name}}"
}

带格式化:

{
  "content": "¥{{price | number:2}}"
}

条件绑定:

{
  "content": "{{discount ? '特价' : '正价'}}"
}

计算绑定:

{
  "content": "¥{{price * 0.8}}"
}

六、模板分类与命名规范​

1. 分类体系​

templates/
├── ecommerce/              # 电商类
│   ├── product_showcase/   # 商品展示
│   ├── promotion/          # 促销活动
│   └── review/             # 用户评价
├── education/              # 教育类
│   ├── course_intro/       # 课程介绍
│   ├── knowledge_card/     # 知识卡片
│   └── tutorial/           # 教程
├── marketing/              # 营销类
│   ├── brand/              # 品牌宣传
│   ├── event/              # 活动推广
│   └── announcement/       # 通知公告
└── social/                 # 社交类
    ├── vlog/               # Vlog
    ├── story/              # 故事
    └── quote/              # 名言金句

2. 命名规范​

格式: {category}_{type}_{style}_v{version}

示例:

  • ecommerce_product_minimal_v1
  • education_course_modern_v2
  • marketing_event_colorful_v1

规则:

  • 全小写
  • 下划线分隔
  • 版本号从v1开始

七、模板开发流程​

1. 需求分析​

  • 明确目标用户
  • 确定使用场景
  • 收集参考案例

2. 设计阶段​

  • 制作设计稿（Figma/Sketch）
  • 确定可变元素
  • 规划动画效果

3. 开发阶段​

  • 编写JSON配置
  • 准备默认素材
  • 实现渲染逻辑

4. 测试阶段​

  • 功能测试
  • 性能测试
  • 多数据测试

5. 发布阶段​

  • 生成预览视频
  • 编写使用文档
  • 上架模板市场

八、模板优化建议​

1. 性能优化​

  • 压缩默认素材
  • 减少图层数量
  • 优化动画复杂度
  • 使用缓存机制

2. 兼容性优化​

  • 支持多分辨率
  • 适配不同平台
  • 处理边界情况
  • 优雅降级

3. 用户体验优化​

  • 提供清晰的变量说明
  • 设置合理的默认值
  • 给出数据验证提示
  • 支持预览功能

九、模板质量标准​

1. 必须满足​

  • ✅ 配置文件完整无误
  • ✅ 所有必填变量有验证
  • ✅ 默认素材可用
  • ✅ 渲染成功率 > 95%
  • ✅ 平均渲染时间 < 2分钟

2. 推荐满足​

  • ⭐ 提供3个以上示例数据
  • ⭐ 有详细的使用文档
  • ⭐ 支持多种尺寸
  • ⭐ 动画流畅自然
  • ⭐ 视觉设计专业

更新记录​

  • 2025-01-08: 初始版本，完成模板设计规范