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

简介: 设计和前端开发是息息相关的,毕竟设计师的作品最终需要靠我们前端工程师来实现为可交互的界面。这也是为什么会有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


但是要将一个抽象的平面元素放到光影世界中并不那么容易,比如上图中这几个Big Sur里的图标就有很大的优化提升空间,设计师 Vikiiing 也是这么认为的,所以他将抽象的平面元素3D化,让光影和细节的表现更为真实。


5aee6d40cf7c8cd9384e76d75114a25.png


1650853111(1).png


1650853085(1).png


1650853135(1).png


Vikiiing设计的这一套图标真是深得我心...


新拟态风在前端的应用


1650853040(1).png


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


相关文章
|
7月前
|
前端开发 JavaScript Android开发
探索前端开发的未来:跨平台框架的崛起
【2月更文挑战第5天】在不断演进的技术领域中,前端开发正迎来一个新的时代。本文将探讨跨平台框架的兴起,并分析其对前端开发未来的影响。通过使用跨平台框架,开发者可以更高效地构建应用程序,并在多个平台上实现代码重用,从而带来更广阔的发展空间。同时,我们还将介绍几个目前流行的跨平台框架,并探讨它们的优势和潜在挑战。前端开发的未来已经来临,让我们一起揭开这个全新世界的面纱。
|
2月前
|
前端开发 JavaScript 中间件
Vite:下一代前端构建工具的崛起
【10月更文挑战第13天】Vite:下一代前端构建工具的崛起
|
2月前
|
JSON 前端开发 JavaScript
Vite:新一代前端构建工具的崛起
【10月更文挑战第13天】Vite:新一代前端构建工具的崛起
|
6月前
|
前端开发 UED
前端开发新趋势:响应式设计与微前端架构的崛起
【6月更文挑战第26天】响应式设计适应多设备需求,通过弹性布局和媒体查询确保跨平台优化体验。微前端架构则将复杂应用拆分成独立模块,实现独立开发部署,增强技术栈灵活性和系统容错性,两者共同推动前端开发效率与用户体验提升。
|
6月前
|
机器学习/深度学习 人工智能 前端开发
未来趋势下的前端开发:可视化编程的崛起
随着人工智能和机器学习技术的不断发展,前端开发领域也在逐渐迎来变革。本文探讨了未来趋势下前端开发的发展方向,重点介绍了可视化编程在前端开发中的应用和优势,以及对传统前端开发方式的影响。
|
6月前
|
边缘计算 前端开发 Android开发
未来趋势下的前端开发:跨平台技术的崛起
随着技术的不断演进,前端开发领域也在迅速变化。本文探讨了未来趋势下前端开发的发展方向,着重分析了跨平台技术在前端开发中的崛起,并探讨了其对开发者和行业的影响。
|
7月前
|
机器学习/深度学习 人工智能 前端开发
探索未来的前端开发趋势:WebAssembly 技术的崛起
随着互联网的快速发展,前端开发的需求也日益增长。本文将深入探讨一项引起广泛关注的新兴技术——WebAssembly,探索其在前端开发中的应用以及对未来的影响。
|
7月前
|
Rust 前端开发 JavaScript
探索前端技术的新趋势:WebAssembly的崛起
【2月更文挑战第11天】在Web开发的领域中,JavaScript一直占据着主导地位,但随着WebAssembly(简称Wasm)的出现,前端开发的边界正在被重新定义。本文将深入探讨WebAssembly的核心优势,如何与传统的JavaScript生态系统协同工作,以及它如何为前端开发带来革命性的性能提升和更广阔的应用前景。通过具体案例分析,我们将展示WebAssembly在实际项目中的应用,为前端开发者提供全新的视角和思考路径。
|
7月前
|
Rust 前端开发 安全
探索未来前端发展趋势——WebAssembly技术的崛起
【2月更文挑战第1天】在不断变化的互联网技术领域,前端开发者需要不断更新自己的技能以适应新的需求和挑战。本文将探索WebAssembly技术的崛起,分析其对前端开发的影响和潜在前景,并介绍如何利用WebAssembly提升应用的性能和可扩展性。
107 1
|
7月前
|
前端开发 UED
微前端架构的崛起:概念与实践
微前端架构是一种新兴的前端架构模式,与传统的单体式前端架构有所不同。本文将介绍微前端架构的基本概念和具体实践,讨论其优势和劣势,以及如何在项目中应用微前端架构。
131 0