杭州嵌入式培训
达内杭州嵌入式培训中心

13732203138

热门课程

Neumorphism新拟物化,会成为2020年的UI设计趋势吗?

  • 时间:2020-04-07 10:42
  • 发布:转载
  • 来源:网络

什么是Neumorphism


Neumorphism 风格,也称为 Soft UI,是一种类似于浮雕的效果。目前关于他的叫法:Neuomorphism,Neumorphism,Skeuomorphism,Soft UI等,在没有实际确定的情况下,其实怎样叫都无所谓,重点是我们要知道这种设计风格趋势,关注的不是名字,而是设计。这种风格的出现,给目前流行的扁平化设计增加了一种新的设计形式,很多媒体甚至还将这个风格列为 2020新的设计趋势,其中三星 Galaxy 系列的发布会宣传海报也使用了这种风格,可见这个风格的火热程度。


还记得拟物风格吗?


既然 Neumorphism 只是一个虚构词,也没有任何官方认定,那就先不纠结应该叫什么,我们还是来说说它的前身吧,也就是 Skeuomorphism(拟物)。这是最早被 Apple 提出的设计概念,就是在界面中模仿现实物体纹理材质的设计,目的是让人们在使用界面时习惯性地联想到现实物体的使用方式。

拟物写实的设计风格曾经风靡全球,当时的 UI 设计师几乎都对拟物作品着迷。

而在 2013 年的 WWDC 大会中,苹果公司发布的 iOS7 系统,系统 UI 使用更简洁的设计风格。这场大会也使拟物风格逐渐过时,直到现在扁平风格的全面普及,拟物风格就再没有被广泛应用。

从前几年的设计趋势可以看到,扁平风格作为更高效更简洁的风格被设计师推崇,再加上苹果系统 iOS 7 设计风格的面世和谷歌系统规范 Material Design 的普及,扁平风格在 UI 设计中一直占据重要位置。

但设计的流行趋势也一直在改变着,在苹果公司最新发布的 iOS 13 系统中,就有出现轻拟物的设计手法,接着就有一大堆设计师猜测是不是拟物风格的回归,但我看系统中大部分界面设计也还是扁平风格,并没有把拟物风格作为主要设计风格,也许只是某种程度上解决了画笔的视觉识别问题。

拟物效果能否回归,这个言之尚早,但是新的风格趋势也许可以在扁平同质化的时候增添一点灵感与乐趣。

会用在实际项目中吗?


1. 设计其实要做到这个效果并不难,了解一下这个风格的结构。

主要有三个样式组成,1 个背景+ 2 个投影。在这个基础上,通过改变颜色和大小参数来达到不同效果。

之前尝试着使用彩色去做这个效果,使用浅色背景时还是有效果的,但使用深一点的颜色时,问题就出现了,效果更像是外发光或者普通投影。这也可能是为什么大多数作品都采用比较素的颜色作为背景的原因。


2. 浏览这个风格最大的问题就是缺少对比度。在色彩使用上比较克制,没有大面积的平铺颜色,仅在极少的位置进行色彩点缀,作用是吸引眼球。从众多设计师的作品可以看出,整体视觉是比较平的,缺少层次。

拿其中两张图进行了 15% 强度的模糊处理,可以看到除了点缀的位置以外,界面是没有重点的。


3. 操作
因为在界面中除了文字以外,几乎所有元素都应用了这种效果,导致界面所有内容看起来都是按钮的错觉。界面中的主要操作按钮也没有被重点提亮。正常态和点击态的对比度并没有拉开,容易造成状态混淆。点击欲望比较低,不利于引导用户进行下一步操作。


4. 动画跟拟物效果的动画有同样的问题,元素动画效果很难做得轻快,更适合按钮的使用。由于视觉层级跟背景没有实际分离开,就像固定在了背景上一样,所以动画效果只要出现移动,就会让人觉得不合理,容易给人一种虫子在皮肤底下蠕动的感觉。


5. 开发问题跟当年的拟物效果的实现类似,要实现这个风格,主要有两个方式。

· 

切图:对元素的每个状态(Normal、Hover、Pressed),设计师都需要分别提供一张切图,这个会导致资源库增加大量的图片。

·    代码实现:这个风格的实现效果是对元素增加两个不同方向的投影,通过代码可以实现。但是需要开发对每个元素添加投影,样式代码增多,繁琐的工作量,开发也不会乐意。最后附 CSS 实现新风格的网站:Neumorphism 的生成器。

· 


    总结

这个风格的出现也确实给大家带来了一个新的思考,这个风格会持续吗?可用吗?也许扁平风格的多年流行后,设计潮流开始往回走,但并不是直接回到拟物风格,而是在效率和视觉效果中找一个平衡点。不论这个风格的对错,起码引起了设计师的注意,也激发了很多设计师的灵感,就像当年拟物风格和扁平风格的讨论一样,不分对错,设计师也不妨多留意一下这个风格,试着做一下效果图,或许会有新的发现。当然,萝卜白菜各有所爱,你觉得你是喜欢现在的扁平风还是Neumorphism ?我想每个人内心都有自己答案!

 

预约申请免费试听课

怕钱不够?就业挣钱后再付学费!    怕学不会?从入学起,达内定制课程!     担心就业?达内多家实践企业供你挑选!

上一篇:设计师离职被老板加薪留人,该如何是好?​
下一篇:如何让你的设计不那么千篇一律

手把手教你们如何快速上手做适配

如何让你的设计不那么千篇一律

选择城市和中心
江西省

贵州省

广西省

海南省