文档预览
模板在 UUIDE 中打开后的实际效果（与导出 PDF 同貌）。
设计规范
产品 / 设计系统： · 规范版本：V . · 生效日期：2026- 月- 日 · 维护人： · 适用端：Web / 桌面 / 移动
一、栅格与布局
| 布局项 | Web 端规格 | 移动端规格 | 说明 |
|---|---|---|---|
| 内容区最大宽度 | |||
| 栅格列数 / 列间距 | |||
| 页面左右安全边距 | |||
| 断点定义 | 跨端回流的触发边界 |
二、色彩令牌
| 令牌名 | 色值 | 使用场景 | 无障碍要求 |
|---|---|---|---|
| primary / 主色 | 主操作、选中态、链接 | 对文字对比度 ≥ 4.5:1 | |
| neutral / 中性色阶 | 文本、边框、分割线、底色 | 正文 ≥ 4.5:1 | |
| success / warning / danger | 成功、警示、 destructive 操作 | 图标色 ≥ 3:1 | |
| 背景 / 表面色 | 页面、卡片、弹层分层 |
禁止在稿中直接吸色写死十六进制值；一律引用令牌名。新增颜色须先补充令牌定义并经设计评审，再投入使用。
三、文字排版
| 文字层级 | 字号 / 行高 | 字重 | 字间距 | 用途 |
|---|---|---|---|---|
| 展示型标题 | 营销页主标题 | |||
| 页面标题 H1 | 页面名称 | |||
| 区块标题 H2 / H3 | 卡片与分组标题 | |||
| 正文 / 辅助文字 | 内容与说明 |
四、核心组件规格
4.1 按钮
| 规格项 | 主按钮 | 次按钮 | 文字按钮 |
|---|---|---|---|
| 高度 / 圆角 | |||
| 字号 / 字重 | |||
| 禁用态 |
4.2 输入框
- 高度 px，圆角 px，内边距 px；
- 状态五态：默认 / 聚焦 / 报错 / 禁用 / 只读，样式定义见状态表。
五、状态定义与命名约定
| 组件 | 默认态 | 悬停 / 聚焦 | 按下 / 激活 | 禁用 / 加载 |
|---|---|---|---|---|
| 按钮 | ||||
| 输入框 | ||||
| 列表项 |
命名约定
- 组件命名：业务前缀 + 组件名 + 变体 + 状态，例： ；
- 图层命名与开发组件一一对应，禁用「副本 / 图层 1」等默认名。
规范变更须经设计评审并升版本号，同步通知全体设计与研发。
怎么使用
- 1下载安装 UUIDE 桌面应用（官网首页免费获取）
- 2打开 UUIDE，进入首页「模板库」标签，找到本模板
- 3点击「使用」并选择目标项目——模板会拷贝为项目里的普通文档
- 4随意编辑文字、表格与图片，完成后可导出 PDF
常见问题
- 这个模板是免费的吗？
- 免费，可商用。UUIDE 官方模板全部免费提供，个人或商业场景均可放心使用。
- 模板内容可以修改吗？
- 可以。「使用」会把模板拷贝成你项目里的普通文档，文字、表格、图片都能直接编辑。
- 能导出成 PDF 或 Word 吗？
- UUIDE 内可一键导出 PDF（与预览同貌）；Word 等格式可用复制粘贴或后续导入导出能力转换。