网页视觉品质原则
AI 能生成功能完整的网页，但默认产物总有一种"模板味"——均匀对称、全灰白底、一个蓝色强调。功能全对，看起来就是不像人做的。
为什么 AI 生成的网页一眼就能看出来？ 缺的不是功能，是视觉约束——让每个视觉选择都有依据的规矩。这份指南给出 10 条约束，照着做，页面有质感，不像模板。
来源：Refactoring UI（Wathan & Schoger，Tailwind CSS 作者）、Material Design 3、UI/UX Pro Max 实践。
同一个虚构产品，两版页面对照——上面是 AI 默认产物，下面是按下面 10 条约束重做。看观感差别，再看约束怎么落到具体选择上。
1. 视觉层次：不是什么东西都一样大
核心： 重要和不重要的东西，视觉上要有明显差别。靠字重和颜色拉开层次，不只靠字号。
常见错误： 页面从上到下全是差不多大的字，用户扫一眼不知道看哪。
怎么让 AI 做：
- 一个页面最多三级层次：最想让人看的一眼看到 → 次要信息 → 辅助信息
- 强调用字重（600-700），不用只放大字号
- 弱化用颜色（浅灰），不是缩小字号
- 想强调一个东西，先弱化它周围的东西
2. 色彩系统：不是只用一个品牌色
核心： 做网页至少需要 3 类颜色——中性灰阶（8-10 级）、品牌主色（5-10 级深浅）、语义色（成功绿/警告黄/错误红）。
常见错误： 一个蓝色当按钮、当链接、当标题、当强调——页面花成一片。灰色只有 #ccc 和 #333 两档。
怎么让 AI 做：
- 中性色用"有色灰"——偏蓝的灰显冷，偏黄的灰显暖。纯灰（#888）没质感
- 品牌色准备深浅 5-10 级。深色做按钮背景，浅色做选中态
- 60-30-10 法则：60% 中性背景色、30% 次要色（卡片/面板）、10% 品牌强调色
- 主按钮上的白字，降低一点不透明度（0.9）比纯白更高级
3. 间距系统：间距一致，页面才会有"气质"
核心： 所有间距按固定倍数来——4px 的倍数或 8px 的倍数。不出现"差不多"的间距。
常见错误： 这个卡片 padding 是 18px，那个是 22px——肉眼看不出区别，但脑子会觉得"哪里不对"。
怎么让 AI 做：
- 定一个间距体系：比如 4、8、12、16、24、32、48、64、96（px）
- 所有 margin、padding、gap 只从这组数字里选
- 宁可先多留白，再慢慢减——白太多显空，白太少显挤，后一种更难救
- 元素间距别暧昧：要么明显在一起（近），要么明显分开（远）。不远不近最难受
4. 排版：字选对了，页面高级一半
核心： 最多用两种字体。一种标题、一种正文。字号有明确层级，行高跟字号配套。
常见错误： 正文字太小（14px 以下）、行太密（行高 1.2）、行长太长（一屏扫不完一行）。
怎么让 AI 做：
- 正文字号不低于 16px，行高 ≥ 1.75（本站约定值，与交付标准门禁一致）
- 每行控制在 45-75 个字符（中文约 20-35 个字）
- 大字号行高收紧（标题 ≈1.1-1.3），小字号行高放宽
- 字重不要太轻——正文 400、强调 600、标题 700。300 以下的字重不要在 UI 上大面积用（看起来像缺墨）
5. 深度与阴影：让页面有前后关系
核心： 阴影不是"加个灰色模糊"。好的阴影模拟光从上方打下来——有垂直偏移、有多层叠加。
常见错误： 全页面只有一个 box-shadow: 0 0 10px rgba(0,0,0,0.1) ——没方向、没层级、像贴纸。
怎么让 AI 做：
- 阴影分四级：小（按钮悬浮）→ 中（卡片）→ 大（弹出层）→ 最大（对话框）
- 每级阴影两层叠加：一层紧的（偏移小、暗）做轮廓 + 一层松的（偏移大、淡）做氛围
- 垂直偏移：光从正上方来，阴影往下偏（
0 4px不是0 0） - 不要把阴影当边框用——如果页面上到处是阴影，就没有东西"浮起来"了
6. 圆角：决定页面的"性格"
核心： 圆角大小传递不同的感觉。小而尖 = 专业严肃；大而圆 = 友好活泼。
常见错误： 页面上圆角混乱——卡片 16px 圆角，里面按钮 2px 圆角，像两套东西拼的。
怎么让 AI 做：
- 定一个圆角体系：4px（小，输入框）→ 8px（中，卡片内部）→ 16px（大，卡片本身）→ 全圆角（按钮/标签）
- 全站统一——同一类元素圆角一样
- 风格选择：专业感用 4-8px，活泼感用 12-24px，胶囊按钮用全圆角
7. 少用边框，用其他方式分隔
核心： 边框会让页面变"忙"。两个元素之间的分隔，优先用背景色差、阴影、间距——最后才用边框。
常见错误： 卡片一个框、里面按钮一个框、里面文字一个框——页面像 Excel 表格。
怎么让 AI 做：
- 两个相邻区域 → 不同背景色（一个白一个浅灰），不加边框
- 卡片 → 阴影分隔，不加边框
- 分割线 → 只在必须的时候用，用
outline-variant级别，不用纯黑线 - 如果加了边框还是分不清 → 不是边框的问题，是间距不够
8. 交互状态：不会动的页面像死的
核心： 每个可交互元素，至少有四个状态：默认 → 悬停 → 点击 → 禁用。
常见错误： 按钮悬停不变色、点了没反馈、禁用态和正常态分不清。用户不知道"能点吗""点了吗"。
怎么让 AI 做：
- 悬停：颜色变深 10-15%，加轻微上浮（
translateY(-2px)），过渡 150-200ms - 点击：颜色最深，去掉上浮（压下去的感觉）
- 禁用：降低不透明度到 40-50%，去掉所有交互反馈
- 所有过渡不要太快（<100ms = 感觉不到）也不要太慢（>300ms = 感觉卡）
- 焦点态（键盘选中的时候）：一圈明显的轮廓，不能删
9. 图片与图标：不用 emoji 当图标
核心： 图标用 SVG（矢量），不用 emoji、不用像素图。
常见错误： 页面上几个 emoji 当图标——在不同系统上显示不一样，有的精致有的像贴图。
怎么让 AI 做：
- 图标用 SVG 代码内嵌，或 Material Symbols / Lucide 等图标库
- 同类图标统一线条粗细（1.5px 或 2px），要么全是线框要么全是实心，不混用
- 图标和文字对齐：图标垂直居中于文字，而不是飘在上面或掉在下面
- 图片给
width/height或占位，防加载时布局偏移（CLS）
10. 避免模板感
核心： AI 默认产出的页面有一种"模板味"——均匀对称、全灰白底、只有一处蓝色强调。打破它。
常见错误（AI 会犯的）：
- 卡片矩阵 + 统一间距 + 无层级 → 一眼"这是 AI 生成的"
- 纯白底 + 灰文字 + 一个蓝色按钮 → 史上最安全的配色，也是最无聊的
- 所有圆角一样大、所有阴影一样深、所有间距一样宽 → 没有节奏
怎么让 AI 做：
- 打破网格：至少有一个元素跨出常规列宽
- 在浅色背景上加一个有色的装饰区（浅色块、渐变、纹理）
- 字体选有辨识度的——不是 Arial 也不是系统默认
- 至少一处"意外"：一张不对称的图、一个打破常规间距的标题、一个有色背景的全宽区域
参考
- Wathan & Schoger, Refactoring UI — https://www.refactoringui.com
- UI/UX Pro Max skill — https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
- Google, Material Design 3 — https://m3.material.io
相关
- 去AI味网页设计指南 — 视觉原则的另一面：识别并去掉 AI 味
- 网页交付标准指南 — 交付前的完整检查单
- 网页视觉品质原则 来源调研 — 原文存档