前端应该关注的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流程

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354663.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何让你在开发者工具中查看源代码有语法高亮和暗黑主题的效果

如何让你在Chrome浏览器开发者工具中查看源代码的时候,和在代码编辑器中有同样的代码语法高亮的效果,而且还是深色主题,如果你是深色主题的爱好者就更合你意了。国外的美女开发者为你实现了这样功能的浏览器拓展,她的Github主页&a…

“太空语言”JavaScript编码标准规范指南

喷气推进实验室是 美国国家航空航天局的科研机构。 该实验室JPL开发大部分的软件是用在无人深度太空和其他行星探测的领域。他们拥有著名的 好奇号火星探测器 和 旅行者号探测器 。已经离开太阳系25年,仍然在飞行并提供科学信息。高水平的自动化和长期的任务导致了对…

如何在JUnit 5中替换规则

最近发布的JUnit 5(又名JUnit Lambda) Alpha版本引起了我的兴趣,在浏览文档时,我注意到规则以及跑步者和阶级规则都消失了。 根据文档,这些部分竞争的概念已被单个一致的扩展模型取代。 多年来, Frank和我…

微页面设计开发指南

一、目标实现左侧:为可用的组件列表,可拖动任一组件到中间的预览区域中间:为页面预览效果页面,选中任一组件,可在右侧进行参数配置右侧:为组件的参数配置(选中中间的组件时出现)&…

商城商品购买数量增减的完美JS效果

商城商品购买数量增减的完美JS效果 近期在开发一个地方O2O租书项目,使用ASP.NET MVC技术,其中在图书详情页,用户可以输入借阅的数量,这里使用了js来控制数量的增减和校验。 数量一定是数字 点击增减按钮的时候要能自动加1或减1 …

这款插件让你在VSCode上也能答题背单词

在VSCode上也可以在线答题了,插件市场上线了一款答题的插件,免去了去其它网站或者软件的烦恼,代码写累了,随手打开答题功能,换换脑子,或者熟悉两个单词,程序员的别样休闲时光,哈哈&a…

使用Java 8在地图上流式传输

在本文中,我将向您展示如何在标准Java映射上有效地实现Speedment Open Source流,并将Stream接口扩展为MapStream! 即使在复杂的情况下,此添加将使保持流的具体性和可读性变得更加容易。 希望这将允许您继续流式传输而不会过早收集…

如何使用python给PDF文件加水印

Python作为编程界最火的语言,能做的事几乎你能想到的它都能干,就连抢茅台都可以,还有什么不行?!Python作为脚本编程语言,可以做很多事情。使用Python,你可以轻松地给pdf加上水印。 你可以使用名…

搭建一个redis高可用系统

一、单个实例 当系统中只有一台redis运行时,一旦该redis挂了,会导致整个系统无法运行。 单个实例二、备份 由于单台redis出现单点故障,就会导致整个系统不可用,所以想到的办法自然就是备份(一般工业界认为比较安全的备…

SSH连接远程服务器,本地known_hosts文件记录了什么

今天工作时,使用ssh命令远程连接公司的本地服务器时,突然出现以下错误bash-3.2$ ssh argus192.168.200.8 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! Someone could be eavesdroppin…

“全人类的知识宝藏”维基百科迎来了20岁的生日!

维基百科从一个伟大的想法开始,与无数的像你像我一样的阅读者,创作者,捐赠者和粉丝经历了互联网的20年,今天让我们一起为这个属于所有互联网人的成果庆祝一次生日。值此20周年特地为它做了一个主页:https://wikimediaf…

转:智能音箱市场深度报告:怎么大家都在抢这个两亿小蛋糕?

原文链接:http://www.sohu.com/a/199335366_115978 智能音箱是今年最热的智能硬件项目之一。目前,智能音箱已经有了比较成熟的技术方案和模式思路,但消费市场似乎依然秉持着比较谨慎的态度。智能音箱市场上的主流产品都有什么思路&#xff1f…

Tailwindcss尤大神都fork了,是未来的趋势?

最近Tailwindcss频繁出现在我的视野里,从单词拼写中看,多多少少与css有点关系。近几年是JS框架大行其道,CSS方面少有新的框架出现。昨天突然看到尤大神在Github上的动态,fork了该项目,看来马上要火的节奏啊&#xff01…

JUnit 5 –架构

现在我们知道如何设置JUnit 5并使用它编写一些测试 ,下面让我们看一下。 在本文中,我们将讨论JUnit 5架构以及采用这种方式的原因。 总览 这篇文章是有关JUnit 5的系列文章的一部分: 设定 基本 建筑 条件 注射 … JUnit 4 忽略Hamcre…

前端程序员书桌上不可缺少的CSS书籍

作为前端,CSS不仅要会,而且要精通,随着各种浏览器规范参差不齐和网页交互多元化的趋势越来越复杂,前端程序员必须要将CSS基础知识打牢。由于现在的框架越来越多,导致很大一部分程序员的工作只是拿着现成的组件布局&…

nodejs 进阶:图片缩小

demo 效果: 代码: /*** Created by ZXW on 2017/10/30.*/ var fs require(fs); var gm require(gm);gm(./不饿.jpg).resize(50, 50,"!").write(./不饿1.jpg, function (err) {if (!err) console.log(done);});2017-10-30 22:10:46转载于:ht…

可能是最先出来的关于介绍使用Vue3的一本书

Vue3 release版本已发布有几个月了,不少公司都已经开始使用vue3开发项目了,市场上的主流的框架如:Vant,Element UI,Taro也都发布了支持Vue3的版本。Vue3很多的开发优势自不必再说,学习上手vue3已经成为每个…

CSGL

glShadeModel void glShadeModel(GLenum mode) GL_FLAT/【GL_SMOOTH】 着色技术选择 glClearDepth GL.glClearDepth(depth); glClearDepth:设置深度缓存的清除值 参数 depth 指定清除深度缓存时使用的深度值。 说明 本函数指定用glClear清除深度缓存时所使用的深度值…

强大的Canvas开源库Fabric.js简介与开发指南

什么是Fabric.js?Fabric.js 是一个强大且简单的Javascript HTML5 Canvas库。官网地址:http://fabricjs.com/为什么要使用Fabric.js?Canvas提供一个好的画布能力, 但是Api不够友好。绘制简单图形其实还可以, 不过做一些复杂的图形绘制, 编写一…

模拟qq斗地主-准备发牌抢地主都是农民下一轮准备

为什么要搞这样一个项目?? 1,满足自己的java网络多线程编程的欲望!因为之前一直都是搞web开发,服务器和客户端数据交流人家web服务器早就给你搞好了,比如tomcat,jetty...等等,其实之前脑子里就有…