了解 Web 開發中的新形態設計：它是什麼、如何實現以及何時使用它-css教學-PHP中文網

近年來，新形態設計的概念在網頁開發和 UI/UX 設計社群中掀起了波瀾。新擬態主義以其獨特的現代美學結合了擬物主義和極簡主義的元素，提供了一種使介面脫穎而出的全新方式。本文深入探討什麼是新形態設計、實現它的步驟以及 Web 開發的實際用例。

什麼是新形態設計？

新擬物主義，或“新擬物主義”，是一種將現實、近乎觸覺的元素與極簡主義方法融合在一起的設計風格。它主要使用柔和的陰影、微妙的漸變和柔和的顏色來創造看起來像是由與背景相同的材料模製而成的元素。這會產生凸起或凹陷的效果，使元素看起來三維，但仍與整體佈局和諧。

與模仿現實世界紋理和材質的傳統擬物化不同（想像一下看起來像真實相機的應用程式圖標），新擬物更多的是創造深度和精緻的美感，而不是複製現實。它非常適合簡單、平滑的形狀，通常出現在中性、柔和的調色板中。

新形態設計的主要特徵

軟陰影：新態依賴兩個陰影 - 元素下方的深色陰影和元素上方的淺色陰影 - 來創建深度效果。
微妙的漸變：為了實現模壓效果，新形態設計通常包括非常柔和的漸變，使元素看起來稍微圓形或凸起。
低對比度：新形態設計通常涉及 UI 元素和背景之間的低對比度，從而使介面具有柔和、統一的外觀。
單色和柔和的顏色：新形態設計通常使用柔和的配色方案，這有助於創造現代、乾淨的外觀，但不會壓倒內容。

如何在 CSS 中實現新形態設計

在 CSS 中建立新形態設計相對簡單。這是使用簡單 CSS 屬性實現新形態元素（如按鈕）的逐步指南。

第 1 步：選擇背景顏色

從中性背景顏色開始，通常是淺灰色或柔和的顏色。這將有助於柔和的陰影脫穎而出，而又不會太刺眼。

body {
  background-color: #e0e0e0; /* A light gray background */
}

登入後複製

第2步：套用雙陰影

要建立 3D 效果，請在元素上套用兩個陰影：一邊較暗的陰影，另一邊較淺的陰影。這是新形態按鈕的範例：

button {
  background-color: #e0e0e0; /* Same as the background color */
  border-radius: 12px;
  box-shadow: 
    8px 8px 16px #b8b8b8, /* Dark shadow */
    -8px -8px 16px #ffffff; /* Light shadow */
  width: 150px;
  height: 50px;
  border: none;
  font-size: 16px;
}

登入後複製

此 CSS 將使按鈕看起來好像從背景中稍微凸起，從而賦予其柔和的模壓外觀。

Understanding Neomorphic Design in Web Development: What It Is, How to Achieve It, and When to Use It

步驟 3：新增懸停效果（可選）

增加懸停效果可以提高互動性並增強使用者體驗。若要讓按鈕在按一下時看起來被按下，請反轉陰影：

body {
  background-color: #e0e0e0; /* A light gray background */
}

登入後複製

透過此更改，當滑鼠懸停或單擊時，該按鈕似乎被壓入背景。

Understanding Neomorphic Design in Web Development: What It Is, How to Achieve It, and When to Use It

第 4 步：使用漸層以獲得更真實的效果

在背景顏色上添加微妙的漸變可以提高效果的真實感：

button {
  background-color: #e0e0e0; /* Same as the background color */
  border-radius: 12px;
  box-shadow: 
    8px 8px 16px #b8b8b8, /* Dark shadow */
    -8px -8px 16px #ffffff; /* Light shadow */
  width: 150px;
  height: 50px;
  border: none;
  font-size: 16px;
}

登入後複製

此漸層賦予元素略微圓潤的效果，增強 3D 外觀，同時又不影響設計的柔和度。

Understanding Neomorphic Design in Web Development: What It Is, How to Achieve It, and When to Use It

何時使用新形態設計

新形態設計在視覺上很有吸引力，但它並不適合所有用例。以下是新態主義運作良好的一些場景，以及一些它可能不是最佳選擇的場景。

理想的用例

極簡介面：新形態在極簡設計中大放異彩，螢幕上幾乎沒有元素，例如登陸頁面、音樂播放器和儀表板應用程式。
展示視覺美學：對於旨在給人留下深刻印象的介面（如作品集網站、創意機構網站和某些電子商務網站），新形態元素可以創造出現代、精緻的外觀。
深色和淺色主題：新形態與深色和淺色主題切換配合得很好，因為它的 3D 元素可以輕鬆適應不同的配色方案。

限制

輔助功能挑戰：低對比設計可能會帶來輔助功能問題，特別是對於有視力障礙的使用者而言。對於那些依賴較高對比度的人來說，新形態設計可能很難區分。
高互動應用程式：在需要許多按鈕或互動元素的應用程式中，低對比度可能會導致用戶視覺上混亂和困惑。
文字較多的介面：由於新形態設計依賴於柔和的陰影和微妙的顏色變化，因此如果在文字較多的頁面上過度使用，它會降低可讀性。

創造新形態設計的工具

有多種設計工具可以輕鬆為您的專案創建新形態組件：

Neumorphism.io：這個線上工具可讓您嘗試使用陰影、背景顏色和漸層來建立新形態設計，並提供 CSS 程式碼以方便整合。
Figma/Sketch 外掛程式：Figma 中的 Neumorphism 等外掛程式或 Sketch 中的類似工具可以幫助創建新形態效果，而無需從頭開始編碼。
Adobe XD：Adobe XD 的陰影和漸層選項可讓您輕鬆預覽和調整新形態效果。