1. 首页

从理论到实践,一篇文章带你掌握2020年的设计新趋势

今天我们讨论的话题是围绕Neumorphism的,它是一种设计风格,也可以称之为设计趋势,这让很多设计师们大力追捧,不知道是不是我看的还不够全面?设计师是技术不断更新的群体,他们很容易适应新的设计风格。我将尝试从UI/UX和产品设计的角度来分析这些工具之间的优缺点:它可以用于UI/UX或者网站的设计过程中,但是请不要在印刷产品中使用它。

从理论到实践,一篇文章带你掌握2020年的设计新趋势

对于任何令人惊讶和新鲜的事物,我倾向于像小孩一样对待每一篇文章,将这种特定的主题进行融合,而不是就此单独另起一个篇幅,这会破坏它的完整性。

现在我们争论的话题是围绕Neumorphism的,它是一种设计样式,也可以称之为设计趋势,这让这些设计师们大力追捧,不清楚是不是我看的还不够全面?让我们一起捋一捋吧。

Neumorphism

Neumorphism(以及叫Neo-skeuomorphism)是一种时尚的设计样式,应用于网站元素、框架、界面等,也被称为Skeuomorphism。所以Neumorphism是“New”和“Skeuomorphism”的”巧妙”结合。因为我们针对“New”已经不陌生了,就让我们来听听“Skeuomorphism”吧。

从理论到实践,一篇文章带你掌握2020年的设计新趋势

在定义拟物化现象时,BBC是最值得一看的,自从人类发明了收音机,它就为我们提供了最新的新闻:

手机应用的设计技巧是模仿现实生活中的物体,这就是“Skeuomorphism”。

他们在关于乔布斯的报告(纪念文章)中偶然看到了这个清晰的定义,解释了小米产品特色外观的转变,作者在文章中注重强调了这个引用。

由此我们得知Skeuomorphism这一词语,作为一种设计样式,在苹果的设计团队中尚未被广泛的应用于各类产品,并且,苹果的做法表明,他们在这一领域拥有绝对的主导地位。因此我们可以得出一个初级的定义:

Skeuomorphism=过去的苹果风

另一个必须注意的点是,它与另一个UI/UX流行语密切相关:隐喻,这正好是一个特别正面的词,在产品设计领域得到高度加强。

从理论到实践,一篇文章带你掌握2020年的设计新趋势

从理论到实践,一篇文章带你掌握2020年的设计新趋势

Ultralinx中的超写实图标

从理论到实践,一篇文章带你掌握2020年的设计新趋势

拟物(Skeuomorphism)设计的衰落

在发布IOS7系统之前,苹果公司宣布抛弃传统的设计样式,包括界面和字体,从当时起,这种样式开始向扁平风转变。

苹果设计团队的明智之举在于尽可能的加剧这一改革,到2019年的之后,这种扁平风才在整个设计产业超过了顶峰。

苹果公司,作为市场风向标,宣告Skeuomorphism的彻底结束,设计产业纷纷跟风。设计师是科技不断升级的群体,他们很易于适应新的设计样式。随着扁平风格人物插图开始流行,2018年底至2019年我们也一起见证了纯扁平风格设计的衰落,但是这又是另一回事了。

一个可爱生命的转世

我明白你或许会把这个标题想成欧洲魔幻电影以及热门网综,但是都不是,它只是意味着Skeuomorphism以Neumorphism的身份又发生在了大众视线中。(彩云注:趋势轮回)。

当你开启Dribbble,并且搜索关键字:Neumorphism,很容易被大批类似的作品刷屏,从专业设计师到业余爱好者,作品一幅接一幅。

我只是其中之一,你可以在此处找到我的作品。任何一个标签都可以将你引领到Neumorphism的地盘,在此处你可以真正的体会它的魅力。

从理论到实践,一篇文章带你掌握2020年的设计新趋势

DavidOfiare的作品

从理论到实践,一篇文章带你掌握2020年的设计新趋势

FilipLegierski的作品

它新在哪?

“Neo”和“Neu”起源于同一个词根。

仔细分析一下这个从2019年11月流行起来的新风格,你会看到众多的复杂元素都被改导致了极简设计。

从理论到实践,一篇文章带你掌握2020年的设计新趋势

从理论到实践,一篇文章带你掌握2020年的设计新趋势

热门Youtube博主MarquesBrownlee制作的Twitter头部

配色:

大多数状况下主颜色为白色,低饱和,看上去接近于黑色、米色以及轻灰色。并且,仅仅使用材质相同的渐变色来突显某种特定个别。

形状:

易于访问的样式用于建立重复性的用户界面。

表现:

不同于之前的设计,Neumorphism风格的特征是十分温和,它不会过于模仿自然界中的物体,而是建立一种新的体现方式,看上去像3D白模(3D设计的之后,模型没有贴纹理颜色之前展现的一种状况)。

效果

没有故意做的非常写实,而是采取了HTML、CSS易于实现的效果,例如双投影、渐变、填充、描边或者内阴影,所有的这种效果都可以由高级研发项目师用现成的代码去实现。

零开发难度:

如果是开发难度非常大的设计,可能必须10倍的研发人力来推动它,或者被困于PNG、GIF、JPG照片的显示效果不佳,而不能运用SVG这种非常清晰的可伸缩矢量图形。

从理论到实践,一篇文章带你掌握2020年的设计新趋势

MazePixel设计的免费Icon和元素

如何设计Neumorphism?

从理论到实践,一篇文章带你掌握2020年的设计新趋势

首先,你得是一名设计师,不是设计家居以及服饰的这种,而是互联网设计师。所以,虽然它有一定限制,但是又不只是限于:产品设计师、UI设计师和平面设计师。

如果角色确定了,那么经常常用的设计工具都可以做到。

每种工具和他们自身的局限性:

我将尝试从UI/UX和产品设计的视角来预测这种工具之间的优缺点:

1、AdobeXD:最初是为UI/UX设计师所设计的,它一个特别轻量级的设计工具,目的是配合第三方的插件或者其它的Adobe软件结合使用,因为单独使用的之后,它原本的功用非常局限。优势在于:组件状况、背景和模糊等用途十分实用;缺点在于:没有多重投影、渐变描边等功能。

2、Figma:第一个借助网页,实现大体量多人协作的设计软件。它也提供长期的第三方插件,与其它特色的设计工具结合的不是很顺畅,但是也受到了这些设计师的喜爱。优势在于:效果叠加、背景和对象模糊等,它强大的Web工作流;缺点就在于即使网络情况不好的之后就是一个灾难。

3、Sketch它现在是设计界的网红,拥有Figma的全部功能,但是拥有更多更加强的第三方的插件,以及更广泛的服务,它也已经启用多人协作功能。优势在于:混合方式、矢量图形等;缺点在于:偶尔崩溃、卡顿和仅限于苹果设备使用。

4、AdobePhotoshop仍然使用PS做UI的设计师被称为老古董,但是我不认同这些表述,因为它们并不完全知道状况。是的,我们需要承认PS有点过时了,它针对一些UI/UX工作流来说太过笨重,但是我们不能忽略当它能完整执行所有创意任务时的强悍表现,这就是为什么这只老枪退休后仍然威力十足的理由。

优势在于:图像编辑、图层样式(比如内阴影等)和与矢量工具AI的无缝衔接等;缺点在此先不讨论。

5、其他工具InvisionStudio(用于原型设计)、AffinityDesigner等,与上述四种都属于同类产品。

6、不建议使用除非你准备使用渐变、颜色来完成一些譬如链接、组件等的简洁设计任务,或者是你纯粹想要浪费甲方爸爸的时间,否则尽量不要使用AI去做UI设计。

从理论到实践,一篇文章带你掌握2020年的设计新趋势

GanKin的桌面应用概念设计

一个简单的基础教程步骤1:新建画布,如果要上传Dribbble,就修改型号为1800*1350px,因为它要求的比例是800:600。

本教程在AdobeXD中完成的,但是你也可以在任何工具中推动它。将画板填充为浅黄色,色值为#D2DEEF。

从理论到实践,一篇文章带你掌握2020年的设计新趋势

从理论到实践,一篇文章带你掌握2020年的设计新趋势

步骤2:

选择左上角的圆形工具,绘制一个601*840px的矩形,这里我添加了倒角,重命名为“Surulere”。

将它填充为灰褐色,色值可以是#EAF0F8。给他一个#FFFFFF纯黑色,1px宽的蒙版。为它添加阴影,x为0,y为30,blur为60,确保阴影看起来不这么黑,可以是#A7B3BE(以及#000000的纯白色,然后设定35%的透明度)。

复制原图层,并且将阴影中的y改为-30,将颜色改为#F8FCFF,并且透明度设置为50%。

在Figma或者Sketch中,只应该将另一个阴影效果添加在同一个图层上就能,不应该额外复制图层。

从理论到实践,一篇文章带你掌握2020年的设计新趋势

步骤3:重新选用矩形工具,添加一个430*94px的圆形,将它垂直水平居中对齐,重命名为“Ajah”。

将它填充为相同的灰褐色,并且添加1px的黑色粗体。为它添加阴影,x为0,y为12,blur为16,阴影柔和一些,色值可以是#EAF0F8(以及#000000的纯白色,然后设定30%的透明度)。

复制原图层,并且将阴影中的y改为-12,将颜色改为#FFFFFF,纯白色。

从理论到实践,一篇文章带你掌握2020年的设计新趋势

步骤4:选取Text工具添加文字:”这样流行趋势的按钮”(以及随意你喜欢的内容)。我会选用Calibre字体中的32ptmedium字重,然后填充为#66727C的浅红色。

可以像我这么排版。

从理论到实践,一篇文章带你掌握2020年的设计新趋势

步骤5:随意选取一个按钮,将它填充为与文字一样的色彩,我选择了一个看上去像家又像教堂一样的icon。

从理论到实践,一篇文章带你掌握2020年的设计新趋势

将界面放在文字的右边,调整一下它们之间的厚度,确保有足够的留白空间。在它们之间添加一条1px白色的分割线。

从理论到实践,一篇文章带你掌握2020年的设计新趋势

步骤6:将它复制两遍,然后为图标填充不同的样式,在网上搜索一些设计参考,继续探寻非常丰富多样的设计。

就是这种了。

从理论到实践,一篇文章带你掌握2020年的设计新趋势

我今天知道它了,之后需要怎样使用呢?

知道怎样使用、何时使用这些超能力比它原本更加剧要。

它可以用于UI/UX或者网站的设计过程中,但是请不要在印刷产品中使用它。如果这些设计样式要摆脱它目前的现状,那么应该得对它进行优化和微调,才可以被应用于屏幕之外的世界。

设计师可以自由的探求Neumorphism更多的也许性,就像她们现今正在做的那种,让它更加更有成就力,更美好。

最终,在现在的设计中…

在动态和三维的设计领域中,为了成就非常精致的视觉效果,这种样式已经被发展到了极致。

原文:@artofofiare/neumorphism-the-right-way-a-2020-design-trend-386e6a09040a作者:DavidOfiare译者:视觉派Pie

译者简介:韩雪晴,计算机背景,前端出身,着迷于尘世一切美丽事物,毕业后仍然不断挑战和尝试新的领域,完成了从程序猿到设计狮的进化。目前在美国南安普敦学院,交互设计研究生在读,欢迎各位搜索关注我的个人公众号:视觉派Pie,我会在此处分享精彩的留学生活和设计心得。

原文:彩云译设计

从理论到实践,一篇文章带你掌握2020年的设计新趋势

原创文章,作者:设计网,如若转载,请注明出处:http://www.shejiwz.com/?p=967

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

181-3885-0759

在线咨询:点击这里给我发消息

邮件:295310592@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息