2018年过半，为你总结了这13个主要的设计趋势

2018年时过半，过过去6个月观察，其实我们已经可以于2018年个 UI 领域设计趋势有一个更为清晰的判断，也是推出篇文章比合理的时机。今天，我们一来回顾一下，去的半年当中，UI设计领域当中的一流行趋势。

1. 全屏背景图片

今的屏背确是最泛的设计趋势之一，无论是使用照还是经特别渲染的视化效果，均是在此范围以内。种方法无论是在视上，还是在情绪上非常的吸引人。此外，它能够让所有的局元素具有强烈的整感。

是 Big City Guide 的着陆页设计，背采用的是柏林当地的著名建筑，使得整显得优雅，信息量也够富。关个网站设计，以在里更：

而个室内设计工室的首页，也同样采用屏的设计，大量的原创建模而构建出来的彩场所营造的背，很的凸显工室身的质和特点。

高清大图在网页中要何运用？篇文章分析的很清楚：

2. 多个可交互图层

UI设师一直探索各种实验性的设，如今就越越多的设师始网页中加入多叠加的可交互的图层，让用户可以同网页行复杂的交互。相比之下，单纯的滚动浏览就显得很原始了。

这拯救海洋主题的网站就这样的。当轮播图变化的时候，其他的两交互层也会随之变化。另外，这种设当中一分支，就图片填充式排版，图片甚至视频被作纹理素填充到文本当中，的静态的，的会随交互移动。

3. 自定义插画

自义插画一直广泛存于网页 UI设当中，不过如今的网页 UI 中的自义插画会加熟，可用性、直观性、隐喻信息传达，加突出的特点。图片插画本身会提升整设的可访问性，插画文本的互相支撑，让整设加统一。

自定义插画让网站的价值感得到增强，不仅在美学上赋予网站和内容的一致感，而且在内容上显得更加突出。下面篇文章，总结4个技巧：

就这副插画，它文章《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，就够为户供个性的健康的食谱。因为每个户的情况各相同，有的需要健身，有的需要增重，有的需要减肥，同的人同需求之必然需要全个性的定制，而这个应就是为了应对这样的需求，来为户供真正可靠的、可信的务。

想要个性化的计，先了解一下为何如此之多的计都是千篇一律的：

结语

如今的设计趋势呈现一种多样性，这得益于设计师的探索精神，而同时，同的趋势之间还呈现一种在的联性，这很大程上源于设计师对于体验和创意的懈追求。将设计趋势总结来，另外一个好处在于，为正在设计的你供设计思路。