《Web偏好指南》研读

前段时间，在社区看到这样一篇文章【Web偏好指南】interfaces.rauno.me/

这篇文章介绍了在web开发设计中一些好的细节，并且基于实践经验进行持续定期更新。虽然有一些主观内容，但大多数适用于所有网页。

我属于前端小白，在web设计方面比较欠缺，所以对这篇文章研读了一番。但是我并非将文章整体翻译，而是对一些陌生的建议，找出它的依据以理解它。在此分享以共勉。

食用指南：建议后面紧跟的引用是对建议的解读。

Interactivity

• Clicking the input label should focus the input field
• Inputs should be wrapped with a to submit by pressing Enter
• Inputs should have an appropriate type like password, email, etc
• Inputs should disable spellcheck and autocomplete attributes most of the time

在某些情况下，输入应该禁用拼写检查和自动完成属性，例如：

1. 编写代码时，拼写检查和自动完成可能会干扰程序员的输入和编辑过程。
2. 当输入密码或其他敏感信息时，自动完成会增加信息被盗的风险。
3. 当输入专业术语或技术术语时，拼写检查和自动完成可能无法识别正确的拼写或术语。
4. 当使用非常规输入设备时，例如语音输入或数字板，自动完成和拼写检查可能无法正确处理输入。
5. 当输入涉及多种语言或方言时，拼写检查和自动完成可能会识别不正确的拼写或提供错误的建议。
   当输入内容需要精确和准确时，禁用拼写检查和自动完成可以确保输入的正确性。

• Inputs should leverage HTML form validation by using the required attribute when appropriate
• Input prefix and suffix decorations, such as icons, should be absolutely positioned on top of the text input with padding, not next to it, and trigger focus on the input
• Toggles should immediately take effect, not require confirmation

切换（Toggle）按钮应该立即生效，而不需要进行确认。这通常指的是切换按钮或开关的状态，例如打开或关闭特定功能、更改显示模式等。当用户单击切换按钮时，应该立即在界面上反映出来，而不需要在单击后弹出确认窗口。

这个设计原则旨在提高用户界面使用的效率和可用性。用户不需要等待或进行多次单击才能确保他们的操作已经成功。此外，这也减少了用户可能感到困惑和不确定的情况。

• Buttons should be disabled after submission to avoid duplicate network requests
• Interactive elements should disable user-select for inner content

“交互元素应该禁止用户选择内部内容” 是一个Web开发的设计原则，它意味着当用户选择了一个交互元素（如按钮、链接、复选框、单选按钮等）时，元素内的文本或内容不应该被选中或复制。

这个原则的目的是为了避免用户因意外地选择交互元素内的内容而疑惑，当用户单击或操作交互元素时，他们应该只关注元素本身的交互，并与元素内的文本或内容无关。

在Web开发中，可以使用CSS的user-select属性来控制元素内部的文本选择行为，例如设置user-select: none，以防止用户选择元素内的任何文本。使用此设计原则可以提高用户界面的可用性和交互性。

• Decorative elements (glows, gradients) should disable pointer-events to not hijack events

"装饰元素应该禁用指针事件，以免劫持事件"是一个Web开发的设计原则，它指的是当使用装饰元素（例如发光、渐变等）时，应该禁用指针事件，以避免这些元素劫持鼠标事件。

这个设计原则的目的是避免装饰元素干扰用户的交互体验，例如，当一个按钮附有闪烁的发光效果时，用户可能会误认为它是可交互的，但实际上点击按钮时，却被装饰元素劫持了。

在Web开发中，可以通过CSS属性pointer-events来控制元素是否响应鼠标事件。当把pointer-events属性设置为none时，该元素将不再响应鼠标事件，而只是作为一个装饰元素。

使用此设计原则可以提高用户界面的可用性，并确保装饰元素不会对用户交互产生负面影响。

（大意是，装饰元素这类不具有交互特性的元素，应该禁用其交互效果；指针事件是指鼠标的一些操作如鼠标抬起、放下等）

• Interactive elements in a vertical or horizontal list should have no dead areas between each element, instead, increase their padding

"垂直或水平列表中的交互元素应该在每个元素之间没有死区，相反，增加它们的填充"是一个Web开发的设计原则，它指的是在垂直或水平列表中，交互元素应该紧密排列，而非留下明显的死区，同时增加填充以增加交互元素的可触及范围。

这个设计原则的目的是为了提高用户的交互体验，避免用户不必要的鼠标移动或触摸，以找到他们希望与之交互的元素。

在Web开发中，可以使用CSS属性来控制元素之间的填充（如padding、margin等），以确保元素之间没有死区，并增加其触及区域，从而提高可用性。例如，在一个水平列表中，应该将元素间距保持为最小值，且为每个元素增加适当的填充，从而使用户的交互更加高效和便捷。

使用这个设计原则可以提高用户界面的可用性和交互性，从而为用户提供更好的体验。

（padding填充，margin死区）

在Web开发中，padding和margin都是CSS属性，用于设置元素周围的空间，但它们表示的概念是不同的。

Padding（内边距）是指元素的内容和元素的边框之间的空间，它可以用于增加元素中内容与边界的间距，改变元素的大小，并使元素在外观上更加舒适。例如，可以使用padding属性在元素内部填充空间，从而将元素的内容从元素的边框隔离开来，从而提高页面的可读性。

Margin（外边距）是指元素与周围元素之间的空间，它可以用于在不需要填充内容的情况下，增加元素与其相邻元素之间的间距。例如，可以使用margin属性在元素的周围留出足够的空间，从而强调元素的重要性，或者将元素与其它元素分离开来，使页面的布局更加清晰。

因此，可以说padding是填充，用于增加内容与边界之间的空间，而margin是用于制造死区，使得元素之间具有足够的空间，并且将元素与周围元素分开，从而达到更好的页面效果。

Typography（排版）

• Fonts should have -webkit-font-smoothing: antialiased applied for better legibility

在Web开发中，-webkit-font-smoothing属性是一种CSS属性，它用于提高字体的可读性和清晰度。该属性可以应用于WebKit浏览器，使得字体在显示时更加平滑和清晰，从而提高用户的体验。它可以通过以下方式来使用：

selector {

-webkit-font-smoothing: antialiased;

}

在Web开发中，字体的锯齿效应是常见的问题之一，尤其是在小字号和细体字的情况下。为了解决这个问题，通过应用抗锯齿技术，让字体更加清晰和易读。-webkit-font-smoothing的使用可以帮助避免字体出现锯齿，并能够增加字体的清晰度，从而可以为用户提供更好的阅读体验。

需要注意的是，-webkit-font-smoothing属性只能在WebKit浏览器（如Safari和Chrome）中使用，而其他浏览器可能需要使用其他属性或技术来达到同样的效果。此外，这个属性的具体表现效果在不同的设备和浏览器版本下可能会有所不同，因此需要在实际使用中进行测试和调整。

• Fonts should have text-rendering: optimizeLegibility applied for better legibility

在Web开发中，文本渲染优化是一种优化技术，用于提高文本的清晰度和易读性。它通过对文本进行优化渲染，以减少锯齿和模糊等现象，从而使文本更加清晰，易读和美观。文本渲染优化可以应用于Web页面上的所有文本，如标题，正文或按钮等。

文本渲染优化可以通过许多技术来实现，其中一些常用技术包括：

• 使用字体平滑技术：这可以通过CSS字体属性如-webkit-font-smoothing等来实现，从而减少字体的锯齿和减少模糊度。
• 使用字体替代技术：这可以通过CSS font-family属性来实现，以使用更高质量，更清晰的字体。
• 使用文本阴影和边框：这可以通过CSS属性如text-shadow和text-stroke等来实现，从而增加字体的对比度，使之更清晰和易读。

总之，文本渲染优化是一项重要的Web开发技术，可以提高用户体验，并使页面上的文本更加清晰和易读。在实践中，可以通过一系列技术来实现文本渲染优化，从而为用户提供更好的页面体验。

• Fonts should be subset based on the content, alphabet or relevant language(s)

在Web开发中，字体应该基于内容、字母或相关语言的子集是指在选择字体时应该考虑到页面上所显示的文本内容和语言，在选择合适的字体子集时应该优先考虑其对应的内容和语言。

具体而言，如果网站需要显示的是某种非英语言的语言（例如中文或日语），那么应该优先选用适合该语言的字体，这些字体能够提供适合该语言的字符集、字体样式和渲染优化等等。同样的，如果网站主要显示的是特定的内容或特定类型的文字（如数学公式、草书或手写笔迹），则应该选择适合该内容和文字类型的字体。

同时，在选择字体时还应该考虑字体在不同设备和浏览器上的展示效果，以便在尽可能多的用户设备上呈现良好、一致的视觉效果。此外，为了确保页面的实际加载速度，还应该在选择字体时权衡字体大小、格式、下载速度和效果，从而在尽可能保持页面性能的同时提供优秀的字体体验。

总之，在Web开发中，选择合适的字体可以提高页面的可访问性、易读性和可用性，因此在考虑字体时，应该考虑到页面的内容、语言和目标受众，以便选择最适合的字体并提供最优质的用户体验。

• Font weight should not change on hover or selected state to prevent layout shift

在悬停或选中状态下，字体粗细不应改变，以防止布局移动

• Font weights below 400 should not be used
• Medium sized headings generally look best with a font weight between 500-600
• Adjust values fluidly by using CSS clamp(), e.g. clamp(48px, 5vw, 72px) for the font-size of a heading

使用CSS clamp()流畅地调整值，例如，对标题的字体大小使用clamp(48px，5vw，72px)

在CSS3中，clamp()是一种用于计算长度的函数，它可以通过指定最小值、首选值和最大值来控制元素的长度，使其不超过指定的最大值和最小值。

clamp()的语法如下：

clamp(<min>, <preferred>, <max>)

其中，:

• <min>表示指定的最小值，可以是任意的长度值或百分比值。

• <preferred>表示要计算的首选值，可以是任意的长度值或百分比值。

• <max>表示指定的最大值，可以是任意的长度值或百分比值。

clamp()函数的计算结果是一个长度值。实际计算结果为以下伪代码：max(, min(, ))

下面是一个示例，通过使用clamp()函数来控制元素的长度：

.container{

width: clamp(200px, 50%, 500px);

}

在上面的示例中，container元素的长度将在200像素到500像素之间，如果可用空间允许，则计算的宽度为50%。这意味着如果在200像素到500像素的范围内可以容纳50%的宽度，则元素的宽度将为50%。否则，元素的最大宽度将被限制在500像素。

通过使用clamp()函数，在对于响应式设计中可以更为灵活地控制元素宽度，同时更容易实现自适应布局，减少布局宽度不足或者过大的问题。

• Where available, tabular figures should be applied with font-variant-numeric: tabular-nums, particularly in tables or when layout shifts are undesirable, like in timers

在Web开发中，tabular figures指的是具有相同的宽度的数字，通常用于表格中。与默认的"proportional figures"（字体数字）相比，tabular figures在表格中可以更好地对齐数字，以提高表格的易读性和美观性。

要应用tabular figures，可以使用CSS的font-variant-numeric属性，并将其设置为tabular-nums。在Web开发中，通过将font-variant-numeric设置为tabular-nums，可以确保数字的宽度与其他tabular figures数字的宽度相同。这个特性在表格中使用时非常有用，可以使得每列数字的宽度保持一致，因此可以更加清晰地比较不同的数据。

另外，tabular figures还可以使用在定时器等情况下。在一些场景下，只有当数字相等宽度时，才能保持稳定的布局，例如一些功率或时间显示。使用tabular figures可以确保这种情况的发生，并且避免因不同数字的不同宽度而导致布局的改变。

总之，在Web开发中，通过使用font-variant-numeric属性并将其设置为tabular-nums，可以更好的展示数字与字体的对应关系，使得数字更加清晰，更容易对齐，并且可以保持表格等结构的稳定布局。

• Prevent text resizing unexpectedly in landscape mode on iOS with -webkit-text-size-adjust: 100%

在Web开发中，-webkit-text-size-adjust是一个CSS属性，可以通过它来调整Web页面上文本的大小。针对iOS设备，当设备方向从竖屏模式切换到横屏模式后，浏览器默认会自动缩小文本字体的大小，以显示更多的文本内容。但在某些情况下，这个特性会导致文本显示不一致，给用户带来困扰，因此需要通过对-webkit-text-size-adjust设置来防止文本尺寸意外的缩放调整。

通过设置-webkit-text-size-adjust:100%，可以确保当设备切换到横屏模式时，文本的大小不会自动缩小。这是因为100%的值告诉浏览器，用与在竖屏模式下相同的尺寸来显示文本。这将保持文本在横屏模式下的相对大小，确保文本的可读性和可用性不会受到影响。

例如，以下CSS代码可以设置文本在iOS设备上不受横屏模式下的影响：

body{

-webkit-text-size-adjust: 100%;

}

总之，在Web开发中，通过为文本添加-webkit-text-size-adjust属性并将其设置为100%，可以确保iOS设备在横屏模式下不会自动调整文本的大小，从而保持文本的可读性和可用性。

Motion

• Switching themes should not trigger transitions and animations on elements 1

在暗模式或亮模式之间切换将触发元素上的转换，这些元素意味着像悬停这样的显式交互。我们可以暂时禁用转换来防止这种情况。对于Next.js，使用next-themes，这样可以防止跳出框架的过渡。

• Animation duration should not be more than 200ms for interactions to feel immediate

在Web开发中，主题切换指的是用户改变网站或应用的颜色、字体或样式方案，从而切换至另一个预定义的主题。这个过程中，如果元素（如按钮、文字等）的动画或过渡效果在主题切换过程中仍在继续，会给用户带来迷惑和不适感，因此最好在主题切换时禁用这些动画和过渡效果。

通常，禁用元素的动画和过渡效果可以通过以下两种方式来实现：

第一种方式是禁用CSS transitions和animations。这可以通过将这些属性设置为none来实现。例如：

.my-button {

transition: none; /* 禁用过渡动画 */

animation: none; /* 禁用动画 */

}

第二种方式是将动画和过渡效果暂停，然后在主题切换结束后再次恢复它们。这种方法可以通过JavaScript来实现。例如：

// 禁用过渡动画

var element = document.getElementById("my-element");

element.style.transition = "none";

// 禁用动画

element.style.animation = "paused";

// 主题切换结束后恢复过渡动画

element.ontransitionend = function() {

element.style.transition = "all 500ms ease"; // 恢复过渡动画

}

// 主题切换结束后恢复动画

element.onanimationend = function() {

element.style.animation = ""; // 恢复动画

}

总之，在Web开发中，为了避免在主题切换时给用户带来不必要的困扰，应该禁止元素的过渡动画和CSS动画。如果需要动画效果，可以通过JavaScript来暂停并在主题切换完成后恢复。这样可以确保主题切换的顺畅性，并提高用户体验。

• Animation values should be proportional to the trigger size:

• • Don't animate dialog scale in from 0 → 1, fade opacity and scale from ~0.8
  • Don't scale buttons on press from 1 → 0.8, but ~0.96, ~0.9, or so

在Web开发中，动画的值应该与触发器的大小成比例。这意味着，在设计动画效果时，应该根据触发器的大小来调整动画的值，以便动画的视觉效果与触发器的交互行为相匹配，让用户感到流畅和自然。

例如，在展示一个弹窗弹出时，通常会在网页上显示一个按钮，当用户点击这个按钮时，弹窗就会从屏幕上方或者下方以某种动画效果弹出来。在这种情况下，动画值应该与按钮的大小成比例。这样就可以让动画效果既可以弹出弹窗，又不会给用户造成视觉冲击。

具体而言，不应该在弹窗中使用从0到1缩放的动画效果。这样容易给用户造成迷惑，因为它们看不到弹窗的外形，这可能会让他们意识到屏幕上发生了什么。相反，建议使用某种方式从模糊显示到清晰或从较小到较大，以逐渐呈现弹窗的外观。

同样，当用户按下按钮时，按钮应该缩放一点，而不是从1到0.8或其他数字。这将使用户感到按下按钮后，按钮虽然被压缩了一些，但仍然能保留其实际大小和形状。

总之，在Web开发中，动画值应该与触发器的大小成比例。使用正确的动画效果可以增强用户的交互体验，并使动画流畅和自然。经过谨慎的设计和测试，可以实现一个更令人愉悦的、交互体验友好的网页或应用程序。

• Actions that are frequent and low in novelty（新奇度低）should avoid extraneous animations: 2

• • Opening a right click menu
  • Deleting or adding items from a list
  • Hovering trivial buttons

• Looping animations should pause when not visible on the screen to offload CPU and GPU usage
• Use scroll-behavior: smooth for navigating to in-page anchors, with an appropriate offset

在Web开发中，scroll-behavior是一个CSS属性，用于控制网页的滚动行为。默认情况下，浏览器会以瞬间滚动的形式跳转到页面内的锚点。使用scroll-behavior属性，我们可以实现更平滑的滚动效果。

当scroll-behavior设置为smooth时，浏览器在滚动时会使用平滑的动画效果来滚动页面，而不是直接跳到指定的位置。这使得滚动更加流畅、自然，也更加易于用户接受。

而导航到页面内锚点，通常会用到锚点链接，例如：

<a href="#section2">Go to Section 2</a>

对于像这样的锚点链接，使用scroll-behavior可以确保跳转到指定位置时，页面会平滑地滚动到锚点所在的位置。同时，为了使滚动效果更加平滑，我们还可以通过添加一些偏移量来使页面的滚动位置更加准确。例如：

html {

scroll-behavior: smooth;

}

/* 偏移量为50像素 */

a[href^="#"] {

padding-top: 50px;

margin-top: -50px;

display: block;

}

在上述代码中，我们为锚点链接添加了一个偏移量，为50像素。在点击这些锚点链接后，页面将会平滑地滚动到指定位置，并且偏移50像素的高度以满足设计需求。

总之，在Web开发中，使用scroll-behavior: smooth可以为网页的滚动行为增加平滑的动画效果，同时为锚点链接添加一个适当的偏移量，可以进一步提高页面滚动的准确性和舒适性，从而提高用户体验。

Touch

• Hover states should not be visible on touch press, use @media (hover: hover) 3
• Font size for inputs should not be smaller than 16px to prevent iOS zooming on focus
• Inputs should not auto focus on touch devices as it will open the keyboard and cover the screen
• Apply muted and playsinline to tags to auto play on iOS
• Disable touch-action for custom components that implement pan and zoom gestures to prevent interference from native behavior like zooming and scrolling
• Disable the default iOS tap highlight with -webkit-tap-highlight-color: rgba(0,0,0,0), but always replace it with an appropriate alternative

Optimizations

• Large blur() values for filter and backdrop-filter may be slow

高斯模糊blur()的单位是px，没有最大值限制，但是考虑到性能问题，不能设置太大

• Scaling and blurring filled rectangles will cause banding, use radial gradients instead
• Sparingly enable GPU rendering with transform: translateZ(0) for unperformant animations
• Toggle will-change on unperformant scroll animations for the duration of the animation 4
• Auto-playing too many videos on iOS will choke the device, pause or even unmount off-screen videos
• Bypass React's render lifecycle with refs for real-time values that can commit to the DOM directly 5

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

• Detect and adapt to the hardware and network capabilities of the user's device

Accessibility

• Disabled buttons should not have tooltips, they are not accessible 6
• Box shadow should be used for focus rings, not outline which won’t respect radius 7

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

• Focusable elements in a sequential list should be navigable with ↑ ↓

在一个有序列表中，可以使用上箭头（↑）和下箭头（↓）进行焦点切换。

在用户界面设计中，有时会有一系列具有焦点的元素，例如表单字段、按钮或菜单选项。这些元素可以通过键盘的方向键（上箭头和下箭头）按顺序在它们之间进行导航和切换焦点。

例如，假设有一个表单页面，其中有多个输入字段，如姓名、电子邮件和电话号码。按照这个原则，当用户按下上箭头时，焦点应该从当前字段导航到上一个字段，按下下箭头时，焦点应该从当前字段导航到下一个字段。

• Focusable elements in a sequential list should be deletable with ⌘ Backspace
• To open immediately on press, dropdown menus should trigger on mousedown, not click

mousedown是按下鼠标；click是按下并释放鼠标

下拉菜单的设计有时会采用在按下的时候立即打开菜单的问题

• Use a svg favicon with a style tag that adheres to the system theme based on prefers-color-scheme
• Icon only interactive elements should define an explicit aria-

aria-label 属性是一种用于为元素提供替代文本描述的属性，它通常用于屏幕阅读器等辅助技术，以便可视障碍用户能够理解和操作页面上的元素。通过为只包含图标的交互元素设置 aria-label 属性，可以确保辅助技术能够正确地传达元素的用途，而不依赖于可视化的图标。

• Tooltips triggered by hover should not contain interactive content

鼠标悬停不应该包含可交互元素

鼠标悬停一般显示提示，如果是交互内容，会发生操作意外中断；其次，用户不方便通过悬停访问

• Images should always be rendered with for screen readers and ease of copying from the right click menu

图片应该通过渲染，且易于使用鼠标右键进行复制

• Illustrations built with HTML should have an explicit aria-label instead of announcing the raw DOM tree to people using screen readers

对于使用屏幕阅读器的用户来说，对HTML构建的插图使用aria-label属性可以使其更明确插图的内容

• Gradient text should unset the gradient on ::selection state

渐变文本在用户选中时应该去掉渐变效果，为了更清晰易读。主要是考虑可能选中时的文本颜色和渐变色冲突，造成用户无法清晰阅读

• When using nested menus, use a "prediction cone" to prevent the pointer from accidentally closing the menu when moving across other elements.

在使用嵌套菜单时，可以使用“预测锥体”来防止鼠标指针在经过其他元素时意外关闭菜单。

嵌套菜单是指在一个菜单项中包含另一个菜单项，形成层级结构的菜单。在这种情况下，当用户鼠标滑过菜单时，可能会经过其他元素，而这个过程中鼠标指针的运动可能会意外地关闭菜单。

为了解决这个问题，可以使用所谓的“预测锥体”概念。预测锥体是一个区域，它扩展自当前活动的菜单项，用于延伸鼠标指针的判定范围。这样一来，即使用户的鼠标指针经过其他元素，只要仍然在预测锥体区域内，菜单不会意外关闭。只有当鼠标指针移出预测锥体区域时，菜单才会关闭。

通过使用预测锥体，可以更好地控制菜单的关闭行为，防止用户在操作菜单时不小心关闭。这提供了更好的用户体验，减少了用户可能遇到的困扰和错误。

因此，建议在使用嵌套菜单时，使用预测锥体来避免鼠标指针在经过其他元素时意外关闭菜单。这样可以提高用户的操作准确性和流畅度。

Design

• Optimistically update data locally and roll back on server error with feedback

该句话的意思是，可以在本地进行乐观更新数据，并在服务器出现错误时进行回滚，并提供相应的反馈信息。

在数据交互的过程中，通常存在将数据从客户端发送到服务器的操作，以及从服务器获取更新的数据的操作。在这个过程中，可以采用乐观更新的策略。

乐观更新是指在用户发起操作后，立即在本地更新数据，而不是等待服务器返回确认或结果。这样可以提高用户体验的响应速度，因为用户可以立即看到他们的操作的结果。

然而，乐观更新也存在一个风险，即服务器可能在处理更新请求时出现错误。为了处理这种情况，建议在发生服务器错误时进行回滚操作，即撤销之前的乐观更新，并返回到更新之前的状态。

同时，在发生服务器错误时，还建议提供相应的用户反馈信息，告知用户发生了错误，并可能需要重新操作或等待服务器问题解决后再进行操作。

通过在本地进行乐观更新、在服务器错误时回滚，并提供反馈信息，可以提供更好的用户体验。用户可以立即看到他们的操作效果，并在出现问题时得到相应提示，减少用户的困惑和误导。

因此，建议在数据交互过程中采用乐观更新策略，并在服务器错误时进行回滚操作，并提供相应的反馈信息，以提高用户体验和数据一致性。

• Authentication redirects should happen on the server before the client loads to avoid janky URL changes

身份验证重定向应该在服务器端进行，而不是在客户端加载之前，以避免 URL 的不稳定变化。

在进行身份验证过程中，通常会涉及到用户身份验证和重定向到受保护的页面或授权的操作。重定向是指在用户进行身份验证后，将用户从当前页面重定向到其他特定页面的操作。

根据这句话的描述，为了确保 URL 的稳定性和准确性，建议在服务器端进行身份验证重定向操作。这意味着在客户端加载页面之前，服务器会处理身份验证，并根据验证结果决定是否重定向到受保护的页面。

通过在服务器端进行重定向操作，可以避免客户端加载页面之后再进行重定向，从而避免因为客户端加载前的 URL 变化导致不稳定的体验或页面显示。

此外，还可以减少潜在的安全风险，因为服务器端能够更好地控制和验证重定向的目标页面和操作。

因此，建议在进行身份验证重定向时，在客户端加载之前在服务器端进行处理，以避免 URL 的不稳定变化，并提供更稳定和安全的用户体验。

• Style the document selection state with ::selection
• Display feedback relative to its trigger:

• • Show a temporary inline checkmark on a successful copy, not a notification
  • Highlight the relevant input(s) on form error(s)

这段描述着重强调了两个反馈显示的建议，并指出了如何与触发器相关联进行反馈的展示。

第一个建议是，在成功复制操作时，显示一个临时的内联勾号，而不是通知。当用户成功复制文本时，建议在复制触发器附近显示一个短暂的内联勾号。这样的设计将直接向用户传达复制操作的成功，而无需依赖弹出通知框等间接方式。

第二个建议是，在表单错误发生时，要突出显示相关的输入框。提交表单后，如果存在错误，建议通过突出显示相关的输入框来提供反馈。这可以通过改变输入框的边框样式、背景色或其他突出方式来实现。

这两个建议的核心思想是，将反馈与触发器相关联，以提供更直观和准确的反馈信息。通过这样的设计，用户可以直接与操作结果进行交互，无需寻找通知或遍历整个表单以找到相关的错误提示。

通过显示临时的内联勾号和突出显示相关的输入框，可以提升用户体验，使用户更容易理解和处理操作结果。

综上所述，建议根据触发器的不同，采取相应的反馈展示方式：

• 对于成功的复制操作，展示一个临时的内联勾号。
• 对于表单错误，突出显示相关的输入框。

• Empty states should prompt to create a new item, with optional templates

该句话的意思是，空状态应该提示用户创建一个新的项目，并且可以提供可选的模板。

在应用程序或界面中，当某个数据集合为空时（例如，没有任何项目或条目），常常会出现空状态。空状态通常是指展示给用户的界面内容，用于提醒用户当前数据为空，并鼓励用户采取相关操作。

根据该建议，空状态应该包含创建新项目的提示。当用户看到空状态时，界面应该明确告诉用户他们可以通过创建新项目来填充数据集合。

此外，该建议还提到可选的模板。在一些情况下，应用程序可能希望为用户提供一些可选的模板，以帮助他们更快速地创建新项目。这些模板可以是预定义好的项目格式或者示例，用户可以选择其中一个作为起点，并进行个性化编辑，以便更方便地创建新项目。

综上所述，该建议强调在空状态下引导用户创建新项目，并提供可选的模板作为辅助。这有助于用户更好地理解和利用空状态，并提供更顺畅和用户友好的体验。

1. Switching between dark mode or light mode will trigger transitions on elements that are meant for explicit interactions like hover. We can disable transitions temporarily to prevent this. For Next.js, use next-themes which prevents transitions out of the box.

该段描述了在切换深色模式或浅色模式时，会触发本来是用于显式交互（如悬停）的元素的过渡效果。为了避免这种情况发生，可以暂时禁用过渡效果。对于 Next.js，可以使用 next-themes 库来自动禁用过渡效果。

当用户切换应用程序的深色模式或浅色模式时，页面的样式可能发生变化，包括元素的颜色、背景和过渡效果等。然而，某些元素可能是用于显式的交互效果，例如悬停时出现的效果或动画，这些效果可能不希望在模式切换时触发。

为了解决这个问题，可以临时禁用过渡效果，以防止它们在模式切换时触发。这样可以确保用户在切换模式时不会看到不必要的过渡动画，从而提高用户体验。

在 Next.js 中，可以使用 next-themes 库来自动禁用过渡效果。next-themes 是一个与 Next.js 集成的库，它提供了一种简单的方式来切换应用程序的主题模式，并且在切换模式时会自动处理过渡效果，防止它们被触发。

综上所述，该建议提到了切换深色模式或浅色模式时禁用元素过渡效果，并介绍了使用 next-themes 库来在 Next.js 中实现自动禁用过渡效果的方法。这样可以确保模式切换不会干扰到显式交互效果，提供更好的用户体验。

2. This is a matter of taste but some interactions just feel better with no motion. For example, the native macOS right click menu only animates out, not in, due to the frequent usage of it.

这句话表达了一个主观观点，即有些交互在没有运动效果的情况下会更好。例如，原生 macOS 的右键菜单只有退场动画而没有进场动画，这是因为右键菜单的使用非常频繁。

这个观点认为，对于某些交互，去除动画效果可以提供更好的用户体验。举例来说，由于右键菜单经常被使用，只应用退场动画而不使用进场动画。这样做可以减少交互的延迟和视觉干扰，提高操作的迅捷性和流畅性。

需要注意的是，关于是否在特定交互中使用动画效果，这是一个主观的问题，取决于用户的个人偏好和使用场景。有些用户可能更喜欢动画效果，因为它们提供了更明显的视觉反馈和过渡效果，而有些用户则更喜欢简单直接的交互方式。

因此，是否在特定交互中使用动画效果是一个主观的决定，可以根据特定的用户需求和上下文来进行权衡。在设计中，需要考虑用户的期望和习惯性使用，以提供最佳的用户体验。

3. Most touch devices on press will temporarily flash the hover state, unless explicitly only defined for pointer devices with @media (hover: hover).

该段描述了在按下触摸设备时，大多数设备会临时显示悬停状态，除非明确通过@media (hover: hover)仅为指针设备定义。

在触摸设备上，当用户按下触摸屏幕时，通常会出现一个瞬时的悬停效果。这种效果是设备的默认行为，用于提供视觉反馈，让用户知道他们已经按下了特定的元素。

然而，通过@media (hover: hover)可以针对指针设备进行特殊定义。这意味着只有在使用指针设备（如鼠标）时才会触发悬停效果，而在触摸设备上则不会触发。这样可以根据不同设备的特性来控制悬停效果的显示。

综上所述，该段描述了触摸设备上按下时临时显示悬停状态的默认行为，并介绍了通过@media (hover: hover)可以仅为指针设备定义悬停效果的方法。通过针对不同设备的特性进行定义，可以提供更准确和一致的用户体验。

4. Use will-change as a last resort to improve performance. Pre-emptively throwing it on elements for better performance may have the opposite effect.

该段说明了在提高性能时，应将 will-change 属性作为最后的选择。在元素上预先使用 will-change 属性以提高性能可能会产生相反的效果。

will-change 是一个CSS属性，用于提示浏览器某个元素将要发生的变化，以便浏览器在准备阶段进行优化。通过明确指定将要发生变化的属性，浏览器可以提前进行相关资源的分配和准备，以提高性能。

然而，滥用 will-change 属性可能会导致性能问题。如果大量使用 will-change 属性并且没有实际的性能瓶颈需要解决，反而会增加浏览器的负担，导致性能下降。

因此，该建议认为，在优化性能时，应将 will-change 属性作为最后的选择。只有在确实遇到性能问题时，才应考虑使用 will-change 属性来明确指定将要发生变化的属性。预先在元素上大量使用 will-change 属性可能会产生相反的效果，降低性能而不是提高性能。

5. This might be controversial but sometimes it can be beneficial to manipulate the DOM directly. For example, instead of relying on React re-rendering on every wheel event, we can track the delta in a ref and update relevant elements directly in the callback.

这句话表达了一个有争议的观点，即有时直接操作 DOM 可以带来好处。例如，与其依赖 React 在每次滚动事件上重新渲染，我们可以在回调函数中直接跟踪滚动的增量，并直接更新相关的元素。

这个观点认为，在某些情况下，绕开框架的渲染机制，直接操作 DOM 可以提供更好的性能和灵活性。在上述例子中，通过使用 ref 对象跟踪滚动的增量，我们可以避免 React 在每次滚动事件时重新渲染整个组件树，从而提高性能。

这种方式可以在特定场景下带来一些优势：更细粒度的控制、更快的渲染速度、更少的重新渲染开销等。然而，需要注意的是，直接操作 DOM 可能会让代码变得更为冗长、可读性降低，同时也可能失去一些框架提供的关于状态管理和一致性维护的好处

6. Disabled buttons do not appear in tab order in the DOM so the tooltip will never be announced for keyboard users and they won't know why the button is disabled.

这段话解释了为什么禁用的按钮在 DOM 中不会显示在 Tab 顺序中，这样键盘用户就无法通过 Tab 键聚焦到禁用的按钮上，并且无法获取与禁用按钮相关的提示信息，因此会不知道为什么按钮被禁用。

在网页中，Tab 键是用于在交互中导航到不同的可聚焦元素，如输入框、链接和按钮等。禁用的按钮被设计为在交互中不可用，因此，根据设计，禁用按钮不应该出现在 Tab 顺序中，也不应该作为键盘焦点移动的目标。

然而，对于使用键盘进行导航和交互的用户，他们无法通过 Tab 键将焦点移动到禁用的按钮上，并且没有任何对禁用状态的提示。这意味着，键盘用户无法得知按钮为什么被禁用，因为他们无法获得与按钮相关的提示信息。

为了解决这个问题，开发人员可以考虑提供其他辅助性的提示，例如使用 ARIA 属性（如 aria-describedby）为禁用按钮关联一个提示文本，或者通过在按钮旁边添加一个可见的提示元素来解释按钮被禁用的原因。这样，键盘用户就能够获得与禁用按钮相关的提示信息，从而更好地理解为什么按钮被禁用，增强了可访问性和用户体验。

7. As of 2023, Safari will not take the border radius of an element into account when defining custom outline styles. Safari 16.4 has added support for outline following the curve of border radius. However, keep in mind that not everyone updates their OS immediately.

这段话提到了目前（截至2023年）的情况，即Safari浏览器在定义自定义轮廓样式时不会考虑元素的边框半径。然而，Safari 16.4版本已经增加了支持按照边框半径进行轮廓绘制的功能。然而，需要记住并不是每个用户都会立即更新操作系统。

在早期的Safari版本中，当为元素添加自定义轮廓样式时，该样式不会按照边框半径的曲线进行绘制，而是简单地绘制直角轮廓。这意味着，元素的圆角边框在应用自定义轮廓样式时可能会出现不匹配或不一致的情况。

然而，根据提到的Safari 16.4版本的变化，这个问题已经得到了修复，Safari开始支持按照边框半径绘制轮廓，从而使得自定义轮廓样式能够正确地沿着元素的圆角进行绘制。

尽管如此，需要意识到并非每个用户都会立即更新其操作系统或浏览器版本，因此在实际开发中仍然需要考虑到不同用户使用不同的Safari版本的情况。在实现自定义轮廓样式时，可以使用一些技巧或回退方案，确保即使在旧版本的Safari上，元素的边框半径和自定义轮廓样式也能够保持一致和正确显示。

写在最后：

即使借助工具对以上内容进行研读，但由于开发经验较少，一些建议仍然不明白其原因和处理原理。还请大家多补充细节、发表自己的理解与观点，这样可以更清晰地明白一些设计原理。