新拟物风格？UI设计的未来之选大作设计网站专栏

这种设计趋势以其柔和的、凸出的塑料外观为特征，为用户界面（UI）设计带来了全新的设计理念。它是一种既熟悉又新颖的风格，将拟真主义的触感和令人舒适的元素与现代、极简主义的美学相结合。

什么是新拟物风格？

新拟物风格是一种设计趋势，大约在2020年左右开始兴起，并迅速在UI设计社区中流行起来。它是拟真主义的一种风格继承者，拟真主义是一种设计方法，涉及使物品看起来像它们现实世界的对应物。还记得旧版iBooks的界面上有书架吗？

2013年的iBooksUI；拟真主义的一个例子。

新拟物化风格以现代方式演绎了这个概念。与模仿木材或玻璃等现实世界材料不同，新拟物化设计看起来就像是由与背景相同的材料制成的，产生了一种柔和凸起或凹陷的效果。

以下是新拟物化效果的一个示例：

YandexServices在Dribble上的新拟物化风格示例。

通过使用精确的阴影和高光来实现这种效果，从而产生了三维形状从背景中浮现的幻觉。结果是一种柔软的、有垫子的外观，似乎同时凹陷和凸起。它就像UI元素是由与背景相同的材料制成的，它们从屏幕中突出（或嵌入）出来。

新拟物化设计原则

创建成功的新拟物化设计需要仔细平衡颜色、阴影和形状。以下是一些需要牢记的关键原则：

1.使用阴影

阴影是新拟物化的支撑。它们创造了让元素看起来像是从背景中凸起或沉入其中的三维效果。关键在于使用两种阴影：一个在元素的顶部，另一个在底部。

顶部阴影通常是背景颜色的较浅版本，而底部阴影则较暗。这种组合营造出深度和维度的幻觉。

2.淡雅的色彩调色板

新拟物化偏爱简洁而淡雅的色彩调色板。UI元素通常与背景颜色相同，但具有稍微不同的色调以创建柔和的对比。色彩调色板通常是柔和而明亮的，包括大量的白色、米色和浅灰色。当然也可以使用较深的颜色以获得不同的外观和感觉。

3.简单的几何形状

新拟物化设计倾向于偏爱简单的几何形状。圆形、矩形和正方形通常被广泛使用。这些形状与柔和的阴影和高光相配合，有助于营造出新拟物化UI整体的“柔软”外观。

4.一致性

一致性在新拟物化设计中至关重要。光源应在所有元素上保持一致，颜色和阴影也一样。这种一致性有助于保持元素与背景相同材料的幻觉。

新拟物化风格：UI设计中的双刃剑

2020年，新拟物化风格无处不在。尽管这种风格的流行度有所减退，但对许多设计师和开发者来说，它仍然是首选。但就像任何设计趋势一样，它都有一系列的优点和缺点。

以下是它的利弊。

新拟物化风格的优势

以下是这种设计趋势的一些优点：

1.视觉吸引力：新拟物化的一个显著特点是它的温和、轻盈的美学，通常使用淡色调，最小化对比。这导致设计元素似乎“凸显”或“隐退”到背景中，创造出一种深度和逼真感，视觉上令人愉悦。

2.风格平衡：新拟物化在拟真主义和扁平设计之间取得了平衡。它努力保持现实感，同时保持清晰和极简主义的外观。这种平衡可以使界面看起来更加直观和引人入胜。

3.重燃拟真主义：术语“新拟物化”是“neo”（新）和“skeuomorphism”（拟真主义）的结合，突出了它作为拟真主义的部分复兴的角色。这重新引入了一些来自早期数字设计中常见的现实世界物体的触觉和视觉线索，潜在地增强了用户的理解和互动。

新拟物化风格的劣势

与任何设计趋势一样，新拟物化风格也有一些缺点：

1.可访问性问题：正如前面提到的，对新拟物化的一个重要批评是它可能存在的可访问性问题。元素与背景之间的微弱对比可能会让一些用户难以区分不同的元素，尤其是那些视觉障碍的用户。

3.模糊性：尽管新拟物化的柔和和极简主义外观在视觉上吸引人，但它也可能导致用户界面缺乏清晰度。元素之间缺乏明确的边界和区别可能会让用户难以理解如何与界面进行交互。

虽然新拟物化风格可以为设计注入新颖和吸引人的外观，但仍然需要考虑其潜在的缺陷。在实施任何设计趋势之前，将用户的需求和体验置于设计决策的首位。

如何创建新拟物化设计

那么，下一个项目中如何实现新拟物化风格的设计？以下是一个简单的逐步指南，帮助创建自己的新拟物化UI。

步骤1：了解设计

熟悉一下什么是新拟物化（以及什么不是）。浏览设计示例库，以更好地了解您想要采用的整体外观。

例如，可以选择一些微妙的设计：

或者，可以选择一些更加复杂的设计：

步骤2：选择正确的色彩调色板

接下来，需要选择合适的色彩调色板。要实现新拟物化效果，需要三种相同颜色的色调：

这种色彩选择技巧可以确保颜色一致性和协调性。

步骤3：创建设计元素

一旦选择了色彩调色板，就该创建设计元素了。在新拟物化设计中，元素通常以不同的形式或不同的技术来表示。关键是要创建那些给人以从背景中浮现的印象，而不是漂浮在界面上的元素。

可以在EnvatoElements上找到许多新拟物化UI元素可供选择。例如，OsvaroNeumorphismDesignMobileTemplateUIKit是一个很好的示例。可以轻松看到按钮带有阴影，给人深度感。

"PurasaResponsiveMobileTemplate"也包括新拟物化元素：

为了在自己的设计中实现类似的外观，需要尝试使用阴影和颜色。背景不应完全是白色或完全是黑色，因为阴影将无法清晰定义。相反，选择稍微带有色调的颜色。

步骤4：在用户界面中实现新拟物化效果

现在，已经拥有了设计元素，是时候在用户界面中实现它们了，这涉及创建界面元素（如按钮、滑块和卡片）的新拟物化设计。

请记住，新拟物化的目标是在保持极简主义的同时创建出深度和逼真感。因此，请保持设计干净简洁，让阴影和颜色来实现效果。

步骤5：考虑可访问性

在创建新拟物化设计时，考虑可访问性非常重要。因为新拟物化设计在按钮和背景上使用相同的颜色，所以没有对比度比要考虑。这可能会使一些用户，尤其是那些有视觉障碍的用户，难以区分不同的元素。

为确保设计具有可访问性，考虑在设计元素添加额外的视觉提示，例如图标或文本。此外，考虑为重要的元素（如呼叫到行动按钮）使用更高对比度的颜色。

新拟物化的实际案例：值得借鉴的案例研究

看看新拟物化在实际应用中的一个案例，以更好地理解这种设计趋势如何有效地实施。

Spotify

新拟物化在实际应用中的一个最有趣的案例研究之一是Spotify用户界面的重新设计。在这个案例研究中，设计师SangeetaBaishya决定在深色模式下尝试新拟物化。之所以选择Spotify进行此实验，是因为它拥有广泛的用户群，各种小部件（卡片、芯片、列表、滑块、文本字段）以及简单明了的架构。

重新设计保持了应用程序的原始色彩调色板、字体和结构，但在按钮和Spotify标志中引入了新拟物化元素。标志的周围略微提升，创建了更加明确定义的边缘，同时保留了新拟物化的魅力。按钮的设计方式使它们不会让用户感到不知所措，同时保持了新拟物化风格的完整性。

你会使用新拟物风格的UI吗？

新拟物化是一种引人入胜的设计趋势，为UI设计带来了全新的理念。凭借其柔和的阴影、微妙的色彩和极简主义美学，它是一种可以使您的界面脱颖而出的风格。

然而，与任何设计趋势一样，明智地使用它并始终考虑可访问性非常重要。采用正确的方法，新拟物化可以成为设计工具包中的强大工具。你将如何利用它呢？