0.0°

2020年UI界面设计最强趋势

经验类型设计趋势
经验属性原创文章
经验版权署名-非商业性使用-禁止演绎

功夫体验设计

关注

12590 14 450 2019-11-03

本文分析2020年设计趋势，旨在能够帮助大家提前了解明年设计方向，提前做好设计储备。

好久没来这里了，今天的文章关于2020年UI设计趋势，希望阅读完后能帮助到你，在项目改版设计中能得到一些启发

------------ 有问题欢迎添加我微信交流：Tao553174261 ---------

2019年接近尾声，最近一直在研究数字设计领域的未来趋势。从各大设计网站上观察到一些最受喜爱的作品，从中研究发现未来的界面设计趋势，包括今年一些受欢迎的设计系统，从中提取一些未来可能的设计风格走向。之前看过我文章的伙伴知道，我之前写过一篇图标趋势的文章，里面就是探索明年趋势走向。那么对于界面，同样的我们需要提前掌握大致设计风格走向，为自家产品改版做一些设计储备。

Dark Mode

黑夜模式

黑夜模式无疑是今年比较热的一个设计方向，为什么这么说？首先是Google材料设计语言更新了，增加暗夜模式。同时今年Q3季度苹果发布IOS13设计语言系统，里面增加暗夜模式。不用说后续很多APP应用都会跟随两大厂商更新这个黑夜模式设计方向。无疑2020年这个将会持续。黑夜模式出现为减少用户眼睛疲劳，提升产品使用体验。

Materials Design Dark Theme

IOS 13 Dark mode

IOS 13 Dark mode 宣传视频

Medium

Instagram

Blank design

留白设计

今年下半年观察到Facebook旗下的Messenger应用和前段时间雅虎更新他们家品牌语言的同时，也重新设计他们家所有产品。我们可以看到如下应用截图，基本去分割线，通过留白区分层级。这样的好处可以减少分割线对内容的干扰，界面呼吸感增强，达到简约设计的目的。

Messenger 和 Yahoo

McDonald`s

PINTEREST 和 VSCO

Apple Design

苹果设计风格

苹果风一直盛行至今天，包括大圆角卡片设计、大标题、粗字体。苹果今年刚刚更新的IOS13设计语言同样的是增强了卡片设计。这种风格将会在2020年继续盛行，因此作为设计师我们更应该提前去对这种趋势熟练掌握。卡片设计作为承载内容的容器，其实更适用今天移动互联网的大方向，因为卡片可以作为一个容器封装复杂的内容，使得模块层级区分明显，适配性也是更强，更聚焦，来看下具体案例。

PINTEREST 和 APPSTORE

Pinterest是今年9月份左右刚更新的设计，圆角卡片大范围的运用。

BEHANCE 和 MEDIUM

Medium对重点栏目在今年更新设计时候启用了卡片。

Brand

品牌渗透

为什么要说品牌渗透？Google 在系统设计语言里面增加图形特征模块，是什么？就是通过连接品牌元素到产品设计中。到今天很多应用已经开始熟练掌握这种设计思路了，比如运用到图标里面或者界面设计中。苹果虽然没有很明确公开说明，但是我们可以从苹果家族设计语言可以看出，包括线下体验店、手机硬件、包装盒以及各种各种物料设计，都是一种白色语言设计风格。通过颜色与图形特征做品牌区分，苹果算是目前做的最好的，史无前例。那么这种趋势在2020将会一直保持。

Apple体系产品与LOGO相粘性强，具有超强的记忆点

Google家族品牌穿透（由于视频原因，此部分截图）

IBM设计跟随LOGO有一致基因

Gird Design

网格化布局

网格化是一切设计系统的基础，Materials Design,Apple Design,IBM Design,Naver Design,等等这几家在设计语言基础上对网格研究与应用算是比较成熟的，Naver方形网格，Google的8px网格，IBM 2PX网格，苹果其实没有很强调他们家网格系数，其实我们可以细看他们的设计规范，已经提到8px Gird。因此网格化布局在2020将是非常重要的一个工具。

一致的网格基因能够沿用到设计体系的任何地方，包括布局、字体行高，图标网格等等

Motion

微动效

5G时代已经到来，加上目前硬件升级，动效的普及已经不再是难题。我们可以慢慢发现目前很多产品设计里面都开始加入动效，来提升产品体验，同时动效也有很强的指导性质。在某些场景下，使用动效能够很好与用户进行互动交流，因此在2020年动效的使用将会越来越多。

Google Tab Motion

B Dropbox Transfer

细节动画

谷歌图标动画

3D Animation

3D动画

随着硬件升级，5G时代开始大面积推广与普及，在应用程序里面使用3D动画来展示产品是一个很不错的选择，3D更加贴近真实物理环境，贴近我们生活。

3D展示商品

3D登录页

3D flip menu

Summary

总结

今天分析了2020年流行的7大设计趋势，这些设计趋势也是伴随着外在关系一起存在的。比如5G来了，那么自然视频领域肯定是未来值得期待，这就是为什么微信公众号都开始流行小视频也是一个原因。硬件升级自然能支持更多的设计元素融入产品里面。因此作为设计师我们要多观察这个行业、多看、多思考，来掌握未来产品设计方向。希望本篇文章能带给你一些新的观点与启发。最后如果你喜欢我的文章，欢迎点赞和转发，感谢大家！

全部评论：14条

Luxia
2020-01-09 18:38
还有一个趋势难道不是借用节省效率的工具嘛，推荐使用蓝湖https://lanhuapp.com/
Forever`ㄋ`淡墨℡
2019-12-20 11:39
@K192_: 你说的完全赞同，这就是现状，很难改变的
Forever`ㄋ`淡墨℡
2019-12-20 11:38
让我耳目一新。大神牛批
158***5478
2019-12-19 00:16
@功夫体验设计: ae
158***5478
2019-12-19 00:16
@功夫体验设计: 对啊！
158***5478
2019-12-19 00:14
@功夫体验设计: 我猜可能是用ae 做的吧，其他软件也可以吧！
比亚
2019-11-26 15:20
@K192_: 看似你很厉害呦，不好意思我公司老大听我的按我来
凉凉酱
2019-11-26 13:52
请问操作流程动画是怎么做出来的？
KOCHA
2019-11-22 21:25
@K192_: 是不是所有的设计师都是这样，牛逼的公司设计师没有发言权，不牛逼的公司设计不能实现？新人，想请教一下。
Rinai
2019-11-22 09:54
内容很赞
158***7803
2019-11-19 16:55
@K192_: 不仅仅开发实现得问题。我只是觉得，大多数国内的公司用户没我们想的那么能接受新趋势
K192_
2019-11-19 16:28
@比亚: 你可拉倒吧，别光看那些大厂出来的APP。要看中端型产品有没有普遍适用这些。你以为这些很好实现？如果只看别人的文章整理就想做出DM模式，那只能说一句你根本没好好研究过DM. 再说留白，抛弃分割线这种细节性的东西用户本就察觉不到。但是促成风格就另说了。你能不能做的让用户不排斥你的界面都是个问题。更别说动效交互和3D动画了。如果只是你想加（你只是一个UI）你看程序鸟不鸟你。再说就算你在VR团队里，动效动画这些也不是你一个UI有发言权的，除非你打算自己写程序，但那也要得到负责人的首肯。所以...别想太好牛逼的公司没有发言权，不牛逼的公司程序也没那个实力。
功夫体验设计
2019-11-18 06:13
@玥玥古城: 视频放ps 里面导出gif
柒右七
2019-11-16 16:17
厉害！！！
雅俗共赏
2019-11-15 19:20
厉害我的哥
玥玥古城
2019-11-15 15:14
请问文章里的动效图是用什么软件做的？
比亚
2019-11-12 13:35
你说的不是今年也流行的吗
UILEO
2019-11-11 14:52
66
学良_
2019-11-11 12:25
总监666

发表评论

取消

每人每天仅限5票，快给你心仪的作品鼓励的一票。

投票

全部评论：14条

更多作品

发表评论

分享到