超全面总结！2017年UI设计领域流行过这21个设计趋势

对于Tubik Studio 团队而言，过去的2017年迎接了不少挑战也开拓了视野。作为战斗在UI设计第一线的设计团队，Tubik Studio 对于UI设计的趋势和流行的技法一直都是敏锐的感知者和大胆的探索者，这一点从他们的设计作品当中就能看到。在2017年流行的过的设计趋势不少，其中许多趋势会延续到2018年，在接下来的日子里，我们会和融合了这些设计技法的UI，相处下去。

结合Nick Babich 的这篇《掌握这12个移动端UX设计趋势，你就掌控了2018年》，你能更好的理解这些UI设计趋势流行的原因。

1、功能性极简主义

不少移动端APP和网站开始基于极简主义设计风来设计，而极简主义本身并非关注所有的信息，而是通过减少非关键信息来突出特定的内容，它是有着极强的功能性和偏向的。它有着如下的特征：

• 简单明晰
• 富有表现力的视觉层次
• 对比明显的比例控制
• 每个元素都有功能
• 大量的留白
• 对核心细节的高关注度
• 优秀的排版设计
• 去除非功能性的装饰元素

2、粗野主义风格

粗野主义设计在2017年非常火爆，采用这种风格的UI，致力于使用更加明亮的色彩，质朴甚至原始的设计元素，借助复杂的布局和反模式的排版，还原早期网页设计的特征，甚至制造出上世纪八九十年代的质感。它有着非常明显的独创性，不管你喜欢不喜欢，它都是无法被忽略的一种流行设计风格。

3、字体和图片的融合

大胆地将虚拟的字体和真实的图片融为一体的设计也是去年流行的设计手法，这种设计手法让字体拥有了融入真实场景的视觉体验，协调而赏心悦目。

4、带动效的首图Banner

在网页中，首图Banner 是最为吸引用户的内容，他们不仅在视觉上足够突出，而且能够传递信息，传达情绪，强化主题。动效的加入，让首屏的Banner图更加吸引人，富有更强的吸引力。

5、自定义主题的插画

插画有着极强的可定制性，这也使得它越来越多地出现在UI和网页设计中，它不仅更容易被用户所感知，可以更好地承载创意，也可以带来更加可控的风格和调性。

6、全屏式布局

如果你仔细观察，会发现许多设计师都热衷于使用全屏式的布局，让图片和视频等视觉元素不再受到边框的限制，这样的布局更加宽敞，不会有打破界限的感觉。

7、多样的UI动效

在动效设计这件事情上，你会发现它在2017年越来越成熟了，融入交互的动效越来越圆融，用户体验引人入胜的APP也越来越多了。接下来，UI动效还会越来越优秀。

8、对UI友好的品牌设计

2017年许多著名的品牌都针对自家品牌进行了重设计，被重新设计之后，这些品牌的LOGO等元素都得到了不同程度的简化，并且针对数字化产品进行了优化，对于UI更加友好，而且几乎每个品牌都制作了动态版本的LOGO。

9、单色UI

为了让UI和产品的功能性更强，不少设计师倾向于使用单色配色方案，这样设计出来的UI确实看起来更加时尚，最关键的是单色配色之下，内容更加突出，用户更不容易被分心。不过，设计师需要投入更多的时间来打磨设计，避免整个UI变得乏味。

10 、深色系背景

深色系的背景通常能够创造出更加优雅、更具有形式感的设计，也能让设计出来的实际效果在不同的环境下有更加一致的体验。相比之下，采用这样设计的大多是数字产品页面，而非以文本为主的网站。

11、浅色的文本背景

这是和深色系背景相伴出现的一种设计趋势，通过白色或者浅色的区块来承载文本，确保文本内容的可读性，还保持了整体的优雅。

12、成熟而对比强烈的字体搭配

越来越多的新字体进入设计师的视野，许多经验丰富的设计师都特别重视字体的搭配。在2017年我们看到了许多优秀的衬线体+非衬线体的字体组合，它们不仅创造了良好的对比度，而且让整个排版设计的层次感更加显著。

13、实验性的栅格系统

设计师的创意越来越强了，即使是栅格也能玩出新花样。通过自定义创造出实验性的栅格系统，设计师在此基础上能够创造出更加灵活原创的布局，创造性地使用各种视觉元素。不过，实验性的栅格系统通常都需要多次迭代和测试，确保可用性。

14、多样的着陆页设计

在2017年，着陆页开始以多种多样的方式呈现出来，无论是企业网站还是电商网站，在着陆页的设计上也越来越实在，开始越来越多地关注用户最在意的问题，着力提升着陆页的转化率。通过市场调研和测试，着陆页的设计也越来越友好，灵活的原创近乎随处可见。

15、创意十足的视差设计

视差滚动依然在流行，滚动毕竟是最省心最自由地交互方式，视差滚动本身能够促进用户持续不断地交互，这也使得多样而富有创意的视差在网页和移动端APP中大规模地使用。

16、用视频内容促销

视频内容的普及是我们大家都有目共睹的大趋势，这也使得视频内容成了营销和运营人员的最爱，越来越多的视频促销内容开始出现。视频内容可以结合视觉和听觉对用户产生作用，而动画和平面设计的内容也同样可以适当地融入其中，更好地服务于产品，提升转化率。

17、UX的游戏化设计

游戏化设计对于产品体验的提升是明显的。不仅仅提升了产品的娱乐性，而且让产品更贴合用户需求和人性。挑战，奖励，积分，成就系统，徽章，排行榜，社交媒体机制，等等等等，所有的这些都提升了用户的参与度，对于UX的提升是毋庸置疑的。

18、卡片式布局元素

卡片式布局的优势在于它的自由度，它足以承载各种类型不同功能的元素和模块，拥有着统一的美学特征和易于阅读、易于交互的特点，为更为协调的设计作出了不小的贡献。

19、风格化的几何元素

几何元素有着不俗的装饰性，而且它可以和不同的设计风格搭配起来，让整体设计的视觉饱满度和体验有所提升，不同的几何元素还能营造不同的情绪和氛围。

20、实验性的配色方案

设计师对于色彩的探索从未停止。实验性的配色方案通常都不会太完美，但是由于色彩本身会传递出不同类型的情绪，实验性的配色通常由于其独特性，而能够传递出更为强烈的情绪和独特的体验。

21、不再使用乱数假文

现如今对于UI设计的要求越来越高了，以往在设计阶段，设计师会用乱数假文（Lorem Ipsum）来填充内容，但是现在大家已经开始有意识地使用真实的内容来填充界面，确保视觉到内容都有真实感。

结语

毫无疑问2017年是UI设计多样化的一年，各种各样的设计趋势层出不穷，这一点足见设计师们的探索之心。漂亮的视觉，舒适的体验，流畅的动效，自然的声音，如今的UI设计的要求真的是越来越高。在2018年，上面所提到的21个趋势当中有一些可能会被淘汰，但是绝大多数应该会得到保留。为了更好的设计，世界范围内的设计师都会不遗余力地前进和发现。

【这些趋势好文，让你的设计走到用户心里】

1. 《这3种独特的趋势，能让网页设计增色不少》
2. 《2017年最后几个月，网页设计师值得注意的趋势》
3. 《这3个流行趋势虽然好，但依然要注意这些细节》
4. 《看了那么多的设计趋势，你知道怎么落地实践吗？》

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：http://hao.uisdc.com