当前位置:首页 >教程首页 > U I 设计 > UXD全链路设计大师班 >“粘土拟物化”新一轮的UI设计趋势!

“粘土拟物化”新一轮的UI设计趋势!

发布时间:2022-01-17 10:38:46

设计趋势预测师 Michal Malewicz 又搞事情了。他又预测了一个新的设计趋势:Claymorphism,或者说,粘土拟物化。那么“粘土拟物化”是否是新一轮的UI设计趋势呢?一起来看下他的分享吧!

1.png

在此之前,Michal Malewicz 预测了新拟物化、玻璃拟物化、极光风等设计趋势的流行:

那么粘土拟物化到底是怎么出现的,它又有哪些特征呢?下面详细看看:

「新拟物化」没最终流行起来的原因

2.png

如你现在所知的,从2年前开始在 Dribbble 开始流行的视觉风格「新拟物化」最终没有在实际产品当中大规模流行,这一点并不难理解——新拟物化固然很有特色,但是在开发那边并不容易流畅自然地全部落地。一个仅仅只能停留在视觉设计当中的设计风格,是无法在实际产品中流行开来的。

之前有人质疑过 「新拟物化」存在可用性方面的问题,但是实际上,仅仅只需要一定程度的微调,就能让实际效果还不错。在 Michal 看来,更深层的原因是,新拟物化想要做到足够出彩并不容易,一方面简单的实现并不够吸引人,想要做到细腻,在前端实现上压力又会非常大,来回衡量一下,选择别的视觉风格会更加合理。

3.png

而广大设计师对于新拟物化的追捧,更深层的原因是大家对于扁平化视觉风的厌倦,人类视觉认知,从天性上决定了眼睛会更加青睐阴影所构建的信息层级和视觉关系。

那么从这一点上来说,在视觉设计上倒是并不是非得跟新拟物化死磕。

「粘土拟物化」是「新拟物化」的自然延伸

所以,这就要说说正在逐渐崛起的这种「粘土拟物化」设计风格。这种视觉风格看起来不像新拟物化那样「微妙」,阴影和渐变更加清晰,元素和元素之间泾渭分明,简单,但是足够友好。

4.png

Michael 提到,随着 2021 年元宇宙和 NFT 的大规模流行,这种源自于新拟物化但是更加适合用来创建虚拟角色的视觉风格,开始引起许多设计从业者的注意力。设计师 Amrit Pal Singh、Sam briskar 以及 著名的设计团队 icons8 的成员都在探讨如何探索这种新的风格,让它不仅仅在元宇宙中流行,而是走入更加日常的 UI 素材和图标当中。

5.png

上图中,分别是 Amrit Pal Signh、Icons8 和 Sam Briskar 的设计作品

在 NFT 交易中可以很清晰地注意到用户对于这类风格的作品的追捧。那么,将这种设计风格自然地延伸地加入到 UI 设计当中,让扁平的 UI 元素更加具备亲和力。

视觉风格:3D、友好、蓬松

6.png

实际上,Michael 在大概6年前的一个设计研究项目当中,就涉及到类似的风格。在那个扁平化依然是绝对主流的阶段,这种使用圆润边角、立体且柔和的 UI 设计风格倒是得到了很多人的青睐,倒是在设计从业者群体中鲜有好评。

老实说,粘土拟物化风格给人感觉非常「童趣」,不过在设计的时候,考虑到它本身会自带光影变化,所以排版布局最好尽量「极简」一点,同时用好强调色,调整好对比度。

不过,在前端落地上,目前还没有特别完美的 CSS 来落地,不过已经有一些开发人员借助 SVG 确定它可以在 UI 界面当中实现了。Michael 和他的朋友们已经创建了一个简单的 CSS 生成器,如果你想试试,可以借助它来制作出足够具有粘土拟物化特质的光影:

7.png

和新拟物化类似,粘土拟物化需要借助内外阴影共同来构建出元素的立体感,同时,背景投影除了Y轴上的偏移之外,还存在一个X轴上的偏移,这一点和多数的 UI 阴影有明显的差别:

8.png

为了确保整体的立体感,左上角的内阴影必须稍微亮一点,而右下角要适当暗一点:

9.png

在形状上,尽量使用使用圆角矩形,同时,它的圆角的尺寸也要比普通的更大:

10.png

最后,使用路径工具给四边增加额外的锚点,将锚点向外拖动,让它的整个轮廓更加圆润。

11.png

当然,粘土拟物化其实也适合深色模式的,不过要注意对比度,内阴影的变化要能够让人感知到才能将这种风格的特质凸显出来。

趋势融合:和玻璃拟物化的结合

而随着元宇宙的蓬勃发展,NFT的繁荣,粘土拟物化必然会以更高的频率出现在越来越多的设计当红总。

值得一提的是,随着 Fluent Design、苹果的 HIG 都明显的拥抱了玻璃拟物化的设计趋势,在如今的 UI 设计中玻璃拟物化已经是当之无愧的重要趋势了,而玻璃和粘土拟物化其实也可以很好地融合到一起:

12.png

来源:优设网

作者: Michal Malewicz

学员作品赏析
  • 2014期学员黄雨婷作品

    2014期学员黄雨婷作品

  • 2103期学员沈继龙作品

    2103期学员沈继龙作品

  • 2105期学员秦洋洋作品

    2105期学员秦洋洋作品

  • 2108期学员陆昶存作品

    2108期学员陆昶存作品

  • 2107期学员赵锦威作品

    2107期学员赵锦威作品

  • 2104期学员胡婷婷作品

    2104期学员胡婷婷作品

  • 2107期学员何亮作品

    2107期学员何亮作品

  • 2103期学员张子安作品

    2103期学员张子安作品

专业问题咨询

你担心的问题,火星帮你解答
  • 武汉游戏ui培训学校

    目前来说UI设计真正发展的比较好好的城市基本都在一线城市,真正的教学资源也都是在一线城市,有能力的UI设计老师更多的都是在一线......

  • 成都建筑手绘培训班

    建筑绘图是建筑师必须掌握的知识,尤其是手绘更能看的出设计师的专业素养,在绘图过程中,无论是结构线还是轮廓线都是整个画面的关键,......

  • blender和rhino建模哪个好学

    简单点来说,二者分属于两个不同的领域,blender用于娱乐动画领域而rhino用于工业领域,所以在很大程度上没有什么比较性可......

  • 哪有bleder建模培训班贵吗

    Blender软件是一款3D建模渲染软件,软件中为用户提供了渲染和建模两大功能,配合装配,动画,模拟,渲染,合成等等其他功能,......

  • 成都web前端培训班大概多少钱

    前端的发展一直都是很好的,而且在未来也依旧是不差的。所以对很多人来说,选择学web前端是一个不错的方向,但是也有很多同学担心培......

  • 零基础ai商业插画全能班

    很多小伙伴非常喜欢插画,从而产生了自己想要学习的念头,如果想要提升自己的能力又想实现经济自由,那么建议大家可以考虑学习商业插画......

×