2023年视觉设计趋势指南

动态设计、干净的设计、多色柔和渐变沉浸感、高对比/单色 UI、真实材料模仿等UI风格的兴起。
动态设计

从左上到右:雅诗兰黛、Apple、Duolingo、Wishes In Words、虚拟经济 、Wickret
动态设计已经变得非常庞大,你可能随处可见。从微交互到复杂的动画,UI 不再是一个静态的东西——用户希望它在视觉上“生动活泼”。由于 抖音、快手等短视频和用户每天消耗注意力的持续动态,人们的注意力跨度越来越低。有人推测我们现在处于金鱼的水平,甚至更低。为了保持用户的参与度和好奇心,我们需要使用动态效果并尝试在静态屏幕和图像中添加一些生命力,让他们更加身临其境。如果你使用多邻国APP,你可以清楚地看到他们最近的更新包括更多的动画插图和屏幕过渡效果。大多数 UI 组件都是通过各种视觉效果以一种或另一种方式与用户交互。几乎所有用户采取行动时,屏幕上都会发生一些事情。

在多邻国APP的最新更新中,该应用程序几乎在每个级别都与您互动。说到运动,就不能不提视差效应。
视差基本上是一组不同的图形层,它们在移动时以不同的速度移动。这创造了一种非常迷人、令人赏心悦目的效果,就好像内容具有实际的深度,而所有内容都被放置在一个维度上。视差使用了一个简单的基础,即移动最近的元素要比后面的元素快。在现实生活中发生的例子,当你开车时,从车窗望向远处的山脉,会发现山脉移动很慢。

如果你想更多地探索动态设计——这对你有好处。我坚信,在不久的将来,这将成为一种不可避免的设计技能。最好现在已经开始学习了。
干净的设计

左上到右:Coinbase、Airbnb、Tran Mau Tri Tam、Squareblack、Foh&Boh、Revolut
多年来,我的设计风格不断演变,我逐渐走向更简单、更简洁和更干净的方法。对每个设计师来说,这可能是一种自然的方式,但我很高兴在所有的趋势中,一个干净的设计是你永远不会出错的——实现这一点既令人大开眼界又令人欣慰。每次我浏览不同的应用程序和网站时,我发现那些干净、简洁的应用程序看起来最令人愉快,也最专业。您无需跟随每一个趋势来创建出色的现代数字产品。受到一些流行趋势的启发是很好的——但只要它看起来仍然是经典的,并且让你的设计经得起未来的考验。因为有时趋势可能太过强大,这样的做法这对任何设计师来说都是一种解脱。

Apple 网站 - 专注于产品功能的永恒、简约、简洁的 UI 设计之王。著名的 Apple“Masonry grid”现在本身就是一种趋势——你可以在许多网站上看到它!
多色柔和渐变

从左到右:Sketch、LS Graphics、Winamp、Cosmos、Until、Stripe
极光渐变、抽象的渐变形式和形状、按钮、卡片上的渐变,或者在具有视差效果的背景中使用的色彩鲜艳、充满活力的飞溅——这种趋势似乎仍然非常真实和强烈。

极光渐变使用的漂亮例子。
您还可以发现放置在文本上的渐变,例如在标题中突出某个短语。

从左到右:Apple、Vercel、Memorisely
高对比度/单色

从左上角开始:Uber、Endel、Revolut Business、Homey、Klarna、Dropbox
您可以在许多网站和应用程序(包括业内最大的参与者)上发现强烈对比的元素,有时甚至是整个界面。我个人认为,这种趋势背后的原因与我在本文前面提到的原因相似——当你滚动界面时,强烈对比的元素/表面不断闪烁可以激发你的注意力。由于元素和文本的良好可见性,它还使界面非常易于访问,除非你在对比度做得太过分,从而导致眼睛疲劳。
黑暗未来/宇宙风格UI

从左上到右:GitHub、Zenly、Railway、Linear、Notion AI、Create
深色 UI 演变成比“夜间/深色模式”选项更大的东西。实际上,越来越多的品牌正在转向其产品和页面的深色版本。我个人认为,使用深色 UI 可能更容易吸引用户的注意力,因为它比典型的“白色背景内容”外观更不寻常、更吸引人,并且营造出一种未来主义有时甚至是“宇宙”的氛围。

Linear 的网站是深色 UI 的一个很好的例子。它还充满了玻璃元素。
模拟真实材质

从左上到右:Solana、Letter、Thoughtlab、Youtube Music、Next.js、Mural
我们已经有了玻璃态、粘土态、金属/变色等等。我还注意到,具有水晶或类似珍珠效果的元素正在成为相当重要的东西。我认为把它归为一个标签下是合理的——似乎整体上对现实生活材料的模仿是近年来的一个强烈趋势,而且不会很快结束。这里要补充的重要观察结果——玻璃形态似乎正在上升。您现在可以在许多网站上轻松看到玻璃形态效果,例如导航栏、按钮或装饰元素。

Letter真的很喜欢他们的水晶。另外,请注意导航栏上强烈的玻璃形态效果。
巨大的排版

从左上到右:Apple、Heart Aerospace、Stand With Ukraine、Increase、Gumroad、Instagram
如今,这是一个非常明显、强烈的趋势。由于更大的屏幕分辨率,主要用于网站,以实现最小/野蛮/原始的氛围。通常带有全屏照片和引人注目的动画。

看起来真的很棒!图片来源:Heart Aerospace
无衬线的字体是不会消失的,它将永远是界面的一个安全、实用的选择。
感性设计

从左上到右:海港、美丽、假期、弗兰基、我们的感受、Express VPN
正如我喜欢每天整理东西一样--让我们把所有的新古典主义、复古、复古浪潮、80-90年代、杂志/海报外观的趋势都放到一个带有 "感性设计 "标签的盒子里。就像他们可以根据他们试图销售的产品或服务来达到伟大的视觉目的一样,他们往往是形式大于功能的胜利者。
与此同时,时不时地看到一些原创的、完全与众不同的东西也是让人耳目一新。一个严肃的问题——它们真的适合 UI 设计吗?举个例子,许多决定转向野兽派设计的品牌都收到了非常负面的用户反馈。Figma 和 Gumroad 是受欢迎的例外,但这种风格并不适合所有产品。看起来大部分负责重新设计的设计团队实际上对结果很满意。抱歉这么说——像野蛮主义这样的风格很少对用户有用和吸引。最近的 The Verge 重新设计就是一个典型的例子,在改变之后,该网站每月的浏览量下降了近5.5百万。混乱的布局和极端的对比可能是这里的主要罪魁祸首。可以说,当涉及到数字产品时,功能和视觉之间的平衡是关键。附言。想知道将我在文章中提到的几乎所有趋势混合起来会是什么样子?我已经满足你了。

当您可以拥有所有趋势时,为什么要专注于一种趋势?
声明:发布此文是出于传递更多知识以供交流学习之目的。若有来源标注错误或侵犯了您的合法权益,请作者持权属证明与我们联系,我们将及时更正、删除,谢谢。
来源:Diana Malewicz 地址:https://uxdesign.cc/2023-visual-design-trends-guide-82e84f09cbdf
编辑:FariedLee
各位观众老爷可以关注个人公众号“CG数字艺术“,多多点赞收藏!!