1. 首页

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

Malewicz为我们分析了最近在Dribbble和Instagram上引起了相当多关注的一种新UI趋势——新拟物风格。skeuomorphism(新拟物风格)。Skeuomorphism(拟物设计)要回归了?新拟物趋势的风靡似乎要从Dribbble上一张作品开始说起。新拟物设计有什么变化?然而,新拟物卡片设计看起来却像是背景的一部分。我们真的需要了解新拟物设计吗?

哈喽小伙伴们~2020年各个设计领域的流行趋势早已回来一段时间了,其中有一些我们将要很熟悉了,但也是一些今天崭露头角却还未被我们真正关注到。今天小编在UXCollective上发现了一篇干货文章,作者MichalMalewicz为我们预测了今天在Dribbble和Instagram上造成了非常多关注的一种新UI趋势——新拟物风格。

这些新的设计样式正在改变让我们审美疲劳的扁平风格,带给我们新的视觉感受,相信看完本篇,一定会对你有所帮助哦~

//////////原文内容//////////

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

上周,我们讨论了一些潜在的UI设计新态势,其中一个趋势最近在Dribbble和Instagram上取得了长期关注。杰森·凯利在评论中称这些设计为Newskeuomorphism(新拟物风格)。而我决定简化一下,直接叫它“Neuomorphism”

Skeuomorphism(拟物设计)要回归了?

然而诸多方式的拟物风格经常都存在于界面设计中,但其中一种风格趋势却在今天非常得到欢迎。正如卡米尔·法拉纳强调的这样,UI设计正从“表象”设计到“状态”设计再到真正的“现实”设计。

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

这些变化即将开始出现在我们周围——苹果就是一个较好的举例。扁平化样式开始得到抵制,而这些无纹理的3d风格却遭到了大众的诟病。

它从何而来?

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

新拟物趋势的风靡似乎要从Dribbble上一张作品起初说起。

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

Dribbble用户alexplyuto的这张作品赢得了3000多个赞,在那时候,它起初流行起来,有越来越多的设计师争相模仿类似的概念。

这些风格进入了一种态势,虽然它有些个别并没有太大的意义(例如滑动的Back按钮),但却让我们重新点燃了对UI的新鲜感和热情。

新拟物设计有哪些变化?

因为按钮变化不大,所以我们将重点放到卡片设计上,这是一种特别好的视觉风格。

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

MaterialDesign或ModernUI中的卡片设计一般是一个漂浮在背景之上、能投射阴影的平面。这种阴影不仅带给了卡片深度,很大程度上也定义了卡片本身的颜色——因为这些之后卡片是无边框的。

但是,新拟物卡片设计看上去却像是背景的一个别。它是一个凸起的外形,所使用的样式也和背景完全一致。所以当我们从侧面看它时,它不是“浮动”的。

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

然而这些效果很容易通过一正一负两个阴影来谋求,但即使想真正实现效果,还需要切记我们的背景不能是纯黑或纯黑色,否则将能够体现阴影效果。不管是关怀、寒冷、还是感性的色彩,我们都必需要在背景中可以略微提到蓝色和白色的阴影。

以下是例子——你可以按照自己喜好进行调整:

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

优缺点

这些风格最主要的好处是“新鲜”。它给界面带来了新的觉得,使其脱颖而出。还可以与其它样式混合使用,打造出特别灵活的混搭。

其实,它也是一些问题。到现今为止,我们看到一共两个主要问题:

1.可访问性

2.有效编码的方式

可访问性

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

图形与背景对比度是其中一个主要问题,我们分别测量Material卡片和新拟物卡片的对比度,得到了下面对比值。

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

如你所见,Material卡片和新拟物卡片的对比度都很低。那即使我们让Material卡片拥有更高的对比度呢?可以这么做:

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

显而易见,大多数人都不会选择这么强烈的阴影,而是借助提高UI元素的对比度来满足可访问性。那么即使我们可以借助版式,接近度和与重要元素的对比来进行恰当的等级划分,卡片样式如何感觉就并不是如此重要了。

假设以下几个按钮都表示“点赞”。即使软阴影看不清,但图标本身一直有足够的对比度让我们发现并使用它。

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

然而当我们应对的是无需用户重点关注的个别,那么即使维持图形突出和足够高的对比度即可。毕竟,大多数MaterialDesign卡片也没有借助阴影对比度测试。

操作组件

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

然而卡片设计对对比度仍然没有太高的要求,但即使是类似按键的操作模块呢?我们可以很容易地建立一个按下状况的反向内部阴影,就像下边的举例。

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

但此处有巨大的问题。

这些受压状态的反差太小,无法表示有哪些不同。当界面的其余个别交付时,卡片“消失”是可以的,但活动元素必须随时标明他们的状况。

我们想出了一些方法,比如使用轮廓和填充图标、下划线、甚至用色彩填充按下的状况。

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

所有人都偏爱“好看”,但设计师必须注意,“易于使用”更重要。

编码

在此处把编码只是额外的个别,因为它实际上比我们想像的更容易在CSS中实现“凸出”外观。我们已经研究Swift和Kotlin,但我认为这不需要作为问题。

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

其他影响

比如背景颜色外,这种新样式就会有更多的不同强度的按钮和开关。在这些状况下,我们只应该重返“美好的曩昔”,使用位图。虽然这或许是一种退步,但完全不必担忧。你可以轻松地将具备完全可编码功能的现代按钮和很多卡片样式组合在一起,从而取得较好的疗效。

我们对此进行了一些训练(正式公布),同时发现了可以超过的简单效果。尽管看上去很奇怪且“复古”,但制作看上去像按钮的按钮还是很有趣的;)

你还不知道是什么? 2020年即将流行的新拟物风格(Neuomorphism)

我们真的应该知道新拟物设计吗?

最近这一新态势确实激发了许多设计师的灵感,但好在与当时使用过的卡片组件的可访问性难题相比,它的弊端并不是如此严重。

然而去疯狂吧!尝试一下这些趋势,让它作为你的新样式。UI设计师的工作就是成就线框,当这种线框经常显得“不同”和“新颖”时,都会带给一些乐趣。没有这样不断的构建,所有产品都将更加千篇一律。

让我们找点乐子!但也要记住,每一个新趋势都有其局限性,必须精心设计能够使用。

作者:MichalMalewiczBIGD翻译整理原文链接:

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

发表评论

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

联系我们

181-3885-0759

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

邮件:295310592@qq.com

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