Neumorphism——新拟态设计

我阅读了现有的几篇有关Neumorphism的文章,个人的见解随手记一下

最近迷上了一种风格——Neumorphism风,那这种风格长什么样子呢,先通过一张图片来了解一下:
来自Dribbble的 MazePixel作品Freebie Neumorphic UX UI Elements

这是一种新的设计风格,可能有的读者会说这不就是扁平风嘛,其实不然,这种风格相对于扁平风增加了高度,何为高度,我们可以从上图中感知到组件的突出与凹陷,有的读者会想到,这很类似于桌面上的一张张的卡片,实际上确实如此,它是一种新型的拟物化设计,如下图所示:
来自Dribbble的Timotius Muliawan作品Banking App Neumorphism Exploration

何为拟物化设计,如名称所示,就是模拟物体状态的设计,根据前人的经验,拟物化设计由三部分组成:

  • 主体
  • 高光
  • 阴影

而高光阴影的位置表现出主体的状态,使用外阴影来表现主体突出也就暗示这个按钮未选中,而当按钮按下,外阴影改变为内阴影,如下图所示:
来自Dribbble的OTAKOYI作品Neumorphism UI Trend 2020

参考链接:

本文标题:Neumorphism——新拟态设计

文章作者:小哲

发布时间:2020年02月20日 - 19:02

最后更新:2020年05月26日 - 12:48

原始链接: 点击复制原始链接

许可协议: 协议-转载请保留原文链接及作者