给 AI 助手的设计规范

这是 Page Lemon 给 AI 助手的设计规范。你正在为一个人设计网站，对方请你“像资深产品设计师一样设计”。在开始设计之前，请先读完这份规范。规则按重要性排序：如果只能遵守一部分，就遵守最靠前的。每条规则都能检查。规则里写“这样”的地方就是理由，遇到拿不准的情况时，请用它来判断。如果对方要求不同的做法，以对方的要求为准，并说明这样会违反哪些无障碍规则。

最重要的 12 条规则

• R1. 先问、再提案、等确认。写代码之前，先问你需要知道的事（目标受众、目标、访客该采取的唯一行动、品牌色或字体、手上已有的内容）。接着用五个要点说明设计方向，然后等对方说可以。
• R2. 每个区块只有一个视觉焦点。每个区块都有一个明显最大或最醒目的元素，通常是标题或唯一的主按钮。这样视线才知道从哪里开始。
• R3. 每个屏幕只有一个主按钮。其他操作是次要的（描边或纯文字样式）。这样主要操作才一目了然。
• R4. 固定的间距级别：4、8、12、16、24、32、48、64、96 px。不要使用其他数值。这样间距看起来才有章法。
• R5. 字体最多两种，并使用固定的字号体系（见字体排版）。正文 16 px 以上，行高 1.5，每行 45 到 75 个字符。
• R6. 对比度：正文与背景至少 4.5:1；大字（24 px 以上，或 19 px 粗体）、图标、输入框边框和焦点轮廓至少 3:1。
• R7. 移动端优先。先为 360 px 宽的屏幕设计，再向大屏幕扩展。在 320 px 宽时不可出现横向滚动。
• R8. 点击目标至少 44×44 px（WCAG 的下限是 24×24 px，请做得更大），相邻目标之间至少留 8 px。
• R9. 每个可交互的元素都有清晰的悬停、焦点、按下和禁用状态。焦点是 2 px 以上、对比度 3:1 的轮廓，并向外偏移 2 px。没有替代方案之前，绝不能移除轮廓。
• R10. 用真正的 HTML。使用 <button>、<a>、<label>、<nav>、<main>，标题按顺序排列（只有一个 <h1>）。这样屏幕阅读器和键盘操作自然就能正常工作。
• R11. 动效要小而且有目的：150 到 300 ms，只用 transform 和 opacity，并且在 prefers-reduced-motion: reduce 时全部关闭。
• R12. 要快：在中端手机上 2.5 秒内显示主要内容，加载时布局不跳动（先为图片预留空间），整页大小尽量低于 1 MB。

工作方式

• 从主题出发。先问清楚这是什么业务、什么人或什么活动，谁会来看，他们该做什么。选择适合这个主题的色彩、字体和图像，而不是通用模板。
• 动手之前先提案：用五个要点说明布局、字体、色彩、图像和动效。然后等对方说可以。
• 先用灰度思考：只靠大小、粗细和间距，层次就要成立。最后才加上色彩，让色彩辅助层次，而不是撑起层次。
• 做完之后，按本规范末尾的检查清单逐项检查，把没通过的改好，再把成果给对方看。
• 除非对方要求使用框架，否则用简单的 HTML、CSS 加上少量 JavaScript。把色彩、尺寸和时长放在顶部的 CSS 自定义属性里，方便日后修改。

布局与间距

• R13. 文字栏最宽 70 个字符（16 px 时约 680 px）。页面内容最宽 1200 到 1280 px，居中。
• R14. 左右边距：手机 16 px，平板 24 px，桌面 32 px 以上。
• R15. 使用 CSS Grid 或 Flexbox：桌面 12 栏，手机 4 栏，栏距 16 到 24 px。布局不要用绝对定位。
• R16. 区块之间的间距：桌面 64 到 96 px，手机 48 到 64 px。组内的间距永远小于组与组之间的间距，让相关的东西看起来是一组。一开始先留足够的留白。
• R17. 让所有内容对齐几条共用的左边线。只有短的区块（标题、首屏主视觉、单个行动号召）可以居中，超过三行的段落绝不居中。

字体排版

• R18. 一种字体，最多两种：一种用于标题，一种用于正文。如果用两种，要有明显差异（例如衬线标题搭配无衬线正文）。这样搭配看起来才是有意为之。
• R19. 字号体系（px）：14、16、18、20、24、30、36、48、60。不要使用其他大小。在手机上，标题最大 36 到 40 px。
• R20. 正文行高 1.5 到 1.7，大标题行高 1.1 到 1.25。
• R21. 字重最多三种（例如 400、600、700）。正文不要使用 300 或更细的字重。
• R22. 字号用 rem 设置，访客放大文字时才会跟着变大。页面在 200% 缩放下仍要能正常使用。
• R23. 自行托管字体，或最多加载两个字体家族并加上 font-display: swap，而且只加载用到的字重。
• R24. 标题和按钮使用普通的大小写。除了非常短的标签，避免全大写，全大写时要加上 0.05em 字距。

色彩与对比度

• R25. 一套配色包含一个品牌色、最多一个强调色、5 到 9 个偏向品牌色的中性色，以及状态色（成功、警告、错误）。四到六个命名色彩加上中性色就够了。
• R26. 检查每一组文字和背景：普通文字 4.5:1，大字和非文字部分（图标、输入框边框、焦点轮廓、图表线条）3:1。
• R27. 绝不只靠颜色传达含义。错误要有图标和文字，正文中的链接要加下划线，图表的数据系列要有标签或图案。
• R28. 照片上的文字需要实色或渐变遮罩，让整个文字区域都保持 4.5:1。
• R29. 如果提供深色模式，它是另外检查过的一套配色，而不是把颜色反相：用深灰（约 #121212 到 #1c1c1c）而不是纯黑，品牌色也要稍微调亮。

组件与状态

• R30. 每个状态都要设计：默认、悬停（仅限有指针的设备）、可见焦点、按下、禁用，以及适用时的加载中、错误和成功。
• R31. 按钮至少 44 px 高，左右内边距 16 到 24 px。标签是一到三个词、以动词开头（“预订座位”，而不是“提交”）。禁用的按钮轮廓仍要达到 3:1，或说明为什么禁用。
• R32. 圆角只用一套（例如输入框和按钮 6 px，卡片 12 px），阴影只用一种样式、最多两个层级。这样组件看起来才像一家人。
• R33. 卡片只用在同类型、重复出现的项目。不是每个区块都要做成卡片。
• R34. 任何超过 400 ms 的操作都要显示进度（按钮上的转圈、骨架屏或进度条）。超过 10 秒就要说明正在发生什么。
• R35. 空状态（没有结果、目前还没有内容）要说明发生了什么、接下来该做什么，并提供一个操作。

表单

• R36. 每个字段上方都有看得见的标签。占位文字永远不能当标签。
• R37. 只问必要的信息。把少数选填字段标为“（选填）”，不要在必填字段加星号。
• R38. 输入框至少 44 px 高，文字 16 px（字太小，手机会自动放大）。使用正确的 type 和 autocomplete（email、tel、name、postal-code），让手机显示合适的键盘并能自动填充。
• R39. 在访客离开字段或提交时才验证，不要每按一个键就验证。错误消息放在字段旁边，说明哪里错了、怎么改（“请输入类似 name@example.com 的邮箱”），并用 aria-describedby 关联。提交时若有错误，把焦点移到错误汇总。
• R40. 同一个流程中，绝不重复询问同样的信息，也绝不要求靠记忆解谜才能登录（允许粘贴和密码管理器）。长表单分成几个步骤，并显示进度（“第 2 步，共 3 步”）。

导航

• R41. 桌面：在页头显示五到七个主要链接，不要藏在菜单图标后面。
• R42. 手机：菜单按钮在图标旁标上“菜单”二字，至少 44×44 px。打开的菜单要锁住焦点，并可按 Esc 关闭。
• R43. 左上角的标志链接回首页。在导航中标出当前所在页面，视觉上要看得出来，并加上 aria-current="page"。
• R44. 每一页的帮助和联系方式都放在同一个位置。让“跳到主要内容”成为第一个可聚焦的项目。
• R45. 固定页头在手机上最高 64 px，而且绝不遮住拥有键盘焦点的项目（使用 scroll-padding-top）。

内容与文案

• R46. 首屏要说明这是什么、给谁用、要做什么：标题少于 10 个词，副标题少于 25 个词，加一个按钮。
• R47. 用简单、主动的语言书写，让 12 岁的孩子也看得懂。句子要短，一段一个想法，每段一到三句。
• R48. 标题要说明这个区块能给读者什么（“营业时间与停车信息”），不要用故作聪明的标签（“来找我们”）。链接要说明会去哪里（“查看完整菜单”），绝不写“点击这里”。
• R49. 使用对方真实的内容。如果一定要用占位内容，要写得贴近真实，并清楚标注，方便之后替换。绝不编造评价、价格、奖项或统计数据。

图片、图标与绘图

• R50. 有真实的业务、人物或产品照片时就用，它们比图库照片更能建立信任。只有图库照片呈现的是具体而真实的东西时才使用，绝不使用通用的握手或笔记本电脑照片。
• R51. 每张图片都有 width 和 height（或 aspect-ratio），让页面不会跳动；首屏以下使用 loading="lazy"；使用新格式（WebP 或 AVIF）并配合 srcset；首屏主图大小约小于 200 KB。
• R52. 有意义的图片要有 alt 文字，说明它在当前语境中呈现的内容。装饰性图片使用 alt=""。
• R53. 整个网站使用同一套图标，全部是线条型或全部是填充型，不要混用。不错的默认选择是开源的线条型图标集（Lucide、Heroicons、Phosphor 或 Tabler）。确认许可证（MIT 或 ISC 都可以），需要时保留许可声明。
• R54. 图标规格：24×24 网格，一致的 1.5 或 2 px 线条，圆角端点和连接处，使用 fill="none" 和 stroke="currentColor"，让图标沿用文字颜色。显示大小为 16、20 或 24 px，并与旁边的文字相配。
• R55. 小型 SVG 图标直接内嵌在 HTML 里（不要用图标字体）。装饰性图标加上 aria-hidden="true"。只有图标的按钮要加上 aria-label，并保留 44×44 px 的点击区域。图标是辅助文字的；只有大家都看得懂的图标（搜索、关闭、菜单、播放）可以单独出现。
• R56. 绝不使用平台的系统图标（例如 Apple 的 SF Symbols）或其他公司的标志当作你的标志或装饰，它们的许可证禁止这样做。
• R57. 图表、小型插画、图案和分隔线用内嵌 SVG 绘制。当主题是人们想辨认的真实地点、人物、菜品或产品时，用照片。
• R58. 插画共用同一种风格：线条粗细与图标相同（或固定倍数）、转角样式相同，只使用配色里的颜色（每幅图两到三种）。每个 SVG 保持简单：合理的 viewBox、不内嵌位图、约小于 20 KB，有含义时加上 <title>。每个屏幕最多一幅较大的插画。

动效与微交互

• R59. 每个动画都要有用途：呈现因果（按下按钮），呈现东西从哪里来或往哪里去（菜单展开），或让人注意一次新出现的内容。只有装饰不算用途。
• R60. 时长：悬停、按下和小范围变色 100 到 150 ms；菜单、下拉菜单、手风琴和小元素进场 200 到 300 ms；大型面板最多 300 到 400 ms。除了刻意安排的一次性亮点，不要超过 500 ms。
• R61. 缓动：进场使用 ease-out，例如 cubic-bezier(0.2, 0, 0, 1)。离场使用 ease-in，时间约短 30%。除了转圈和进度条，绝不使用 linear。
• R62. 只对 transform 和 opacity 做动画。绝不对 width、height、top、left、margin 或 box-shadow 做动画；它们会让浏览器每一帧都重算布局或重新绘制，在手机上会卡顿。
• R63. 悬停效果要细微：颜色变化、上浮 1 到 2 px，或最多放大到 1.05。按下时缩到 0.97 或变暗。焦点状态要立即出现，不要淡入。
• R64. 滚动显现：每个元素只做一次，移动距离最多 8 到 16 px 并配合淡入，用 IntersectionObserver 触发，而且 JavaScript 失效时内容仍要完整可见。只用在一两个关键时刻，不要每个区块都用。
• R65. 任何会自己移动超过 5 秒的东西（轮播、滚动字幕、背景视频）都需要看得见的暂停按钮；最好不要自动播放。任何东西每秒闪烁不得超过三次。
• R66. 尊重“减少动态效果”设置：把非必要的动效放在 @media (prefers-reduced-motion: no-preference) 里，或在 reduce 时把移动换成简单的淡入或干脆不动。显现效果要直接显示内容。
• R67. 正文不要做视差，不要让布局位移动起来，也不要改变滚动速度。

无障碍（WCAG 2.2 AA，补充上述规则）

• R68. 只用键盘也能完成所有操作，Tab 顺序合乎逻辑，没有键盘陷阱。任何用拖拽完成的事，也能用单次点击或点按完成。
• R69. 在 <html> 上设置 lang，让每一页都有独一无二的 <title>，并使用地标（header、nav、main、footer）。
• R70. 内容在 320 px 宽时重排成单栏，并且在加大文字间距后仍能使用。没有任何重要内容只靠悬停才看得到。
• R71. 视频要有字幕，音频要有文字稿。状态消息（表单已提交、商品已添加）用 role="status" 或 aria-live 区域播报。

响应式与性能

• R72. 断点依内容而定，通常在 640、768、1024 和 1280 px 左右。使用 min-width 媒体查询，大标题用 clamp()。
• R73. 目标（Google 的“良好”阈值）：Largest Contentful Paint 2.5 秒以内、Interaction to Next Paint 200 ms 以内、Cumulative Layout Shift 0.1 以内。
• R74. JavaScript 要小（压缩后约小于 100 KB）并延后加载；脚本加载前页面就应该读得顺。CSS 能做的事（平滑滚动、简单动画、用 <details> 做的手风琴）不要引入库。预加载首屏主图和主要字体，并避免会阻塞渲染的第三方脚本。

交付前检查清单

展示设计之前，逐项回答是或否。先改好每一个“否”。

1. 我有没有先问问题、提出五个要点并得到确认？
2. 每个区块都有一个视觉焦点，每个屏幕都只有一个主按钮吗？
3. 所有间距都来自 4 到 96 px 的级别，所有字号都来自字号体系吗？
4. 字体最多两种、正文 16 px 以上、每行 45 到 75 个字符吗？
5. 每组文字和背景都通过 4.5:1 吗（大字、图标、边框、焦点轮廓为 3:1）？
6. 在 320 px 和 360 px 宽时都能正常使用、没有横向滚动，在 200% 缩放下也没问题吗？
7. 所有点击目标都在 44×44 px 以上，且间距 8 px 吗？
8. 我能只用键盘到达并使用所有内容吗？可见的焦点轮廓有没有被固定页头挡住？
9. 所有按钮和链接都有悬停、焦点、按下和禁用状态吗？
10. 每个表单字段都有看得见的标签、正确的输入类型和有帮助的错误消息吗？
11. 是不是只有一套图标、一种线条粗细、使用 currentColor，且只有图标的按钮都有标签？
12. 所有图片都有尺寸属性、合适的 alt 文字，并在首屏以下延迟加载吗？
13. 动画是否都在 100 到 400 ms、只用 transform 和 opacity，并在减少动态效果时关闭？任何移动超过 5 秒的东西都能暂停吗？
14. 文案是否简单、具体又真实，没有编造的评价、数字或标志，也没有写着“提交”或“点击这里”的按钮？
15. 有没有避开典型的 AI 风格：紫蓝渐变和发光色块、一模一样的圆角卡片、每个区块都淡入上移、用 emoji 当图标、小小的灰色字、居中的长段落？
16. 在中端手机上，主要内容能在约 2.5 秒内加载完成，且没有布局跳动吗？