文件預覽
範本在 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 等格式可用複製貼上或後續匯入匯出功能轉換。