对于任何使人愉快和新鲜的事物,我倾向于像孩子同样对待每一篇文章,将这些特定的主题进行整合,而不是就此独自另起一个篇幅,这会破坏它的完整性。
今天我们讨论的话题是缠绕Neumorphism的,它是一种设计风格,也能够称之为设计趋向,这让许多设计师们鼎力追捧,不知道是不是我看的还不够全面?让我们一起捋一捋吧。
Neumorphism
Neumorphism(或者叫Neo-skeuomorphism)是一种新潮的设计风格,应用于网页元素、框架、界面等,也被称为Skeuomorphism。所以Neumorphism是“New” 和 “Skeuomorphism”的"奇妙"结合。因为我们对于“New”已经不目生了,就让我们来看看“ Skeuomorphism”吧。
在定义拟物化现象时,BBC是最值得一看的,自从人类发现了收音机,它就为我们提供了最新的消息:
手机应用的设计手法是模仿现实生活中的物体,这即是“Skeuomorphism”。
他们在关于乔布斯的汇报(纪念文章)中偶然发现了这个清晰的定义,注释了苹果产品传统外观的转变,作者在文章中偏重夸大了这个引用。
由此我们得知Skeuomorphism这一词语,作为一种设计风格,在苹果的设计团队中已经被宽泛的应用于种种产品,而且,苹果的做法表明,他们在这一平台拥有绝对的主导职位。所以我们可以得出一个低级的定义:
Skeuomorphism = 过去的苹果风
另一个需求注意的点是,它与另一个UI/UX流行语密切相关:隐喻,这恰好是一个很正面的词,在产品设计平台受到高度重视。
Ultralinx中的超写实图标
拟物(Skeuomorphism)设计的衰落
在公布IOS7系统之前,苹果公司宣布放弃传统的设计风格,包含界面和图标,从那时起,这种风格开始向扁平风转变。
苹果设计团队的理智之举在于尽可能的减缓这一变革,到2019年的时候,这种扁平风才在整个设计行业到达了顶峰。
苹果公司,作为行业风向标,宣告Skeuomorphism的完全结束,设计行业纷纷跟风。设计师是技术不断更新的群体,他们很容易适应新的设计风格。跟着扁平风格人物插图开始流行,2018年底至2019年我们也一起见证了纯扁平风格设计的衰落,但是这又是另一回事了。
一个心爱生命的转世
我知道你可能会把这个标题想成非洲玄幻小说或者热点网综,但是都不是,它仅仅意味着Skeuomorphism以Neumorphism的身份又出现在了大众视野中。(彩云注:趋向轮回)。
当你打开Dribbble,而且搜索环节字:Neumorphism,很容易被大量相似的作品刷屏,从职业设计师到业余爱好者,作品一幅接一幅。
我也是其中之一,你可以在这里找到我的作品。任何一个标签都可以将你引领到Neumorphism的地盘,在这里你可以真正的感觉它的魅力。
David Ofiare的作品
Filip Legierski的作品
它新在哪?
“Neo” 和 “Neu”起源于同一个词根。
周密说明一下这个从2019年11月流行起来的新风格,你会发现许多的复杂元素都被革新成了极简设计。
热点Youtube博主Marques Brownlee制作的Twitter头部
配色:
大多数情况下主色调为浅色,低饱和,看起来接近于白色、米色或者轻灰色。而且,仅仅使用颜色相近的渐变色来突出某些特定片面。
形状:
易于走访的形状用于建立重复性的用户界面。
阐扬:
不同于之前的设计,Neumorphism风格的特点是很柔和,它不会过度模仿自然界中的物体,而是建立一种新的阐扬形式,看起来像3D白模(3D设计的时候,模型没有贴纹理材质之前出现的一种状况)。
效果:
没有锐意做的特别写实,而是接纳了HTML、CSS易于实现的效果,例如双投影、渐变、添补、描边或者内阴影,所有的这些效果都可以由低级开发工程师用现成的代码去实现。
零开发难度:
若是开发难度特别大的设计,可能需求10倍的开发人力来实现它,或者被困于PNG、GIF、JPG图片的显示效果不佳,而不能接纳SVG这种加倍清晰的可伸缩矢量图形。
MazePixel设计的免费Icon和元素
怎样设计Neumorphism?
开始,你得是一位设计师,不是设计家具或者服装的那种,而是互联网设计师。所以,固然它有一定限制,但是又不单单限于:产品设计师、UI设计师和平面设计师。
一旦角色确定了,辣么平时常用的设计软件都可以做到。
每种对象和它们本身的范围性:
我将尝试从UI/UX和产品设计的角度来说明这些对象之间的优缺点:
1、Adobe XD:最初是为UI/UX设计师所设计的,它一个很轻量级的设计对象,目的是合营第三方的插件以及其余的Adobe软件结合使用,因为独自使用的时候,它本身的功效相对范围。优势在于:组件状况、背景和模糊等功效很实用;短处在于:没有多重投影、渐变描边等功效。
2、Figma:第一个通过网页,实现大规模多人协作的设计对象。它也提供大量的第三方插件,与其余传统的设计软件结合的不是很流利,但是也得到了许多设计师的喜好。优势在于:效果叠加、背景和对象模糊等,它强大的Web兼职流;短处就在于若网络状况不好的时候即是一个灾祸。
3、Sketch它目前是设计界的网红,拥有Figma的一切功效,但是拥有更多更完善的第三方的插件,以及更宽泛的服务,它也即将推出多人协作功效。优势在于:混合模式、矢量图形等;短处在于:无意溃散、卡顿和仅限于苹果设备使用。
4、Adobe Photoshop仍旧使用PS做UI的设计师被称为老古董,但是我不赞许这种说法,因为他们并不完全打听情况。是的,我们必须承认PS有点过时了,它对于少许UI/UX兼职流来说太过笨重,但是我们不能忽视当它能完整执行所有创意任务时的强大阐扬,这即是为何这只老枪退休后仍旧威力实足的原因。
优势在于:图像编辑、图层样式(例如内阴影等)和与矢量软件AI的无缝衔接等;短处在此先不讨论。
5、其余软件Invision Studio(用于原型设计)、Affinity Designer等,与上述四种都属于同类产品。
6、不建议使用除非你打算使用渐变、颜色来实现少许诸如链接、组件等的简单设计任务,或者是你单纯想要浪费甲方爸爸的时间,否则尽量不要使用AI去做UI设计。
GanKin的桌面应用概念设计
一个简单的基础教程步骤1:新建画布,若要上传Dribbble,就设置尺寸为1800 * 1350px,因为它要求的比例是800:600。
本教程在Adobe XD中实现的,但是你也能够在任何软件中实现它。将画板添补为浅蓝色,色值为#D2DEEF。
步骤2:
选定左上角的矩形对象,绘制一个601*840px的矩形,这里我增加了倒角,重命名为“Surulere”。
将它添补为灰白色,色值可以是#EAF0F8。给他一个#FFFFFF纯白色,1px宽的描边。为它增加阴影,x为0,y为30,blur为60,确保阴影看上去不辣么黑,可以是#A7B3BE (或者 #000000的纯黑色,然后设置35%的透明度)。
复制原图层,而且将阴影中的y改成-30,将颜色改成#F8FCFF,而且透明度设置为50%。
在Figma或者Sketch中,只需求将另一个阴影效果增加在同一个图层上即可,不需求分外复制图层。
步骤3:再次选定矩形对象,增加一个430*94px的矩形,将它垂直水平居中对齐,重命名为“Ajah”。
将它添补为同样的灰白色,而且增加1px的白色描边。为它增加阴影,x为0,y为12,blur为16,阴影柔和少许,色值可以是#EAF0F8 (或者 #000000的纯黑色,然后设置30%的透明度)。
复制原图层,而且将阴影中的y改成-12,将颜色改成#FFFFFF,纯白色。
步骤4:选定Text对象增加文字:"这种流行趋向的按钮"(或者随便你喜欢的内容)。我会选定Calibre字体中的32pt medium字重,然后添补为#66727C的浅灰色。
可以像我这样排版。
步骤5:随便选定一个图标,将它添补为与文字同样的颜色,我选定了一个看起来像家又像教堂同样的icon。
将图标放在文字的左边,调整一下他们之间的间距,确保有足够的留白空间。在他们之间增加一条1px白色的分割线。
步骤6:将它复制两遍,然后为图标添补不同的颜色,在网上搜索少许设计参考,继续探索加倍丰富多样的设计。
即是这样了。
我现在知道它了,之后应该怎么使用呢?
知道怎样使用、何时使用这种超能力比它本身加倍重要。
它可以用于UI/UX或者网站的设计过程中,但是请不要在印刷产品中使用它。若这种设计风格要冲破它现在的状况,辣么必须得对它进行改进和调整,才可以被应用于屏幕以外的世界。
设计师可以解放的探索Neumorphism更多的可能性,就像他们目前正在做的那样,让它变得更有创造力,更美好。