三大热门的UI设计趋势:3D插图、动画、自定义的组合

您所在的位置:网站首页 插图设计风格 三大热门的UI设计趋势:3D插图、动画、自定义的组合

三大热门的UI设计趋势:3D插图、动画、自定义的组合

#三大热门的UI设计趋势:3D插图、动画、自定义的组合 | 来源: 网络整理| 查看: 265

三大热门的UI设计趋势:3D插图、动画、自定义的组合 4月 5, 2020 发表于: 视觉设计. 评论 Sponsor

设计风格时刻在变化着,有时候新出一种风格,就可能要学习一个新的技能,这是不是学习太多了呢?不是的,就如科技一样,设计也要不停的进步,作为UI设计师我们应该时刻关注设计趋势,并尽量学会运用到自己的项目中。

今天文章中将分享三大热门的UI设计趋势,这将是2020年「吃香」的设计风格,分别是:3D插图、动画、自定义的组合,学会使用它们,能让设计作品提升更好的视觉体验。

最近有大量的设计软件和工具雨后春笋般涌现——Sketch,Figma,Adobe Creative Cloud,C4d,Redshift等等。这使得设计创作门槛越来越低,设计师们也能够以更多的形式和更低的成本表达自己的创意。

我觉得趋势应该是能够相互结合,还能以创造性的方式在web和许多APP中得到使用。如果使用正确,3D插图、动画和自定义的组合可以为用户提供一套完整的解决方案。

1、3D 插画

由于一批3D爱好者在Instagram上分享他们的作品,3D在2019年流行了起来。在2020年,3D设计领域会得到更加重要的发展。

3D之所以变得如此流行主要得归功于一些强大的渲染工具,比如OC,RedShift等等,以及非常便宜的显卡和其他硬件设备。

越来越强大的软件以及越来越便宜的设备,使得不同领域的设计师们也能够通过3D表达自己的创意。

三大热门的UI设计趋势

Illustrations by Crystal Yumumu on Dribbble

三大热门的UI设计趋势

三大热门的UI设计趋势

Illustrations by Luis Yrisarry Labadía on Behance

三大热门的UI设计趋势

Illustration by Mike | Creative Mints on Dribbble

三大热门的UI设计趋势

Illustration by Mike | Creative Mints on Dribbble

将平面设计概念转化为3D有无数种方法。我可以看到设计师们大多在以下领域重新构思旧的想法,形成新的作品。

中小企业,企业,高科技(人工智能,机器学习,大数据等)和it相关公司的插图 儿童插图和动画 实验性的几何插图

几年前,网页设计师的设计工具还不需要会3D软件。鲜明反差的是,今天的设计师们正在成为更全面的设计师,不断学习插画,摄影,C4D,动画等。

设计师们已经走了很长一段路,我喜欢看到他们慢慢成长为超级英雄!

2、动画

在当今快节奏的技术时代,动画的发展紧跟步伐。尤其是近期在3D领域的应用,把曾今的不可能实现变成了可能,为更加富有创意性的设计打开了大门。

2019年,我写了一篇关于2D和3D混合使用的趋势,预测设计师能有更加多的创意空间。随着技术支持更进一步,设计师可以更加大胆的去思考2D与3D结合的创意,产出的动画流畅顺滑,这一趋势在2020年肯定会大放异彩。

在2019年,我们注意到在一些网页中,动画被非常多具有想象力的方式呈现。一个很棒的例子是苹果AirPods页面。

三大热门的UI设计趋势

毫无疑问,在2020年,网页上会看到非常多的过渡动画,场景动画,这得益于网页技术的支持,一些新的JS库,比如ScrollMagic. js, Three.js, Anime.js, Mo.js, Velocity, Scroll Reveal 等等。

我用ScrollMagic库设计了一个我的个人网站,它非常轻量,但很强大。尽管我直接应用库来做,几乎未做修改,但是依然可以获得比较好的网页效果:

三大热门的UI设计趋势

我的个人网页截图

使用SwiftUI库可以让iOS设计师很轻易的做出不错的动画。下面的动画是我用SwiftUI不到10分做出来的动画效果。

三大热门的UI设计趋势

基于这些动画库和工具,能做出比较复杂的2D和3D动画。设计师能够更加大胆的设计创意效果,开发现在也能比较容易的用代码实现出来。

三大热门的UI设计趋势

Illustration by Zak Steele-Eklund on Dribbble

三大热门的UI设计趋势

Illustration by Daniel Tan on Dribbble

三大热门的UI设计趋势

Illustration by Stian ◒ on Dribbble

动画可能看起来像一个闪亮的新玩具,但我们需要小心使用。过度使用动画不仅会影响用户体验,还会影响性能。

3、自定义或是组件化

在2019年,我们见证了数量激增的定制插画,特别是在商业设计中。这个趋势在2020年将得到延续。

虽然在几年前,很难说服客户采用适合他们的业务或行业的插画,但现在这点已经成为行业标准。

组件化图片通常应用于通用对象,即那些易于可视化的对象。随着人工智能,大数据,区块链和机器学习的兴起,这些插图广泛应用于web和UI设计已经成为不争的事实。

三大热门的UI设计趋势

Illustration by the Netguru Team

三大热门的UI设计趋势

Illustration by Daniel Tan on Dribbble

三大热门的UI设计趋势

Illustration by Ben Schade on Dribbble

三大热门的UI设计趋势

Illustration by Calvin Sprague on Behance

拟物设计是仿照真实世界物件的样式,也是在初代iPhone上被应用的最亮眼的趋势。巅峰之后,就渐渐被人遗忘。现如今,新拟物更多的被应用于游戏设计或复媒体设计中。

三大热门的UI设计趋势

Illustration by Paarth Desai on Dribbble

设计师们意识到,简单易懂的风格能更好的讲好故事。干净的风格也使得设计师能够设计出风格独特的插图。

哪种风格会持续下去?

我唯一能确定的就是未来会变得越来不确定。我这篇文章中的预测是基于观察,分析数千个网页,设计稿,插画等等得出来的。

最近设计圈非常狂热的追捧新拟物风(软UI),在一些功能简单的应用像音乐或日历应用上效果很不错。为了画出新拟物风的效果,你需要做3层有差别的颜色:

1、最浅的颜色用在左上角的投影上

2、中间色用到元素及背景上

3、最深的颜色用到右下角的投影上

三大热门的UI设计趋势

我最近用这种方法设计了一个音乐APP概念。

三大热门的UI设计趋势

新拟物风才刚刚站上舞台,所以我并不确定它是否能成为主流。我们需要看到它继续发展并能真正应用到实际的APP中。

对于现在,新拟物风并不能取代扁平设计趋势,它只是一个简单的加法。

渐变在如今也很流行,许多人不确定它是否会持续下去。但是,渐变在现在已经非常适合UI设计,它提供了非常优雅的视觉体验。

三大热门的UI设计趋势

Stripe’s homepage

三大热门的UI设计趋势

Illustration by Mike | Creative Mints on Dribbble

我热切的期待设计师们能够在今年使用这些趋势,并能综合这些设计方法为用户提供极致的用户体验。

本文介绍的趋势中,你喜欢3D插画还是动画?还是有你更喜欢的风格?欢迎加入设计达人的官方交流群,交流设计、发表自己的想法,在「设计达人」公众号回复「进群」即可,感谢阅读!

原文:https://uxdesign.cc/visual-trends-that-ui-designers-should-keep-an-eye-on-e622d9086310 作者:Pranav Ambwani 译者:彩云sky (id:caiyunyisheji)

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com 交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。 赞助商链接 与 UI、UI设计、设计趋势、设计风格 相关的文章 UI设计之——APP弹窗设计指南 UI设计之——APP弹窗设计指南 3D图标风格尝试,效果很好看 3D图标风格尝试,效果很好看 很有吸引力的网页排版设计,作品集就“抄”它! 很有吸引力的网页排版设计,作品集就“抄”它! UI界面做好留白分割,页面就会成功一半 UI界面做好留白分割,页面就会成功一半 探讨UI设计细节:圆角与直角的特性 探讨UI设计细节:圆角与直角的特性 运用插画元素的优秀UI界面设计 运用插画元素的优秀UI界面设计 赞助商链接 设计达人微信交流社区:shejidaren888 喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。 版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。 « 只有「字」的中文海报设计 Dribbble上的Covid19设计作品 » { 发表评论 } 点击这里取消回复。 推荐书籍 艺术的故事艺术与审美入门之书 DON'T MAKE ME THINK设计师必看 《移动应用UI设计模式》手机APP设计 《设计心理学 全四册》高阶技能! JavaScript权威指南(第5版)只能说牛X 《见微知著》Web用户体验入门书籍 最新文章 UI设计之——APP弹窗设计指南 Adobe illustrator自动排版功能,轻松完成批量排版操作 Clone-Voice :简易的AI声音克隆工具,免费开源下载 人体结构绘画知识:掌握这4个方面解决复杂的人体解构 如何避免色域误差?UI设计师必要学的色域概念和色彩配置技巧 优秀!AIGC在平面海报设计的应用案例 大神推荐 设计接单 免费字体库 PS/C4D/版式教程 设计导航 原型设计神器 100本设计书籍PDF “” 标签AIGC AI教程 AI绘画 banner CSS3 dribbble illustrator教程 jQuery logo photoshop photoshop教程 UE UI UI KIT UI素材 UI设计 UX 中文字体 创意 创意设计 图标 字体 字体设计 工具 平面设计 排版 插画 摄影 海报 海报设计 海报设计教程 版式设计 用户体验 笔刷 纹理 网页素材 网页设计 色彩搭配 色彩理论 英文字体 设计师 设计理论 设计趋势 设计风格 配色 赞助商


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3