返回

设计趋势:新拟态

2020/05/12 18:21:20 来源:小编

网站设计和应用程序设计的下一件大事会是新拟态(Neumorphism)吗? 这是一种新的设计趋势(是“ new”和“ skeuomorphism”两个词汇的混搭),并且日渐流行。 和许多趋势一样,新兴趋势在设计师中存在两极分化,Mac Cult最近发表了一篇文章,提出了一个问题:“新拟态会是iOS 14的全新外观吗?”


我们暂时还不会找到最终的答案,但是趋势正在逐渐受到关注,尤其是在Dribbble上,我们看到了许多此类的设计趋势。

这是一个风格的演进,可以帮助你认识到它的存在(或不存在),以免该趋势被忽略。


什么是新拟态(What is Neumorphism)?

What is Neumorphism

Neumorphism这个词在2019年还末开始受到关注,今年已经获得了更大的发展势头。新拟态的组合介于真实拟态的外观和几乎扁平化的简单性之间。

它的特点是颜色简单,带有阴影,可以增加深度,并具有几乎真实的感觉。该设计可能同时包含内部和外部阴影以创建此效果。

趋势的最初参考可以追溯到Michal Malewicz对其描述的文章:“现代/材料(升级)卡通常是漂浮在我们感知的背景之上并在其上投射阴影的表面。阴影不仅可以赋予深度,而且在很多情况下还可以定义形状本身-因为阴影通常是无边界的。”

Malewicz的网站(上方)致力于该趋势分析,提供如何恰当地使用这种趋势样式的说明。

在Dribble上,同样呈现为一种流行趋势,其中使用这些概念衍生了许多镜头。

大多数示例都是具有卡片式应用程序,其中这种设计技术似乎可以缓解整个界面的过于技术或严谨的气氛。


设计趋势的特征(Characteristics of This Design Trend)

Characteristics of This Design Trend

新拟态的概念的根源在于数字设计模仿或表现为它所代表的对象。

请注意以上音乐应用程序示例中的按钮,看起来就像你可以真的把它们按下一样。如果操作得当,变形元素似乎向你展示如何使用它们并与之交互,例如按下按钮,移动滑块或转动转盘 。

新拟态似乎也是极简设计趋势的延伸。 许多设计都具有白色界面,但暗模式选项也越来越受欢迎。 但是,并没有任何说明限制你使用其他的颜色来设计该趋势下的风格界面。

通常与新拟态有关的视觉元素包括:

· 浅色或柔和的调色板(但并非总是要归功于深色模式)

· 整个设计中的基本形状,例如圆形或矩形

· 大部分情况下都是细微的阴影和效果(并且全部用HTML和CSS完成)

· 按钮和可点击元素的阴影更加生动


小心,新拟态带来的挑战(But Be Careful (Neomorphism Challenges))

新拟态的趋势并非没有任何的挑战。

最大的问题是可访问性和对比度,这是相关问题。

对于使用相当单调的配色方案和大量白色的设计,接口中并非满足所有的颜色可访问性标准。 不过,这是一个可以纠正的问题,可以帮助塑造和改变这种趋势的演变方式。

如果你使用新拟态技术进行设计,请记住一些事情,以确保你的设计适用于大多数人。

· 设计具有额外对比度的按钮,并确保它们看起来像按钮

· 不要强迫自己过分遮蔽阴影以使其更明显; 专注于文字和点击/点击元素

· 对在不同状态下看起来相似的按钮(例如按下按钮)使用设计效果层

· 不必过分处理,把事情简单化


新拟态案例(Neumorphism Examples)

设计师已经提供了各种各样的很好的例子说明这种趋势的可用性。 这里有一些可以帮助你启动创作过程并激发设计灵感的方法。


1.Neo Spotify

Neo Spotify

2.Dashboard Meeting

Dashboard Meeting

3.Neumorphism Mobile Banking

Neumorphism Mobile Banking

4.Smart Home App

Smart Home App

5.Neo Instagram UI Concept

Neo Instagram UI Concept

6.Neumorphism Concept Design

Neumorphism Concept Design

7.Crytopcurrency Dashboard

Crytopcurrency Dashboard


总结

Neumorphism是一种有趣的设计趋势,它吸引了我,因为我非常喜欢白色(或深色模式)风格的界面。 设计方面没有太多障碍,概念比平面感觉更实用,更直观,比真正的拟态感觉更具有卡通感。

归根结底,这一趋势与其他任何事物一样,都是个人喜好问题。 你会考虑在你的任何项目中都尝试使用它,还是只是迎合一时的流行而去使用呢?