开局一张图
什么是新拟态 ?
「新拟态」英文名Neumorphism，也有设计师称为 Soft Ui（软 UI）。起因是源于 2019 年 11 月 5 日，来自乌克兰的设计师 Alexander Plyuto 在追波和 ins 上发布了下图的一张作品，作者说明信息：“让我们想象一下，如果在移动界面设计中，投影的形式发展的更好的话，那将来的界面将会是什么样的，这是我的愿景。”，一时间广受设计师追捧，“新拟态”风潮迅速风靡各大设计网站，简单来说就是一种类似浮雕的效果，介于扁平与投影之间，它是一种使用对象阴影的模糊、角度和强度来凸显出对象的样式，由于其柔和的阴影和新颖的外观，让设计看起来更加的逼真、未来、现代、有吸引力。
在今年上半年，新拟态的 UI 设计风靡一时，它被誉为 2021 年最火的 UI 设计趋势之一，在互联网上广受欢迎。新拟态融合了拟态和平面设计技术，模仿真实物体的形态，为界面的 UI 元素赋予真实感，它是一种现实主义风格，也是非常值得探索的新设计风格。它时尚，细致，使用它进行设计确实很有趣。因此，在本文中，我将教大家如何使用 CSS3 来实现新拟态风格的 UI 元素，并且分享一些使用新拟态 UI 的网站实例。
简单来讲，新拟态是图形的一种样式，通过灯光的原理，为图形添加上高光和阴影，其目的是为界面的 UI 元素赋予真实感、立体感。
说多了都是废的，我们直接上图，一起看看这样的风格究竟有多好看，能被设计师这样的夸。（图片来源于网络）
传统扁平化设计&新拟态设计
传统的扁平化设计：
扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出 3D 效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。
扁平化的优点：
- 降低移动设备的硬件需求，延长待机时间
- 可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生
- 扁平化设计更简约，条理清晰，最重要的一点是，更好的适应性
扁平化的缺点：
- 降低用户体验，在非移动设备上令人反感
- 传达的感情不丰富，甚至过于冰冷
新拟态的特点：
- 有且只有一个光源照射
- 组件与背景对比度比较弱
- 常常用于卡片和按钮
- 凹凸的真实质感
- 因为对比度的原因，它不如扁平的简洁直观
如何实现新拟态 ？
一个简单的例子：
废话不多说直接上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>公众号：前端开发爱好者</title> </head> <style> body{ width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; background: #e0e0e0; } .neumorphism{ width: 200px; height: 200px; background: #e0e0e0; border-radius: 50px; /* 核心代码 box-shadow */ box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; } </style> <body> <div class="neumorphism"></div> </body> </html>>我想很多童鞋看到上面的
HTML代码应该就能知道具体的实现方式了，想要实现新拟态效果，核心就在于css的box-shadow。box-shadow
box-shadow 属性向 box 添加一个或多个阴影。
语法
/* box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式] */ box-shadow: h-shadow v-shadow blur spread color inset;
值 描述 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS 颜色值。 color 可选。将外部阴影 (outset) 改为内部阴影。
具体使用这里不做一一演示了。细心的童鞋应该会发现为什么上部分代码中
box-shadow存在两个阴影，是不是写错了 ？在这里很
严肃的告诉你，么得错！！！多种阴影效果用,隔开拉。新拟态就是用了box-shadow可以增加多种阴影的效果，从而实现凹凸的真实质感。
更多新拟态效果实现
效果1：
border-radius: 50px; background: linear-gradient(145deg, #cacaca, #f0f0f0); box-shadow: 20px 20px 40px #b3b3b3, -20px -20px 40px #ffffff;
效果2：
border-radius: 50px; background: linear-gradient(145deg, #f0f0f0, #cacaca); box-shadow: 20px 20px 40px #b3b3b3, -20px -20px 40px #ffffff;
效果3：
border-radius: 50px; background: #e0e0e0; box-shadow: inset 20px 20px 40px #b3b3b3, inset -20px -20px 40px #ffffff;
总结：现阶段扁平化设计是大流，因为其良好的适应性，简约大方，总体用户接受度高（绝大部分网站，应用都是这个风格），但是也会让人产生审美疲劳，新拟态可以对其做一个补充，给用户另一个不同的体验。