UI 设计的趋势是变化非常快的，有的时候我们的脚步总是可能慢了一拍。 随着 2016 年接近尾声，Lin. 为大家整理了外网大牛 Jamie Leeson 总结的 2017 年 UI 设计的 10 个重要的趋势。
01. 沉浸式的全屏视频
Campos Coffee的网站使用简单的排版结合动态全屏视频制作了一个简单但表现有力的内容。
在UI设计的世界，图像画面仍然是用来快速抓住用户的注意力的好方法。 视觉被认为是所有人类感觉中最强烈的。大的单幅图像能够以更有效、简洁、快速地方式总结语音的讯息和音调。
图像长期以来一直是 UI 和网页设计的主要内容，它的成功逐渐为视频铺平了道路。 我们看到视频在界面设计中被越来越多的使用到。 传统摄影是静态的，视频是动态的。 视频是吸引用户眼球和讲故事的绝佳手段。
因此可以确定的是，2017 年及以后的网页和 UI 设计将会充满内容丰富、互动更强的全屏视频作为讲故事的主要手段。
LV 官网也曾采取大幅视频画面作为主页背景。
荷兰航空公司 KLM 的杂志 iFly50 依赖于更加风格化的方法，使用双重曝光视频来吸引用户，吸引人们继续浏览网页。
视频和大而美观的全屏图像是吸引用户和快速确立网页基调的有效方式。 这两种形式在不同场景的应用中是高度通用的，特别适合作为背景排版使用的。
02. 可无限滚动的网页
National Geographic 的网站是个好范例，因为它几乎涵盖了本文提到的每一点。
滚动的网页当然不是个多新颖的交互方式。然而，我们越来越多地看到的是更多在桌面设备和更大屏幕的设备上使用了长篇幅滚动网页来进行信息展现。
由于用户觉得在小屏幕滑动翻页更便于查找内容，更多的设计人员在最近几年开始在大屏幕上同样地使用长篇幅滚动网页的界面。
著名的 Fastcompany 网站的文章浏览页同样采取了无限滚动的交互方式。
这允许用户可以以更流畅更快速地浏览大量的信息，而不会因为要切换页面而被干扰。 它是一个能够广泛适用的方式，可以用在所有设备和内容媒体上，不管是长篇新闻和新闻故事，还是登陆页面和交互体验，它都可以适用：
国家地理杂志将地图，视频，图像和动画结合在一起，创造了一种单一，流畅，身临其境且丰富多彩的浏览体验，
瀑布流网页以线性的方式引导用户浏览网页内容。 它是一个广泛适用的方式，非常适合创建沉浸式、无缝、长篇幅的内容。不管用户使用的是什么设备，它都可以给用户营造一个流畅的体验。
03.渐变色彩
Spotify 是大品牌尝试大胆使用颜色和渐变的一个很好的例子。
2013 年，扁平化迅速在各类设计中流行开来，扁平化让设计师们在设计中使用更多的冷色调和删除多余的元素。 尽管它本身有一些缺点，但平面设计是一门实用哲学，扁平化今天仍然具有价值。
扁平化要求简化 UI 中的核心功能性元素，从而获得更简洁高效的用户体验。
使用扁平化是为了获得更好的用户体验。但是不能否认的是，扁平化风格的迅速流行造成很多设计师设计出的网页都极其相似的现象。 来自世界各地的品牌和设计师们都跟风涌入扁平化的浪潮中，导致很多设计都缺乏个性，非常相似。
之前 Lin. 在《2017新色彩来了，不管你接受与否》中总结过：
当极简、性冷淡的设计风格持续应用好几年后，人们按捺不住喜新厌旧的本性：在 2016 年，追求视觉丰富度的设计语言又开始回归。而常见手法之一，就是把之前平和的舒缓配色转变为更具视觉冲击力的高饱和度色彩，采用渐变、内发光、几何图形等元素高效率地抓住用户的眼球。相比起纯粹的拟物化设计或者扁平化设计，简洁的图形+高饱和度的渐变色无疑能较好地兼顾设计的便利度和视觉的分量感。
如今，更多的品牌和设计师开始强调更加个性的扁平化，尝试鲜亮的颜色和渐变，不再像以前一样一味的强调简单和冷色调。 渐变和鲜艳的颜色越来越多在传统的 UI 和网页设计中，备受争议的新版 Instagram 就在品牌的重新设计中就用到了鲜艳的颜色和渐变。 无论这是否符合你的品味，我们都应期望看到更多的使用渐变和鲜亮的颜色将推动 UI 和网页更具个性：
Spotify不断变化的渐变创造了一种友好和有趣的美学。
著名科技网站 The Verge 的最新品牌形象设计也采取了鲜艳的渐变色彩。
鲜亮的颜色和渐变能够将更多的能量、温暖和活力注入到一个产品中，使其脱颖而出。 大胆的去尝试使用不同的颜色，但一定要确保他们和你想要表达的内容和谐一致，不能冲突。 但是这样做之前一定要深思熟虑，避免给人们造成视觉的不适。
04. 插画
Dropbox是具有强烈插画风格品牌的很好的一个例子。 这种粗犷、手绘的风格让人觉得轻松愉悦，增加了人们对他们产品的信任感。
插画能够给人一种别具一格的感觉，这是普通图片很难实现的。 插画也更能贴合品牌特质的定制插画能够使公司更加细致的创建一个真正贴合他们的个性和语调的视觉语言 - 这显然有助于给用户营造可靠和信任的感觉。
插画的表现形式也很多种。 一些品牌可能选择用平滑的线条插画，这种插画能够表现出一种锐利和高雅的感觉；而其他品牌可能选择更随意的手绘风格，这种风格的插画给用户一种活泼俏皮的感觉。 插画给创意提供更多的途径，而当插画与摄影和排版结合时更是如此。
PayPlan 的清新、温和的说插画风格加上他们的审美帮助他们将品牌定位为友好和关怀，吸引用户的需求。
插画定制可以创造个性和可靠性，这两点对于创造和客户长期有效的连接是至关重要的。 插画可广泛应用在 APP 上，并且与本文讨论的其他 UI 设计流行趋势都可以完美结合。
05.突破网格限制
Red Collar Digital 的网页是突破网格限制的UI的一个很好的例子.
网格一直被设计师所依赖，这个方法给那些需要确保一致性、平衡、节奏和顺序的设计提供了基础。 它是 UI 设计中的一个重要工具，因为他们为用户提供了最熟悉的 UI 体验，使他们能够以一种自然的方式直观地浏览网站或 APP。
然而，它也限制了设计者的创造性选择。 为了创造突破传统的界面体验，许多网页和 UI 设计师正在通过“打破网格”来试验布局。
通过远离网格和死板的基线结构，设计师正在创建更有趣和实验性的网站，APP 和界面。 它开辟了一个全新的创新道路，允许设计师通过使用分层、深度、动效和明显的视觉焦点以实现实现真正的表达。
像 Like Red Collar Digital，建筑师 Sergey Makhno 用两层排版、图像甚至视频创造了一个更宽松和自由流动的的体验。
打破网格提供了更多的创新选择。 它的灵活性可以产生流动性和自由度，这是在用网格设计时很难有的。 然而，在你这样做的时候一定要考虑周全。 所有的界面首先必须是用户友好的，否则可能会使一些用户非常困惑。 如果是响应式设计你还需要考虑如何在让它在较小的屏幕上也有良好的效果。
06. 视差
Epicurrence 的网站选择非常明显的视差，创造一个快速移动和沉浸式的体验，反映其推广的事件。
将视差与突破网格和滚动翻页结合起来时非常好的做法，这样在传统的排版中很少见。 简而言之，视差是一种背景移动速度比前景更慢的效果，当用户滚动时给出深度和动态感。 这不是一个新的方法，但正在被很多品牌尝试。
Bang＆Olufsen，高档音响产品制造商，选择更微妙、更精致的视差来体现他们的时尚和高端的品牌身份。
视差的使用要非常谨慎，因为它可以很容易变得让客户难以忍受。 但是，当使用恰当时，它提供了一种愉悦的动态感受，令内容在页面向上滚动时无缝切换并且吸引用户视线。 将它与图像、文字和不太严谨的布局结合使用，可以创建流畅的分层内容。
07. 卡片
上面的例子显示了如何实现卡以在较大屏幕UI上工作，从可滚动菜单卡到分层定价模型的选项。
卡片的模式大家都非常熟悉了。据 Google 称，2015年移动设备超越台式机成为浏览网页最流行的平台，因此越来越多的设计师正在模糊移动和桌面 UI 之间的界限，创造更加无缝的用户体验。Facebook，Twitter，Netflix 和 Pinterest 这些著名的平台都选择了使用卡片的形式。
卡片提供了一个有效的解决方案，允许用户快速浏览可用的内容并迅速找到他们需要的信息。
卡片是组织短片短信息的好方法，它们的灵活性在组织和消费内容的较小屏幕上是无价的。 卡片是一种可以显示文字、图像、视频和其间所有内容的解决方案，同时适配不同的屏幕大小。 卡片提供无尽的适用性，允许设计师翻转、旋转、堆叠和过滤他们的所有方式的 UX 功能 - 更多的功能将通过微交互来解释。
08. 微互动
上图是如何实现微交互以显示菜单 UI 中的状态变化的一个很好的例子。
通常小屏幕上的动画形式的微交互在 UI 和 UX 设计中起着至关重要的作用，尤其是在移动端和小屏幕设备上。
从用户体验的角度来看，微交互不仅是小的、有趣的屏幕上的动画或转换，同时也是对于用户及其动作的视觉反馈的形式。微交互让用户知道与 UI 交互时正在发生什么，已经发生了什么，以及将要发生什么。
聪明的设计师通过将功能以有趣的方式实现来让用户感到愉悦。从有趣的加载动画，到顺滑的图标转换，有效的微互动能够同时起到吸引和明确通知用户的作用。
该示例清楚地向用户指示他们的动作已经实现，因为它们在可用状态之间切换。
微动效提供有用的人性化反馈，以一种体贴并且有趣的方式让用户知道他们在做什么和正在发生什么。 微动效可以将简单平凡的过程变得有趣，以及提供关键的反馈。
更多微互动的例子可以参看设计夹的这篇文章：《看Google设计师设计的细腻动效》
09. 字体排版
MailChimp 使用混合的字体、颜色和不透明度创建一个俏皮的圣诞节启发的文字排版介绍他们的 2016 年假日提示营销指南。
随着越来越多的网络字体服务商（谷歌字体，Typekit）提供免费或便宜好用的字体系列，我们可以期望看到更多的品牌使用大胆和美丽的字体代替传统经典的字体。
正如我们在 2016 年看到的，网页排版将从以传统的图形和编辑为中心的设计转向试验更具创意的字体排版设计。 将文字排版与图像、视频、插图、颜色和非常规布局结合起来，将能更有效地创造独特的用户体验。
10. 导航栏体验
Adult Swim 的网页导航达到了一个全新的水平。
导航和菜单一直是设计师热烈争论的话题。随着移动和桌面 UI 之间的界限逐渐模糊，以及越来越多地使用汉堡包菜单（也叫做左滑菜单 )在更大屏幕的UI上，设计菜单和导航有了更多的创造性空间。
以汉堡菜单为例，他们提供的是在设计和构建响应式网站时的一致性，您可以（本质上）设计一个单一的导航结构在所有设备上扩展和工作。这里更有趣的是，使用汉堡菜单提供的创意自由的数量。
菜单隐藏在画布之外，设计师可以给自己整个视口窗口来创建一个创造性的解决方案。天空的创造性可能性的极限，但一如既往，导航服务在用户体验中的扮演着一个重要角色，所以请确保它永远不会形成的功能 ---- 用户需要能够快速找到您的内容。
并不是所有的设计师都同意在桌面应用程序（或在所有）使用汉堡菜单。但这个话题是值得讨论的，我们也相信 2017 年及以后会有更多的人尝试设计更好的导航和菜单。
Adult Swim 网站的特点是移动缩略图的三维网格，其中有排版和颜色变化的悬停状态
导航不再局限于排列在窗口顶部的一排单行链接，而且肯定有更多的创意解决方案可以帮助用户找到他们。虽然创意和美学很重要，但设计师应该始终优先考虑可用性，确保用户能够快速轻松地找到所需的内容，而不是被过度的设计或花哨的解决方案混淆。
结论
与所有流行趋势的本质一样，UI 的趋势也是不断地来来去去，但是也会有一些会经过实践的验证与沉淀，逐渐变成设计的基本准则。我在这里讨论的所有趋势或预测不一定就能和你目前的实际工作相关; 作为一个设计师，它是由你自己的判断来决定什么是正确的。而且很多情况下，大部分设计师的创作将被客户和项目改变。
然而，在这个创意产业中变化以闪电的速度发生，所以追赶正在发生的改变是重要的。 同时，伟大的 UX 也将伴随着新技术的出现和发展而改变。这是一个不断变化的领域，需要我们持之以恒的学习和创新。
本文编译：Lin.
原文链接：http://www.creativebloq.com/features/10-top-ui-trends-for-2017
推荐阅读：
遇见设计夹·预见更优秀的自己
☟点击阅读原文 获取官网深度学习教程资源
原创文章，作者：Tinadmin，如若转载，请注明出处：https://www.iamue.com/33208/
