跳过导航
Skeuomorphism illustration done in Sketch
学习设计

份完整的拟物化设计指南

您需要了解的关于逼真设计的艺术的一切

当 Apple 在 2013 年重新设计 iOS 时,采用了一种“扁平化”设计,许多人认为拟物化设计已经过时。而另一些人仍然是其忠实粉丝。如果您问我们——或者问 GitHub 的产品设计师 Gavin Nelson——21 世纪初的拟物化设计可能只是“过犹不及”。

如今,拟物化设计正在主流设计中卷土重来——但这次更加微妙。如果您想开始尝试拟物化设计,我们已经为您准备好了!在本篇文章中,我们将探讨拟物化设计的含义及其与扁平化设计和新拟物化设计的区别。我们还将分享一些示例和简要教程,确保您能够快速上手。

让我们开始吧!

拟物化和拟物化设计

什么是拟物化?

拟物化设计试图模仿现实生活中物体的尽可能多的特性。它超越了形状和颜色,而是专注于纹理、光影、尺寸,最重要的是:用途。

拟物化设计可以追溯到古希腊,当时 陶工会制作模仿金属的把手。因此,我们今天使用的术语来自希腊语“skeuos”,意思是容器或器皿,以及英语后缀-morphism,意思是 成为形状、形式或结构的状态

但当谈到我们今天所知的 UI 设计 时,拟物化设计随着第一款 iPhone 的出现而兴起。史蒂夫·乔布斯认为,为了提高 易用性UI 元素应该尽可能地模仿现实生活中的物体。例如,一个看起来像笔记本的笔记应用程序。随着人们对 iOS 界面越来越熟悉,Apple 的团队意识到用户不再需要现实生活的联想——因此他们对整个 UI 进行了一次大改。

扁平化设计与拟物化设计

当拟物化图标变得广为人知时会发生什么?许多人会说用户不再需要复杂的设计来识别图标的功能。Apple 在发布 iOS 7 时证明了这一点。

Image of two iPhone mockups, one running iOS 6 and the other running iOS 7

iOS 6iOS 7 的并排比较显示了 Apple 的风格是如何从带有很少阴影或纹理的拟物化设计彻底转变为扁平化设计的。

为了提高加载速度并简化数字触点,设计师开始将拟物化设计剥离到最基本元素。这就是扁平化设计的核心。体积、纹理和浓郁的颜色使用是主要变化。设计师开始在作品中采用无衬线字体,并开始使用单一鲜艳的颜色或有限的颜色调色板。您可能想知道扁平化设计是否与拟物化设计背道而驰——但情况真是如此吗?

反拟物化?

作为人类,我们有将事物看成非黑即白的倾向。当出现新的趋势时,很容易将其视为新时代的开始——以及旧潮流的结束。随着我们进入 2010 年代,确实有一些理由要从拟物化设计中转向。随着数字营销变成一场战场,性能和效率成为众多类似产品中的关键差异化因素。

扁平化设计制作速度更快——加载速度也更快。一旦它成为一种趋势,它也成为用户现代性的象征。反拟物化设计至今仍然存在,部分原因是速度仍然是王道。部分原因是还没有出现新的设计趋势。或者已经出现了吗?

拟物化设计与新拟物化设计

事实证明,确实有新的设计理念出现。来自拟物化设计创造者之手:新拟物化设计。是的,它的发音是拟物化设计——这个名字非常适合拟物化设计和(您猜对了)扁平化设计的结合体。如果您问我们,我们认为它集两家之长。

应用程序和网站确实需要快速,特别是如果它们想要在搜索引擎和应用商店中排名靠前。但过度使用极简主义设计也使得某些界面变得有点......嗯,扁平化。这就是设计师一直在尝试新拟物化设计的原因,为他们的设计添加深度和颜色。主要元素是什么?对光影的运用。

A hydration app design made by Andrei Simion

这里有一个由 Andrei Simion 提供的绝佳示例,他将新拟物化设计应用于整个设计中。

拟物化设计示例

现在您已经对什么是拟物化设计以及它的来源有了很好的了解,是时候在现实生活中看看它了。以下是一些利用拟物化设计可以实现的精彩示例。

A music app design made by Charlotte Doughty

Charlotte Doughty 的复古音乐应用程序。

A camera app icon design made by Tiago Alexandrino

Tiago Alexandrino 的相机图标。

A winamp skin design made by Anja

Anja 的 Winamp 皮肤,满满的千禧一代怀旧感。

A synth plugin redesign by Isaac Sanchez

Isaac Sanchez 的合成器插件重新设计。

如何创建拟物化设计

我们自己的 Tiago Alexandrino 以下面这个简短的教程帮助您开始尝试拟物化设计。有任何问题吗?他很乐意通过 TwitterLinkedIn 回答。

想展示一些拟物化设计作品吗?我们正在举办 #Sketchmorphism 挑战赛!在我们的 Twitter 上了解如何赢得一台(或两台)HomePod mini。

您可能也喜欢

免费试用 Sketch

无论您是 Sketch 新手,还是回来看看有什么新功能,我们都会在几分钟内帮您设置好,让您准备好做最好的工作。

免费入门
免费入门