Creating Neumorphic Designs with CSS

新形态（Neumorphism），也称为“柔和 UI”或“浮雕 UI”，是一种现代设计理念，为计算机界面增添了微妙而有触感的元素。它既受到拟物设计和扁平化设计理念的启发，又旨在平衡真实感与简洁性。

新形态配置突出显示了从基础中略微凸起的元素，通过柔和的阴影营造出一种深度感。这些阴影经过精心设计，以模仿自然光源的影响，从而带来更逼真、更具沉浸感的用户体验。

新形态设计通常采用简单的调色板，选择浅灰色和白色等中性色。设计强调干净、简单的形状，带有向内凹陷的元素。物体顶部边缘的微妙高光增加了光感，并柔化了整体外观。

这种趋势在按钮和输入字段等交互式功能中最为明显，因为设计会动态地响应用户输入。例如，当按钮被单击时，其阴影或高光可能会发生变化，以提供视觉反馈。

虽然新形态增加了真实感，但它消除了不必要的细节，从而呈现出一种现代而流畅的外观。项目与背景之间的高对比度有助于识别视觉层次结构，并改善不同界面的分离。

特性

1. 拟物设计的影响

新形态包含拟物设计的元素，这是一种模仿真实事物的平面设计过程。拟物设计使用视觉线索来创建反映其实物对应物的数字对象。

2. 柔和的阴影

新形态最显著的特征之一是使用柔和的阴影来提供深度感。元素看起来略微从背景中凸起，产生模仿光源的柔和阴影。

3. 微妙的高光

新形态设计经常在物体顶部边缘添加微弱的高光，给人一种光线从表面反射的感觉。这带来了天鹅绒般、有触感的质感。

4. 极简调色板

新形态设计通常采用简单的配色方案，具有浅色和深色调。浅灰色和白色等柔和的中性色通常能提供干净优雅的外观。

5. 向内凹陷的表面

新形态元素通常具有向内凹陷的外观，给人一种它们被压在背景上的感觉。这种效果是通过将柔和的阴影与高光混合而产生的。

如何设计新形态？

为了提供平滑和有质感的视觉效果，应该仔细检查新形态界面的颜色、阴影、高光和其他视觉元素。您可以在此处找到有关如何使用 HTML 和 CSS 创建新形态界面的详细教学。

1. 创建一个简单的 HTML 结构来表示新形态形式的元素。例如，考虑一个带有文本的卡片。

代码

2. 定义 CSS 变量

创建 CSS 变量来确定将在新形态设计中使用的颜色。

代码

3. 应用基本样式

通过应用简单的样式，创建一个具有新形态背景的容器。

代码

4. 添加内容样式

为新形态卡片内的文本设置样式。

代码

5. 悬停效果

为了提高参与度，添加轻微的悬停效果。

代码

6. 测试和优化

在 Web 浏览器中打开 HTML 文件进行预览，并测试您的新形态设计。在不同的设备和 Web 浏览器上进行测试，以验证一致性。根据需要优化样式。

7. 适应和扩展

将新形态设计理念应用于您网站或应用程序的其他方面。考虑为按钮和输入字段等交互式元素使用新形态。

8. 可访问性注意事项：确保文本和交互式功能之间有足够的对比度。通过使用各种可访问性工具进行测试并考虑用户反馈来做出调整。

9. 记录您的新形态设计选择，例如颜色代码和阴影值，以备将来参考。

使用 CSS 和输出来创建新形态

要查看新形态设计，请复制下面的 HTML 和 CSS 代码，并将它们存储在单独的文件中（例如，index.html 和 styles.css），然后在 Web 浏览器中打开 HTML 文件。

HTML

输出

优点

i) 现代美学

与扁平化设计相比，新形态提供了一种前卫、视觉上吸引人的选择。它为用户界面增添了一种前沿、流畅和现代的风格。

ii) 触感

柔和的阴影和高光为数字界面带来了触感和三维外观，使其感觉更具活力和吸引力。

iii) 视觉层次结构

新形态使用阴影和高光创建了合理的视觉层次结构，使客户更容易理解页面上不同事物之间的关系。

iv) 适应性

网站、移动应用程序和桌面应用程序都可以从新形态设计中受益。

v) 用户参与度

新形态设计可用于各种数字界面，例如网站、移动应用程序和桌面应用程序。

缺点

i) 可访问性挑战

在新形态元素和背景之间实现良好的对比度对于可读性至关重要，但这可能并非易事。确保可访问性，特别是对视障用户，可能需要额外的努力。

ii) 过度微妙的元素

新形态的复杂性可能导致某些方面过于微妙或模糊，使用户难以识别交互式组件。

iii) 实现复杂性

创建新形态设计比简单的设计风格更具挑战性。要达到阴影、高光和颜色的理想组合，需要仔细考虑和测试。

iv) 有限的调色板

新形态设计通常使用有限的调色板，主要是中性色调。虽然这有助于实现干净的外观，但可能会限制某些项目。

v) 未被普遍接受

设计趋势来来往往；并非所有用户或设计师都会欣赏或认同新形态的方法。考虑目标受众和项目的总体背景至关重要。

vi) 性能问题

实现具有复杂阴影和高光的新形态设计可能会导致性能问题，尤其是在低功耗系统上。优化性能至关重要。

可访问性

1. 对比度

新形态设计通常依赖于微妙的颜色变化和阴影。确保文本和背景元素之间有足够的对比度。为了确保可读性，请使用 WCAG 对比度建议等技术。

2. 文本可读性

选择易于阅读的字体样式和大小。确保文本与背景有良好的对比度，尤其是在新形态对象上。考虑使用更大的字体粗细来提高可见性。

3. 焦点状态

为按钮和链接等交互式元素突出显示焦点状态。这对于使用键盘控件或辅助技术浏览界面的用户至关重要。确保焦点状态有足够的对比度且易于查看。

4. 阴影和高光调整

调整阴影和高光的强度，以提高视觉层次结构，同时保持内容的可读性。避免使用过于微妙的元素，这些元素可能对视力有限的个人来说很难检测到。

5. 交互式元素指示器

确保交互式元素（按钮、链接和表单字段）可立即识别。考虑使用其他指示器，例如边框或背景颜色更改，以指示交互。

结论

总而言之，使用 CSS 创建新形态设计需要巧妙地运用阴影、高光和各种设计元素，以创建前沿且有质感的视觉体验。新形态融合了拟物设计和扁平化设计元素，创造了一种引人注目的视觉风格。为了确保所有用户都能获得包容且引人入胜的体验，设计师除了考虑复杂性和实现难度外，还需要考虑可访问性、对比度以及用户反馈。新形态的趋势不断发展，为当今的 Web 和应用程序设计提供了一个迷人的选择，但其应用需要仔细平衡风格和实用性。