新拟态风格的一次尝试应用

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

前言

最近不少小伙伴在逛Dribbble时候，发现最近流行一波新的设计风格，和以往不一样的是，此次趋势又回到以前拟物化了，但它与纯拟物化仍是有区别的，如今它有一个流行词语叫“新拟态”。

1. 什么是新拟态

「新拟态」英文名Neumorphism，也有设计师称为 Soft Ui（软UI）。简单来讲就是一种相似浮雕的效果，介于扁平与投影之间。其融合了拟态和平面设计技术，模仿真实物体的形态，为界面的UI元素赋予真实感，它是一种现实主义风格，也是很是值得探索的新设计风格。

2. 新拟态风格特色

优势

• 元素并不浮动
• 元素色彩相对单一，与背景高度统一
• 左上角亮色投影，右下角深色投影
• 多以卡片样式出现
• 更加适合大圆角图形

缺点

• 缺乏对比度，致使可见性较差
• 总体视觉是比较平，缺乏层次感

实现原理

新拟态的基本形状通常有两种：「凸起效果」 和 「凹陷效果」，「凸起效果」 使用外阴影实现，「凹陷效果」 使用内阴影实现。

CSS 实现

1. 「凸起效果」

<div class="container">
    <div class="soft-element"></div>
</div>

<style> .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: #f1f3f6; } .soft-element { width: 185px; height: 185px; border-radius: 30px; background: linear-gradient(145deg, #ffffff, #f1f3f6);; box-shadow: 6px 6px 18px #c6c7ca, -6px -6px 18px #ffffff; } </style>
复制代码

2. 「凹陷效果」

<div class="container">
    <div class="soft-element"></div>
</div>

<style> .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: #f1f3f6; } .soft-element { width: 185px; height: 185px; border-radius: 30px; background: linear-gradient(145deg, #d9dbdd, #ffffff); box-shadow: 6px 6px 18px #c6c7ca, -6px -6px 18px #ffffff; } </style>
复制代码

完整例子

<div class="container">
<div class="soft-phone">
  <div class="header">
    <div class="btn">
      <i class="bi bi-chevron-left"></i>
    </div>
    <div class="header-title">Play</div>
    <div class="btn">
      <i class="bi bi-three-dots"></i>
    </div>
  </div>
  <div class="rotary"></div>
  <div style="font-size:20px;">Deep reason shallow</div>
  <div style="font-size:14px;font-weight:500;color:#a2adbe;margin:10px;">Eminem</div>

  <div class="tool">
    <div class="btn">
      <i class="bi bi-skip-start-fill"></i>
    </div>
    <div class="btn">
      <i class="bi bi-caret-right-fill"></i>
    </div>
    <div class="btn">
      <i class="bi bi-skip-end-fill"></i>
    </div>
  </div>

  <div class="progress"></div>

  <div class="footer">
    <div class="btn">
      <i class="bi bi-cast"></i>
    </div>
    <div class="btn">
      <i class="bi bi-list-ul"></i>
    </div>
  </div>
</div>
</div>
复制代码

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  color: #5c7aaa;
  font-weight: 600;
  font-size: 18px;
  background: #f1f3f6;
}
.soft-phone {
  width: 375px;
  height: 812px;
  border-radius: 60px;
  background: #f1f3f6;
  box-shadow: 15px 15px 30px #dee0e2, -15px -15px 30px #ffffff;
}
.header,
.tool,
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 45px 30px;
}
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 15px;
  background: #f1f3f6;
  box-shadow: 7px 7px 14px #dee0e2, -7px -7px 14px #ffffff;
}
.btn .bi::before {
  font-weight: 700 !important;
}
.rotary {
  width: 220px;
  height: 220px;
  margin: 0 auto 45px;
  border-radius: 130px;
  background: #f1f3f6;
  box-shadow: 21px 21px 43px #dee0e2, -21px -21px 43px #ffffff;
}
.tool {
  padding: 40px 45px;
}
.tool .btn {
  width: 58px;
  height: 58px;
}
.tool .btn .bi {
  font-size: 24px;
}
.footer {
  justify-content: center;
  padding: 40px 45px;
}
.footer .btn {
  margin: 0 30px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 16px;
}
.progress {
  position: relative;
  height: 5px;
  margin: 0 30px;
  border-radius: 5px;
  background: #d7e3ef;
  box-shadow: inset 1px 1px 4px #dee0e2, inset -1px -1px 4px #ffffff;
}
.progress::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 40%;
  height: 5px;
  border-radius: 5px;
  background: linear-gradient(145deg, #a9b5e7, #d2d7fd);
  box-shadow: 1px 1px 4px #dee0e2, -1px -1px 4px #ffffff;
}
.progress::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 40%;
  transform: translate(-40%, -50%);
  width: 15px;
  height: 15px;
  border-radius: 20px;
  background: linear-gradient(145deg, #a9b5e7, #d2d7fd);
  box-shadow: 3px 3px 6px #dee0e2, -3px -3px 6px #ffffff;
}
</style>
复制代码

效果还能够哈哈哈

参考文献

01. 《设计趋势 Neumorphism 是什么？》
02. Neumorphism（新拟态）UI设计趋势吗？
03. 《新拟态——国外设计师分析的全新UI趋势》

Neumorphism

（求关注）

欢迎关注个人公众号：A纲 Coder，得到平常干货推送。最后再次感谢您的阅读，我是程序猿憨憨