新拟态和 CSS

新拟态（又名新拟态）是一种相对较新的设计趋势，最近引起了很多关注。它的审美特征是极简主义和逼真的 UI，是对拟物化的重新诠释——因此得名。它在 2019 年 12 月的一篇 UX Collective 文章 中首次被命名，从那时起，各种设计和开发社区一直在积极讨论这一趋势，通常意见不一。Chris 在 Twitter 上 嘲笑它。Adam Giebl 为其创建了一个 在线生成器。开发人员、设计师和 UX 专家正在权衡这种设计趋势的美学、可用性、可访问性和实用性。

显然，它在社区中引起了某种共鸣。

让我们将脚趾浸入新拟态池中，展示使用我们选择的语言 CSS 可以创建的各种新拟态效果。我们将看看支持和反对这种风格的论据，并权衡它如何在 Web 界面中使用。

新拟态作为用户界面

我们已经确定，新拟态的决定性品质是极简主义和拟物化的融合。这是一个很好的看法。想想 Material Design 的极简审美和拟物化的超现实外观。或者，回想一下 2007-12 年左右的 Apple 设计标准，并将其与今天它生产的界面进行比较。

如果我们将本世纪初 Apple 的拟物化设计视为一个极端，并将今天的极简主义 UI 视为另一个极端，那么我们可以认为新拟态是介于两者之间的东西。

新拟态 UI 元素看起来像是与背景相连，就好像元素是从背景中突出或嵌入到背景中一样。由于使用了柔和阴影来创造这种效果，它们被一些人描述为“柔和的 UI”。

理解新拟态 UI 的另一种方法是将其与 Material Design 进行比较。让我们使用常规的卡片组件来区分两者。

让我们从纯粹的设计角度来分解这些差异。

质量	Material Design	新拟态
阴影	元素周围有一个或多个暗色阴影。	元素有两个阴影：一个浅色阴影和一个深色阴影。
背景颜色	元素的背景颜色可以不同于父元素的背景颜色。	背景颜色必须与父元素的背景颜色相同（或非常相似）。
边缘	元素可以是圆角或方形。	圆角是决定性特征。
边框	边框没有硬性规定。使用它们可以帮助防止看起来漂浮在屏幕外的元素。	元素可以有一个可选的细微边框，以提高对比度并使边缘更加清晰。

这应该很好地描绘了我们提到新拟态时所谈论的内容。让我们继续讨论它在 CSS 中是如何实现的。

新拟态和 CSS

使用 CSS 创建新拟态界面看起来像是在任何元素上应用常规的 `box-shadow` 属性一样容易，但实际上比这更细致入微。新拟态 UI 的独特性在于使用多个 `box-shadow` 和 `background-color` 值来实现不同类型的效果和变体。

新拟态盒阴影

让我们先快速回顾一下 `box-shadow` 属性，以便我们能够更好地理解。以下是语法

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

以下选项可以调整

• 水平偏移：正值将阴影偏移到右侧，而负值将阴影偏移到左侧。
• 垂直偏移：正值将阴影向上偏移，而负值将阴影向下偏移。
• 模糊半径：阴影的长度。长度越长，阴影就越大、越轻。没有负值。
• 扩展半径：这也是一个长度值，其中更大的值会导致更大、更长的阴影。
• 颜色：这定义了阴影的颜色，就像我们对 CSS 颜色属性所做的那样。
• 内嵌：默认值（初始）导致下拉阴影。使用 `inset` 值会将阴影移动到元素框架内部，从而产生内阴影。

我们可以使用逗号分隔的 `box-shadow` 值应用多个阴影。最多可以连接四个值，每个值对应于框的每一侧。

box-shadow: 20px 20px 50px #00d2c6, 
            -30px -30px 60px #00ffff;

以下显示了新拟态 UI 元素的 `box-shadow` 属性值。可以根据元素的大小以及您试图实现的效果强度，调整单个偏移、模糊和不透明度值。对于新拟态，需要保持阴影柔和且对比度低。

正如我们之前提到的，新拟态元素的核心部分是使用两种阴影：浅色阴影和深色阴影。这就是我们获得这种“凸起”效果的方式，我们可以通过更改阴影的“光源”来创建变体。

需要设置两个正偏移值和两个负偏移值。考虑到这一点，我们只需更改每个阴影的位置，就可以得到以下四种组合。

让我们使用 CSS 变量来保持值抽象并更好地理解这些变体。

box-shadow: var(--h1) var(--v1) var(--blur1) var(--color-dark), 
            var(--h2) var(--v2) var(--blur2) var(--color-light);

光源	正值	负值
左上角	--h1, --v1	--h2, --v2
右上角	--h2, --v1	--h1, --v2
左下角	--h1, --v2	--h2, --v1
右下角	--h2, --v2	--h1, --v1

我们可以使用内阴影来创建更多变体。与使元素看起来从背景下方凸起的下拉阴影不同，内阴影会让元素看起来像是被压入背景中。

我们可以通过分别应用 `initial`（不应用任何选项）或 `inset` 来更改元素是从背景中突出还是嵌入到背景中。

让我们将光源保持为**左上角**，只切换 `inset` 选项以查看区别。

背景颜色

您可能已经注意到 `box-shadow` 值会改变新拟态元素边缘的外观。到目前为止，我们还没有更改 `background-color`，因为它需要是透明的，或者与底层元素的背景颜色（例如元素的父元素）相同（或相似）。

我们可以使用纯色和渐变背景。当纯色与底层元素的颜色相同时，在元素上使用纯色背景可以创建一种扁平表面的外观。

另一方面，使用微妙的渐变可以改变对表面的感知。与 `box-shadow` 属性一样，渐变中有一个浅色值和一个深色值。需要调整渐变角度以匹配光源。使用渐变时，我们有以下两种变体

• 凸表面变体：渐变的浅色部分与阴影的浅色部分对齐，渐变的深色部分与阴影的深色部分对齐，表面向外弯曲。
• 凹表面变体：渐变的浅色部分与阴影的深色部分对齐，渐变的深色部分与阴影的浅色部分对齐，表面向内弯曲。

.element {
  background: linear-gradient(var(--bg-angle), var(--bg-start), var(--bg-end));
  box-shadow: var(--h1) var(--v1) var(--color-dark), 
              var(--h2) var(--v2) var(--color-light);
}

新拟态实践

让我们看看将拟物化应用于一个简单的按钮时它的表现。拟物化界面的主要特征是它与背景融合，并且通过具有与底层元素相同或相似的背景颜色来实现这一点。许多按钮的主要目的，尤其是主要的号召性用语，是尽可能地脱颖而出，通常使用醒目的背景颜色来将其与页面上的其他元素和其他按钮区分开来。

拟物化中的背景颜色约束消除了这种便利性。如果按钮的背景颜色与它所处位置的背景颜色匹配，我们就会失去用独特颜色使其在视觉上脱颖而出的能力。

我们可以尝试调整文本颜色，在文本下方添加边框，添加图标或其他一些元素来增加视觉权重使其脱颖而出，等等。无论如何，拟物化按钮上的纯色背景似乎比渐变更突出。此外，它可以与活动状态的内阴影配对，以产生良好的“按下”效果。

从现实世界中的设备中获得一些灵感，我创建了以下示例，试图改进拟物化按钮和切换概念。虽然结果看起来好一些，但普通按钮仍然提供更好的用户体验，约束更少，更灵活，更易于实现，并且总体上效果更好。

第一个示例的灵感来自我路由器上的一个按钮，该按钮从设备上突出，并贴有一个带有图标的贴纸。我添加了一个类似的“贴纸”元素，带有纯色背景以及轻微的内缩，以增加视觉权重并尽可能地使其突出，以接近理想的按钮。第二个示例的灵感来自汽车控制面板，其中按钮在处于活动（按下）状态时会亮起。

让我们看一下更多 HTML 元素。拟物化的一个缺点是，它不应应用于可以具有各种状态的元素，例如输入、选择元素、进度条等。这些状态包括

• 用户交互：悬停、活动、聚焦、已访问
• 验证状态：错误、成功、警告、禁用

UX 和可访问性规则要求某些元素在其各自的验证状态和用户交互状态下看起来有所不同。拟物化的约束和限制严重限制了实现每个可能状态的不同样式所需的自定义选项。变化将非常细微，并且可能无法涵盖所有状态。

很难看出哪些元素是可点击的！即使这是展示问题的最简单示例，我们也可以添加额外的元素和样式来尝试缓解问题。但是正如我们在按钮示例中所看到的，其他一些类型的元素在 UX 和可访问性方面仍然会表现更好。

重要的是要注意，由于阴影和圆角，拟物化元素也占用更多空间（内部填充和外部边距）。拟物化效果在尺寸很小的元素上看起来不太好，仅仅是因为视觉效果会占用元素。

拟物化的理想元素是卡片，或任何其他不根据用户交互（例如悬停、活动和禁用）或验证（例如错误、警告和成功）具有状态的静态容器元素。

在 关于拟物化的评论文章中，Michal Malewicz（他帮助将“拟物化”一词创造出来）建议在看起来已经很不错的卡片上添加拟物化效果。

所以它只有在卡片本身具有正确的结构时才能正常工作，并且整个凸出对于层次结构来说是不必要的。

看到了吗？

它在可以移除它而不会对产品造成任何损失的情况下效果很好。

可访问性和 UX

我们已经了解了哪些元素适合拟物化，但在将效果添加到元素时，需要注意一些重要的规则和限制。

首先是可访问性。这是一个大事，也许是拟物化的最大缺点：颜色对比度。

拟物化 UI 元素依赖于多个阴影，这些阴影有助于将元素融合到其所在的背景中。 使用微妙的对比度实际上并不适合可访问的 UI。如果对比度检查器正在扫描您的 UI，它很可能会指出您没有在前景和背景之间提供足够的对比度，因为阴影不适合方程，即使它们适合，它们也会太微妙而无法产生太大影响。

以下是一些关于拟物化设计可访问性的 有效批评

• 患有色盲和视力障碍的用户由于软阴影造成的对比度差而难以使用它。
• 当效果在页面上过度使用时，页面层次结构难以感知。由于背景颜色的限制，没有特定的元素脱颖而出。
• 当效果在页面上过度使用时，用户可能会感到困惑。由于凸出效果，很难确定用户可以与哪些元素交互以及哪些是静态的。

为了实现与阴影的良好对比度，拟物化元素所处位置的背景颜色不应过于接近 RGB 极端值（白色和黑色）的边缘。

让我们谈谈 UX 一分钟。尽管拟物化 UI 看起来很美观，但它不应成为页面上的主导风格。如果使用过于频繁，UI 将会产生一种压倒性的塑料效果，并且视觉层次结构将变得杂乱无章。当引导用户前往最重要的内容或主要流程时，页面可能会轻易失去其预期的结构。

我个人的看法是，拟物化最好用作另一种风格的增强功能。例如，它可以与 Material Design 配合使用，以区分各种组件风格。最好适度使用它，以便它为屏幕上的某些内容添加一种新的外观——它的使用会产生递减收益，最好注意这一点。

以下是一个示例，其中拟物化特性与 Materialize CSS 结合使用，应用于卡片元素。

看，当用作强调而不是整个框架时，它可能会非常不错。

总结

这就是对拟物化的深入了解。我们分解了是什么使这种风格与其他流行风格不同，研究了几种在 CSS 中重新创建效果的方法，并考察了它对可访问性和用户体验的影响。

在实践中，完整的拟物化设计系统可能无法在网站上使用。它对可以使用哪些颜色限制过于严格。此外，它会导致软对比度的事实阻止它用于交互式元素，例如按钮和切换元素。当然，它在审美上令人愉悦，现代且独特，但这不应以可用性和可访问性为代价。它应该适度使用，最好与其他设计系统（如 Material Design）结合使用。

拟物化不太可能取代我们今天使用的当前设计系统（至少在我看来），但它可能会在这些设计系统中找到自己的位置，作为现有卡片和静态容器风格的新选择。

参考

• 用户界面中的拟物化
• 拟物化——僵尸趋势
• 让我们谈谈拟物化和可访问性