将界面的一部分凸起来，另一部分凹下去，形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」

新拟态 - 图1

新拟态 UI 风格与扁平、投影风格的对比

新拟态 - 图2

从上面这张对比图可以看出，扁平风格就像是一张纸贴在墙面上，投影风格像是浮在半空中，而新拟态风格则像是墙面上直接凸起了一块。

新拟态 UI 风格的实现方式

要实现这种风格，精髓在于一个白色的阴影+一个常规阴影。一个示例如下图所示：

新拟态 - 图3

最基础的「凸起效果」和「凹陷效果」，卡片要使用与页面的背景色相同的背景色，然后利用卡片阴影来实现视觉上的 [突起] 或 [凹陷] 的效果。差别在于前者使用外投影，后者使用内投影。

  1. <style>
  2. body {
  3.     background: #ecf0f3;
  4. }
  5. div {
  6.     position: relative;
  7.     float: left;
  8.     width: 200px;
  9.     height: 200px;
  10.     margin-left: 80px;
  11.     margin-top: 80px;
  12.     background: #ecf0f3;
  13. }
  14. .drop-shadow {
  15.     border-radius: 20px;
  16.     box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #fff;
  17. }
  18. .inner-shadow {
  19.     border-radius: 20px;
  20.     box-shadow: inset 18px 18px 30px #d1d9e6, inset -18px -18px 30px #fff;
  21. }
  22. .inner-shadow-ring {
  23.     border-radius: 100%;
  24.     box-shadow: inset 9px 9px 15px #d1d9e6, inset -9px -9px 15px #fff;
  25. }
  26. .inner-shadow-ring:before {
  27.     content: "";
  28.     position: absolute;
  29.     left: 20%;
  30.     top: 20%;
  31.     width: 60%;
  32.     height: 60%;
  33.     border-radius: 100%;
  34.     background: #ecf0f3;
  35.     box-shadow: 9px 9px 15px #d1d9e6, -9px -9px 15px #fff;
  36. }
  37. </style>
  39. <div class="drop-shadow"></div>
  40. <div class="inner-shadow"></div>
  41. <div class="inner-shadow-ring"></div>

新拟态生成工具

https://neumorphism.io/#55b9f3

image.png