最新ui设计趋势_10个最新且有希望的UI设计趋势

最新ui设计趋势

重点 (Top highlight)

Recently, I’ve spent some time observing the directions in which UI design is heading. I’ve stumbled across a few very creative, promising and inspiring trends that, in my opinion, will shape the UI design in the nearest future.

最近,我花了一些时间观察UI设计的发展方向。 我偶然发现了一些非常有创意,有希望和鼓舞人心的趋势,我认为这将在不久的将来塑造UI设计。

Here are the 10 trends based on my observations:

以下是根据我的观察得出的10种趋势:

Neuomorphism examples
Dawid Tomczyk, Ui8net (IG)Dawid Tomczyk ,Ui8net(IG)

1.新 神经同态 (1. New Neuomorphism)

You’ve read it right! Neuomorphism is evolving and, I guess, it’s here to stay (whether you like it or not). It didn’t last long in its initial form, but it is changing towards more sophisticated and accessible direction. It’s almost like skeuomorphism, but with a fresh, modern, more aesthetic vibe.

您已经读对了! 神经同质化正在发展 ,我猜想它会一直存在(无论您是否喜欢)。 它最初的形式并没有持续很长时间,但是它正在朝着更加复杂和易于访问的方向发展。 它几乎类似于拟态,但具有新鲜,现代,更美的氛围。

Soft gradients examples
Left to right: Dominik Bednarz, Mufidul.design (IG), Halolabteam, Ariuka_dsgn (IG), Sajon007 (IG)
从左到右:Dominik Bednarz,Mufidul.design(IG),Haolabteam,Ariuka_dsgn(IG),Sajon007(IG)

2.软渐变 (2. Soft gradients)

Gradients are not going anywhere! In fact, I’m seeing a lot of them, as backgrounds and on UI elements, such as buttons, cards and graphs.Mixing more than two colors to create a colorful blurry background is also a thing!

渐变无处不在! 实际上,我在背景和UI元素(例如按钮,卡片和图形)上看到了很多 混合两种以上的颜色以创建多彩的模糊背景也是一件事情!

Geometry examples
Left to right: Victor.niculici (IG), Sun, Ashik, Interfacely.net, Halolabteam
从左到右:Victor.niculici(IG),Sun,Ashik,Interfacely.net,Halolabteam

3.几何元素 (3. Geometric elements)

Both used as main background or theme, or just a detail to make the design look more interesting — geometric elements are getting more and more attention. They are often mixed to create a mosaic — and the result looks really cool!

两者都用作主要背景或主题,或者只是用作使设计看起来更有趣的细节-几何元素正越来越受到关注。 通常将它们混合在一起以创建马赛克 -结果看起来非常酷!

Pastel backgrounds examples
Left to right: Emy Lascan, Zerotoone.de, DesigningUI.com, jajadesign (IG), Flowstudio.
从左到右:Emy Lascan,Zerotoone.de,DesigningUI.com,jajadesign(IG),Flowstudio。

4.柔和的背景 (4. Pastel backgrounds)

I have to say I love this trend. 🥰 I’ve seen a lot of astounding, lightweight, aesthetically pleasing designs with very delicate, bright pastel color schemes.It makes the designs look very modern, non-intrusive, fresh and delightful, in which content plays the main role, and everything else is just a subtle background.

我必须说我喜欢这种趋势。 🥰我已经看到了许多惊人的,轻巧的,美学上令人愉悦的设计,以及非常精致,明亮的柔和配色方案。 它使设计看起来非常现代,不打扰,清新而令人愉悦,其中内容起着主要作用,其他所有内容都只是微妙的背景。

Illustration examples
Left to right: batcz (IG), tranmautitram (IG), Purrweb_design (IG), Izmahsa (IG), tranmautritram (IG)
从左到右:batcz(IG),tranmautitram(IG),Purrweb_design(IG),Izmahsa(IG),tranmautritram(IG)

5.插图和3D (5. Illustrations and 3D)

Illustrations are still a craze. Different styles, different color schemes, more or less abstract, so they match the product’s characteristics. Not only flat, but also imitating the 3D look. I believe they are a nice change after all these years of using stock images for every single digital project on earth! I give a few tips on how to create a simple illustration here:

插图仍然很流行。 不同的样式,不同的配色方案或多或少是抽象的,因此它们与产品的特征相匹配。 不仅平坦,而且模仿3D外观。 我相信这些年来,对于地球上的每个数字项目都使用库存图像,这是一个不错的改变! 我在此处给出了一些有关如何创建简单插图的提示:

Abstract shapes examples
Left to right: Vladimir Gruev, c.sen_ (IG), Eddie Lobianovsky, cmarixtechnolabs (IG)
从左到右:弗拉基米尔·格鲁夫(Vladimir Gruev),c.sen_(IG),埃迪·洛比亚诺夫斯基(Eddie Lobianovsky),cmarixtechnolabs(IG)

6.抽象形状 (6. Abstract shapes)

Used for backgrounds and for different UI elements. They make the interface look more “organic” and playful, which I believe is a good thing. Edit the simpliest shapes (square, oval) with pen tool, play with different border-radius, try different colors/gradients, and you may end up with a very interesting outcome. Or just save yourself a few minutes and try the simple but amazing tool called Blobmaker.

用于背景和不同的UI元素。 它们使界面看起来更“有机”和好玩,我认为这是一件好事。 使用钢笔工具编辑最简单的形状(正方形,椭圆形),使用不同的边框半径,尝试不同的颜色/渐变,您可能会得到非常有趣的结果。 或者只是节省几分钟时间,然后尝试一种名为Blobmaker 的简单但出色的工具

Dark mode examples
Left to right: UXdesignlabs (IG), dragonlee_design (IG), JIANGGM, reyiands (IG), Saepul Rohman
从左到右:UXdesignlabs(IG),dragonlee_design(IG),JIANGGM,reyiands(IG),Saepul Rohman

7.暗模式 (7. Dark mode)

Dark mode is a color-inverted version of the interface, to make it more accessible at midnight hours. Since I am a typical night owl, I often use dark modes to swipe through my favorite apps before going to sleep. When creating a dark mode, remember to keep the right contrast between different elements and typography.

暗模式是界面的颜色反转版本,以使其在午夜时分更易于访问。 由于我是典型的夜猫子,因此我经常在睡觉前使用深色模式在喜欢的应用程序中滑动。 创建暗模式时,请记住在不同元素和版式之间保持正确的对比。

Elements at an angle examples
Left to right: Hype4.com, nickelfoxstudio, purrweb_design (IG), Vadim Drut, UI8net
从左到右:Hype4.com,nickelfoxstudio,purrweb_design(IG),Vadim Drut,UI8net

8.某个角度的元素 (8. Elements at an angle)

Not only used for Dribbble shots, but also as a way to present different content on websites in a more non-standard way. It somehow makes the content looks more interesting and eye-catching. How to quickly achieve this effect? First, make a collage of elements at 0° degrees. Make them one group. Then, change the group angle (from 30° to 50°) and voila! This way you don’t have to change the angle of every single element by hand.

不仅用于Dribbble拍摄,还用作以非标准方式在网站上呈现不同内容的方式。 它使内容看起来更有趣和引人注目。 如何快速达到这种效果? 首先,对0°度的元素进行拼贴。 使他们成为一组。 然后,更改组角度(从30°到50°),瞧! 这样,您不必手动更改每个元素的角度。

Soft shadows examples
Left to right: Cuberto, Fireart Studio, Dogstudio, Hype4.com, Prakhar Neel Sharma
从左到右:Cuberto,Fireart Studio,Dogstudio,Hype4.com,Prakhar Neel Sharma

9.柔和的阴影 (9. Soft shadows)

Another favorite trend of mine. Soft shadows make the UI looks more in-depth. The effect is often very subtle but aesthetically pleasing. Shadows, in general, make certain UI elements more “clickable”, and they help to differentiate the hierarchy between content. You can learn how to do them here:

我的另一个最喜欢的趋势。 柔和的阴影使UI看起来更深入。 效果通常非常微妙,但在美学上令人愉悦。 通常,阴影使某些UI元素更“可单击”,并且它们有助于区分内容之间的层次结构。 您可以在此处了解如何进行操作:

Simple typography examples
Left to right: andreisimon.design (IG), Shakib Ali, Felixlesoeuf (IG), Glebich (IG), Tranmautritram (IG)
从左到右:andreisimon.design(IG),Shakib Ali,Felixlesoeuf(IG),Glebich(IG),Tramautritram(IG)

10.简单的厚字体 (10. Simple, thick typography)

I was never a fan of thin fonts, (ugh, the iOS7 era) so I am happy to see this trend go away. Right now I’m observing the usage of thicker, simple in form (almost square-looking), readable fonts. They make the interface look extra modern and polished. If you searching for a similar one to use, try Poppins, Montserrat (free) or Gilroy, Sofia Pro, Proxima Nova (paid).

我从不喜欢瘦字体(在iOS7时代),所以我很高兴看到这种趋势消失了。 现在,我正在观察使用更粗,更简单的形式(几乎为正方形)的可读字体 。 它们使界面看起来更加现代和优美。 如果您要寻找类似的商品,请尝试Poppins , Montserrat (免费)或Gilroy , Sofia Pro , Proxima Nova (付费)。

Have you seen any other trend worth acknowledging? Let me know down in the comments!

您是否看到其他值得肯定的趋势? 让我在评论中知道!

你喜欢这篇文章吗? 😊 (Did you like this article? 😊)

I just released a >📚 UI DESIGN BOOK 📚<I 🖋 write about design and I’m a 👩🏻‍🔧 co-founder/lead designer at HYPE4 design-driven software agency!

我刚刚发布了>📚 UI设计图书 📚<我🖋 写的设计 ,我在👩🏻🔧共同创始人/首席设计师HYPE4设计驱动的软件代理!

Raised fist emojis
UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women),这是一个巴西组织,致力于通过采取行动,赋权和知识共享的举措来促进科技行业中的黑人女性平等。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。

翻译自: https://uxdesign.cc/10-newest-and-promising-ui-design-trends-929562b25ad6

最新ui设计趋势

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

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

相关文章

学习 axios 源码整体架构,打造属于自己的请求库

前言这是学习源码整体架构系列第六篇。整体架构这词语好像有点大&#xff0c;姑且就算是源码整体结构吧&#xff0c;主要就是学习是代码整体结构&#xff0c;不深究其他不是主线的具体函数的实现。本篇文章学习的是实际仓库的代码。学习源码整体架构系列文章如下&#xff1a;1.…

404 错误页面_如何设计404错误页面,以使用户留在您的网站上

404 错误页面重点 (Top highlight)网站设计 (Website Design) There is a thin line between engaging and enraging when it comes to a site’s 404 error page. They are the most neglected of any website page. The main reason being, visitors are not supposed to end…

学习 koa 源码的整体架构,浅析koa洋葱模型原理和co原理

前言这是学习源码整体架构系列第七篇。整体架构这词语好像有点大&#xff0c;姑且就算是源码整体结构吧&#xff0c;主要就是学习是代码整体结构&#xff0c;不深究其他不是主线的具体函数的实现。本篇文章学习的是实际仓库的代码。学习源码整体架构系列文章如下&#xff1a;1.…

公网对讲机修改对讲机程序_更少的对讲机,对讲机-更多专心,专心

公网对讲机修改对讲机程序重点 (Top highlight)I often like to put a stick into the bike wheel of the UX industry as it’s strolling along feeling proud of itself. I believe — strongly — that as designers we should primarily be doers not talkers.我经常喜欢在…

若川知乎问答:2年前端经验,做的项目没什么技术含量,怎么办?

知乎问答&#xff1a;做了两年前端开发&#xff0c;平时就是拿 Vue 写写页面和组件&#xff0c;简历的项目经历应该怎么写得好看&#xff1f;以下是我的回答&#xff0c;阅读量5000&#xff0c;所以发布到公众号申明原创。题主说的2年经验做的东西没什么技术含量&#xff0c;应…

ui设计基础_我不知道的UI设计的9个重要基础

ui设计基础重点 (Top highlight)After listening to Craig Federighi’s talk on how to be a better software engineer I was sold on the idea that it is super important for a software engineer to learn the basic principles of software design.听了克雷格费德里希(C…

C# 多线程控制 通讯 和切换

一.多线程的概念   Windows是一个多任务的系统&#xff0c;如果你使用的是windows 2000及其以上版本&#xff0c;你可以通过任务管理器查看当前系统运行的程序和进程。什么是进程呢&#xff1f;当一个程序开始运行时&#xff0c;它就是一个进程&#xff0c;进程所指包括运行中…

vue路由匹配实现包容性_包容性设计:面向老年用户的数字平等

vue路由匹配实现包容性In Covid world, a lot of older users are getting online for the first time or using technology more than they previously had. For some, help may be needed.在Covid世界中&#xff0c;许多年长用户首次上网或使用的技术比以前更多。 对于某些人…

IPhone开发 用子类搞定不同的设备(iphone和ipad)

用子类搞定不同的设备 因为要判断我们的程序正运行在哪个设备上&#xff0c;所以&#xff0c;我们的代码有些混乱了&#xff0c;IF来ELSE去的&#xff0c;记住&#xff0c;将来你花在维护代码上的时间要比花在写代码上的时间多&#xff0c;如果你的项目比较大&#xff0c;且IF语…

见证开户_见证中的发现

见证开户Each time we pick up a new video game, we’re faced with the same dilemma: “How do I play this game?” Most games now feature tutorials, which can range from the innocuous — gently introducing each mechanic at a time through natural gameplay — …

facebook有哪些信息_关于Facebook表情表情符号的所有信息

facebook有哪些信息Ever since worldwide lockdown and restriction on travel have been imposed, platforms like #Facebook, #Instagram, #Zoom, #GoogleDuo, & #Whatsapp have become more important than ever to connect with your loved ones (apart from the sourc…

M2总结报告

团队成员 李嘉良 http://home.cnblogs.com/u/daisuke/ 王熹 http://home.cnblogs.com/u/vvnx/ 王冬 http://home.cnblogs.com/u/darewin/ 王泓洋 http://home.cnblogs.com/u/fiverice/ 刘明 http://home.cnblogs.com/u/liumingbuaa/ 由之望 http://www.cnbl…

react动画库_React 2020动画库

react动画库Animations are important in instances like page transitions, scroll events, entering and exiting components, and events that the user should be alerted to.动画在诸如页面过渡&#xff0c;滚动事件&#xff0c;进入和退出组件以及应提醒用户的事件之类的…

线框模型_进行计划之前:线框和模型

线框模型Before we start developing something, we need a plan about what we’re doing and what is the expected result from the project. Same as developing a website, we need to create a mockup before we start developing (coding) because it will cost so much…

工作经验教训_在设计工作五年后获得的经验教训

工作经验教训This June it has been five years since I graduated from college. Since then I’ve been working as a UX designer for a lot of different companies, including a start-up, an application developer, and two consultancy firms.我从大学毕业已经五年了&a…

中文排版规则_非设计师的5条排版规则

中文排版规则01仅以一种字体开始 (01 Start with only one font) The first tip for non-designers dealing with typography is simple and will make your life much easier: Stop combining different fonts you like individually and try using only one font in your fut…

基本响应性的Web设计测试工具

在重新设计页面的过程中。要使页面完全响应的设计&#xff08;这意味着它会重新调整大小根据浏览器的尺寸和方向&#xff09;。如iPhone和iPad的移动电话和平板电脑我碰到了一些非常方便的响应设计工具&#xff0c;帮我测试网站在不同的屏幕响应。下面的这些响应的网页设计工具…

ux设计_声音建议:设计UX声音的快速指南

ux设计Mating calls, warning grunts, and supportive coos are some of the sounds heard throughout the animal kingdom. All species use finely-tuned noises to communicate to one another and inform others of an action or behavior. We humans aren’t all that dif…

css3高级和低级样式属性先后顺序

写css hack 时&#xff0c;由于hack主要针对的是个别浏览器&#xff0c;hack的书写顺序应当是从一般到特殊的写法。 如&#xff1a; .box { width:200px; height:200px; position:fixed; left:0; top:0; _position:absolute; } 如果颠倒顺序&#xff0c;从特殊到一般&#xff0…

sans serif_Sans和Serif相遇可爱

sans serifI first noticed it in this tweet. Exciting upcoming product and snazzy motion work aside, “What a fascinating logotype!”, I exclaimed!我在此推文中首先注意到了它。 我惊呼即将推出的激动人心的产品和令人眼花&#xff0c;乱的动作&#xff0c;“多么迷人…