新态和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中文网其他相关文章！