用户界面中的Neumorphism(新拟物风格)设计

0 评论 8616 浏览 14 收藏 13 分钟

UI设计如何从日常生活中汲取新的灵感?设计师之后需要进行哪些改进来使其真正的得以应用?

在DoGoodS*!t 活动中,我们花了大概一个小时的时间制作出来的展示案例:

用户界面中的Neumorphism

上周我们讨论了有关UI设计中的一些新趋势,其中有一个最近在Dribbble和Instagrame上都很火的风格引起了大家的注意。Jason Kelley给这种新的设计趋势命名为Neuomorphism,是将New和Skeuomorphism进行组合得到的新名词。我(Michal Malewicz)决定把其中的字母o去掉,直接叫它Neumorphism,这个新名称就这样诞生了。

(同时也感谢其它的精彩点评,我知道它跟Skeuomorphism总是分不开的,它们都是设计师对于设计趋势与现实生活的一些理解)

同时也建议大家阅读我的下一篇文章:为什么我不认为Neuomorphism这一设计趋势会在2020年彻底爆发?

还有人在使用Skeuomorphism(拟真设计)风格吗?

尽管Skeuomorphism仍然存在于一些UI设计中(比如说你桌面的垃圾桶图标),但是这种风格中一些特定部分的趋势更加明显。

正如Kamil Falana所说,设计形态从完全没有生命的屏幕元素,开始向我们现实生活中真实存在的物体靠拢。

用户界面中的Neumorphism

同时我们也注意到,这种变化正在我们的身边悄悄发生着。苹果公司的设计就是一个很好的例子,他们在极简扁平的基础上加入了3D的质感,用户似乎对这种设计很有好感。

设计风格的回归,是否是更好的选择?

整个趋势始于下面这张在Dribbble上一炮而红的设计作品。

用户界面中的Neumorphism

设计师alexplyuto在Dribbble上发表了这张作品,获得了3000多个点赞,同时也推动了这一趋势的发展。之后类似风格的作品开始大量出现,我们也做了一组类似的设计:-)

可以说这组作品开创了一种趋势,尽管其中的某些部分并没有多大实际意义(又把我们带回过去了?),但是它激发了我们对于UI设计的热情,感谢Alex!

Neumorphic与以往的设计有什么不同?

由于按钮设计的变化并不是很大,因此让我们将重点放在卡片的设计上,它赋予了这一元素新的视觉风格。

用户界面中的Neumorphism

Modern/Material 风格的卡片

Modern/Material 风格的卡片通常是为元素添加阴影,让用户感觉它们是漂浮在背景之上的。阴影可以体现一种空间纵深感,同时在元素没有边框的情况下还可以用来定义本身的形状。

Neumorphic 风格的卡片

然而Neumorphic 风格的卡片,是一块背景上的突起,采用的是与背景完全相同的材质,当我们从侧面看它的时候,它不是悬浮在半空中的。

通过两种阴影的叠加可以很轻松的实现这种效果,一个阴影为负值,另一个为正值即可。但是要注意的是,这时候我们的背景就不能用纯黑或者纯白色,至少需要有点颜色的变化,这样浅色或者深色的阴影才能得以呈现。你可以选择使用不同颜色的作为背景,冷色或者暖色都可以,只需要保证浅色或者深色的阴影能被用户感知到即可。

这里是一个小小的参考数值,可以根据自己的设计案例来进行相应修改:

用户界面中的Neumorphism

Neumorphic设计的优缺点

这种新风格的优势就是新鲜感(至少它接下来还会持续很长一段时间),它为UI设计带来了新的灵感,使这一行业焕发了新生。同时它也可以与其它的设计风格进行结合,所以也不会导致整个界面都是这种凹凸不平的质感。

但是目前它也存在一些设计上的弊端,亟待解决,其中两个主要的问题就是:

  • 产品可用性;
  • 实际编程开发难度。

产品可用性——可见性

可见性的问题主要在于元素与背景之间的对比关系,当采用同样的质感和颜色的时候,他们之间就会缺乏对比度,这时候我们就需要通过阴影来使其产生对比。在我们之前的案例尝试中,我们得出了一些有效的参考数值。

用户界面中的Neumorphism

可以看到的是,不论是Modern风格的卡片还是Neuomorphic风格的卡片,它们与背景之间的对比都不是很明显,因为它们的主要功能是用来展示内容,而并不是为了与用户交互,我们的主要任务,是得保证像按钮这类交互控件在界面上足够显眼。

因为两者之间的差异很小,所以如果我们想让卡片有一个更明显的对比,就得这样做:

用户界面中的Neumorphism

但是没有人会使用这么重的阴影,所以我们就得想办法去提高页面元素的可用性。这种假设让我们得出了一个结论就是,只要我们对重要的元素通过字体、组别、对比等方式进行正确的层级划分,那么这些卡片的重要性就不是很高了。

针对这一观点我还没有展开测试(之后会找时间来进行一下),但现在我们假设以下两个元素都代表“确定”的意思,尽管有些用户可能一开始没注意到图标周围的阴影边框,但是它仍旧有足够的对比度,来让用户感知到,并且去点击它。

用户界面中的Neumorphism

产品可用性——易用性

尽管“按钮元素”应该看起来像一个按钮,但是只要图标本身与背景有足够的对比度,它就是有效的。因此,这里要明确的是,如果要使用这种风格的设计,请确保你页面中的重要元素足够突出。

毕竟,大多数Modern风格卡片的阴影也没有达到足够高的对比度。

只适用于卡片设计吗?

可用性的一个主要问题在于如果我们我们不是将它用于卡片,而是用在设计按钮上。

我们可以很容易的通过内阴影将它转换成一个按下的状态,就像下面的案例呈现的那样。

用户界面中的Neumorphism

禁止这样设计

其中的设计隐患就很大了。

这两种状态之间太类似了,不足以呈现它们之间的差异。所以我们需要考虑是否可以通过其他的表现形态来增强效果,使它传达的含义始终明确。

这里有一些初步的想法,比如开始状态是线性icon,按下之后变成填充型icon、使用下画线或者颜色填充。

用户界面中的Neumorphism

一些设计想法,保证按钮的状态正确显示。

在做设计的时候需要时刻铭记:人们都倾向于好看的设计,但是我们首先得保证它是好用的。

编程开发

我们将开发归为一个新的类别,实际上它的CSS样式编码难度没我们想象的那么大,虽然我们还没在Swift和Kotlin中进行尝试,但是我不认为它是个问题。

用户界面中的Neumorphism

当然,你用逗号将两个盒子阴影的数值合并为一行代码。

一位前端开发工程师Adam编写了这个网站:https://neumorphism.io,你可以通过它来自动生成CSS样式代码。

其他的影响

然而背景的形状也是我们需要考虑的一部分,这种新的设计形式需要与大量的按钮和开关相结合,在一些案例中我们只需要简单的退回到之前的设计模式,并且将效果导出为位图。这似乎是一种回归,但是它其实完全没有必要,现在可以轻松的用代码来实现这些按钮的样式,用现代的技术来进行完美呈现。

用户界面中的Neumorphism

我们也做了这方面的练习(不久之后会发布出来)来测试有哪些简单的效果是可以实现的,尽管它目前看起来还是有点奇怪并且复古,但是让按钮真的看起来像一个按钮还是挺有意思的。

我们真的需要它吗?

这一设计趋势的出现,无疑激发了许多设计师的灵感,与以前使用的卡片组件的可用性问题相比,它的问题其实并不是那么严重。

所以疯狂大胆的去尝试吧!顺应这一趋势,并对其进行调整,使它成为你自己的风格。UI设计师的工作就是在拖动方块,因此每次方块出现“差异”和“新奇”时,都会带来一些喜悦之感。如果没有这种不断的探索的精神,那么所有的产品看起来都是一毛一样。

让我们找点乐子!

但同时也要记住,每个新趋势都有一些潜在的陷阱,必须谨慎对待,才能让它得以使用。

 

原作者:Michal Malewicz,是HYPE4的CEO | UX设计师 | 作家 | 演讲人,他从1999年开始从事网页设计工作。

原文链接:https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

编译:视觉派Pie

本文由 @视觉派Pie 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!