设计一种焦点风格

焦点很重要。它告诉我们当前关注的是哪个元素。大多数开发者建议保留默认的焦点样式。

我认为默认样式存在问题。我尝试寻找灵感来设计更好的焦点样式，但没有找到任何相关信息。所以我快速地研究了一下，访问了我常用的网站，并留意了它们的焦点样式。

我想在这篇文章中记录我的研究和发现。希望对您有所帮助：

1. 了解默认焦点样式存在的问题
2. 希望能给你一些灵感，帮助你设计自己的焦点风格。

我们先来谈谈浏览器默认焦点样式的优缺点。

默认设置的优缺点

优点

默认对焦方式很棒，因为我们很熟悉它。当我们看到物体周围出现蓝色光环时，就知道它已经对焦清晰了。

注意：由于默认的焦点样式是内容周围的圆环，我将交替使用“焦点环”和“焦点样式”这两个术语。

它还很棒，因为你不需要编写任何代码就可以创建一个可用的对焦环。

缺点

这是主要问题所在。不同浏览器的默认焦点样式各不相同，它们并不一致。

• Safari：蓝色实线轮廓
• 火狐浏览器：细虚线轮廓
• Chrome：蓝色模糊轮廓

这是第二个主要问题。默认对焦模式在某些情况下对比度不足。

Firefox 的细虚线轮廓在白色背景上对比度不足，几乎看不清。好在 Firefox 在深色背景下会将轮廓从黑色切换为白色，对比度尚可。

Safari 和 Chrome 浏览器在深色背景的页面上，蓝色轮廓线对比度不足。如果使用蓝色背景，对比度会更差。

第三个问题。Chrome的焦点环模糊效果使元素看起来没有焦点。

对焦环的作用是引导视线聚焦到被对焦的物体上。如果对焦环模糊了，就会失去焦点。为什么要把视线引导到某个物体上，同时又让它失去焦点呢？这说不通。你到底是在告诉我该对焦还是不该对焦？

第四个问题。这更多是设计方面的问题。在考虑品牌塑造时，你希望用户在你的网站上获得尽可能一致的体验。无论他们使用的是 Safari、Chrome 还是 Firefox，都不应该影响用户体验。

专注度只是整个体验的一小部分。我们有工具确保在不同浏览器上保持专注度的一致性。这并不难！

如果你“只使用默认设置”，这是否意味着焦点在你的设计过程中是事后才考虑的？

专注灵感

我找不到任何关于对焦环设计的优秀文章，所以我就去我常去的网站，特别留意了它们的对焦设计。🤓

CSS技巧

CSS Tricks 为每个元素使用了默认的焦点环。

链接方面新增了一个小功能。如果您仔细查看链接，会发现它们采用了渐变色设计。我非常喜欢这种渐变色效果，它为网站增添了许多个性。

然而，按钮并没有得到任何特殊处理。如果将焦点移到按钮上，只会看到默认的对焦样式。此外，对焦环在深色背景下也显示不清晰。

不过，标签的处理方式比较特殊。当我注意到文章的标签时，白色的边框格外显眼。与其他元素相比，这个边框非常清晰。

《粉碎杂志》

Smashing Magazine 使用了深红色边框，而不是默认的边框颜色。我觉得这样看起来更舒服。而且对于大多数链接来说，对比度也足够高。

然而，当背景是红色时，深红色轮廓线并不能使重点元素更加突出。对比度并不高。但文字颜色从白色变为黑色确实吸引了我的注意力。

当我用 Tab 键点击红色背景上的按钮时，深红色的轮廓线并没有引起我的注意。color从蓝色到红色的转变也不足以吸引我的注意力。

我内心深处或许期待着按钮会发生变化background-color。但无论我如何期待，我都没能察觉到按钮何时获得了焦点。

叽叽喳喳

Twitter 使用了多种样式组合来突出重点。他们使用了：

1. 大多数元素的默认对焦环
2. 文本链接带有下划线（无焦点环）
3. 按钮的背景和轮廓更改

我的想法是这样的。

1. 默认对焦环对比度不足。
2. 带下划线的链接（没有对焦环）无法引起我的注意。我不得不自己寻找我对焦的内容。
3. 我非常喜欢按钮的焦点样式。背景颜色的细微差别赋予了每个操作独特的个性。

在侧边栏，Twitter 会用亮色边框（我怀疑是用outline）突出显示每个菜单项，并且 也会有所变化background-color。这些变化很显眼，吸引了我的注意力。

然而，由于“推文”按钮的轮廓线较浅，其焦点样式并不十分明显。与按钮本身明亮的颜色相比，对比度不足background-color。

松弛

Slack 的焦点显示效果不错。他们在重点元素周围添加了（细小的）深蓝色边框和（较大的）浅蓝色底纹。

我喜欢深蓝色边框与其他元素形成鲜明对比的效果。同时，我也喜欢浅蓝色调使深蓝色边框与同一页面上的其他元素融合在一起的效果。

（虽然我在这里使用了“边框”一词，但我怀疑这是用……创建的box-shadow）。

Slack 在侧边栏使用了相同的样式，但他们用的是白色。这种样式在深色和浅色背景下都适用！

WTF表格

在我的研究过程中，克里斯·科伊尔向我推荐了马克·奥托设计的WTF Forms。WTF Forms的对焦环看起来很不错！它由两部分组成：

1. 白色边框
2. 还有一条纯蓝色的边框

（再次说明，虽然我使用了“边框”这个词，但实际上它是用……创建的box-shadow）。

我的网站

如果没有检验我创建专注风格是否成功，我的研究就不算完整。（坏习惯）

结果发现，我网站上的链接不够醒目。仅仅改变颜色不足以立即吸引我的注意力。如果我加上对焦环就足够了！

不过，我在导航设计方面做得不错。粉色边框和动画效果让焦点元素更加突出。🎉

我学到的

默认的对焦环可以用。虽然它存在一些问题，但足以满足需求，尤其是在你没有时间和精力去制作自定义对焦环的情况下。（其实制作自定义对焦环很简单，我会在下一篇文章中介绍。）

如果你想设计自己的专注风格，你需要考虑四个变量。每个变量的存在都能让你的专注风格更加突出。我已按重要性对这些变量进行了排序。

1. 创建轮廓（包括轮廓、阴影、边框等）。
2. 动画（如有）
3. 更改背景颜色（如有）
4. 更改文本颜色（如有）

轮廓线效果最佳，因为它们能产生最大的对比度。

其次是动画，因为我们的目光会被移动的物体所吸引。

有时，变化本身background-color就足以产生效果。这是因为变化发生在相对较大的表面积上。

最后，你需要考虑更改color。color请与我上面提到的其他三点结合使用。尽量避免color单独使用，因为对比度可能不足以吸引键盘用户的注意力。

感谢阅读。本文最初发布在我的博客上。如果您想阅读更多帮助您成为更优秀的前端开发人员的文章，请订阅我的邮件列表。