近年來,新形態設計的概念在網頁開發和 UI/UX 設計社群中掀起了波瀾。新擬態主義以其獨特的現代美學結合了擬物主義和極簡主義的元素,提供了一種使介面脫穎而出的全新方式。本文深入探討什麼是新形態設計、實現它的步驟以及 Web 開發的實際用例。
新擬物主義,或“新擬物主義”,是一種將現實、近乎觸覺的元素與極簡主義方法融合在一起的設計風格。它主要使用柔和的陰影、微妙的漸變和柔和的顏色來創造看起來像是由與背景相同的材料模製而成的元素。這會產生凸起或凹陷的效果,使元素看起來三維,但仍與整體佈局和諧。
與模仿現實世界紋理和材質的傳統擬物化不同(想像一下看起來像真實相機的應用程式圖標),新擬物更多的是創造深度和精緻的美感,而不是複製現實。它非常適合簡單、平滑的形狀,通常出現在中性、柔和的調色板中。
在 CSS 中建立新形態設計相對簡單。這是使用簡單 CSS 屬性實現新形態元素(如按鈕)的逐步指南。
從中性背景顏色開始,通常是淺灰色或柔和的顏色。這將有助於柔和的陰影脫穎而出,而又不會太刺眼。
body { background-color: #e0e0e0; /* A light gray background */ }
要建立 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 將使按鈕看起來好像從背景中稍微凸起,從而賦予其柔和的模壓外觀。
增加懸停效果可以提高互動性並增強使用者體驗。若要讓按鈕在按一下時看起來被按下,請反轉陰影:
body { background-color: #e0e0e0; /* A light gray background */ }
透過此更改,當滑鼠懸停或單擊時,該按鈕似乎被壓入背景。
在背景顏色上添加微妙的漸變可以提高效果的真實感:
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 外觀,同時又不影響設計的柔和度。
新形態設計在視覺上很有吸引力,但它並不適合所有用例。以下是新態主義運作良好的一些場景,以及一些它可能不是最佳選擇的場景。
有多種設計工具可以輕鬆為您的專案創建新形態組件:
新形態設計為現代 UI 設計帶來了現實感,為數位元素增添了深度和維度。如果仔細使用,它可以使介面看起來時尚且具有凝聚力。然而,由於其在可訪問性和高互動性環境方面的局限性,應有選擇地使用新態,以補充設計的整體功能和可用性。
新形態代表了美學吸引力和可用性的獨特交集,透過適當的平衡,它可以以令人興奮的方式增強您的設計。所以,繼續吧,嘗試在您的下一個項目中添加一些新形態的風格,並觀看您的介面透過流暢的觸覺元素變得栩栩如生!
您可以在這裡查看程式碼
以上是了解 Web 開發中的新形態設計:它是什麼、如何實現以及何時使用它的詳細內容。更多資訊請關注PHP中文網其他相關文章!