2018年上半年UI领域主要的13个设计趋势

 

2018年时间过半，经过过去的6个月的观察，其实咱们已经能够对于2018年的整个UI领域的设计趋势有了一个更为清晰的判断。

也是推出这篇文章比较合理的时机。下面咱们就一块儿来回顾一下，过去的半年当中，UI设计领域当中的一些流行趋势。

 

1. 全屏背景图片

现在的全屏背景确实是最普遍的设计趋势之一，不管是使用照片仍是通过特别渲染的可视化效果，均是在此范围之内。

这种方法不管是在视觉上，仍是在情绪上都很是的吸引人。此外，它可以让全部的布局元素具备强烈的总体感。

这是 Big City Guide 的着陆页设计，背景采用的是柏林当地的著名建筑，使得总体显得优雅，信息量也足够丰富。

而这个室内设计工做室的首页，也一样采用了全屏的设计，大量的原建立模而构建出来的彩色场景所营造的背景，很好的凸显了工做室自己的性质和特色。

 

2. 多个可交互图层

UI设计师一直在探索各类实验性的设计，而现在就有愈来愈多的设计师开始在网页中加入多个叠加的可交互的图层，让用户能够同网页进行复杂的交互。相比之下，单纯的滚动浏览就显得很原始了。

这个拯救海洋为主题的网站就是这样作的。当轮播图变化的时候，其余的两个交互层也会随之而变化。

另外，这种设计当中有一个分支，就是图片填充式排版，图片甚至视频被做为纹理和素材填充到文本当中，有的是静态的，有的会随着交互而移动。

 

3. 自定义插画

自定义插画一直普遍存在于网页和 UI设计当中，不过现在的网页和 UI 中的自定义插画会更加成熟，在可用性、直观性、隐喻和信息传达上，有着更加突出的特色。

图片和插画自己会提高整个设计的可访问性，插画和文本的互相支撑，让整个设计更加统一。

自定义插画让网站的价值感获得了加强，不只在美学上赋予网站和内容的一致感，并且在内容上显得更加突出。

就像这副插画，它是为文章《UI设计当中的3C要素：色彩，对比和内容》所设计的。

这篇文章中的三个关键词分辨是色彩、对比度和内容，而这个是选取颜色做为核心的语义元素，而且很是贴合主题地选取了绘画做为插画内容的主体。

 

4. 故事和角色设计

愈来愈多的网站和 APP 开始试图将专门的角色/吉祥物融入到整个设计当中来，借助视觉化的插画、视频、文本甚至图标和细节来展现故事。

营造氛围，传递信息，表达情绪，采用更加贴合当前语境的方式，将内容形象生动地传达给用户。

这是故事和角色的优点所在。拟人化的形象可以更容易让用户产生联想，和现实世界勾连起来，承载情绪。在设计上，角色的设计也可以在视觉上，让页面更加活泼。

这个案例是 Tubik Studio 的插画师为 Florence APP 所设计的一套自定义插画，在这个 APP 当中，英国的护理从业者可以找到薪资更高的，更合理的业务。

插画让角色形象拥有了故事般的呈现，也阐明了应用的功能和优势，搭配说明，可以更好地让用户明白功能和服务的内在价值。

 

5. 分屏式设计

分屏式设计自己很早就出现过，只不过不如最近出现的这么频繁，开始普遍地出如今不一样的设计做品当中。

首先，分屏式设计能够很好地契合当前的响应式设计，另外一方面，它自己能够在一致的设计下承载不一样的内容，设计师能够在不一样的色彩和布局之下，探索各类可能性。

经过分屏式设计，设计师可以更好地呈现网页内容自己的二元性。

这个着陆页是为一个约会应用所设计的，采用了倾斜式的分屏设计，视觉元素和文本经过对角线分割开来，呼应之下相互依存，又保持着一致性。

 

6. 大胆的排版

大胆而引人瞩目的排版一样在现在的网页和 APP 当中普遍地存在，甚至于在绝大多数的状况下，它是做为最关键的视觉设计元素而存在。

设计师会很是在乎这些文本和排版的可读性和易读性，排版的层次结构和字体的选择，始终都是每一个 UI设计师最在乎的问题。

一样的，上面提到过的 Big City Guide 这个案例当中，文本字体排版被做为整个视觉中最引人瞩目的部分而拿出来。

精细的裁切和大胆的选取让文本和背景元素很好地融入到一块儿，充满协调感和紧密的设计感。

Upper 这个应用程序的设计一样是简约的，其中并无使用太过于独特的插画或者图形，相反，文字排版在整个 APP 的设计当中，发挥着举足轻重的做用。

 

7. 无按钮UI

虽然按钮仍然是目前 UI设计中最重要的元素之一，可是咱们发现愈来愈多的设计开始在实验性的 UI 交互案例当中，开始使用无按钮的UI了。

这种设计在节省空间的同时，采用了手势驱动式的交互，而不是点击。

这是咱们的团队所制做的一个百科全书类的 APP 的概念设计，提供各类交互式的信息图表，数据和交互都采用滑动来实现的，没有加入任何按钮。

不过，绝大多数的状况下，设计师仍是要倚靠按钮来进行设计的。

 

8. 活泼大胆的色彩

配色一样是设计师最为在乎的事情之一。现现在，UI设计师从以前所追求的微妙的配色，彻底过渡到对于活泼大胆的色调的追求上来了。

不管是深色系配色仍是浅色系配色，总会试图让配色方案尽可能出彩。愈来愈多的设计师开始将传统的技术和创新的配色组合到一块儿，试图营造出更加富有表现力的视觉体验。

这是一款音乐新闻类应用的的概念设计，这款配色极为鲜亮的应用当中，囊括了包括歌词、音乐新闻和音乐测试等新鲜有趣的内容。

整个 APP 给人很强的原创感，这很大程度上得益于配色和几何图形的运用。当用户在屏幕上滑动浏览的时候，图形、色彩和图标的变化，会很是抓人眼球。

 

9. 强化参与度的UI动画

UI界面动效是目前当之无愧的热点。虽然仍然有许多设计师会认为动效的必要性不强，动画可能会让界面变的更加复杂。

可是就目前来看，动效确实对于整个交互体验有明显的提高，甚至于逐渐有成为设计中不可或缺的一部分的趋势。

所以，设计师和开发者开始通力协做，试图找到在现代网页中实现有效又体验优异的动效的方法。

动效和微交互搭配在一块儿，能够快速地为用户创建反馈，使得导航和交互变得更加直观。全部的这些，都可以强化 UI 的参与度。

这是一个用来帮助用户跟踪天天的消费，管理收支的 APP 的概念设计。

采用深色系的配色和高识别度的字体，让整个设计的可读性更强也更加沉稳，动效的加入则让整个 APP 更加富有生命力，让用户感受上更加温馨。

 

10. 带有超大图片背景的着陆页

着陆页是许多网站的重要组成部分，使用超大背景图片可以让着陆页更加引人瞩目，创造出更加富有特点的视觉。

在情绪和氛围的传递上，超大图片的功能会显得很是的突出，在着陆页这样的页面当中，效果更加拔群。着陆页当红的超大图片同时能够知足多个需求：

吸引用户的注意力

直观的传递信息

强化风格

建立主题，营造氛围

展现核心的特征，凸显项目属性

这就是为何现在设计师会如此的青睐这种着陆页的设计。

下面是名为 HeartBeat 的舞蹈学院的着陆页设计。简约的布局之下，搭配带有动效的舞蹈人物背景，经过舞者的超大图片来吸引对舞蹈感兴趣的年轻人的兴趣，营造情感吸引力。

 

11. 海报样式的页面

海报的设计始终都是很是强调视觉吸引力的，海报式的网页和 APP 的视觉设计，一样也是强调视角、排版和睦氛。

选择正确的图片、时尚的排版，让布局和风格更加抓人眼球，从而达到吸引用户的目的。

Tasty Burger 这个应用程序的着陆页就是如此：经过富有表现力的字体来强化视觉，用使人垂涎的配色和美食来营造情感吸引力，凸显视觉主体的布局让用户不会错过关键的信息。

 

12. 实验性的配色和布局

实验性的设计历来都没有消失过，设计师努力在平庸和广泛的设计当中探索新鲜原创的配色和大相径庭的布局。

由于，无论怎么讲，有效的实验性配色不只仅是由于它有着创造力，这种配色经常可以产生使人惊讶的效果，在一样的配色理论和色彩心理学中，探索出真正有趣的组合。

这个名为 The Gourmet 的网站，是一个销售草药和香料的电商网站，用户界面的布局和配色都很是的创新，这种实验性的布局在动效的加持下，营造出和其余网站大相径庭的时尚感。

 

13. 个性化的用户体验

咱们能在过去的6个月当中看到愈来愈多，逐渐成熟的个性化用户体验设计 ，设计师开始为用户提供更多的功能，这些功能都是基于用户的我的需求，提供足够宽广的自定义的空间。

Perfect Recipe 这个健康类的 APP，就可以为用户提供个性化的健康的食谱。由于每一个用户的状况各不相同。

有的须要健身，有的须要增重，有的须要减肥，不一样的人不一样需求之下必然须要彻底个性化的定制，而这个应用就是为了应对这样的需求，来为用户提供真正可靠的、可信的服务。

 

结语

现在的设计趋势呈现出一种多样性，这得益于设计师的探索精神，而同时，不一样的趋势之间还呈现出一种内在的关联性。

这很大程度上源于设计师对于体验和创意的不懈追求。将设计趋势总结出来，另一个好处在于，为正在设计的你提供设计思路。

那么若是你如今学UI设计还比较迷茫或者想打算学好UI设计，请点击左下方阅读原文学习更多UI设计知识。

 

编辑：千锋HTML5

做者：Tubik Studio

译者：优设网-陈子木