UI设计如何从日常生活中汲取新的灵感?设计师之后需要进行哪些改进来使其真正的得以应用?
在DoGoodS*!t 活动中,我们花了大概一个小时的时间制作出来的展示案例:
上周我们讨论了有关UI设计中的一些新趋势,其中有一个最近在Dribbble和Instagrame上都很火的风格引起了大家的注意。Jason Kelley给这种新的设计趋势命名为Neuomorphism,是将New和Skeuomorphism进行组合得到的新名词。我(Michal Malewicz)决定把其中的字母o去掉,直接叫它Neumorphism,这个新名称就这样诞生了。
(同时也感谢其它的精彩点评,我知道它跟Skeuomorphism总是分不开的,它们都是设计师对于设计趋势与现实生活的一些理解)
同时也建议大家阅读我的下一篇文章:为什么我不认为Neuomorphism这一设计趋势会在2020年彻底爆发?
尽管Skeuomorphism仍然存在于一些UI设计中(比如说你桌面的垃圾桶图标),但是这种风格中一些特定部分的趋势更加明显。
正如Kamil Falana所说,设计形态从完全没有生命的屏幕元素,开始向我们现实生活中真实存在的物体靠拢。
同时我们也注意到,这种变化正在我们的身边悄悄发生着。苹果公司的设计就是一个很好的例子,他们在极简扁平的基础上加入了3D的质感,用户似乎对这种设计很有好感。
整个趋势始于下面这张在Dribbble上一炮而红的设计作品。
设计师alexplyuto在Dribbble上发表了这张作品,获得了3000多个点赞,同时也推动了这一趋势的发展。之后类似风格的作品开始大量出现,我们也做了一组类似的设计:-)
可以说这组作品开创了一种趋势,尽管其中的某些部分并没有多大实际意义(又把我们带回过去了?),但是它激发了我们对于UI设计的热情,感谢Alex!
Neumorphic与以往的设计有什么不同?
由于按钮设计的变化并不是很大,因此让我们将重点放在卡片的设计上,它赋予了这一元素新的视觉风格。
Modern/Material 风格的卡片
Modern/Material 风格的卡片通常是为元素添加阴影,让用户感觉它们是漂浮在背景之上的。阴影可以体现一种空间纵深感,同时在元素没有边框的情况下还可以用来定义本身的形状。
Neumorphic 风格的卡片
然而Neumorphic 风格的卡片,是一块背景上的突起,采用的是与背景完全相同的材质,当我们从侧面看它的时候,它不是悬浮在半空中的。
通过两种阴影的叠加可以很轻松的实现这种效果,一个阴影为负值,另一个为正值即可。但是要注意的是,这时候我们的背景就不能用纯黑或者纯白色,至少需要有点颜色的变化,这样浅色或者深色的阴影才能得以呈现。你可以选择使用不同颜色的作为背景,冷色或者暖色都可以,只需要保证浅色或者深色的阴影能被用户感知到即可。
这里是一个小小的参考数值,可以根据自己的设计案例来进行相应修改:
Neumorphic设计的优缺点
这种新风格的优势就是新鲜感(至少它接下来还会持续很长一段时间),它为UI设计带来了新的灵感,使这一行业焕发了新生。同时它也可以与其它的设计风格进行结合,所以也不会导致整个界面都是这种凹凸不平的质感。
但是目前它也存在一些设计上的弊端,亟待解决,其中两个主要的问题就是:
产品可用性;
实际编程开发难度。
产品可用性——可见性
可见性的问题主要在于元素与背景之间的对比关系,当采用同样的质感和颜色的时候,他们之间就会缺乏对比度,这时候我们就需要通过阴影来使其产生对比。在我们之前的案例尝试中,我们得出了一些有效的参考数值。
可以看到的是,不论是Modern风格的卡片还是Neuomorphic风格的卡片,它们与背景之间的对比都不是很明显,因为它们的主要功能是用来展示内容,而并不是为了与用户交互,我们的主要任务,是得保证像按钮这类交互控件在界面上足够显眼。
因为两者之间的差异很小,所以如果我们想让卡片有一个更明显的对比,就得这样做:
但是没有人会使用这么重的阴影,所以我们就得想办法去提高页面元素的可用性。这种假设让我们得出了一个结论就是,只要我们对重要的元素通过字体、组别、对比等方式进行正确的层级划分,那么这些卡片的重要性就不是很高了。
针对这一观点我还没有展开测试(之后会找时间来进行一下),但现在我们假设以下两个元素都代表“确定”的意思,尽管有些用户可能一开始没注意到图标周围的阴影边框,但是它仍旧有足够的对比度,来让用户感知到,并且去点击它。
产品可用性——易用性
尽管“按钮元素”应该看起来像一个按钮,但是只要图标本身与背景有足够的对比度,它就是有效的。因此,这里要明确的是,如果要使用这种风格的设计,请确保你页面中的重要元素足够突出。
毕竟,大多数Modern风格卡片的阴影也没有达到足够高的对比度。
只适用于卡片设计吗?
可用性的一个主要问题在于如果我们我们不是将它用于卡片,而是用在设计按钮上。
我们可以很容易的通过内阴影将它转换成一个按下的状态,就像下面的案例呈现的那样。
禁止这样设计
其中的设计隐患就很大了。
这两种状态之间太类似了,不足以呈现它们之间的差异。所以我们需要考虑是否可以通过其他的表现形态来增强效果,使它传达的含义始终明确。
这里有一些初步的想法,比如开始状态是线性icon,按下之后变成填充型icon、使用下画线或者颜色填充。
一些设计想法,保证按钮的状态正确显示。
在做设计的时候需要时刻铭记:人们都倾向于好看的设计,但是我们首先得保证它是好用的。
编程开发
我们将开发归为一个新的类别,实际上它的CSS样式编码难度没我们想象的那么大,虽然我们还没在Swift和Kotlin中进行尝试,但是我不认为它是个问题。
当然,你用逗号将两个盒子阴影的数值合并为一行代码。
一位前端开发工程师Adam编写了这个网站:https://neumorphism.io,你可以通过它来自动生成CSS样式代码。
其他的影响
然而背景的形状也是我们需要考虑的一部分,这种新的设计形式需要与大量的按钮和开关相结合,在一些案例中我们只需要简单的退回到之前的设计模式,并且将效果导出为位图。这似乎是一种回归,但是它其实完全没有必要,现在可以轻松的用代码来实现这些按钮的样式,用现代的技术来进行完美呈现。
我们也做了这方面的练习(不久之后会发布出来)来测试有哪些简单的效果是可以实现的,尽管它目前看起来还是有点奇怪并且复古,但是让按钮真的看起来像一个按钮还是挺有意思的。
我们真的需要它吗?
这一设计趋势的出现,无疑激发了许多设计师的灵感,与以前使用的卡片组件的可用性问题相比,它的问题其实并不是那么严重。
所以疯狂大胆的去尝试吧!顺应这一趋势,并对其进行调整,使它成为你自己的风格。UI设计师的工作就是在拖动方块,因此每次方块出现“差异”和“新奇”时,都会带来一些喜悦之感。如果没有这种不断的探索的精神,那么所有的产品看起来都是一毛一样。
让我们找点乐子!
但同时也要记住,每个新趋势都有一些潜在的陷阱,必须谨慎对待,才能让它得以使用。
原作者:Michal Malewicz,是HYPE4的CEO | UX设计师 | 作家 | 演讲人,他从1999年开始从事网页设计工作。