新拟物VS扁平化，UI 设计界C位之战！

放眼看今天的UI设计领域

扁平化设计妥妥占据C位宝座

可没办法，设计界是个轮回

2020年，新拟物风强势回归UI界

不仅是今年最火的设计新趋势

就连大厂设计师都对它爱不释手

饿了么，美团都在用新拟物设计

导致扁平化的C位之座岌岌可危

那新拟物风到底是什么来头？

新拟物风的前身是拟物，是在界面中模仿现实物纹理材质的设计，让人们在使用时会联想到现实物体，当时拟物写实的设计曾风靡全球。

然而在2013年，苹果公司发布 iOS7 系统，为实现画面简洁将界面元素扁平化处理，后来扁平风被全面普及，拟物风就被人们打入冷宫。

直到今年在Dirbble（全球知名设计网站），设计师Alexplyuto的拟物风作品获得3000个赞，热度持续飙升，新拟物风才再次刮起。

新拟物设计以细腻而著称，通过加重图标轮廓与阴影处理，达到像悬浮/凸起的样式效果，新拟物风设计页面如下。

从美感上来看，新拟物风摒弃了早前拟物化的劣势，省略了更多繁琐的细节，在图标的形体和光影上花心思。

今年6月，苹果更新了Mac操作系统Big Sur，拟物化设计归来，图标从扁平转向拟物。

两大外卖平台饿了么，美团的主页也运用了醒目的新拟物图标。

新拟物常用于图标、卡片以及按钮设计上，背景板多为干净的纯色；界面平滑、按钮的外边框都设置了阴影，渐变，突出立体感。

形体展现

新拟物由3个部分组成：1个背景+ 2个投影，其精髓在于对光线的运用。

颜色运用

新拟物在色彩使用极为克制，常选取浅色系作为背景，这是因为使用深一些的颜色时，看上去像是外发光或是投影效果。

新拟物只在关键位置会使用稍微亮丽的颜色来突出显示内容，用颜色形成对比。

动效设计

在新拟物设计中，基本上元素都会得到突出显示，所以界面会缺少信息层级关系，导致在动效设计上，要多做一些处理。

那么实现新拟物的动效设计，有两种解决方法。

1、切图：设计师对于元素的每个状态要分别提供一张切图。

2、代码：通过代码实现元素不同方向的投影，增加了一定的工作量。

每一个新的设计趋势都会激发设计师的灵感，不断进行探索和创新，设计才会更多美丽多彩。

今天关于新拟物的讲解

就介绍到这里了

想了解更多的UI知识

设计干货、实战案例的同学

还有作业练习+作业点评

老师1V1跟进学习进度

别再一个人硬撑学UI

简单一堂课，技能大提升

最最最不能拒绝的是

腾讯课堂0元粉丝专享价

☝☝☝