2018年UI设计趋势总结

戴萍

2018UI设计潮流和未来发展趋势
前言：2018的流行趋势主要是在色彩，布局，动效，元素方面有了明显的趋势，大胆

的渐变，出挑的色彩，新颖又丰富的动效和视频，破碎网格布局，插画的主导地位等

，都能看到2018UI设计的趋势和发展方向。

1.微动效和微交互
网站地址：https://thecoolclub.co
亮点：丰富的微交互，鼠标悬停特效以及留白的巧妙应用  该网页点击即可一张张发牌

的桥牌游戏，鼠标悬停即可触发的文字抖动特效

2.全屏视频展示以及图片扩大微动效
网站地址：https://www.papazian.gr  
亮点：吸睛的全屏视频背景和极简主义设计风格
简洁单色调的画面并无特点，但是足够的留白确实叙述故事的最佳意境场景

3.不对称网格/破碎网格布局/流体特效
网站地址：https://draft.co.jp/en  
亮点：不对称网格，动态文本，以及选中效果的应用

网站地址：https://waaark.com  
亮点：美观炫酷的流体特效
利用流体特效，丰富页面视觉展示效果


4.图片与动态文字/文字图片的动效
网站地址：https://mtcubacenter.org  
亮点：动态文本和背景图片的完美配合

5.鼠标点中状态的改变
网站地址：https://www.wanderlustandco.com  
  亮点：多样的鼠标指针样式

6.视觉滚动差设计
网站地址：http://www.manuel-rueda.com
亮点：吸睛的视觉滚动差设计
利用往下的滑动图片全屏展示来制造视觉差
使用视觉滚动差设计，突出页面产品，布局和层级结构

7.插画占据舞台中心
网站地址：https://www.signalboosters.com  
  亮点：插画设计风格
2017年，插画在网页上的大量使用是有目共睹的， 经验丰富的设计师们根据品牌调性

来制作个性化的插画，无论是在配合文字，以期更清晰准确的传递网站想要表达的信

息；插画的作用可以很强大。文字难以表述的场景，利用插画可能就直白得多。

2018年，越来越多的品牌都在追求差异化、品牌化，因此自定义插图和定制化设计的

趋势应运而生。设计师绘制特色的插图，以适应不同业务、或满足不同目标客户的需

求。定制化的插图不仅增加了趣味性，同时也能给用户带来更多的共鸣。


8.色彩明亮的渐变
网站地址：http://m-goldstein.com
  亮点：渐变色彩的实时变化

渐变曾是2017年的一个流行趋势，而今年这一趋势越发火热，并且变得更加大胆，更

加多样。我们发现了更多在渐变上的创新，比如明亮色彩与多种纹理相结合的效果。

这一趋势出现在了从品牌到包装等的所有设计领域。另外，渐变2.0时代还将包括背景

渐变，双色调渐变，多色渐变，图像叠加渐变等。

9.更多三维设计 （推荐工具－C4D）

从各类热门的科幻作品中，我们不难发现“时空扭曲”、“重叠”等一直是备受人们

青睐的关键词。在以往的UI或运营设计中，平面、二维的设计手法比较常见，但从今

年开始慢慢趋于更多的立体3D效果，增加了设计的纵深感及趣味度，同时也让画面内

容更丰富。
实际上，空间感在视觉设计中是愈发重要了，通过对文字进行前后排列，紧缩元素间

距从而形成层叠效果，可以带来不错的阴影效果，突显各元素间的前后空间关系，营

造立体空间感。

10.等距设计

等距设计是一种在二维平面中表现三维空间的设计方法。最初，它被应用于工程制图

中，后来被设计师们用在了其他设计中。无论是摄影、插画、还是3D，等距设计都在

以飞快的速度发展，我们期待在2018年看到更多具有创造性的等距设计作品。


11.利用手工艺术的方法来制作3D模型

我们发现3D数字技术与手工艺术相结合的趋势愈来愈显著。手工艺是一种非常成熟的

技术，它能在触觉上给设计增添一层有趣的感受。在下面这个由马克西姆·斯克瑞特设

计的例子中，3D模型看起来就像是一个手工制作的纸质工艺品一样。

12.AR技术在设计领域的广泛应用

近年来，增强现实技术在游戏领域、视频领域以及移动应用领域飞速发展。AR在设计

领域其实同样也有很好的发展前景，尤其是在移动设备方面。DIA工作室给我们做了

一个很好的示范，他们将交互式的3D排版应用于日常物品上，这样的效果令人非常惊

艳。

13.大胆的字体排版及3D字体的应用

大胆的字体排版可以传达出强烈而明确的信息。如果你想要你的设计脱颖而出，请使

用大号字体，并将其与大胆的颜色相结合。在这种设计中，文字变成了主角，每个页

面都具有无法抗拒的吸引力。
此外，2018年，3D字体变得越来越流行。3D字体让人印象深刻。并缺对于企业来说

也非常重要，因为他们是连接与打动用户的一个有效的手段。

14.音频设计加入到UI设计当中
网站地址：http://lashopstudios.com/  
  亮点：交互式设计，创意的音频设计
交互式设计能够让页面更具趣味性  
UI设计加入声音，让页面视觉和听觉魅力都兼具

15.响应式logo
在一个越来越重视移动体验的时代，让你的标志适配到所有类型的设备上是至关重要

的。一个真正的响应式标志不仅仅是能够在页面或者设备上进行放大缩小，它还需要

具有一个非常巧妙的适应性，可以非常灵活的去搭配不同的尺寸结构。
此外，响应式的标志对于设计师来说也变的越来越重要：一个品牌无论使用的尺寸与

空间，都要能清晰的呈现自身，这对于设计师来说，也将是一个更刺激的挑战，响应

式的标志设计在2018不会缺席。


16.集成动画

集成动画是一种非常轻微的，持续循环的动画。无论是正在加载的页面，或是页面上

运动的元素，都可以通过他们来引导用户体验。动画的出现可以帮助用户找到与之类

似的人物角色，这样可以加强其与网站的互动。


相较于17年，我们从今年的流行趋势中能够看到，18年无论在色彩、布局、形式还是

动效上，都是更加多元化的发展。作为一名UI设计师，当然需要了解设计的流行趋势

，但不能盲目的去跟随，良好的产品功能以及用户体验才是设计的根本，那么，我们

应当如何更好的去运用这些流行来打造出高质量的产品，才是真正值得我们去深思的

问题。