• 在线客服

  • 扫描二维码
    下载博学谷APP

  • 扫描二维码
    关注博学谷微信公众号

  • 意见反馈

原创 2020年UI设计五大流行趋势分析

发布时间:2020-04-10 18:07:30 浏览 6112 来源:博学谷 作者:照照

    对于一个优秀的UI设计师来讲,把握设计流行趋势是一项基本能力。在反复分析了2020年已经过去的几个月的UI设计作品之后,本文为大家整理总结了2020年UI设计五大流行趋势,分别是深色模式、颜色对比、卡片设计、拟物风格以及留白设计。下面我们一一来分析这些趋势的具体内容和特点吧!

     

    UI设计流行趋势

     

    1、深色模式

     

    深色模式作为2020的主流设计趋势之一,早已上升到系统级别的设计了( iOSmaterial design),另外还有一些主流的APP也跟随系统进行了深色模式的设计。比如最近上热搜的热点事件微信发布深色模式版本。一般来讲这些主流APP都是跟随系统的设定而变化。

     

    关于深色模式的设计建议主要是使用基础色进行延展,不能简单粗暴的进行反色处理或变暗处理。比如尽量使用深灰色而非纯黑色,因为在深灰色上使用浅色文本的对比相对来说较弱些,可以减轻眼睛阅读的疲劳度。另外,可以通过层级叠加的颜色变化来完成界面的UI设计。最后,还有优化深色下的亮色对比程度 ,避免饱和度或亮度过高产生强对比的视觉疲劳。

     

    2、颜色对比

     

    年轻化的UI设计风格是2020UI设计的一大趋势之一。强烈对比的颜色运用,体现出了年轻化的活力与朝气,使得UI设计产品更容易与年轻化的互联网用户产生共鸣。UI设计的多彩化主要表现在一些控件或组件中,比如图标、按钮、内容模块、插图、背景、投影等等。

     

    具体来讲就是通过多颜色的搭配,让整体的UI界面变得丰富有层次,并且更加贴合年轻化的趋势。除此之外,我们还可以在UI设计中大胆的使用渐变色,提升颜色的跨度表现,丰富设计质感。甚至可以运用撞色,提升用色的层次感。

     

    3、卡片设计

     

    卡片式设计一直是UI设计中最常用的方式之一,而在2020年卡片设计有了新的变化趋势。比如柔和的圆角越来越常见,当然在UI设计时更多需要考虑设计的产品风格或气质是适合大圆角还是小圆角,而非依据一些设计网站上的流行趋势。还有新的卡片设计更加趋向自然的投影,减弱投影带来的切割感觉,提升界面的平整性。

     

    4、拟物风格

     

    拟物风格早就不是什么新词了,在2019年就已经在UI设计中频频被提及。不过2020年的拟物风格与以往的拟物化设计不完全一样,是一种介于扁平化和拟物化的新风格尝试。主要是通过光影的变化来突出内容的区域或模块设计,整体感觉相比扁平化的设计来说会更加具有氛围性和视觉冲击感。

     

    2020年拟物风格的基本原理主要是通过凸起效果凹陷效果构成的。凸起效果使用外投影来实现,叠加层级依次为:基层-亮投影-暗投影;凹陷效果效果使用内投影来实现,叠加层级依次为:亮投影-暗投影-基层。从整体来看,新的拟物风格并不适用于所有的UI设计,面对新的趋势还要不断地实践中去调整。

     

    5、留白设计

     

    留白设计被越来越频繁地应用到UI设计中,相比于紧凑的设计,适当的留白可以让人在阅读时更加具有放松的心理暗示。留白是一种对比手法或方式,而非纯粹的减少内容来达到留白的目的,在有限的手机屏幕内容我们需要清楚哪些位置或内容可以做到适当留白。

     

    留白的设计方式有很多,像是顶部留白,让使用者从一开始的就降低视觉压迫性。还有去线留白,即减少线对内容的信息干扰。再或者是减少重色,让整体界面的设计更加轻量化、扁平化。还有增加边距留白,增强内容的聚焦。

     

    以上就是2020年UI设计五大流行趋势的全部分析。事实上,虽然UI设计每年都会有新的变化趋势,但是从整体上来看这种变化还是比较小的。希望大家在了解了2020年UI设计五大流行趋势后,可以在日常的设计工作中有意识地去运用这些设计方法,从而设计出更好地产品。

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: 网页设计自学多久可以就业? 下一篇: UI设计是做什么的?需要学什么?

相关推荐 更多

热门文章

  • 前端是什么
  • 前端开发的工作职责
  • 前端开发需要会什么?先掌握这三大核心关键技术
  • 前端开发的工作方向有哪些?
  • 简历加分-4步写出HR想要的简历
  • 程序员如何突击面试?两大招带你拿下面试官
  • 程序员面试技巧
  • 架构师的厉害之处竟然是这……
  • 架构师书籍推荐
  • 懂了这些,才能成为架构师
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码