新態和CSS

Neumorthism是一種設計趨勢的設計趨勢，它提供了極簡，現實的UI，這是一種現代化的skeuomormormormism。它在2019年的UX集體帖子中創造了，它引發了設計和發展社區中有關美學，可用性，可訪問性和實用性的持續辯論。它的影響是不可否認的。

本文探討了CSS可以實現的新態效應，從而研究了其在Web界面中的參數並反對使用。

neumorthism作為用戶界面

新態性獨特地融合了極簡主義和態度。考慮材料設計的極簡主義美學，與Skeuomormormis的超現實主義形成鮮明對比。想想蘋果的設計從2000年代初到當前的極簡主義方法的發展；新態性佔據了中間立場。

neumorthic UI元素似乎與背景集成在一起，好像被擠出或插圖一樣。它們的“軟UI”是通過使用軟影子來定義的。

使用卡片組件將其與材料設計進行比較，突出了它們的差異。設計透視圖闡明了這些區別。

這確立了新態性的概念；讓我們深入研究其CSS實施。

新態和CSS

雖然看似簡單（擁有box-shadow屬性），但創建了新態界面的差異更為細微。它涉及多個box-shadow和background-color值，以實現各種效果。

新態盒子陰影

box-shadow屬性複習：

 <code>box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];</code>

可調節的選項包括：水平和垂直偏移，半徑模糊，擴展半徑和顏色。 inset關鍵字創建了內在陰影。使用逗號應用多個陰影。

 <code>box-shadow: 20px 20px 50px #00d2c6, -30px -30px 60px #00ffff;</code>

Neumorthic UI元素利用了“凸起”效果的光和深色陰影。改變“光源”會產生不同的組合。通過調整陰影放置可以進行四種組合。

CSS變量增強了抽象：

 <code>box-shadow: var(--h1) var(--v1) var(--blur1) var(--color-dark), var(--h2) var(--v2) var(--blur2) var(--color-light);</code>

inset關鍵字在擠出和插圖之間切換。

背景顏色

box-shadow會影響邊緣外觀。 background-color應透明或匹配基礎元素的顏色。固體或梯度背景是可能的。根據與陰影的對齊方式，梯度會產生凸面或凹面的表面變化。

 <code>.element { background: linear-gradient(var(--bg-angle), var(--bg-start), var(--bg-end)); box-shadow: var(--h1) var(--v1) var(--color-dark),       var(--h2) var(--v2) var(--color-light); }</code>

在實踐中的新態

將新態性應用於簡單的按鈕可以發現局限性。它的背景顏色必須與基礎元素相匹配，從而阻礙其脫穎而出的能力。雖然文本顏色調整，邊框或圖標可以提高可見性，但固體背景通常比漸變更好。主動狀態上的插圖陰影增強了“壓”效果。

受到實際示例（路由器按鈕和汽車控制面板）的啟發，提出了改進的按鈕和切換設計。但是，標準按鈕通常提供優質的UX。

隨著元素具有多個狀態（懸停，活躍，焦點，訪問，錯誤，成功，警告，殘疾人），Neumorthism的局限性變得顯而易見。微妙的變化限制了清晰狀態區別所需的自定義。可單擊的元素可能在視覺上含糊不清。

由於陰影和圓角，新態元素還需要更多的空間，這使得它們不適合小元素。

Michal Malewicz建議僅將Neumormthism應用於已經發揮良好功能的元素。

可訪問性和UX

可訪問性是一個主要問題。 Neumorthism固有的微妙對比給具有色盲或低視力的用戶帶來了挑戰。過度使用會阻礙頁面層次結構，並引起有關交互元素的混亂。高對比度至關重要，背景顏色應避免極端（白色和黑色）。

從UX的角度來看，Neumorthism不應主導頁面。過度使用會產生壓倒性的塑性效果，並破壞視覺層次結構。

Neumorthism最佳地使用了其他設計系統的重音，例如材料設計。

結論

新態性雖然在美學上令人愉悅且獨特，但卻有局限性。它的限制性調色板和柔和的對比，阻礙了交互式元素中的可用性和可訪問性。它最多使用，理想地將其集成到現有設計系統中，以替代卡和靜態容器。它不太可能取代當前的設計系統，但為特定元素提供了新的方法。

參考

• 用戶界面中的neumorthism
• 新態度 - 殭屍趨勢
• 讓我們談談新態和可及性

以上是新態和CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！