2020年设计趋势——新拟物风格

从19年底开始,又一个新的UI设计风格出现在各种设计风格预测的文章中。那么,新拟物风格究竟有什么特点?是否能够应用在实际项目中呢?

1. 起源

在2019年11月左右,乌克兰的设计师 Alexander Plyuto提出了一个新的设计风格New skeuomorphism(有说简称是Neuomorphism),也有观点说这种风格是Skeuomorph 2.0。由于这种风格刚刚诞生,因此命名还是在讨论中啦~

Alexander Plyuto

2. 风格特点

新拟物风的设计基础点为 “ 几何色块+内外投影 ” 。这种设计风格在传统的扁平的基础上增加了拟物的投影效果,从而提升了界面的立体感,又比拟物的效果更加轻盈、简洁,因此整体视觉体验是简约但又有惊喜。

来自Alexander Plyuto

3. 实际操作

不管使用那种软件进行设计,只要把握新拟物风格的设计特点即可。建立一个几何色块,为其增加内外投影,就可以制作出符合新拟物风的最小单元。调整阴影的方向、大小以及色块色颜色等参数就可以实现不同的效果。

来自网络(侵删)
来自:布莱恩臣
来自:布莱恩臣

若要应用在页面中,最好将页面背景颜色调成含偏向色的灰色(这里与实际项目中不会用纯白作为页面底色是一样的道理),然后可以把具体的控件(如按钮、进度条、控制器等)基于新拟物风格的特点进行设计。

来自网络(侵删)
来自Neomorphism Guide 2.0

最后,将这些控件应用好就可以啦~

特别要说的是,新拟物的控件虽然增加了设计的丰富度,但是不代表页面中所有的控件都要使用这种风格,优秀的设计是合理的应用。

4. 可行性分析

易用性:由于需要使用投影的效果,所以在设计切图与实际开发的过程中增加了难度。若全局投影一致,开发代码实现的话会增加工作量;若均使用切片处理,会造成加载过慢或本地文件包过大等现象。

易读性:由于颜色使用较为克制,除了极少数点缀色外没有主色,所以整体重点不突出,对信息获取造成了一定的干扰。

用户友好性:由于缺少对比度与视觉引导,会对用户产生一定的使用障碍,在复杂的页面中会导致用户迷失的情况。

总之,在页面单一的情况下,新拟物风格可以增加页面的丰富度;在页面复杂的情况下,会对用户使用造成干扰。

5. 应用场景

适用于功能单一的设计产物!

A. 当前实际项目

针对现在移动端的设计而言,可以进行局部尝试。单一的功能操作页、操作控件等,如共享单车的扫码页

B. 物联设备

随着智能物联的普及,之后越来越多的设备都会搭载可视化的操作面板。设计师可以将新拟物风格尝试在物联网设备的操作面板中进行使用,可以有效的降低用户对新操作环境的不适感,如空调、净化器、可视对讲等操作面板。

实际效果可以参考下面这种度数展示效果、控制器效果。

来自Alexander Plyuto

最后,提供一个调试效果的CSS参数工具:Neumorphism 的生成器

你可能感兴趣的:(2020年设计趋势——新拟物风格)