经过大半年的观察，综合各大网站设计，51特地为大家总结了2018年UI设计的13个流行趋势。
01全屏大图背景运用超大的全屏背景图片在网页设计中已经不算太新鲜的东西了。但最近这一方法的运用有了新的形式：设计师开始逐渐将其他元素从整个首屏设计中剥离，让充当背景图的图片展示性更强，从而将屏幕填充的更加彻底。
这种方式使得整个界面除了背景大图外，不会添加独立区域或者其他元素，所有的前景元素都置于背景图之中，视觉上的一体性和协调性更强。但由于缺乏其他元素，所以整个背景大图承担了“门面C位”作用，选择图片上必须足够夺人眼球、契合主题。
上图是Big City Guide 的登录页面设计。背景图采用的是柏林当地的建筑物，整体没有独立的导航页和其他元素，页面设计统一协调，展示内容的信息量也足够丰富。
这个网页首页也是引用了一张背景图，导航等其他功能都隐藏在大图背景中，通过汉堡图标和其他方式来吸引用户。
这样的设计方法也有一定的难度，比如在处理前景元素和背景图之间视觉上的冲突关系，和背景图在识别性和对比度上的选择问题，在页面其他小元素如引导箭头、线条等其他元素上也需要仔细斟酌。
02多个可交互图层叠加用户已经不满足单纯滚动鼠标来浏览网页的传统方式了。越来越多设计师尝试将多个可交互图层进行叠加在一个页面上，而达到更为复杂的交互效果。
这是拯救海洋为主题的网页设计，当网站图片变化时，其他两个交互图层也会发生变化。同时，当图片或者视频作为背景或素材填充到文本时，也会随着交互方式进行相应的变化。
03自定义插画找一张合适的背景图是漫长且痛苦的过程，因此很多网页中都会加入自定义的插画。这一做法也是UI设计中的一贯手法，很多时候都有隐隐代替插画的可能。相较于图片，插画的可控性更强，更能传递出设计师的想法。
而如今的UI设计中自定义插画更加成熟，具有更强的可用性、直观性、隐喻性，更能突出设计对象的特点。
利用插画充分说明品牌的优势，非常传神直观，而这就是图片代替不了的。
04故事和角色引入故事版在选择的网页、UI设计中并不少见。如上图就是运用自定义动画的一个故事版设计，借助插画将品牌特色叙述的更加鲜明，同时也让页面设计生动有趣。除了加入故事版的元素，很多页面也会插入专门设计的角色或者吉祥物。拟人化的形象能让用户的想象空间更大，同时赋予界面交互以生命力，保持用户持续的注意力，成为整个用户体验中无法忽略的重要元素，提升整体的参与度。
这就是电子邮件服务供应商 Mailchimp 的首页，通过品牌吉祥物——黑猩猩 Freddie 来扮演各种角色，演绎各故事。而这一形象也让 Mailchimp的用户粘性和用户体验增强了不少。
05分屏式设计分屏式设计也是最近UI设计的流行趋势。通过分屏可以呈现两方面的信息且互不打扰，此外还能针对不同尺寸的屏幕作出响应。无论在分屏设计的好处在于它本身可以很好地呈现两方面的信息，并且能够针对不同尺寸的屏幕进行响应。
现在分屏式设计在细节和处理方式上有了新的形式。保留了分屏式设计基本的思路和精神，在将屏幕分为两部分时采用了不同的分割形式来呈现信息。
上面两张图是对角线分屏的形式， Cap GunCup Creative 运用黑白两色的配色，而Reach Digital 分屏则采用对比强烈的黄白配色。
Weima这个网站则是采用传统的左右分屏模式，运用黑白配色，但分割比例为3:1,更加生动有趣。
分屏式设计的好处在于它可以应对多种多样的设计。无论是小型网站，还是大量的内容，分屏的设计都可以让用户参与进来。分屏式设计为用户提供了两种不同的选择，不难理解，功能也很直观。
06更大胆的排版看腻了千篇一律的国际式风格排版和扁平化的设计风格，现在的UI设计师更愿意采用风格较为大胆的排版。但从UX的角度来说，这些排版更注重版面的可读性和易读性，排班的层次和字体的选择都是设计师在意的地方。
如Big City Guide 这个网页设计中，大胆、突破的字体是整个页面中最亮眼的视觉元素。通过精细裁切和排版让文字与北京元素很好的融合，保留可读性，整体充满协调感和紧密的设计感。
07无按钮的UI界面虽然很多界面依然保留着按钮设计，但有越来越多的概念性UI方案中开始使用无按钮的UI了。这种设计抛弃传统的点击，采用手势驱动丰富了交互方式，同时也节省了页面空间。
上图就是一款没有加入任何按钮的UI界面，可以充分展示图表、数据等信息。
08更具表现力的色彩道理类似更大胆的排版。关于配色一直是设计师讨论的焦点，而现在UI设计师逐渐从微妙的配色过渡到活泼、大胆的配色上。如何让自己的方案配色更具表现力、更出彩也是UI设计师目前追逐的。
Mito Swim Wear的网页采用鲜亮的橘色，让人一下子联想到炎热的夏天。色彩夺人眼球的同时也非常契合网站的业务。
这是一个音乐新闻类的软件，整个界面用的都是饱和度极高的撞色，色彩上就能迅速吸引到用户。
09动效的加入之前很多UI设计师都会觉得界面中加入动效会让界面看上去复杂，没有必要。但目前发现，动效能够增强用户体验，已经成为UI设计中不可或缺的一部分。动效和微交互搭配在一起，可以快速地为用户建立反馈，使得导航和交互变得更加直观。
这是一个用来帮助用户跟踪每天的消费，管理收支的 APP 的概念设计。采用深色系的配色和高识别度的字体，让整个设计的可读性更强也更加沉稳，动效的加入则让整个 APP 更加富有生命力，让用户感觉上更加舒适。
10超大背景图的登陆页面登录页往往是一个网站的第一印象，如何利用登录页面抓住用户的眼球成了UI设计师的设计重点。而登录页面上的超大背景图能够非常瞩目，造成极大的视觉冲击力；在情绪和氛围的传递上，也会非常突出。
这里归纳下登录页面超大背景图的作用：
吸引用户的注意力；
直观的传递信息；
强化风格；
创建主题，营造氛围；
展示核心的特征，凸显项目属性。
这是Tasty Burger 的登录页面设计。简约的布局之下，搭配带有动效的汉堡图片，整齐有序排列的汉堡和更方便快捷的定制页面也能快速吸用户注意。
11海报样式越来越多网页会设计成海报样式。因为海报设计往往具有超高的视觉吸引力，而运用海报样式的网页和APP设计也是为了吸引用户注意，强调视角、排版和气氛。
依然是Tasty Burger 的登录页面，这就是典型的海报样式效果：通过富有表现力的字体来强化视觉，用令人垂涎的配色和美食来营造情感吸引力，凸显视觉主体的布局让用户不会错过关键的信息。
12低透明度色彩叠加在图片和视频上叠加色彩也不是什么新鲜的玩法，它是非常受欢迎的设计手法和趋势。这种设计技法让设计师可以更轻松地创建层次分明的效果，可以通过色彩叠加来创建更为统一的视觉效果，控制对比度，营造氛围和情绪。
这种设计当中，透明度的控制是极为关键的一个步骤。通常，设计师不会让色彩叠加层透明度太低，这样用户就可以一目了然地看到背景的图片信息。此外低透明度让背景以纹理的形式呈现，更加富有深度，创造出吸引人的视觉效果。但这种方法不适合传递背景信息，因为低透明度确实很难让背景的细节清晰地传达出来。
上述两张图片中，背景图片往往作为装饰性元素存在，图片虽然都提供了一些附加的信息，但是这些信息都不是关键，它们更多的是强化视觉。
13个性化用户体验千篇一律的UI界面让产品的雷同性越来越大。而现在越来越多的UI设计师更关注用户体验设计，为用户提供更多的功能，满足他们的个人需求。
Perfect Recipe 是个健康类的 APP，能够为用户提供个性化的健康的食谱。因为每个用户的情况各不相同，有的需要健身，有的需要增重，有的需要减肥，不同的人不同需求之下必然需要完全个性化的定制，而这个应用就是为了应对这样的需求，来为用户提供真正可靠的、可信的服务。
跟随设计趋势是一个非常有趣的事情，它可以让你的设计保持新鲜，让你的设计在激烈的竞争中脱颖而出。今年大半年的UI设计趋势的总结希望能为大家提供新的设计思路。