介绍

交互

• 单击输入标签应聚焦输入字段

• 输入应该用 a 括起来，<form>然后按 Enter 键提交

• 输入应具有适当的名称，type例如, 等password``email

• 大多数时候输入应该被禁用spellcheck和属性autocomplete

• required输入应在适当的时候通过使用属性来利用 HTML 表单验证

• 输入前缀和后缀装饰（例如图标）应绝对定位在带有填充的文本输入的顶部，而不是旁边，并触发输入焦点

• 切换应立即生效，无需确认

• 提交后应禁用按钮以避免重复的网络请求

• 交互式元素应禁用user-select内部内容

• 装饰元素（发光、渐变）应禁用，pointer-events以免劫持事件

• 垂直或水平列表中的交互元素在每个元素之间不应有死区，而是增加它们的死区padding

样式

• 应该webkit-font-smoothing: antialiased应用字体以获得更好的易读性

• 应该text-rendering: optimizeLegibility应用字体以获得更好的易读性

• 字体应该是基于内容、字母表或相关语言的子集

• 悬停或选定状态时字体粗细不应改变，以防止布局发生变化

• 不应使用低于 400 的字体粗细

• 中等大小的标题通常字体粗细在 500-600 之间时看起来效果最好

• 使用 CSS 流畅地调整值clamp()，例如clamp(48px, 5vw, 72px)标题font-size的

• 如果可用，表格数字应与 一起应用font-variant-numeric: tabular-nums，特别是在表格中或当不希望布局变化时（例如在计时器中）

• 防止 iOS 上横向模式下文本意外调整大小webkit-text-size-adjust: 100%

动效

• 切换主题不应触发元素上的过渡和动画1

• 动画持续时间不应超过 200 毫秒，以使交互感觉即时

• 动画值应与触发器大小成正比：
• 不要动画对话框从 0 → 1 缩放，淡化不透明度并从 ~0.8 缩放
• 不要在按下时将按钮缩放为 1 → 0.8，而是 ~0.96、~0.9 左右

• 频繁且新颖性低的动作应避免无关的动画：
2
• 打开右键菜单
• 从列表中删除或添加项目
• 悬停的琐碎按钮

• 当屏幕上不可见时，循环动画应暂停，以减轻 CPU 和 GPU 的使用量

• 用于scroll-behavior: smooth导航到页内锚点，并具有适当的偏移量

触摸

• 悬停状态在触摸按下时不应该可见，使用@media (hover: hover) 3

• 输入的字体大小不应小于 16px，以防止 iOS 缩放焦点

• 输入不应自动聚焦在触摸设备上，因为它会打开键盘并覆盖屏幕

• 将muted和playsinline应用于<video />标签以在 iOS 上自动播放

• 禁用touch-action实现平移和缩放手势的自定义组件，以防止缩放和滚动等本机行为的干扰

• 使用 禁用默认的 iOS 点击突出显示webkit-tap-highlight-color: rgba(0,0,0,0)，但始终将其替换为适当的替代方案

优化

• 较大的blur()值filter和backdrop-filter可能会很慢

• 缩放和模糊填充矩形会导致条带，请使用径向渐变代替

• transform: translateZ(0)对于性能不佳的动画，谨慎启用 GPU 渲染

• will-change在动画持续时间内切换性能不佳的滚动动画4

• 在 iOS 上自动播放太多视频会导致设备卡顿、暂停甚至卸载离屏视频

• 使用可以直接提交到 DOM 的实时值的引用来绕过 React 的渲染生命周期5

• 检测并适应用户设备的硬件和网络能力

无障碍

• 禁用按钮不应有工具提示，它们不可访问6

• 框阴影应用于聚焦环，而不是不考虑半径的轮廓7

• 顺序列表中的可聚焦元素应该可以通过以下方式导航↑ ↓

• 顺序列表中的可聚焦元素应该可以删除⌘ Backspace

• 要在按下时立即打开，下拉菜单应在 上触发mousedown，而不是click

• 使用带有样式标签的 svg 图标，该标签符合基于的系统主题prefers-color-scheme

• 仅图标交互元素应定义明确的aria-label

• 悬停触发的工具提示不应包含交互式内容

• 应始终使用屏幕阅读器呈现图像<img>，并易于从右键单击菜单进行复制

• 使用 HTML 构建的插图应该有一个明确的说明，aria-label而不是向使用屏幕阅读器的人宣布原始 DOM 树

• 渐变文本应取消设置::selection状态渐变

• 使用嵌套菜单时，使用“预测锥”来防止指针在其他元素上移动时意外关闭菜单。

设计

• 乐观地在本地更新数据并通过反馈回滚服务器错误

• 身份验证重定向应在客户端加载之前在服务器上进行，以避免 URL 发生变化

• 设置文档选择状态的样式::selection

• 显示与其触发器相关的反馈：
• 在成功复制上显示临时内联复选标记，而不是通知
• 突出显示表单错误的相关输入

• 空状态应该提示创建一个新项目，并带有可选模板

1. 在深色模式或浅色模式之间切换将触发用于显式交互（例如悬停）的元素的转换。我们可以暂时禁用转换来防止这种情况。对于 Next.js，使用next-themes可以防止开箱即用的转换。

2. 这是一个品味问题，但有些交互在没有动作的情况下感觉更好。例如，由于频繁使用，原生 macOS 右键菜单仅以动画方式显示，而不以动画方式显示。

3. 大多数触摸设备在按下时都会暂时闪烁悬停状态，除非仅针对带有@media（hover：hover）的指针设备明确定义。

4. 作为will-change提高性能的最后手段。先发制人地将其扔到元素上以获得更好的性能可能会产生相反的效果。

5. 这可能会引起争议，但有时直接操作 DOM 是有益的。例如，我们可以跟踪 ref 中的增量并直接在回调中更新相关元素，而不是依赖于每个轮子事件上的 React 重新渲染。

6. 禁用的按钮不会按 Tab 键顺序出现在 DOM 中，因此永远不会向键盘用户公布工具提示，他们也不知道为什么该按钮被禁用。

7. 自 2023 年起，Safari 在定义自定义轮廓样式时将不再考虑元素的边框半径。Safari 16.4添加了对outline跟随边框半径曲线的支持。但是，请记住，并非每个人都会立即更新操作系统。