快好知 kuaihz

新拟物化,会是2020年的UI设计趋势吗?

新拟物化最近被炒得很是火热,它会是2020年的UI设计趋势吗?本文作者从多个方面对此进行了分析,并总结了6种将新拟物化风格和其他风格相结合的设计方向,与大家分享。

我承认,为“这个激动人心的新趋势”共同命名(注:Neumorphism 新拟物化,即New和Skeumorphism的结合词,最初由作者 Michal Malewicz 另一篇文章 《Neumorphism in user interface》的一位读者提出)是件很有趣的事。但我没想到它能被炒的这么火热。

很多博客和twitter po文声称它是“2020年最值得期待的设计手法”。趁着它还没膨胀,让我先把这个幻想的泡泡戳破吧。

以#neumorphism为主题的设计作品逐渐萌芽,但是大部分“浅色”设计看起来都相差无几。

论成为一个流行设计风格,Neumorphism并不够多样化,尤其对于现实中需要写代码的产品。

当然你可以将它使用在Dark Mode深色模式中,同时你可以选择一种类白色的背景颜色,我们可以依此设计出六种风格,不过他们的区别甚微。

别用在按钮上!

当前新拟物化设计被过度使用到各类元素中,例如卡片和按钮,但他们大多都违背了我在另一篇文章《Neumorphism in user interface》中略述的设计规则。虽然我也认同它将按钮的选中状态呈现的很美观,但是对很多人而言,不同按钮状态间的微妙差别让人难以分辨。

此处的“很多人”并不只是指有患有视力障碍的群体,同时也包括使用设备的屏幕质量较差或对比度较低的用户。

按钮可能是使用新拟物化风格典型的双侧阴影最糟糕的地方,尤其是在呈现按钮的选中状态时。很多人分辨不出不同状态的差别,其相似程度就像图中右边那样。

下图将新拟物化、拟物化、及扁平化风格的按钮进行对比,我们可以明显地看出,新拟物化风格的按钮看起来既不像按钮,也没有达到引导操作的作用。

你会点选哪个呢?

用在卡片上如何?

卡片和滑动条可能是这项趋势的最佳使用场景。但是需要注意的是,卡片的结构需要处理恰当。需要确保图片、图标和字体间的层级清晰,间距足够明显。测试卡片设计的最好方式就是将新拟物化风格的背景去掉,优秀的设计在去除背景后视觉上也没问题(尤其是在其他卡片并排在一起的时候)。

要将新拟物化风格的卡片呈现的好,需要确保即使将元素用框架呈现并去掉背景,它们也可被视为同一组。

简而言之,可以从界面中移除而不造成影响的卡片设计就是好的设计。这建议听起来很不错吧?尤其是当我们考虑到Dieter Rams (德国著名工业设计师迪特·拉姆斯,提出“设计十诫”的那位)所提出的移除“不必要”的设计理念。

如果你想尝试一些新拟物化风格设计,可以在公众号回复“新拟物风格”得到一份sketch模板源文件。

但是它真的很新颖!

还记得Pantone2019年的年度色吗?让我来为你回顾一下这项在2019年1月提出的“2019设计新趋势”。

尽管最初我们可以看到很多应用这种“鲜亮的珊瑚色”的设计案例,但其中的大多数在2019年2月初看起来就好像要过时了。

在我看来,等到我们把所有可行的新拟物化设计组合都发掘的差不多了,我们就可能会选择第一版了。

2020年设计方向会有哪些?

并不是说新拟物化设计就此湮没了。

只是说,仅仅是用这种风格,不足以让整个产品成功。确实,最初采用这种风格的几项产品可能会获得成功,但是一段时间后,它将会比Material设计更令人厌倦。

将新拟物化设计和其他风格各取特点,加以结合,势必会成为2020年及今后的趋势走向。

想要兼顾产品的美观度和功能性就意味着,在两个方面都不要做的太极端。即使是当前流行的柔和彩色阴影也仅仅在按钮或图标上才行得通。想象一下,把它用在整个产品上会有多不适?

下面作者探讨了六种将新拟物化风格和其他风格相结合的设计方向。

1. 深色模式

不管我们接受与否,深色模式一定会是重大的设计趋势。不过它不局限于我们随处可见的采用低饱和度灰蓝色的深色模式。

自从OLED屏幕的推出,纯黑色低耗能的特性就很显著了。所以如果采用深色模式的目的在于节约电量,我们应当会开始看到更多极简,注重功能性的界面以黑色作为主色,而非深灰。

采取深色模式的另一个主要原因在于缓解视觉压力。在这种情况下,柔和的深色模式必然美观的多了。

许多应用的界面都采用了浅色和深色的双模式设计

2. 插图和3D

我们势必需要更多样的插图设计。作为当前最流行的风格,略不成比例的身体结构和松散的线条已然随处可见。但这很快就会造成审美疲劳。

这些插图看起来都不错,但是过于相似

然而插图其实是突出画面最好的方式之一,前提是我们要尝试多种方案以免同质化。

3D反而更容易设计出不同的风格。不过它也难做的多,需要下更多工夫。这也就说明,如果将时间投入到制作3D渲染上,我们更容易做出高质量、符合品牌调性的作品。

品牌风格图的优秀案例 Pitch.com

3. 动画

过渡和场景搭建会在今年更受重视。它的催化剂之一是很多令人激动人心的JS库的推出,它们极大程度上方便了复杂2D和3D过渡效果的制作。

是的,现在可以更轻松的用代码写出“很酷的东西”了,但建议不要过度使用哦。

我们要将这种扁平化设计用在平面上,再让其旋转起来,就像在游戏菲斯中(注:FEZ 菲斯,以复古的像素画为风格,结合了2D横向卷轴和3D效果,详情可自行百度)。

4. 等轴设计

在2019年,我在搭建我们的加密货币分析平台期间,花了些时间分析超过2000个和加密有关的网站的设计,并逐一对其设计质量、原创性和一致性进行评分。

这个设计真的很漂亮,但同时相似的图片到处都是,真的很无趣

很触动我的一点是在近乎1/4的网站中具有某种等轴测的图片。他们都采用不同却似曾相识的风格,以至于一段时间后我竟然不确定他们是不是出自同一个免费库。

这种风格可以被呈现的很棒,但是如果你仅仅打算将流行设计照搬到自己的设计中,我劝你还是放弃这个念头吧。它已经成了2019年最被滥用的设计之一(仅次于彩色阴影之后)。

5. 能充实内心的极简主义设计

这项趋势初露苗头,也许只会停留在一个小群体中。今年我和周围的许多人一样陷入了电子产品戒瘾的怪圈,使用了一些设计更极简化的产品。

左:Mudita Pure,右:Light Phone 2。两个产品我均有购入,目前正在使用Light Phone2,设计非常清新。

许多产品诸如Mudita Pure和Light Phone 2传达出简洁、黑白、极端简化的界面。如果我们将使用的app看做是一定要满足某种功能的工具,极简的界面设计就有一定意义了。当然不是所有的app都可以用这种风格(想像一下纯文字的Instagram)。

6. 语音界面

我在今年参加的一场论坛上,听到过这样一句话:

不要在学习UI了。在不久的将来我们大多会使用声音识别与设备对话。

虽然这有些未来主义,并且在某些场景中适用(例如驾驶和运动中)。但是我认为有两个原因导致语音界面至少在目前还不足以居于主导地位。

人工智能存在的严重隐私问题,并且可能会造成惊悚事件。不久之前Alexa向它的用户提出自杀建议,原因是这是阻止全球变暖、保护地球的最好方式。虽然这在逻辑上也许说得通,但是这绝对成为了一则标题党性质的头条。它让人们不禁思考,智能音箱多么令人厌恶,它窃听着我们的一字一句,秘密地搭建着下一代天网。

在很多情况下,对着手机说话(尤其是在公共场合)真的很奇怪。几次快速的点击既保证私密性又快速。所以直到我们发展出脑机接口技术(使得人能够通过自身的脑电信号与他们周围环境进行交互),在公交车上对着手机说话来发出一条消息不会成为主流的互动方式。

所以会流行什么呢?

此处唯一的正确答案是,我也不知道。可能我的判断失误,未来我们会有很多突出的软塑料风格(新拟物化设计的特点之一),或者我们的手机屏幕会采用挤压玻璃以呈现更逼真的设计

将如上探讨的所有风格进行叠加的尝试

但是很可能发生的事情是,没有单一一种风格会成为今年的主导。

最优秀的设计一如既往的会恰当地结合当下趋势并采用优秀的字体风格。你可以在卡片上采取不同风格的阴影,但如果其中的文字呈现的杂乱而古怪,任何流行风格都不会让设计看起来美观。

可读即美观。在2020年记住这句话!

祝大家新年快乐!保持健康,保持好奇,享受设计

 

作者:Michal Malewicz

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:物化  物化词条  趋势  趋势词条  设计  设计词条  2020  2020词条  
设计

 译文 | 设计思维:20种行之有...

构思是设计思维过程的核心。实际上有数百种进行构思的方法,例如头脑风暴、书面头脑风暴、Brainwalk和原型设计。部分方法只是在原方法基础上进行了重新命名或稍加...(展开)

设计

 3大步骤做好互联网产品体验优化

本文结合具体案例,跟大家介绍一下互联网金融APP产品的优化过程。这不仅是一个优化过程,更像是思考问题的过程。整个过程是通过对公司现有产品进行优化研究得出的,研究...(展开)