Web 界面开发指南

Touch

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

• 输入框的字体大小不应小于16像素，以防止iOS在焦点聚焦时进行缩放。

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

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

• 禁用 touch-action 以针对实现平移和缩放手势的自定义组件，以防止原生行为(如缩放和滚动)的干扰

Optimizations

• filter和 backdrop-filter 的大 blur() 值可能会很慢
• 缩放和模糊填充的矩形会导致条纹，应改用径向渐变
• 谨慎地启用GPU渲染与 transform: translatez(o) 以处理性能不佳的动画
• 在动画的持续时间内切换 will-change 以关闭不流畅的滚动动画
• 在iOS上自动播放太多视频会使设备变慢，暂停甚至卸载屏慕外的视频
• 使用 refs 跳过 React 的渲染生命周期，以实时值直接提交到 DOM
• 检测并适应用户设备的硬件和网络能力。

Accessibility

• 禁用的按钮不应该有工具提示，因为它们不可访问
• 盒子阴影应该用于焦点环，而不是不尊重半径的轮廓
• 一个顺序列表中的可聚焦元素应该可以被导航。
• 一个顺序列表中的可聚焦元素应该可以被删除 Backspace
• 为了立即打开下拉菜单，下拉菜单应该在 mousedown 上触发，而不是 click
• 使用一个带有样式标签的 SVG 网站图标，该标签基于 prefers-color-scheme 系统主题
• 仅图标交石元素应定义显式 aria-label

Design

• 乐观地在本地更新数据，并在服务器错误时回滚并提供反馈
• 身份验证重定向应在客户端加载之前在服务器上进行，以避免 URL 更改
• 使用 ::selection 样式设置文档选择状态
• 相对于其触发器显示反馈:
  • 在成功复制时，显示一个临时的内联勾选标记，而不是通知
  • 在表单错误时突出显示相关的输入
  • 空状态应提示创建新项目，可选择使用模板

1. 在暗模式和亮模式之间切换会触发那些专为显式交互设计的元素的过渡效果，例如悬停。我们可以暂时禁用过渡效果以防止这种情况发生。对于 Next.js，使用 next-themes 可以自动禁用过渡效果
2. 这是一个品味问题，但有些交互在没有动画的情况下会感觉更好。例如，由于经常使用，原生的 macOS 右键菜单只会动画弹出，而不是弹入
3. 大多数触摸设备在按下时会暂时闪烁悬停状态，除非明确地仅使用 @media (hover: hover) 定义指针设备
4. 将 will-change 用作提高性能的最后手段。预先将其应用于元素以获得更好的性能可能会产生相反的效果
5. 这可能会引起争议，但有时直接操作 DOM 可能是有益的。例如，我们可以跟踪 ref 中的delta并在回调中直接更新相关元素，而不是依赖于 React 在每个滚轮事件上重新渲染
6. 禁用的按钮在 DOM 中不会出现在选项卡顺序中，因此对于键盘用户，气泡提示将永远不会被宣布，他们将不知道按钮为什么被禁用
7. 截至2023年，Safari 在定义自定义轮廓样式时将不考虑元素的边框半径。Safari 16.4 已经支持 outline 沿着边框半径的曲线。但是，请记住，不是每个人都会立即更新他们的操作系统。