# yonyou-html-presentation

**Repository Path**: leftxiaojun/yonyou-html-presentation

## Basic Information

- **Project Name**: yonyou-html-presentation
- **Description**: YonSuite风格HTML演示文稿生成规范
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-21
- **Last Updated**: 2026-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# HTML Presentation（用友风格 HTML 演示文稿）

用友风格的 HTML 演示文稿制作规范与技能指南，专注于 YonSuite 品牌风格的 PPT 风格网页演示文稿开发。

## 项目简介

本项目提供了一套完整的 HTML 演示文稿制作规范，涵盖设计理念、配色体系、字体规范、布局规范等内容，帮助开发者快速创建具有用友品牌风格的演示文稿。

## 设计理念

项目遵循 YonSuite 官方设计共性规则，采用白底方案为主，提供专业的企业级演示文稿解决方案。

## 核心规范内容

### 配色体系

- **品牌主色**：红、白、灰三色搭配
- **色调占比**：合理的三色搭配比例
- **渐变规则**：箭头渐变等视觉元素规范
- **图表配色**：统一的图表配色方案

### 字体规范

- 字号层级系统
- 行间距规范
- 禁止使用规则

### 布局规范

- 网格与页边距
- 对齐规则
- 留白原则
- 图片使用规范

### 页面类型

| 类型 | 说明 |
|------|------|
| Hero Slide | 封面/首页 |
| Pain/Solution | 痛点/解决方案双栏对比 |
| Feature Cards | 能力网格 |
| Architecture | 架构图 |
| Scenarios | 场景展示 |
| YonSuite 能力总览 | 白底卡片风 |
| End Slide | 结束页/致谢页 |

### 装饰元素

- 三色短线段（标题装饰）
- 几何装饰切片（左上角）
- 网格纹理背景（底部）
- 右上角圆点序列（页码/步骤指示）
- 左上角品牌 Logo
- SVG Icons

### 可选增强效果

- Canvas 粒子动画背景
- 悬浮发光效果

## Logo 规范

- Logo 嵌入规范（减少外部依赖）
- Base64 嵌入规范
- 常见问题排查（PNG 签名检查、IDAT 解压验证）

## 使用场景

适用于创建：

- 企业产品演示文稿
- 技术架构展示
- 解决方案介绍
- 产品功能演示
- 培训教程 slides

## 技术栈

- HTML5
- CSS3
- SVG（矢量图标）
- Canvas（可选动画效果）

## 快速开始

请参考 SKILL.md 文件中列出的详细设计规范进行开发，保持演示文稿的一致性和专业性。

## 贡献指南

欢迎提交 Pull Request 或创建 Issue。请遵循项目中的设计规范进行开发。

## 许可证

请查看 LICENSE 文件了解详情。