2020 年 UI 趋势:商店里有什么?

已发表: 2022-03-11

2020 年已经到来,随之而来的是一个回顾去年哪些 UI 趋势有效以及今年可能继续有效的机会。 新年伊始提供了一个绝佳的机会来了解新兴的 UI 设计趋势,这些趋势将继续流行。

对于希望能够为客户提供创新想法的 UI 设计师来说,掌握设计行业的新事物、有用(或无用)以及失宠的事物至关重要。 回顾趋势并研究它们如何向前发展对于这项努力至关重要。

2020 年 UI 趋势将包括 UI 设计中的讲故事(而不是仅根据 UX 考虑项目)、3D 图形和动画、独特的微交互、黑暗主题、简单性、语音交互等。

2020 年 UI 趋势包括简单、现代的 UI 设计
音乐应用程序 UI(由 Humayra Kabir Anamika 设计)。

评书

讲故事通常只考虑到用户体验。 但是,UI 设计师也可以在讲故事的过程中发挥重要作用。

通过使用颜色、排版、动画和交互设计,UI 设计师可以实现良好 UX 所需的故事。

谷歌的 Pixel Earbuds 登陆页面是 UI 讲故事的一个引人注目的例子。 它通过周到的动画、相关的图像和出色的排版引导访问者了解产品的好处,以产生积极的情绪反应。

UI 设计趋势包括讲故事,这是 Google 擅长的
通过动画和图像讲述 UI 故事。

3D 图形和动画

3D 图形和动画并不是 UI 设计的新手。 近年来,它们在多个产品类别中的频率有所增加。 尤其是 VR 和 AR 应用程序,已经利用这些元素来查看实际房间中的家具。 另一个常见的例子是在电子商务网站上流行的 360 度产品视图。

诚聘美国全职自由 UI 设计师

如果 UI 设计需要特别引人注目,3D 图形是实现这一目标的绝佳方式。 动画增加了视觉吸引力。 虽然这些效果比 2D 版本更耗时,并且需要专门的技能,但在它们增加整体用户体验的情况下,它们值得额外的资源。

3D 图形和动画是 UI 设计 2020 的重要组成部分
选择产品选项并将产品添加到购物车(作者 Dannniel)。

独特的微交互

微交互是任何优秀数字产品设计的基本要素。 然而,它们仍然被许多 UI 设计师和利益相关者所忽视。

微交互为用户提供了额外的洞察力和反馈。 它们可以包括交互动画、显示不同状态的颜色变化以及移动应用程序中的触觉反馈等内容。 微交互可以将设计从功能提升到卓越。

2020 年 UI 设计趋势包括独特的微交互
上传和下载进度条(由 xjw 提供)。

黑暗主题

深色主题已经存在了几年,但在 2019 年开始流行。Apple 在发布 Mojave 更新时为推动这一趋势做出了很多贡献,该更新能够在支持它的应用程序中自动默认为深色主题。 他们还发布了 iOS 更新,提供了相同的暗模式功能。

深色 UI 主题将在 2020 年继续增长。除了视觉吸引力之外,最显着的好处之一是,对于某些人来说,具有适当对比度的深色主题可以帮助缓解眼睛疲劳。

获得黑暗主题处理的最新重要应用程序之一是 Gmail,它于 9 月开始推出该选项。 既然三大科技巨头(苹果、谷歌,甚至 Facebook 的移动应用程序)都加入了黑暗主题的行列,这种趋势在不久的将来不太可能消失。

深色设计是一个重要的趋势 UI
音乐播放器用户界面(Martin Mroc)。

简单

每隔几年,简单和极简主义就会在 UI 设计中进进出出。 现在,他们进来了。

简单的设计将功能放在首位。 简单性更多是设计原则的集合,而不是单一趋势。 简单的设计通常包含格式塔原则、大胆的排版、极简的调色板和大量的空白。

设计的简单性并不容易创造。 这需要设计师的信心,每个元素都必须完美,因为没有什么可以隐藏有问题的设计选择。 如果做得好,它会营造出人们喜欢使用的优雅、高品质的感觉。

应用程序设计趋势包括简单的 UI 设计
White Noise 应用程序(由 Romeo M. 为 Queble 设计)。

语音交互

语音交互曾经被保留在科幻小说领域。 智能手机和移动应用程序改变了这一点,使语音交互不仅成为可能,而且成为主流。 允许人们通过语音命令与应用程序交互打开了与产品交互的可能性世界。 当消费者可以发出语音命令时,他们可以在触摸界面不安全或不实用的情况下使用应用程序——例如在开车或遵循食谱或教程时。

语音交互并不新鲜,但早期的迭代很笨拙,而且通常效果不佳。 在过去的几年里,语音交互已经发展成为一种与应用程序进行通信的实用方法(通常有人工智能辅助)。 随着语音控制的进一步改进,这种趋势不太可能消失。 谷歌在 2019 年 I/O 大会上宣布对其 Google Assistant 功能进行重大升级,一些人推测这可能是语音交互几乎完全取代触摸交互的开始。

UI 设计师将受益于熟悉语音交互的工作原理以及如何将它们最好地集成到他们的产品中,尤其是移动应用程序中。 最终,语音交互可能会超过其他类型的交互,包括在网络上。

2020 年移动 UI 趋势包括语音交互
语音微交互(由 Filipe Ferrari 提供)。

排版 UI 设计趋势

每年都会出现新的排版趋势,去年也不例外。 一些可能会在 2020 年持续的更突出的 UI 趋势包括回归衬线字体、不太大的英雄文本以及与其他元素分层的字体。

当图形用户界面设计首次出现时,衬线字体通常被认为难以在屏幕上阅读。 低屏幕分辨率意味着字体更精细的细节(以及一般的小规模视觉细节)丢失,使得许多传统上在印刷中效果很好的字体在计算机屏幕上看起来很糟糕。

随着屏幕分辨率的提高,衬线字体在屏幕上难以阅读的想法一直存在。 近年来这种情况发生了变化,衬线字体随处可见,包括在标题和英雄文本中,它们通常不如无衬线字体和显示字体对应物那么常见。

似乎英雄文本每年都在变得越来越大,经常占据网站“首屏”的整个空间。 这种情况在 2019 年发生了变化,在英雄和标题图像上使用了更小的(尽管仍然很突出)文本。 这是一个可喜的变化,它重新引入了空白作为英雄设计的一个有价值的部分。

具有图形元素的分层类型,无论是在图像下方还是在图像顶部(或有时两者兼而有之),是另一个增长趋势。 有时,文本被盒装图像或颜色覆盖或覆盖,而其他时候,它与其他视觉元素完全集成。

用户界面趋势包括排版趋势
A-LAB 设计工作室网站(由 Mike | Creative Mints 提供)。

展望 2020 年 UI 趋势

最好的 UI 趋势在视觉上具有吸引力,同时改善了数字产品的整体体验和实用性。 上述趋势将继续发展,2020 年可能会出现新的趋势。

随着大品牌采用趋势,它们变得越来越普遍,它们演变成标准并成为数字环境的一部分。 这种演变已经随着黑暗主题等趋势而发生。

在其他情况下,趋势会持续几年,然后随着更好的想法和方法的出现而被淘汰。 这方面的一个例子是视差滚动 UI,它在几年前非常流行,但到 2020 年就不再那么突出了。

新趋势将在 2020 年出现,其中一些趋势可能会在今年年底消失。 专业的 UI 设计师一直在寻找更好的方式来呈现内容,这意味着 2020 年的一些 UI 趋势将在 2021 年之前从数字时代精神中消失。

• • •

进一步阅读 Toptal 设计博客:

  • 展望未来——2020年设计趋势
  • Toptal 设计博客 2020 年度色彩
  • 2019 年用户体验设计趋势回顾展
  • 所有的趋势都值得吗? 网页设计师最常见的 5 个用户体验错误
  • 跟随趋势:致敬与设计抄袭