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

周伟Zhouwei

共 3413字,需浏览 7分钟

 ·

2020-02-13 11:19

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

uisdc-cy-20200211-9.jpg

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

uisdc-cy-20200211-5.jpg

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

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

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

uisdc-cy-20200211-7.jpg

别用在按钮上

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

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

uisdc-cy-20200211-2.jpg

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

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

uisdc-cy-20200211-4.jpg

△ 你会点选哪个呢?

用在卡片上如何?

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

uisdc-cy-20200211-10.jpg

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

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

但是它真的很新颖

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

uisdc-cy-20200211-1.jpeg

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

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

2020年设计方向会有哪些?

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

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

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


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

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

1. 深色模式

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

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

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

uisdc-cy-20200211-3.jpg

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

2. 插图和3D

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

uisdc-cy-20200211-13.jpg

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

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

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

uisdc-cy-20200211-6.jpg

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

3. 动画

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

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

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

4. 等轴设计

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

uisdc-cy-20200211-11.jpg

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

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

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

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

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

uisdc-cy-20200211-8.jpg

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

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

6. 语音界面

我在今年参加的一场论坛上,听到过这样一句话:不要再学习 UI 了。在不久的将来我们大多会使用声音识别与设备对话。

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

  • 人工智能存在的严重隐私问题,并且可能会造成惊悚事件。不久之前 Alexa 向它的用户提出自杀建议,原因是这是阻止全球变暖、保护地球的最好方式。虽然这在逻辑上也许说得通,但是这绝对成为了一则标题党性质的头条。它让人们不禁思考,智能音箱多么令人厌恶,它窃听着我们的一字一句,秘密地搭建着下一代天网。
  • 在很多情况下,对着手机说话(尤其是在公共场合)真的很奇怪。几次快速的点击既保证私密性又快速。所以直到我们发展出脑机接口技术(使得人能够通过自身的脑电信号与他们周围环境进行交互),在公交车上对着手机说话来发出一条消息不会成为主流的互动方式。

所以会流行什么呢?

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

uisdc-cy-20200211-12.jpg

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

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

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

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

浏览 39
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报