新擬態風格的一次嘗試應用

這是我參與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，得到平常乾貨推送。最後再次感謝您的閱讀，我是程序猿憨憨