前端2021的新趨勢，由扁平化到新擬態的運用｜8月更文挑戰

開局一張圖

什麼是新擬態 ?

「新擬態」英文名Neumorphism，也有設計師稱爲 Soft Ui（軟 UI）。原由是源於 2019 年 11 月 5 日，來自烏克蘭的設計師 Alexander Plyuto 在追波和 ins 上發佈了下圖的一張做品，做者說明信息：「讓咱們想象一下，若是在移動界面設計中，投影的形式發展的更好的話，那未來的界面將會是什麼樣的，這是個人願景。」，一時間廣受設計師追捧，「新擬態」風潮迅速風靡各大設計網站，簡單來講就是一種相似浮雕的效果，介於扁平與投影之間，它是一種使用對象陰影的模糊、角度和強度來凸顯出對象的樣式，因爲其柔和的陰影和新穎的外觀，讓設計看起來更加的逼真、將來、現代、有吸引力。css

在今年上半年，新擬態的 UI 設計風靡一時，它被譽爲 2021 年最火的 UI 設計趨勢之一，在互聯網上廣受歡迎。新擬態融合了擬態和平面設計技術，模仿真實物體的形態，爲界面的 UI 元素賦予真實感，它是一種現實主義風格，也是很是值得探索的新設計風格。它時尚，細緻，使用它進行設計確實頗有趣。所以，在本文中，我將教你們如何使用 CSS3 來實現新擬態風格的 UI 元素，而且分享一些使用新擬態 UI 的網站實例。html

簡單來說，新擬態是圖形的一種樣式，經過燈光的原理，爲圖形添加上高光和陰影，其目的是爲界面的 UI 元素賦予真實感、立體感。前端

說多了都是廢的，咱們直接上圖，一塊兒看看這樣的風格究竟有多好看，能被設計師這樣的誇。markdown

傳統扁平化設計&新擬態設計

傳統的扁平化設計：

扁平化概念的核心意義是：去除冗餘、厚重和繁雜的裝飾效果。而具體表如今去掉了多餘的透視、紋理、漸變以及能作出 3D 效果的元素，這樣可讓「信息」自己從新做爲核心被凸顯出來。同時在設計元素上，則強調了抽象、極簡和符號化。app

扁平化的優勢：

下降移動設備的硬件需求，延長待機時間
能夠更加簡單直接的將信息和事物的工做方式展現出來，減小認知障礙的產生
扁平化設計更簡約，條理清晰，最重要的一點是，更好的適應性

扁平化的缺點：

下降用戶體驗，在非移動設備上使人反感
傳達的感情不豐富，甚至過於冰冷

新擬態的特色：

有且只有一個光源照射
組件與背景對比度比較弱
經常用於卡片和按鈕
凹凸的真實質感
由於對比度的緣由，它不如扁平的簡潔直觀

如何實現新擬態？

一個簡單的例子：oop

廢話很少說直接上代碼：flex

<!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 添加一個或多個陰影。ui

語法

/* 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 存在兩個陰影，是否是寫錯了？spa

在這裏很嚴肅的告訴你，麼得錯！！！多種陰影效果用 ,隔開拉。新擬態就是用了box-shadow能夠增長多種陰影的效果，從而實現凹凸的真實質感。

小破站（建議移動端查看）

最後奉上本人用新擬態實現的我的主頁小破站: 我的主頁

前端2021的新趨勢，由扁平化到新擬態的運用｜8月更文挑戰

開局一張圖

什麼是新擬態 ?

傳統扁平化設計&新擬態設計

傳統的扁平化設計：

扁平化的優勢：

扁平化的缺點：

新擬態的特色：

如何實現新擬態？

box-shadow

語法

更多新擬態效果實現

效果1：

效果2：

效果3：

小破站（建議移動端查看）

前端2021的新趨勢，由扁平化到新擬態的運用｜8月更文挑戰

開局一張圖

什麼是新擬態 ?

傳統扁平化設計&新擬態設計

傳統的扁平化設計：

扁平化的優勢：

扁平化的缺點：

新擬態的特色：

如何實現新擬態 ？

box-shadow

語法

更多新擬態效果實現

效果1：

效果2：

效果3：

小破站（建議移動端查看）

如何實現新擬態？