关于前端: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 属性，并设置适当的偏移量。

悬停状态不应在触摸按下时可见，应用 @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）

关于前端:Web-界面开发指南持续更新

简介

互动性

字体排版

动画

Touch 触摸

优化

可拜访性

设计