了解 Web 开发中的新形态设计：它是什么、如何实现以及何时使用它

近年来，新形态设计的概念在网页开发和 UI/UX 设计社区中掀起了波澜。新拟态主义以其独特的现代美学结合了拟物主义和极简主义的元素，提供了一种使界面脱颖而出的全新方式。本文深入探讨什么是新形态设计、实现它的步骤以及 Web 开发的实际用例。

---

什么是新形态设计？

新拟物主义，或“新拟物主义”，是一种将现实、近乎触觉的元素与极简主义方法融合在一起的设计风格。它主要使用柔和的阴影、微妙的渐变和柔和的颜色来创建看起来像是由与背景相同的材料模制而成的元素。这会产生凸起或凹陷的效果，使元素看起来三维，但仍与整体布局和谐。

与模仿现实世界纹理和材质的传统拟物化不同（想象一下看起来像真实相机的应用程序图标），新拟物更多的是创造深度和精致的美感，而不是复制现实。它非常适合简单、平滑的形状，通常出现在中性、柔和的调色板中。

新形态设计的主要特征

1. 软阴影：新态依赖于两个阴影 - 元素下方的深色阴影和元素上方的浅色阴影 - 来创建深度效果。
2. 微妙的渐变：为了实现模压效果，新形态设计通常包括非常柔和的渐变，使元素看起来稍微圆形或凸起。
3. 低对比度：新形态设计通常涉及 UI 元素和背景之间的低对比度，从而使界面具有柔和、统一的外观。
4. 单色和柔和的颜色：新形态设计通常使用柔和的配色方案，这有助于创建现代、干净的外观，但不会压倒内容。

如何在 CSS 中实现新形态设计

在 CSS 中创建新形态设计相对简单。这是使用简单 CSS 属性实现新形态元素（如按钮）的分步指南。

第 1 步：选择背景颜色

从中性背景颜色开始，通常是浅灰色或柔和的颜色。这将帮助柔和的阴影脱颖而出，而又不会太刺眼。

body {
  background-color: #e0e0e0; /* A light gray background */
}

第2步：应用双阴影

要创建 3D 效果，请在元素上应用两个阴影：一侧较暗的阴影，另一侧较浅的阴影。这是新形态按钮的示例：

button {
  background-color: #e0e0e0; /* Same as the background color */
  border-radius: 12px;
  box-shadow: 
    8px 8px 16px #b8b8b8, /* Dark shadow */
    -8px -8px 16px #ffffff; /* Light shadow */
  width: 150px;
  height: 50px;
  border: none;
  font-size: 16px;
}

此 CSS 将使按钮看起来好像从背景中稍微凸起，从而赋予其柔和的模压外观。

第 3 步：添加悬停效果（可选）

添加悬停效果可以提高交互性并增强用户体验。要使按钮在单击时看起来被按下，请反转阴影：

body {
  background-color: #e0e0e0; /* A light gray background */
}

通过此更改，当鼠标悬停或单击时，该按钮似乎被压入背景。

第 4 步：使用渐变以获得更真实的效果

在背景颜色上添加微妙的渐变可以提高效果的真实感：

button {
  background-color: #e0e0e0; /* Same as the background color */
  border-radius: 12px;
  box-shadow: 
    8px 8px 16px #b8b8b8, /* Dark shadow */
    -8px -8px 16px #ffffff; /* Light shadow */
  width: 150px;
  height: 50px;
  border: none;
  font-size: 16px;
}

此渐变赋予元素略微圆润的效果，增强 3D 外观，同时又不影响设计的柔和度。

---

何时使用新形态设计

新形态设计在视觉上很有吸引力，但它并不适合所有用例。以下是新态主义运作良好的一些场景，以及一些它可能不是最佳选择的场景。

理想的用例

1. 极简界面：新形态在极简设计中大放异彩，屏幕上几乎没有元素，例如登陆页面、音乐播放器和仪表板应用程序。
2. 展示视觉美学：对于旨在给人留下深刻印象的界面（如作品集网站、创意机构网站和某些电子商务网站），新形态元素可以创造出现代、精致的外观。
3. 深色和浅色主题：新形态与深色和浅色主题切换配合得很好，因为它的 3D 元素可以轻松适应不同的配色方案。

局限性

1. 辅助功能挑战：低对比度设计可能会带来辅助功能问题，特别是对于有视力障碍的用户而言。对于那些依赖较高对比度的人来说，新形态设计可能很难区分。
2. 高交互应用程序：在需要许多按钮或交互元素的应用程序中，低对比度可能会导致用户视觉上混乱和困惑。
3. 文本较多的界面：由于新形态设计依赖于柔和的阴影和微妙的颜色变化，因此如果在文本较多的页面上过度使用，它会降低可读性。

---

创建新形态设计的工具

有多种设计工具可以轻松为您的项目创建新形态组件：

• Neumorphism.io：这个在线工具可让您尝试使用阴影、背景颜色和渐变来创建新形态设计，并提供 CSS 代码以方便集成。
• Figma/Sketch 插件：Figma 中的 Neumorphism 等插件或 Sketch 中的类似工具可以帮助创建新形态效果，而无需从头开始编码。
• Adobe XD：Adobe XD 的阴影和渐变选项可让您轻松预览和调整新形态效果。

---

最后的想法

新形态设计为现代 UI 设计带来了现实感，为数字元素增添了深度和维度。如果仔细使用，它可以使界面看起来时尚且具有凝聚力。然而，由于其在可访问性和高交互性环境方面的局限性，应有选择地使用新态，以补充设计的整体功能和可用性。

新形态代表了审美吸引力和可用性的独特交集，通过适当的平衡，它可以以令人兴奋的方式增强您的设计。所以，继续吧，尝试在您的下一个项目中添加一些新形态的风格，并观看您的界面通过流畅的触觉元素变得栩栩如生！

您可以在这里查看代码

以上是了解 Web 开发中的新形态设计：它是什么、如何实现以及何时使用它的详细内容。更多信息请关注PHP中文网其他相关文章！