前端开发中新拟态风格的崛起

2022-04-25 284

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 设计和前端开发是息息相关的，毕竟设计师的作品最终需要靠我们前端工程师来实现为可交互的界面。这也是为什么会有D2大会Designer & Developer Frontend Technology Forum的原因

前言

1650852793(1).png

macOS Big Sur已经正式发布一段时间了，不知道大家都勇敢的尝鲜了吗？大帅在第一时间就安装上了Big Sur，结果一些常用软件出了问题，会闪退崩溃。除此之外，Big Sur带来了全新的图标风格，使其在界面风格上更接近iOS。不同于之前的扁平化的风格，这是一种新拟态（Neumorphism）风格，很多设计师都在争论这会不会是UI设计的下一波潮流。

拟物和扁平化

1650852850(1).png

新拟态风格的前身是拟物设计，拟物设计更多是在数码设备的屏幕中去刻意营造的真实世界的物理特性。但是在拟物风格和新拟态之间，扁平化设计已经统治了10年了...

1650852879(1).png

扁平化的风格在各种设备上具有一致的表现力及可用性。但随着扁平化风格的泛滥，越来越多的设计师思考如何将拟物设计中的一些特性和扁平化的特性结合起来，由此诞生了新拟态风格。

新拟态风格

新拟态风格从去年起已经在UI设计师社群中广泛讨论，大部分UI设计师对此持否定态度。当然批评主要来自于早期的新拟态风格设计实验，实验主要针对区别以往的视觉感受，而没有聚焦在产品的可用性上。

1650852903(1).png

新拟态风格则是更加聚焦于如何利用光线去营造一个立体空间。

1650852924(1).png

最早让新拟态风格饱受批评的试验作品，往往是在白色背景上显示白色的UI元素，仅仅使用光和投影让UI元素看上去是凸起或凹下去的。这种设计没有考虑到用户界面的可用性，所以还无法成为一种可广泛应用的设计风格。不过，新拟态里风格里呈现了一个UI界面的全局照明的概念，它不只是作用在某一个元素上，而是多个元素在一个光影世界里如何相互作用。

1650852951(1).png