Sketch内的新拟物风格探索【教程】

新拟态是什么

⬆️拟物写实的icon风格

上图应该能解释“拟物”的意思,偏向写实,重视细节的刻画,用高光、阴影、纹理、颜色等各种方式来最大程度的还原物体的本来面貌,突出它的质感。

再来解释“轻拟物”似乎容易一些,介于写实和扁平之间的一种风格,其实以前也流行过类似的,我们称之为“轻质感“,虽然两者还是有着很多不同的地方。

概括来说,“新拟态”风格就是用阴影高光渐变等方式克制的刻画出微质感。

新拟态风格展示

展示一些追波和花瓣站酷上大佬们的作品会帮助大家更好的理解设计风格。
新拟态展示新拟态展示新拟态展示新拟态展示由于新拟态的风格能够使界面看上去更简洁统一,作为作品集内的设计展示和一些对外公开的项目展示的风格往往能收获更多的关注。这一点在追波上就一览无遗。

不过由于这种风格对于用户的引导性不强,在作为按钮使用时和其他风格比起来很难让用户第一眼就认为这是个按钮(虽然加上文字会好一些),仙女做个图来对比一下。
新拟态展示

新拟态怎么绘制

好看的东西肯定得会做,大概讲解一下新拟态的绘制方式,仙女用的Sketch比较多,因为利用投影和渐变,所以和PS的操作本质上是一致的。

新拟物绘制新拟物绘制其实很简单,更多的还是在设计的过程中自己归纳总结,当然在这个智能化的时代,必然少不了一些工具。给大家介绍一款可以直接生成新拟态风格元素的工具——neumorphism,是一个会设计的前端工程师开发的(Adam Giebl)。

https://neumorphism.io

页面开启后长这样⬇️新拟物绘制 左边为预览图,四个角可以切换高光方向,右侧为具体的参数,可以通过调节达到想要的效果,也可以调节凸起和凹陷等风格,同样可以生成具体的代码。

下面讲解几个简单的新拟态风格绘制过程,方便大家做一个了解。(sketch)

1.新拟态icon,主要就是外部形状有个质感体现,因为只是为了说明呈现的比较单一。
新拟物绘制
2.新拟态风格按钮,按钮和控制器需要一些其他元素和色彩的辅助。因为我本身不是喜欢重阴影的感觉,做的质感还是比较弱的,绘制中需要不断调整哈。
新拟物绘制
基本介绍的差不多了,欢迎大家动手试一试吧~如果有疑问的话可以在公众号后台发送消息,会尽量解答的哈。

如果对为什么这个风格难以用于实际商业用途比较纠结的话,可以了解一下「可访问性障碍」。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/fairycode/article/details/108623395
今日推荐