近期文章（原创不易，请多鼓励???）

• ?2020，疫情重创了我的第三次创业 | 掘金年度征文 98赞
• ?做了一夜动画，就为让大家更好的理解Vue3的Composition Api 814赞

前言

macOS Big Sur已经正式发布一段时间了，不知道大家都勇敢的尝鲜了吗？大帅在第一时间就安装上了Big Sur，结果一些常用软件出了问题，会闪退崩溃。除此之外，Big Sur带来了全新的图标风格，使其在界面风格上更接近iOS。不同于之前的扁平化的风格，这是一种新拟态（Neumorphism）风格，很多设计师都在争论这会不会是UI设计的下一波潮流。

拟物和扁平化

新拟态风格的前身是拟物设计，拟物设计更多是在数码设备的屏幕中去刻意营造的真实世界的物理特性。但是在拟物风格和新拟态之间，扁平化设计已经统治了10年了...

扁平化的风格在各种设备上具有一致的表现力及可用性。但随着扁平化风格的泛滥，越来越多的设计师思考如何将拟物设计中的一些特性和扁平化的特性结合起来，由此诞生了新拟态风格。

新拟态风格

新拟态风格从去年起已经在UI设计师社群中广泛讨论，大部分UI设计师对此持否定态度。当然批评主要来自于早期的新拟态风格设计实验，实验主要针对区别以往的视觉感受，而没有聚焦在产品的可用性上。

新拟态风格则是更加聚焦于如何利用光线去营造一个立体空间。

最早让新拟态风格饱受批评的试验作品，往往是在白色背景上显示白色的UI元素，仅仅使用光和投影让UI元素看上去是凸起或凹下去的。这种设计没有考虑到用户界面的可用性，所以还无法成为一种可广泛应用的设计风格。不过，新拟态里风格里呈现了一个UI界面的全局照明的概念，它不只是作用在某一个元素上，而是多个元素在一个光影世界里如何相互作用。

但是要将一个抽象的平面元素放到光影世界中并不那么容易，比如上图中这几个Big Sur里的图标就有很大的优化提升空间，设计师 Vikiiing 也是这么认为的，所以他将抽象的平面元素3D化，让光影和细节的表现更为真实。

Vikiiing设计的这一套图标真是深得我心...

新拟态风在前端的应用

设计和前端开发是息息相关的，毕竟设计师的作品最终需要靠我们前端工程师来实现为可交互的界面。这也是为什么会有D2大会Designer & Developer Frontend Technology Forum的原因

• codepen上的试验作品

codepen.io/search/pens…

• 新拟态风CSS生成器

neumorphism.io/#55b9f3

• 新拟态风UI界面

dribbble.com/search/Neum…

参考内容

• www.inputmag.com/design/appl…
• www.zcool.com.cn/article/ZMT…