共计 2836 个字符，预计需要花费 8 分钟才能阅读完成。
最近看到了一份十分精简但很实用的《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）
正文完
