Archived
217 lines
13 KiB
Markdown
217 lines
13 KiB
Markdown
# 前端设计规范（PC 端产品）
|
||
|
||
> 依据《前端UI描述术语手册》与《PC端产品UI审美心智指导手册》提炼。
|
||
> 本文件是所有页面新建/修改的执行依据：改前按「设计逻辑」诊断，改中按「设计规范」执行，改完按「评审清单」验收。
|
||
> 规范中未提及的部分，保持现状不变。
|
||
|
||
---
|
||
|
||
## 第一部分 设计逻辑（怎么想）
|
||
|
||
### 1. 三层金字塔（评审顺序永远自下而上）
|
||
|
||
1. **不出错**（底层）：对齐、对比度、状态齐全、无装饰噪音；
|
||
2. **有秩序**（中层）：层级清楚、节奏合理、分组明确；
|
||
3. **有气质**（顶层）：字体/配色有个性、有一处记忆点。
|
||
|
||
底层没过，不谈顶层。AI 产出的典型问题就是底层一堆错、套着「气质」的外壳。
|
||
|
||
### 2. 产品界面 ≠ 海报
|
||
|
||
海报追求「三秒抓住你」，产品界面追求「八小时不打扰你」。渐变、光晕、毛玻璃、彩色大图标属于营销页手段，**产品界面里的合理数量是零，最多一处**。
|
||
|
||
### 3. 六条可检查标准（每条都能回答「是/否」）
|
||
|
||
| 标准 | 一句话 | 检查方法 |
|
||
|---|---|---|
|
||
| 对齐 | 专业 vs 业余八成取决于此 | 画一条左线：标题、卡片、表格首列、表单标签是否从同一竖线开始 |
|
||
| 层级 | 一屏一个主角 | 眯眼：深色块是否只剩 2–3 个重点 |
|
||
| 克制 | 做减法 | 数：1 个彩色、2 种字体、1 套圆角、2 档阴影、1 个图标库、0 装饰 |
|
||
| 一致 | 像一个人做的 | 同一组件全站是否只有一种长相；不一样的地方必须有含义 |
|
||
| 节奏 | 组内紧、组间松 | 量间距：是否三级逐级放大，还是均匀/随意 |
|
||
| 细节 | 专业感的来源 | 数字对齐、状态齐全、输入框三件套 |
|
||
|
||
### 4. 五个第一眼测试（改完页面先过这关，每个 10 秒）
|
||
|
||
1. **眯眼测试**：模糊后深色块 ≤3 个，且主角是最该突出的东西；
|
||
2. **三秒测试**：三秒内能说出「这是什么页」「最重要的操作在哪」；
|
||
3. **安静测试**：饱和色块/渐变/emoji/感叹号/彩色描边加起来不超过两处；
|
||
4. **同一人测试**：同类元素（按钮圆角/高度/字号/描边）只有一种处理；
|
||
5. **空间测试**：宽屏下内容不撑满不飘着——限宽居中或多栏。
|
||
|
||
### 5. 工作方式五条（描述与修改的纪律）
|
||
|
||
1. **先骨架，后皮肤**：结构 → 布局 → 间距 → 组件 → 字体/色彩/形状 → 状态/动效；
|
||
2. **用名词加数值，不用形容词**：「大一点」→「按钮高从 32 改 36」；
|
||
3. **每次只改一个维度**：修改指令 = 改哪里 + 改成什么 + 其余不变；每轮改动 ≤3 处并编号；
|
||
4. **先列问题再改**：诊断先于动手，说出是哪条标准没过；
|
||
5. **默认值先声明**：字体、圆角系统、间距系统、强调色、图标库——不声明就会被填进默认值（AI 味）。
|
||
|
||
---
|
||
|
||
## 第二部分 设计规范（默认值与硬规则）
|
||
|
||
> 以下默认值适用于 PC 端后台/工具类产品。营销页/落地页的变体见附录 A。
|
||
|
||
### 6. 全局默认值（开工前先声明这五件事）
|
||
|
||
- **字体**：系统无衬线栈（中文 PingFang SC / Microsoft YaHei，英文 Inter 或 system-ui）；数字用 `tabular-nums`；需要技术感处用等宽；
|
||
- **圆角系统**：按钮/输入框 6px、卡片 8px、弹窗 12px、标签/头像全圆；嵌套内圆角 = 外圆角 − 内边距；整站不出现 16px 以上；
|
||
- **间距系统**：只用 8 的倍数（4/8/12/16/24/32/48/64）；三级边距 = 页面 24 / 卡片内 16 / 单元格 8–12；
|
||
- **强调色**：一个（默认蓝，如 #2563EB），只出现在：主操作、链接、状态、图表四处；
|
||
- **图标库**：一个（默认 Lucide），只选一种风格（默认 Outline 1.5px 描边）。
|
||
|
||
### 7. 色彩
|
||
|
||
- **三级灰文字**：主文字 #161A22 / 次要 #4A5160 / 辅助 #8B93A3；**禁用比 #8B93A3 更浅的文字色**；
|
||
- **对比度**：正文 ≥4.5:1，大标题 ≥3:1（WCAG AA）；
|
||
- **底色**：主区背景 #F6F7F9 + 白卡片（1px #DFE3EA 描边）；
|
||
- **语义色**：Success/Warning/Error/Info 各配浅底深字，只用在徽标/提示里；
|
||
- **图表**：同系列单色；多系列用主色深浅三档 + 一灰；**禁止彩虹色**；
|
||
- **深色模式**（如需要）：不是反色。背景 #0B0D10、卡片 #15181D、弹层 #1E2229（越高层越亮）、描边 rgba(255,255,255,.08)、文字 #E5E7EB / 次要 #8A91A0、去阴影、强调色提亮一档降饱和；
|
||
- **禁止**：紫蓝渐变按钮、渐变背景、光晕、毛玻璃（营销页除外，见附录 A）。
|
||
|
||
### 8. 排版
|
||
|
||
- **三档字号 + 两档字重**够用：标题 16px/600、正文 14px/400、元信息 12px 灰；指标卡大数字 28px/600 等宽；
|
||
- **中文正文**：字号 ≥14px、行高 1.75；标题行高 1.2–1.3；
|
||
- **层级手段按成本排序**：灰度 < 字重 < 字号 < 颜色——先用便宜的，不用五种字号；
|
||
- **标题左对齐**，与主按钮同行（标题左上、主按钮右上）；居中只给空态和弹窗；
|
||
- 中英文/数字之间加空格；标点全角；**中文不用斜体**；
|
||
- 行长 ≤75 字符，超出限宽。
|
||
|
||
### 9. 布局与骨架
|
||
|
||
- **应用外壳**：顶栏 + 侧栏 + 主内容区，外壳不滚动；
|
||
- **安全配色组合**：深侧栏 #14171E（当前项 8% 白底）+ 浅主区 #F6F7F9 + 白卡 1px 描边；若浅色侧栏则 #F3F4F7 / 主区纯白 + 1px 分割线；
|
||
- **限宽**：主内容 1280px、整页上限 1440px；
|
||
- **宽屏用多栏**：详情页主从 2:1（左主体右辅助）、列表+详情、工具类三面板；
|
||
- **一条左线**：页面标题、卡片标题、表格第一列、表单标签从同一竖线开始；看文字不看卡片边框；
|
||
- **节奏**：组内紧（8–16）、组间松（32–48）；分组标题离上一组的距离 > 离自己内容的距离；均匀间距是错的；
|
||
- **密度跟用途走**：扫描型（表格/列表/日志）紧凑 32–36 行高；阅读/填写型舒适 44–48；引导型（空态/向导）宽松。
|
||
|
||
### 10. 形状与表面
|
||
|
||
- **描边优于阴影**：静态卡片 1px #DFE3EA 描边；阴影只给下拉、弹窗、拖拽中的元素；hover 时描边变深，不浮起；
|
||
- **一张卡只用一种分层手段**：描边/阴影/底色三选一；
|
||
- **分割线**：能用间距分组就不用线；要用就内缩对齐文字，不通到边缘。
|
||
|
||
### 11. 组件硬规则
|
||
|
||
- **按钮**：一屏只有一个实心主按钮；危险操作（删除）永不实心；低频操作收进「⋯」；文案用具体动词（「保存更改」不是「确定」）；高度三档 28/36/44；
|
||
- **表格**：文字左对齐、**数字右对齐 + 等宽 + 小数位统一**、货币单位进表头；行高 36px、单元格左右内边距 12px、字号 13px、表头吸顶；
|
||
- **输入框三件套**：标签（框上方）、占位符（写示例值）、错误提示（描边变红 + 下方写明原因和改法）——三者职责不可互替；
|
||
- **图标不是装饰**：只有约定俗成含义（搜索、设置、删除）的才保留；遮住图标无损失就删；**禁止「⚡极速 🔒安全 🚀高效」式三列图标卡**；
|
||
- **空态** = 一句说明 + 主操作按钮，是引导不是道歉；
|
||
- **错误文案** = 发生了什么 + 怎么办。
|
||
|
||
### 12. 状态（效果图和产品的区别就在「第二种状态」）
|
||
|
||
- **控件六态**：Default / Hover（加深 8%）/ Active / Focus / Disabled（45% 透明）/ Loading（转圈 + 禁重复点击）；
|
||
- **Focus 必须可见**：2px 主色外环 + 2px 间隔；禁止因为「不好看」删焦点环；
|
||
- **每个数据区域四态**：Loading（骨架屏，形状与真实内容一致）/ Empty / Error（原因 + 重试）/ Ideal，再加 Partial；
|
||
- **悬停是 PC 的层级工具**：行内操作平时隐藏，悬停/键盘聚焦时出现（两个图标 + 「⋯」）；
|
||
- **危险操作**：能撤销（Toast + Undo）就别弹确认；必须确认时，严重后果要求输入名称；
|
||
- **键盘**：搜索框标 ⌘K、主要操作标快捷键、Tab 顺序与视觉顺序一致。
|
||
|
||
### 13. 动效（只说三件事：动多久、怎么加减速、动哪个属性）
|
||
|
||
- **时长**：hover/按钮 100–150ms；弹层/展开 200–300ms；页面切换 ≤500ms；
|
||
- **缓动**：进场 ease-out、退场 ease-in；禁止线性位移；
|
||
- **进出场有来由**：弹层从触发点展开、抽屉从边缘滑入；退出是进入的反向且更快；
|
||
- **克制**：一个页面最多一处值得记住的动效；尊重 prefers-reduced-motion。
|
||
|
||
### 14. 响应式（PC 为主，但要能缩）
|
||
|
||
- 三档：>1024 桌面 / 768–1024 平板 / <768 手机；
|
||
- 降级路径：卡片 3→2→1 列；侧栏→图标栏→抽屉；顶部导航→汉堡；表格→卡片列表或横滚+首列固定；分栏→上下堆叠；
|
||
- 触控目标 ≥44px。
|
||
|
||
---
|
||
|
||
## 第三部分 执行流程（每次改页面都走一遍）
|
||
|
||
### 15. 改前：诊断
|
||
|
||
1. 过五个第一眼测试，写下「不对劲」的地方；
|
||
2. 按六条标准逐条归因——说「对齐有问题：卡片标题和表格没对齐到一条左线」，不说「看着乱」；
|
||
3. 查症状对照（下表）确认处方。
|
||
|
||
**症状 → 病因 → 处方**
|
||
|
||
| 症状 | 病因 | 处方 |
|
||
|---|---|---|
|
||
| 看着廉价 | 效果堆叠、灰字太浅 | 卡片改 1px 描边去阴影；最浅灰提到 #8B93A3 |
|
||
| 像模板/AI 味 | 居中标题、三列图标卡、紫蓝渐变 | 标题左对齐；删无意义图标；去渐变；圆角收 8 |
|
||
| 看着乱 | 多条左线、间距随意 | 统一一条左线；间距只取 8 的倍数，组内紧组间松 |
|
||
| 看着空/飘 | 宽屏拉伸 | 限宽 1280 居中，或改主从两栏 |
|
||
| 看着挤/累 | 密度不匹配、行高小 | 密度按用途调档；正文行高 1.75 |
|
||
| 找不到重点 | 多个实心按钮、层级反了 | 只留一个实心按钮；用灰度字重重建层级 |
|
||
| 太花/太吵 | 彩色超一、彩虹图表、emoji | 彩色收敛到四处；图表单色阶+灰；删 emoji |
|
||
| 太单调/死板 | 减法做过头 | 加一处对比即可（一个强调色块或一处衬线标题） |
|
||
| 像网页不像软件 | 无外壳/悬停/快捷键 | 补应用外壳、悬停操作、焦点环、⌘K |
|
||
| 像效果图不像产品 | 只有默认态 | 补齐 Loading/Empty/Error/Partial |
|
||
| 不专业/不严谨 | 数字没对齐 | 数字列右对齐、等宽、小数位统一 |
|
||
| 深色模式难看 | 直接反色 | 按第 7 节深色模式色板重做 |
|
||
| 说不上来哪里怪 | 1px 级光学对齐 | 放大 200% 检查图标文字中线、按钮文字垂直居中 |
|
||
|
||
### 16. 改中：纪律
|
||
|
||
- 修改指令 = 改哪里 + 改成什么（数值）+ 其余保持不变；
|
||
- 每轮 ≤3 处，编号发出；
|
||
- 结构没确认前不动皮肤——必要时先要黑白线框确认结构；
|
||
- 新增组件前先查第 6 节默认值和第 11 节组件规则，不重新设计已有组件。
|
||
|
||
### 17. 改后：验收清单（三层 18 条，全过才算完）
|
||
|
||
**底层 · 不出错（8 条）**
|
||
- [ ] 同一条左线；同行卡片等高、右缘对齐
|
||
- [ ] 同屏只有一个实心按钮，危险操作非实心
|
||
- [ ] 整页一个强调色，状态色只在徽标里
|
||
- [ ] 按钮/输入框/卡片/图标各只有一种样式
|
||
- [ ] 最浅灰字 ≥#8B93A3，对比度达标
|
||
- [ ] 数字列右对齐、等宽、小数位对齐
|
||
- [ ] 无渐变/光晕/毛玻璃/无意义图标/emoji
|
||
- [ ] 按钮文字垂直居中、图标与文字中线对齐
|
||
|
||
**中层 · 有秩序（6 条）**
|
||
- [ ] 眯眼深色块 ≤3，视线路径清楚
|
||
- [ ] 三秒说出页面主题和主操作
|
||
- [ ] 间距组内紧组间松、三级边距统一
|
||
- [ ] 密度匹配用途
|
||
- [ ] 字号 ≤3 档，靠灰度字重分层
|
||
- [ ] 宽屏限宽或多栏，无拉伸扁条
|
||
|
||
**顶层 · 像软件（4 条）**
|
||
- [ ] 悬停/禁用/加载/空/错误态齐全
|
||
- [ ] 焦点环可见、有快捷键提示、行内操作悬停出现
|
||
- [ ] 文案动词前后一致、写具体动作
|
||
- [ ] 有且仅有一处记忆点
|
||
|
||
### 18. 交付要求
|
||
|
||
- 改完输出所用 token 表：颜色、字阶、圆角、间距——与第 6–10 节默认值不符处必须说明理由；
|
||
- 语义化 HTML、键盘可达；icon-only 按钮配 tooltip；
|
||
- 未提及的部分保持原样，不顺手「优化」。
|
||
|
||
---
|
||
|
||
## 附录 A 营销页/落地页变体
|
||
|
||
场景不同，手段放宽，但纪律不变：
|
||
|
||
- **允许**：Hero 大标题（可到 40–56px）居中、一处渐变或氛围动效、Elevated 阴影卡、插画；仍然单强调色、一套圆角（可放宽到 8–16）、一个图标库；
|
||
- **区块流**：Hero → Logo 墙 → 功能 → 评价 → 定价 → FAQ → CTA → 页脚；
|
||
- **容器**：1280–1440；密度宽松（区块间距 64–96）；
|
||
- **动效**：scroll reveal 一次性、错落 ≤8 项、氛围动效只在 Hero 一处；
|
||
- 六条标准照样检查——营销页只是「气质」层权重更高，底层「不出错」不打折。
|
||
|
||
## 附录 B 完全不懂数字时的说法（兜底）
|
||
|
||
- 指着选：「同内容出三版（紧凑专业/舒适通用/宽松友好），我挑一个」；
|
||
- 拿实物比：「像微信卡片那么圆」「像 Linear 那种密度」；
|
||
- 说相对：「圆角收一档」「间距松一档」「灰色深一档」；
|
||
- 圆角对照：4=专业密集 / 8=网页默认 / 12=微信卡片 / 16=iOS 弹窗；
|
||
- 字号对照：正文只有 14（后台）和 16（大众）两个选择；
|
||
- 间距对照：一个字≈16px（同组）、三个字≈48px（小节）、六个字≈96px（大区块）。
|