前端应该关注的2021年UI设计趋势


UI设计趋势几乎每年都在发生变化,变化的原因是人们的审美在变导致的,还是设计越来越人性化。市场上是谁在主导设计趋势?其中原因不得而知,我们先看看究竟有哪些变化:

1. 3D插图(依然流行)

3D图像将在接下来这一年依然是趋势——尤其是当初级的UI设计人员越来越容易地以3D效果进行创作!(尝试使用名为Spline的3D工具-目前处于测试阶段,但已经非常的好上手并且好用!)。

3D还被广泛用于全屏动画中,作为主要的关键视觉效果—查看“超级列表”或查看Minh Pham撰写的令人惊叹的3D教程,内容涉及如何为您的网站创建令人惊叹的3D背景。

2. 毛玻璃效果

 这是用户界面中的最新趋势,主要是基于一种称为背景模糊的效果,它基本上可以“通过玻璃”在元素上创造外观。

它是在Windows Vista中引入的,然后在iOS7中引入的,但是好像现在更多的用在表单刷新过度的效果了!如果您想进一步了解glassmorphism,请尝试使用此Glassmorphism Generator在线工具(https://glassmorphism.com/):

前端代码实现该效果:

background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;

3. 展现真实的生活照

我强烈预测,很快每个人都会对产品设计中的插图和3D图形感到厌倦,因此现实生活中的照片将重新成为设计的热点。

正如我在前一篇文章中所写的那样,插图可能并不适合所有人。有时,真实的人和真实的物品可能会对用户产生更大的影响。Ekokubki的网站是基于真实照片拍摄的,看起来很棒!

4. 鲜艳的色彩

我看到很多网站和移动设计上的采用了这么鲜艳的颜色来表达。

看看Designcode.io, Sleepiest and Design Talks这三个网站!我喜欢色彩所创造出神奇,空灵的氛围。而且,当我们使用鲜艳的色彩时,我们可以更轻松地区分和记住产品。Instagram很早以前就知道了(这就是为什么他们的图标发生了令人难忘的变化)。

5. 模糊的彩色背景

与上面的类似,但是掺杂着毛玻璃效果,这种效果看起来更加精致。使用模糊背景的设计看起来给人一种难以置信的有机,温暖和热情的感觉。

可以参考下Stripe(部分地方采用了这种效果)和My Mind(一个很棒的简单的自组织工具)。

6. 极简的美学主义

可能是我个人最喜欢的设计趋势。没有比简洁清爽和易读的UI更美观的了。

像Revolut(简单的3D),Sketch和Qoals(模糊的背景)之类的网站就是一个很好的例子,您不需要精美的UI,也不需要“令人惊叹的特效”来使您的产品看起来令人震惊(可悲的是,用户却并不能懂这些 )。

7. 几何结构

我看到越来越多的设计具有非常整洁,保守的视觉结构。它使信息看起来真的很整齐!

界面的几何结构最美丽的例子之一是Rituals网站。使用和观看时非常有趣(也喜欢它简单但有趣的动画)。

8. 大而复杂的字体

有很多例子说明大型复杂的排版在产品设计中起主要作用。其中一些甚至完全基于排版实现而最终结果通常很有趣。字体的选择通常是非常奢侈的。看看Whirly Birdie,Dovetail+Afterpay和Synchronized。

9. 野蛮主义

这是我最担心的一种趋势(老实说,它可能不亚于同态)。它被称为野兽派,顾名思义,就是形成强烈的对比,经常给人非常不舒服的排版以及可访问性和可读性的许多问题。但是我得到了整体的感觉-它背后的主要思想基本上是对我们认为美丽而有用的事物的解构。

令人惊讶的是,我看到许多网站和应用程序实际上都在追赶这一趋势!(其中之一是名为Newonce的波兰广播电台)。虽然不喜欢,但允许它存在吧。

10. 简化UX / UI流程

这是区别于以上趋势的一种 ,不是视觉效果

我看到行业中越来越多的人意识到产品设计背后的许多过程变得极其复杂。在这里,对产品设计师,客户和大多数人而言,对数字产品本身来说都是不利的。

迫切需要进行更改。而且,我相信它正在慢慢开始改变。我坚信,现在应该退后一步,或者重新审视整个行业。现在是时候重新考虑令人困惑的概念和名称,重建困难且耗时的流程,并使有抱负的设计师更容易学习产品设计。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值