作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Kayode Osinusi
Verified Expert in 设计
10 of Experience

Kayode是一位拥有丰富经验的设计师,带领创意团队,帮助初创公司在电子商务等行业建立和推出成功的数字产品, 金融, and entertainment.

Previous Role

Lead 设计er

PREVIOUSLY AT

InVision
分享

新形态设计是一种视觉趋势,它已经获得了UI设计师的青睐,并成为当代软件的流行美学选择, websites, and mobile apps. Drawing on aspects of photorealism and 3D design, 新形态将模拟的物理属性——比如阴影和纹理——引入数字界面. 为了充分理解无形设计的影响,让我们来看看它的起源.

The Origins of Neumorphic 设计

When Apple released the Macintosh in 1984, it was the first personal computer with a graphical user interface. At the time, Apple co-founder Steve Jobs believed that familiar 图标 and symbols, such as a trash can or a folder, 能帮助第一次使用电脑的用户更好地理解如何浏览麦金塔的界面吗. 乔布斯于1985年离开苹果,但1997年回归后,他将公司的UI美学转向 skeuomorphism一种风格,在这种风格中,接口组件精确到细节地反映了它们在现实世界中的对应部分. By the time Mac OS X was launched in 2001, 苹果公司已经开发了一套完整的拟物化系统,名为aqua——一种以水为主题的设计语言,带有闪闪发光的图标, 按钮, and drop-down menus.

随着2007年iPhone的推出,苹果的拟物化品牌变得更加逼真. 到2010年代初,拟物化设计成为数字界面的实际选择. But as the world became more reliant on mobile devices, 拟物化的局限性变得清晰起来:创建拟物化的设计组件是时间密集的,并且需要高度的技术能力. 虽然拟物化组件在桌面和主屏幕上看起来很棒, their finer details tend to disappear when scaled to small sizes.

与拟物化的现实渐变和纹理形成鲜明对比, the mid-2010s saw widespread adoption of flat design, a digital-era reboot of 1960s minimalism. 平面设计剥离了界面的所有元素,只保留了最基本的元素——线条, 形状, 颜色使其成为一种快速而高度灵活的风格,非常适合希望系统化设计语言的大公司.

For a few years, skeuomorphism was anathema to designers, but from its ashes, a new trend rose to prominence. In late 2019, 新拟物化(“新拟物化”的简称)出现了,似乎提供了其前辈的最好的东西. Striking a balance between hyperrealism and minimalism, neumorphism uses colors, textures, 阴影在某种程度上感觉真实的生活,而不是过度的细节.

Neumorphism 101

无形设计有三个共同特点:单色配色方案, low contrast, and subtle shadows. UI designers 是否能够将这些特征应用到广泛的设计组件中,表现出非对称的软美学. Let’s look at a calculator app to see how neumorphic design works:

(Justinmind)

In skeuomorphic design, the calculator is rendered with gradients and highlights, and its color palette helps separate foreground from background. 它的外观和功能就像你办公室里随处可见的计算器. 同样的计算器的平面设计版本放弃了拟形主义的具象渲染技术,并依靠形状和颜色块来区分其各个部分.

新形态设计借鉴了拟形体和平面设计,将单色调色板与微妙的阴影搭配在一起,使计算器的按钮看起来有触感. 前景和背景之间的对比度降低给计算器一个柔和的完成, and the overall effect is a simplified realism.

Examples of Neumorphic 设计

既然你已经知道了它的独特属性,你就会发现它无处不在. 事实上, UI designers in diverse industries such as automotive, entertainment, healthcare, 金融界一直在重新构想具有非对称特征的界面组件:

(Gavrisov Dmitri, Tesla Concept)

(Alexander Plyuto, Radio Player Concept)

(Vadim Demenko, Kettle App Concept)

(Filip Legierski, Bank App Concept)

The 优点 and 缺点 of Neumorphic 设计

All design trends have benefits and drawbacks. When used thoughtfully, 趋势有能力为可预测的设计模式注入新的生命, 但是,当趋势被强行应用于不为用户服务的应用程序时,问题就出现了. 让我们来探讨气压设计的利弊,以更好地理解它的实用性.

优点

Because neumorphism’s design is visually simple, it’s an ideal fit for digital products, which often consist of dozens, if not hundreds, of screens and design components. In digital product design, 简单有几个好处:它使设计师更容易创造出美学上有凝聚力的体验——不管产品有多少屏幕. 它加速了概念化、构建、测试和迭代新屏幕的过程. 它还可以帮助设计师在产品发展的过程中保持视觉上的一致性.

In addition to its simplicity, neumorphism的UI组件看起来更有触感,可能有助于向用户表示交互性.

缺点

虽然新形态是一种流行和广泛使用的趋势,但它确实伴随着 accessibility concerns. 如果设计师选择使用严格单色的非对称元素, 它们可能会给有色盲等视觉障碍的人带来问题. Additionally, Neumorphism依赖于低对比度来实现其柔和的外观,这可能会妨碍可读性,并使用户难以识别按钮, 图标, 形式, and other important interface features.

Neumorphic 设计 Is Timeless

When implemented with users’ needs (and accessibility) in mind, 新形态是应用程序和网站的一个视觉上引人注目的UI设计选项. 它低调的阴影和柔软的纹理给UI组件一种温暖,邀请互动. In the design world, styles come and go, 但无形态的简单性和触感使它很适合经受时间的考验.

Hire a Toptal expert on this topic.
现在雇佣
Kayode Osinusi

Kayode Osinusi

Verified Expert in 设计
10 of Experience

Lagos, Nigeria

Member since December 24, 2019

关于 the author

Kayode是一位拥有丰富经验的设计师,带领创意团队,帮助初创公司在电子商务等行业建立和推出成功的数字产品, 金融, and entertainment.

作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

Previous Role

Lead 设计er

PREVIOUSLY AT

InVision

World-class articles, delivered weekly.

By entering your email, you are agreeing to our privacy policy.

World-class articles, delivered weekly.

By entering your email, you are agreeing to our privacy policy.

Toptal 设计ers

Join the Toptal® community.