KVI 视觉风格系统

# KVI 视觉风格系统

KVI 是一套通用视觉约束方法，用于网页、HTML 版 PPT、数据报告、展示页、个人作品页以及未来可能导出为 PPT 的视觉内容。

它不是某一个网站的风格说明，也不是品牌 Logo 规范。它解决的是更基础的问题：当大模型生成一个视觉产物时，如何避免“通用 AI 审美”，让页面有克制、层级、密度、材质和可读性。

> **使用说明（给 AI）**：生成网页、HTML 版 PPT、数据报告、图表、展示页等视觉产物前，先确认按 KVI 规范执行。本规范中的色值、字号、间距、层级是硬约束，优先级高于模型默认审美；拿不准时按第 0 节路由表读对应章节，宁可精简也不要违背约束。
>
> **使用说明（给人）**：这份文档写给 AI 看，不需要懂里面的技术细节。把全文复制给你的 AI 工具，告诉它“按这份规范生成 XX”即可。想快速判断一个页面哪里“过度设计”，读第 2 节和第 11 节就够了。

核心判断：

> 设计不是加法，是选择。每一个元素都需要有理由。

---

## 0. 信息路由：需要什么就读哪一节

这份文档较长，未来给大模型使用时，不需要每次完整阅读。按任务选择对应小节即可。

| 需求 | 优先阅读 |
| --- | --- |
| 想快速理解 KVI 气质 | 1. 核心原则 |
| 判断一个页面是否“过度设计” | 2. 克制与视觉原则 |
| 配色、强调色、深浅模式 | 3. 色彩系统 |
| 字号、字重、标题层级 | 4. 字体系统 |
| 间距、留白、页面密度 | 5. 空间密度 |
| 玻璃拟态、材质、噪点 | 6. 材质与玻璃纵深 |
| 移动端、窄屏、中文换行 | 7. 响应式与中文排版 |
| 图表、数据图、逻辑图 | 8. 图表与图示 |
| 按钮、卡片、标签、代码块 | 9. 组件规则 |
| 做网页 / HTML PPT / PPT 约束 | 10. 场景适配 |
| 避免常见 AI 网页问题 | 11. 反模式 |

---

## 1. 核心原则

KVI 由五条核心原则和两条执行规则组成。

### 1.1 五条核心原则

| 原则 | 一句话 |
| --- | --- |
| 克制优雅 | 问不出存在理由的元素就删除 |
| 灰阶为基 | 灰蓝建结构，青绿做标点 |
| 严格层级 | 字号、字重、间距必须形成稳定扫描路径 |
| 玻璃纵深 | 用光、透明度和层叠表达前后关系 |
| 合适间距 | 信息要紧凑，页面要有呼吸 |

### 1.2 两条执行规则

- 响应自适：字号、间距、网格和中文换行必须适应不同容器。
- 图示穿插：关系、流程、数据优先用图示表达，不堆长段落。

### 1.3 视觉决策顺序

面对任何设计选择，按这个顺序判断：

1. 是否有存在理由？
2. 0.5 秒内能不能看出最重要的信息？
3. 色彩是否足够克制？
4. 画面是否有前后层次？
5. 信息密度和留白是否平衡？

---

## 2. 克制与视觉原则

### 2.1 克制不是简陋

克制是选择后的精致，不是偷懒后的空白。

克制的设计通常具备：

- 一个强调色被用到位；
- 圆角、阴影、边框来自统一规则；
- 装饰很少，但每一处都有节奏；
- 首屏 0.5 秒内能看出主次；
- 页面即使删掉装饰，结构仍然成立。

简陋的设计通常表现为：

- 全部灰色但没有层级；
- 没有材质、没有深度、没有节奏；
- 所有字差不多大；
- 卡片、按钮、图表像默认样式拼在一起。

### 2.2 四象限判断法

任何元素都问两个问题：

1. 它是否传达信息？
2. 它是否建立必要氛围？

| | 传达信息 | 不传达信息 |
| --- | --- | --- |
| 建立氛围 | 保留并强化 | 谨慎保留，控制数量 |
| 不建立氛围 | 保留但简化 | 删除 |

### 2.3 装饰规则

- 装饰必须有节奏，不能因为空就加。
- 一种装饰手法用到底，不同时用多套语言表达同一个层次。
- 装饰不抢内容，背景装饰纹理的透明度通常不超过 0.08。
- 一个页面的装饰类型尽量不超过 3 种。

---

## 3. 色彩系统

### 3.1 灰阶画布

大面积背景不要用纯白。微妙灰度差可以自然建立层级。

色彩系统共 7 个色值，黑色与白色是默认中性色：

| 序号 | 层级 | 推荐值 | 用途 |
| --- | --- | --- | --- |
| 1 | 黑色 | `#000000` | 正文、标题（默认中性色，文字只用它） |
| 2 | 白色 | `#ffffff` | 深色底上的文字（默认中性色，不做大面积面板底） |
| 3 | 画布 | `#f7f5ef` | 暖白画布，约占页面 85% 结构底 |
| 4 | 灰阶 | `#999999` | 次要文字、图标、辅助信息 |
| 5 | 蓝灰 | `#515a75` | 边框、分割线、次级标签 |
| 6 | 强调 | `#00585e` | 链接、重点数字、交互高亮 |
| 7 | 高亮底 | `#d9e9ea` | 选中背景、标签底色 |

分工：正文和标题使用纯黑 `#000000`，彩色永远只做标点、不承担正文；面板不使用白色，而是用画布色 `#f7f5ef` 铺底、靠蓝灰边框和轻阴影与页面区分；蓝灰 `#515a75` 负责结构线（边框、分割线）和次级标签；彩色只用强调 `#00585e` 一支，高亮底 `#d9e9ea` 是它的极浅同族色，用于选中和标签背景。色块、背景和核心视觉元素不得使用纯黑色。

相邻区域的灰度差 2%-4% 就足够，不需要重边框或重阴影。

### 3.2 彩色比例

色彩不是越多越丰富。KVI 推荐：

- 85%：灰阶、画布、文字、线条、阴影；
- 10%：强调色的低饱和变化；
- 5%：高亮底或状态色。

简化原则：

- 一个强调色；
- 一个高亮底；
- 功能色只用于明确语义；
- 不使用彩虹调色盘。

### 3.3 强调色

推荐低饱和蓝绿色，色相约 183°，锁定同一色相、只调明度与饱和度：

```css
--accent: #00585e;                 /* 强调色 PANTONE 19-4524 Shaded Spruce */
--accent-soft: rgba(0, 88, 94, 0.10);
--accent-2: #515a75;               /* 蓝灰，边框 / 分割线 / 次级标签 */
--highlight: #d9e9ea;              /* 极浅同族色，选中背景 / 标签底色 */
```

不引入其他色相：暖赭 / 陶土色与冷蓝绿跨色相，且是 AI 生成设计的高频配色，保留会显得像模板产物，一律不使用。

强调色只用于：

- 当前状态；
- 关键数字；
- CTA；
- hover / active；
- 图表重点；
- 图谱或流程中的当前关系。

### 3.4 深色模式

深色模式不是简单反转。

推荐深色层级：

```css
--bg-0: #0a0a0a;
--bg-1: #111111;
--bg-2: #161616;
--bg-3: #1c1c1c;
--fg-0: #fafafa;
--fg-1: #d4d4d4;
--fg-2: #8a8a8a;
--line: rgba(255,255,255,0.06);
```

深色模式下彩色要降低饱和度 10%-20%，避免刺眼。

### 3.5 色彩反模式

- 纯白大面积背景；
- 纯黑色块或纯黑背景；
- 同页使用 3 个以上彩色；
- 状态色和品牌色混淆；
- 大面积蓝紫渐变；
- 彩虹色图表。

---

## 4. 字体系统

### 4.1 五级字号系统

一个页面、报告或 HTML PPT 中，字号层级最多 5 级。下表给出每个层级的字号范围，最小值是窄屏下限，最大值是大屏推荐值：

| 层级 | 用途 | 字号范围 | 字重 |
| --- | --- | --- | --- |
| Display | 封面 / 首屏大标题 | 64-120px | 700 |
| Headline | 区块标题 / 大数字 | 36-72px | 700 |
| Subtitle | 副标题 / 卡片标题 | 24-32px | 400 |
| Body | 正文 / 列表 | 16-22px | 400 |
| Caption | 页码 / 时间 / 辅助信息 | 13-15px | 400 |

一个视图通常 3-4 个层级就够。超过 5 个，扫描路径会崩。

### 4.2 Fluid 字号

字号不要用裸 `vw`，必须有 `clamp()` 下限。

```css
:root {
  --fs-display:  clamp(64px, 4vw + 32px, 120px);
  --fs-headline: clamp(36px, 2.5vw + 24px, 72px);
  --fs-subtitle: clamp(24px, 1vw + 20px, 32px);
  --fs-body:     clamp(16px, 0.4vw + 14px, 22px);
  --fs-caption:  clamp(13px, 0.2vw + 12px, 15px);
}
```

中文正文下限 16px，Caption 下限 13px。

### 4.3 三权重系统

不要用满 9 个字重。三档足够，每档取单值：

| 档位 | 字重 | 用途 |
| --- | --- | --- |
| Read | 400 | 正文阅读、卡片与区块标题 |
| Emphasize | 550 | 同级强调、小标签 |
| Announce | 700 | 大标题、强宣告 |

同一段文字最多出现 2 种字重。

### 4.4 层级的五个向量

主次不是只靠字号建立，而是 5 个向量共同作用：

- Scale：字号；
- Weight：字重；
- Spacing：间距；
- Tracking：字距；
- Alignment：对齐。

一个 dominant 元素至少要有 2 个向量同向工作，才算真的突出。

### 4.5 字距与行高

```text
Display / Headline: line-height 1.1-1.2
Subtitle:           line-height 1.3-1.4
Body:               line-height 1.6-1.8
Caption:            line-height 1.4-1.5
```

字距：

- 大标题可略微收紧；
- 正文不加负字距；
- Caption 和全大写英文可适度增加字距。

### 4.6 字体选择

标题字体可以有性格，正文字体必须干净可读。

中文推荐：

```css
font-family:
  -apple-system, BlinkMacSystemFont, "SF Pro Display",
  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
  "Noto Sans SC", sans-serif;
```

避免把 Inter 作为唯一字体，这会让页面显得像通用 AI 模板。

---

## 5. 空间密度

### 5.1 8px 基础网格

所有间距基于 8px 倍数。

| 间距 | 用途 |
| --- | --- |
| 4px | 图标与文字、密切行内元素 |
| 8px | 紧凑列表、输入框内部 |
| 12px | 紧凑卡片内边距 |
| 16px | 标准卡片内边距 |
| 24px | 卡片间距、区块内分组 |
| 32px | 主要区块间 |
| 48px | 页面段落级分隔 |
| 64px | 首屏 / 封面级留白 |

### 5.2 内紧外松

同一组内容靠近，不同组内容拉开。

推荐：

```text
卡片内 padding: 12-16px
卡片间 gap:     24-32px
区块间 margin:  48-64px
```

### 5.3 分隔优先级

从优雅到粗暴：

1. 间距；
2. 背景色差；
3. 极淡分隔线；
4. 边框；
5. 重阴影。

边框和线条不应承担所有分隔任务。

### 5.4 密度类型

| 密度 | 特征 | 适用 |
| --- | --- | --- |
| 高密度 | 小字号、紧间距、多列 | 数据表、后台、代码编辑 |
| 中密度 | 标准字号、标准间距 | 大多数页面 |
| 低密度 | 大字号、大留白、单列 | 封面、展示页、海报 |

同一页面内密度要一致。首屏可以低密度，内容区可以中密度，但不能随机混用。

---

## 6. 材质与玻璃纵深

### 6.1 玻璃效果本质

玻璃拟态不是“加 blur”，而是用光学隐喻创造空间层级。

三个条件：

- 半透明；
- 背后内容被模糊；
- 背景本身有层次可被模糊。

### 6.2 三层结构

```text
Layer 1: 背景层   背景、光斑、纹理、图像
Layer 2: 玻璃层   半透明、模糊、边框、轻阴影
Layer 3: 内容层   清晰文字、图标、图表
```

### 6.3 参数建议

| 参数 | 建议 |
| --- | --- |
| blur | 10-24px 常规，不超过 24px；悬浮导航取 18-22px，常规面板 16px，小件 10-14px |
| 面板底色不透明度 | 0.6-0.85，用画布色带 alpha（如 `#f7f5efb8`），不用纯白 |
| 装饰纹理 / 噪点 | opacity 0.03-0.08 |
| 边框 | 1px，透明度 0.15-0.25（蓝灰线 `rgba(81,90,117,.22)` 为基准） |
| 阴影 | 轻，不要让卡片像漂浮物 |

### 6.4 适合使用玻璃的地方

- 悬浮导航；
- 信息面板；
- 图表注释层；
- 弹窗；
- 展示页中的重点区域。

### 6.5 不适合使用玻璃的地方

- 纯白背景上强行玻璃；
- 多层玻璃嵌套；
- 内容非常复杂的面板；
- 需要高可读性的长文主体。

---

## 7. 响应式与中文排版

### 7.1 容器查询优先

组件应该优先看自己的容器，而不是只看视口。

```css
.card-wrapper {
  container-type: inline-size;
}

@container (max-width: 480px) {
  .card-title { font-size: 1.25rem; }
}
```

媒体查询用于页面级 grid 切换，容器查询用于组件级自适应。

### 7.2 中文换行

中文排版需要：

```css
.text-content {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-indent: 0;
}
```

正文长段可用：

```css
text-wrap: pretty;
```

### 7.3 Grid 防爆

```css
.card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card {
  min-width: 0;
  overflow-wrap: anywhere;
}
```

没有 `min-width: 0`，长文本会撑爆网格。

### 7.4 行长

正文容器建议：

```css
.long-content {
  max-width: 65ch;
}
```

中文约 30-40 个汉字一行更舒适。

---

## 8. 图表与图示

### 8.1 标题必须假设驱动

图表标题必须表达结论，而不是只描述主题。

| 不推荐 | 推荐 |
| --- | --- |
| AI 视频模型对比 | 长镜头动作一致性首次超过真人实拍 |
| 2024 年营收数据 | Q3 单季增速首次反超头部对手 |
| 团队结构 | 三层管理压缩为两层后决策提速 |

判断标准：把标题单独拿出来，读者是否能立刻知道结论。

### 8.2 11 类常用图表

| 类型 | 适用场景 | KVI 表达 |
| --- | --- | --- |
| Time-Series | 指标随时间变化 | 单色折线 + 灰阶网格 + 强调拐点 |
| Gap / Funnel | 转化流失、目标差距 | 灰阶阶梯，关键流失用强调色 |
| Before / After | 改造前后变化 | 左右对称，差值用强调色 |
| Donut | 构成占比 | 不超过 6 块，最大块强调 |
| Scale Infographic | 多维属性对比 | 数字 + 单位，不堆图标 |
| Timeline | 时间顺序 | 1px 主轴，关键节点强调 |
| Comparison Split | 两方案逐项对比 | 维度居中，优胜项轻强调 |
| 2x2 Matrix | 双维度战略判断 | 灰线象限，推荐象限轻底色 |
| Benchmark Table | 多对象多维度 | 不超过 5 列，关键单元格文字强调 |
| Waterfall | 增减归因 | 起止强调，中间灰阶 |
| Cover Slide | 封面 | Display 标题 + 元数据 + 大留白 |

### 8.3 逻辑图选择

| 内容 | 推荐图示 | 避免 |
| --- | --- | --- |
| 因果链 | Timeline + 箭头 | 纯文字 A 导致 B |
| 决策分支 | 2-3 层树形图 | 嵌套文字 |
| 系统架构 | 分层方框 + 细线 | 大段 bullet |
| 流程步骤 | 编号 + 横向流转 | 纯数字列表 |
| 概念关系 | 2x2 / Venn / 网络图 | 段落解释 |

### 8.4 信息密度上限

| 图表 | 上限 |
| --- | --- |
| 折线 / 柱状 | 12 个数据点，4 处标注 |
| 饼图 / 环图 | 6 块，6 个标签 |
| 表格 | 7 行 x 5 列 |
| 流程图 | 7 步，每步不超过 8 字 |
| 2x2 | 8 个散点 |

超过上限就拆图。

### 8.5 图表配色

- 单系列：强调色 + 灰阶；
- 双系列：强调色 + 灰阶，不要两个彩色互打；
- 多系列：同色相不同明度；
- 强调单点：全图灰阶，只让关键点使用强调色。

---

## 9. 组件规则

### 9.1 卡片

卡片用于承载独立信息对象。

规则：

- 圆角来自统一 token；
- 边框极轻；
- 阴影不超过两层；
- 卡片内部紧凑，卡片之间宽松；
- 不做卡片套卡片。

### 9.2 按钮

按钮只用于明确动作，不用于装饰。

规则：

- 主按钮只保留一个；
- 次按钮用边框或文字按钮；
- 图标按钮需要有 hover / tooltip；
- 按钮里的文字不能换成两行后挤爆。

### 9.3 标签

标签用于分类、状态、元信息。

规则：

- 小字号；
- 轻边框；
- 少量使用强调色；
- 不要把每个标签做成不同颜色。

### 9.4 代码块

代码块用于展示 Markdown、Prompt、配置或代码。

规则：

- 背景可以是浅灰或深灰，但必须和页面整体一致；
- 使用等宽字体；
- 行高 1.6-1.8；
- 内容较长时滚动；
- 不在代码块内使用过小字号。

---

## 10. 场景适配

### 10.1 Web 页面

适合：

- 个人网站；
- 产品展示页；
- 知识系统；
- 报告型页面；
- 数据仪表板的展示层。

关键：

- 首屏建立主次；
- 页面不需要每块都是卡片；
- 重点信息用图示穿插；
- 长内容控制行长。

### 10.2 HTML 版 PPT

适合用 KVI 做 HTML slides。

规则：

- 每页只表达一个判断；
- 标题是结论，不是主题；
- Display / Headline 用于页级主信息；
- 单页图表不超过一个主要图；
- 页脚元信息用 Caption；
- 色彩只强调一个关键点。

### 10.3 传统 PPT 约束

如果需要把 KVI 迁移到 PPT：

- 用浅灰背景替代纯白；
- 标题用稳定字号，不每页随机变化；
- 图表改掉默认配色和网格；
- 页边距统一；
- 封面允许低密度，其余页面保持中密度；
- 每页只用一个强调色。

### 10.4 报告和数据页

规则：

- 数据图标题写结论；
- 表格不超过 7x5；
- 关键数字用 Headline；
- 单页只强调一个关键指标；
- 大段文字拆成图示、表格或注释。

---

## 11. 反模式

### 11.1 视觉反模式

- 彩虹渐变背景；
- 随机圆角；
- 所有元素等大等重；
- 大面积纯白；
- 过度蓝紫科技感；
- 为炫技而动效；
- 默认 Excel 图表直接搬上页面。

### 11.2 排版反模式

- 单页 6 种以上字号；
- 中文正文小于 16px；
- `vw` 字号没有 `clamp()`；
- 长标题没有平衡换行；
- 正文行长过长；
- 文字挤在卡片边缘。

### 11.3 图表反模式

- 图表标题只是主题；
- 图例离图太远；
- 同一图中多个彩色互抢；
- 3D 图表；
- 用装饰性 emoji 当图标；
- 数据点过多还不拆图。

### 11.4 组件反模式

- 卡片套卡片；
- 所有信息都装进卡片；
- hover 效果过重；
- 代码块与页面风格割裂；
- 标签颜色过多；
- 按钮没有明确动作。

---

KVI 视觉风格系统 · v1.0 · 2026-08-09 · Kevin