Archived
13 KiB
13 KiB
前端设计规范（PC 端产品）
依据《前端UI描述术语手册》与《PC端产品UI审美心智指导手册》提炼。 本文件是所有页面新建/修改的执行依据：改前按「设计逻辑」诊断，改中按「设计规范」执行，改完按「评审清单」验收。 规范中未提及的部分，保持现状不变。
第一部分 设计逻辑（怎么想）
1. 三层金字塔（评审顺序永远自下而上）
- 不出错（底层）：对齐、对比度、状态齐全、无装饰噪音；
- 有秩序（中层）：层级清楚、节奏合理、分组明确；
- 有气质（顶层）：字体/配色有个性、有一处记忆点。
底层没过，不谈顶层。AI 产出的典型问题就是底层一堆错、套着「气质」的外壳。
2. 产品界面 ≠ 海报
海报追求「三秒抓住你」，产品界面追求「八小时不打扰你」。渐变、光晕、毛玻璃、彩色大图标属于营销页手段，产品界面里的合理数量是零，最多一处。
3. 六条可检查标准（每条都能回答「是/否」）
| 标准 | 一句话 | 检查方法 |
|---|---|---|
| 对齐 | 专业 vs 业余八成取决于此 | 画一条左线：标题、卡片、表格首列、表单标签是否从同一竖线开始 |
| 层级 | 一屏一个主角 | 眯眼：深色块是否只剩 2–3 个重点 |
| 克制 | 做减法 | 数：1 个彩色、2 种字体、1 套圆角、2 档阴影、1 个图标库、0 装饰 |
| 一致 | 像一个人做的 | 同一组件全站是否只有一种长相；不一样的地方必须有含义 |
| 节奏 | 组内紧、组间松 | 量间距：是否三级逐级放大，还是均匀/随意 |
| 细节 | 专业感的来源 | 数字对齐、状态齐全、输入框三件套 |
4. 五个第一眼测试（改完页面先过这关，每个 10 秒）
- 眯眼测试：模糊后深色块 ≤3 个，且主角是最该突出的东西；
- 三秒测试：三秒内能说出「这是什么页」「最重要的操作在哪」；
- 安静测试：饱和色块/渐变/emoji/感叹号/彩色描边加起来不超过两处；
- 同一人测试：同类元素（按钮圆角/高度/字号/描边）只有一种处理；
- 空间测试：宽屏下内容不撑满不飘着——限宽居中或多栏。
5. 工作方式五条（描述与修改的纪律）
- 先骨架，后皮肤：结构 → 布局 → 间距 → 组件 → 字体/色彩/形状 → 状态/动效；
- 用名词加数值，不用形容词：「大一点」→「按钮高从 32 改 36」；
- 每次只改一个维度：修改指令 = 改哪里 + 改成什么 + 其余不变；每轮改动 ≤3 处并编号；
- 先列问题再改：诊断先于动手，说出是哪条标准没过；
- 默认值先声明：字体、圆角系统、间距系统、强调色、图标库——不声明就会被填进默认值（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. 改前：诊断
- 过五个第一眼测试，写下「不对劲」的地方；
- 按六条标准逐条归因——说「对齐有问题：卡片标题和表格没对齐到一条左线」，不说「看着乱」；
- 查症状对照（下表）确认处方。
症状 → 病因 → 处方
| 症状 | 病因 | 处方 |
|---|---|---|
| 看着廉价 | 效果堆叠、灰字太浅 | 卡片改 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（大区块）。