Web 界面开发指南，持续更新

最近看到了一份非常精简但很实用的《Web 界面开发指南》，其中仅有 4 页，却详细阐述了前端交互体验的关键要点。这份指南的思路和方法相当于一个最佳实践，比许多冗长的内容介绍更易于理解。实际上即使没有太多编码经验，也能够轻松地使用这些指南，如果按照这些要点进行开发，相信会让你的项目更加完美，注重细节将使你的工作更具价值。

以下基于原文翻译，内容有所删改，感兴趣的可以查看原文。

简介

这份文档列出了一些使我们的（Web）界面更好的细节处理方式，这个列表并不是完整全面的，但它会基于经验持续不断更新。其中有些实现可能是偏于主观性的，但大多数适用于所有网站。

互动性

• 单击输入标签应将焦点放在输入字段上

• 输入应使用<form>包装，以便通过按Enter键提交

• 输入应具有适当的type，如password、email等

• 大多数情况下，输入应禁用spellcheck和autocomplete属性

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

• 输入框前缀和后缀的装饰，例如图标，应该绝对定位在文本输入框上方，并使用内边距而不是并列排版，并触发输入框的焦点。

• Toggle切换组件应该立即生效，不需要二次确认

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

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

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

• 垂直或水平列表中的交互元素应该在每个元素之间没有写死的区域，而是增加它们的内边距。

字体排版

• 字体应使用-webkit-font-smoothing: antialiased以提高易读性

• 字体应使用-webkit-font-smoothing: antialiased以提高易读性

• 字体应根据内容、字母或相关语言进行子集化

• 字体粗细不应在悬停或选定状态下更改，以防止布局偏移

• 字重不应该使用 400 以下的字体粗细

• 中等大小的标题一般看起来最好的字体之间的字重为 500-600

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

动画

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

• 动画持续时间不应超过 200ms，使交互感觉即时没有延迟

• 动画的数值应与触发器大小成比例：

• 不要使用“从 0 到 1”的缩放动画来显示对话框，而是使用淡入淡出的透明度和缩放（大约从 0.8 开始）。

• 按下按钮时，不要从 1 到 0.8 缩放，而是~0.96、~0.9 左右

• 频繁且新奇较低的动作应避免无关的动画：

• 打开右键单击菜单

• 从列表中删除或添加项目

• 悬停琐碎的按钮

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

• 对于在页面内导航到锚点，请使用scroll-behavior: smooth属性，并设置适当的偏移量。

Touch 触摸

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

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

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

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

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

• 使用-webkit-tap-highlight-color: rgba（0,0,0,0）禁用 iOS 的默认轻触高亮效果

优化

• blur()和filter的backdrop-filter值过大可能会导致速度变慢

• 对填充矩形进行缩放和模糊处理会导致色带，应该使用径向渐变代替

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

• 在性能不佳的滚动动画期间，切换will-change属性

• 在 iOS 上自动播放过多视频会使设备变卡，应该暂停或卸载屏幕外的视频。

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

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

可访问性

• 禁用的按钮不应该有tooltips，它们是不可访问的

• 使用box shadow来创建焦点环，而不是outline，因为outline无法呈现圆角效果

• 一个连续列表中可聚焦元素应该可以被 ↑ ↓导航操作

• 顺序列表中的可聚焦元素应该可以用 ⌘ Backspace 操作

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

• 使用带有样式标签的svg favicon，该样式标签遵循基于prefers-color-scheme的系统主题

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

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

• 图像应始终使用<img>渲染，以便于屏幕阅读器和从右键单击菜单复制

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

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

• 当使用嵌套菜单时，应该使用“prediction cone”来防止指针在穿过其他元素时意外关闭菜单。

设计

• 乐观地在本地更新数据，并在服务器错误时回滚并提供反馈

• 身份验证重定向应该在客户端加载之前在服务器上发生，以避免 jankyURL 更改

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

• 显示与其触发器相关的反馈：

• 在成功复制时显示临时内联复选标记，而不是通知

• 突出显示表格错误的相关输入

• 空状态应提示创建一个新的项目，可选的模板

• 在暗模式或亮模式之间切换将触发元素上的过渡，这些元素旨在进行显式交互，如悬停。我们可以暂时禁用转换以防止这种情况。对于 Next.js，请使用 next-themes 来防止开箱即用的过渡。

• 这是一个品味的问题，但有些互动只是感觉更好，没有运动。例如，本机 macOS 右键单击菜单只会显示出动画，而不会显示出动画，这是由于频繁使用它。

• 大多数触摸设备在按下时会暂时闪烁悬停状态，除非明确定义为仅用于带有@media (hover: hover)的指针设备。

• 使用will-change作为提高性能的最后手段。为了获得更好的性能而预先将其扔到元素上可能会产生相反的效果。

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

• 被禁用的按钮在 DOM 中不会以 Tab 键的顺序出现，因此工具提示永远不会向键盘用户显示，他们也不知道按钮被禁用的原因。

• 从 2023 年起，Safari 在定义自定义轮廓样式时将不会考虑元素的边界半径。Safari 16.4 增加了对outline的支持，支持边界半径的曲线。但是，请记住，并不是每个人都立即更新他们的操作系统。

原文地址： https://interfaces.rauno.me，该地址会不断更新相关指南，感兴趣的可以收藏关注。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）