火星网校
【重磅出击】2017年UI设计的10大趋势！
发布时间：2018-11-17 19:57:24
网页设计和UI设计的趋势是变化非常快的，有的时候我们很难跟得上这不断变化的趋势和发展。 随着2016年接近尾声，我们预测了2017年UI设计的10个最重要的趋势！
01. Immersive, full-screen video 沉浸式的全屏视频
Campos Coffee的网站使用简单的排版结合动态全屏视频制作了一个简单但有力的内容
古语有云：“一幅画顶一千字”，这个说法在现在依然是有效的。在UI设计的世界，图像画面仍然是一个很好的方式来快速抓住用户的注意力。 视觉被认为是所有人类感觉中最强的，并且大的单幅图像能够以更有效、简洁、快速地方式总结语音的讯息和音调。
图像长期以来一直是UI和网页设计的主要内容，它的成功逐渐为视频铺平了道路。 我们看到视频在数字设计中被越来越多的使用到。 传统摄影是静态的，视频是动态的。 视频是吸引用户眼球和讲故事的绝佳手段。
传统的图像不会很快消失，但有一件事是肯定的 ----2017年及以后的网页和UI设计将会充满内容丰富、互动更强的全屏视频作为讲故事的主要手段。
荷兰航空公司KLM的杂志iFly50依赖于更加风格化的方法，使用双重曝光视频来吸引用户，吸引人们继续浏览网页
视频和大的、美观的全屏图像是吸引用户和快速确立网页基调的有效方式。 这两种形式在其应用中是高度通用的，特别适合作为背景排版使用的。
02. Long form content and scrolling 长篇幅滚动翻页网页
National Geographic的网站是主页页面的内容是一个很好的例子，因为它几乎涵盖了这篇文章中提到的每一点
滚动的网页绝不是一种新的方式，也绝对不是一个基本功能的“趋势” 用于浏览Web和应用程序。然而，我们越来越多地看到的是更多在桌面设备和更大屏幕的设备上使用了长篇幅滚动网页来进行信息展现。
在过去几年中，由于用户觉得在较小屏幕设备上滑动翻页更便于查找内容，更多的设计人员开始在较大屏幕上使用长篇幅滚动网页的界面。
这允许用户可以以更流畅的动作来非常快速地浏览大量的信息，而不会因为要切换页面而被干扰。 它是一个能够广泛适用的方式，可以用在所有设备和内容媒体上，不管是长篇新闻和新闻故事，还是登陆页面和交互体验，它都可以适用。
国家地理杂志将地图，视频，图像和动画结合在一起，创造了一种单一，流畅，身临其境且丰富多彩的浏览体验，瀑布流网页是一个非常好的网页浏览方式，它以线性的方式引导用户浏览网页内容。 它是一个广泛适用的方式，非常适合创建沉浸式、无缝、长篇幅的内容。不管用户使用的是什么设备，它都可以让用户有一个流畅的体验。
03. Gradients and vivid colours 渐变和鲜艳的颜色
Spotify是大品牌尝试大胆使用颜色和渐变的一个很好的例子
2013年，扁平化迅速在各类设计中流行开来，扁平化让设计师们在设计中使用更多的冷色调和删除多余的元素。 尽管它本身有一些缺点，但平面设计是一门实用哲学，扁平化今天仍然具有价值。
扁平化要求简化UI中的核心功能性元素，从而获得更简洁高效的用户体验。
使用扁平化是为了获得更好的用户体验，但是扁平化的迅速流行造成很多设计师设计出的网页都极其相似的现象。 来自世界各地的品牌和设计师们都跟风涌入扁平化的浪潮中，导致很多设计都缺乏个性，非常相似。
2016年，扁平化的趋势又逐渐显现，更多的品牌和设计师开始强调更加个性的扁平化，尝试鲜亮的颜色和渐变，不再像以前一样一味的强调简单和冷色调。 渐变和鲜艳的颜色越来越多在传统的UI和网页设计中，最近备受争议的Instagram，在品牌的重新设计中就用到了鲜艳的颜色和渐变。 无论这是否符合你的品味，我们都应期望看到更多的使用渐变和鲜亮的颜色将推动UI和网页更具个性！
Spotify不断变化的渐变创造了一种友好和有趣的美学
鲜亮的颜色和渐变能够将更多的能量、温暖和活力注入到一个产品中，使其脱颖而出。 大胆的去尝试使用不同的颜色，但一定要确保他们和你想要表达的内容和谐一致，不能冲突。 但是这样做之前一定要深思熟虑，避免给人们造成眼睛不适的感觉。
04. Illustrations 插画
Dropbox是具有强烈插画风格品牌的很好的一个例子。 这种粗犷、手绘的风格让人觉得轻松愉悦，增加了人们对他们产品的信任感
插画能够给人一种别具一格的感觉，这是普通图片很难实现的。 更能贴合品牌特质的定制插画能够使公司更加细致的创建一个真正贴合他们的个性和语调的视觉语言 - 有助于给用户和客户灌输可靠和信任的感觉。
插画也拥有很多表现形式。 一些品牌可能选择用平滑的线条插画，这种插画能够表现出一种锐利和高雅的感觉；而其他品牌可能选择更粗糙潦草的手绘风格，这种风格的插画给用户一种有趣和俏皮的感觉。 插画给创意提供更多的途径，当插画与摄影和排版结合时，更是如此。
PayPlan的清新、温和的说插画风格加上他们的审美帮助他们将品牌定位为友好和关怀，吸引用户的需求
插画定制可以创造个性和可靠性，这两点对于创造和客户长期有效的连接是至关重要的。 插画在APP上是可以广泛适用的，并且与本文讨论的其他UI设计流行趋势可以完美结合的。
05. Breaking the grid 突破网格
Red Collar Digital的网页是突破网格限制的UI的一个很好的例子
网格长期以来一直是设计师的神器，给那些需要确保一致性、平衡、节奏和顺序的设计提供了基础。 它是用户体验设计中的一个重要工具，因为他们为用户提供了最熟悉的UI体验，使他们能够以一种自然的方式直观地浏览网站或APP。
然而，与网格同样需要重视的一点是：它也限制性的和刚性的制约了设计者的创造性选择。 为了创造突破传统的数字体验，许多网页和UI设计师正在通过“打破网格”来试验布局。
通过远离网格和刚性的基线结构，设计师正在创建更有趣和实验性的网站，APP和界面。 它开辟了一个全新的创新道路，允许设计师通过使用分层、深度、运动和明显的焦点实现真正的表达。
像Like Red Collar Digital，建筑师Sergey Makhno用两层排版、图像甚至视频创造了一个更宽松和自由流动的的体验
打破网格提供了更多的创新选择。 它的灵活性可以产生流动性和自由度，这是在用网格设计时很难有的。 然而，在你这样做的时候一定要考虑周全。 所有的界面首先必须是用户友好的，这一点是毋庸置疑的，否则可能会使一些用户非常困惑！ 如果是响应式设计你还需要考虑如何在让它在较小的屏幕上能够发挥作用。
06. Parallax 视差
Epicurrence的网站选择非常明显的视差，创造一个快速移动和沉浸式的体验，反映其推广的事件
将视差与突破网格和滚动翻页结合起来时非常好的做法，这样在传统的排版中很少见。 简而言之，视差是一种背景移动速度比前景更慢的效果，当用户滚动时给出深度和动态感。 这不是一个新的方法，但正在被很多品牌尝试。
Bang＆Olufsen，高档音响产品制造商，选择更微妙、更精致的视差，体现他们的时尚和高端的品牌身份
视差必须谨慎使用，因为它可以很容易变得让客户难以忍受。 但是，当谨慎使用时，它提供了一种很棒的动态感受，以帮助向上滚动切换内容并吸引住用户。 将它与图像、文字和不太严谨的布局结合使用，可以创建流畅的分层内容。
07. More cards! 卡片
上面的例子显示了如何实现卡以在较大屏幕UI上工作，从可滚动菜单卡到分层定价模型的选项
卡片的模式不是一个新突破性的趋势，但对于UI设计，它们是一个功能性很强的设计方式。在移动UI设计方面的成功以及被融入到 Google’s Material Design 中 ，卡片一直在网页设计中获得突出地位。
据Google称，2015年，移动设备超越台式机成为浏览网页最流行的平台，因此越来越多的设计师正在模糊移动和桌面UI之间的界限，创造更加无缝的用户体验。
卡片形式是一种广泛适用的UI设计方法，可以在各种平台上适用，从较小屏幕的设备一直到较大的。他们是一个很棒的方式在屏幕上同时组织和显示大量的数据，允许用户快速筛选可用的信息并选择查看。 Facebook，Twitter，Netflix和Pinterest都是强大的数字平台，它们都选择了使用卡片的形式。
卡片提供了一个有效的解决方案，允用户快速浏览可用的内容并迅速找到他们需要的信息
卡片是组织短片短信息的好方法，它们的灵活性在组织和消费内容的较小屏幕上是无价的。 卡片是一种可以显示文字、图像、视频和其间所有内容的解决方案，可以从最小的屏幕设备扩展到最大屏幕的设备。 卡片提供无尽的适用性，允许设计师翻转、旋转、堆叠和过滤他们的所有方式的UX功能 - 更多的功能将通过微交互来解释。
08. Micro-interactions 微互动
上图是如何实现微交互以显示菜单UI中的状态变化的一个很好的例子
通常小屏幕上的动画形式的微交互在UI和UX设计中起着至关重要的作用，尤其是在移动端和小屏幕设备上。
从用户体验的角度来看，微交互不仅是小的、有趣的屏幕上的动画或转换，同时也是对于用户及其动作的视觉反馈的形式。微交互让用户知道与UI交互时正在发生什么，已经发生了什么，以及将要发生什么。
使用Facebook的著名的“like”按钮作为例子：当用户点击竖起的图标表示喜欢某些东西，这个按钮会变大，并变成蓝色，然后返回到其原始大小，以上这些动作都在一个流畅的动画中完成，通知用户，他们的“like”已经完成。
聪明的设计师通过将功能以有趣的方式实现来让用户高兴。从有趣的加载动画，到顺滑的图标转换，有效的微互动能够同时起到吸引和通知用户的作用。
该示例清楚地向用户指示他们的动作已经实现，因为它们在可用状态之间切换
微互动提供有用的人性化反馈，以一种周到和有趣的方式让用户知道做什么和正在发生什么。 他们可以将简单平凡的过程变得有趣，以及提供关键的反馈。
09. Typography 字体排版
MailChimp使用混合的字体、颜色和不透明度创建一个俏皮的圣诞节启发的文字排版介绍他们的2016年假日提示营销指南
随着越来越多的网络字体服务商（谷歌字体，Typekit）提供免费或便宜好用的字体系列，期望看到更多的品牌使用大胆和美丽的字体代替系统字体。
正如我们在2016年看到的，以及可预见的未来，网页排版将从以传统的图形和编辑为中心的设计转向试验更具创意的字体排版设计。
雪铁龙在他们的雪铁龙起源互动页面中也选择了创意的分层字体和图像组合
排版是品牌和设计师在创造充满个性的内容时进行实验的另一种创造性媒介。 正如本文所讨论的，许多这些趋势是一起工作的，创意排版绝对是一个很好的例子。 将文字排版与图像、视频、插图、颜色和非常规布局结合起来创造独特的体验。
10. Experimental Navs 导航栏实验
Adult Swim 的网页导航达到了一个全新的水平
导航和菜单一直是设计师热烈争论的话题。随着移动和桌面UI之间的界限逐渐模糊，以及越来越多地使用汉堡包菜单（也叫做左滑菜单 )在更大屏幕的UI上，设计菜单和导航有了更多的创造性空间。
以汉堡菜单为例，他们提供的是在设计和构建响应式网站时的一致性，您可以（本质上）设计一个单一的导航结构在所有设备上扩展和工作。这里更有趣的是，使用汉堡菜单提供的创意自由的数量。
菜单隐藏在画布之外，设计师可以给自己整个视口窗口来创建一个创造性的解决方案。天空的创造性可能性的极限，但一如既往，导航服务在用户体验中的扮演着一个重要角色，所以请确保它永远不会形成的功能 ---- 用户需要能够快速找到您的内容！
并不是所有的设计师都同意在桌面应用程序（或在所有）使用汉堡菜单。但这个话题是值得讨论的，我们也相信2017年及以后会有更多的人尝试设计更好的导航和菜单。
Adult Swim 网站的特点是移动缩略图的三维网格，其中有排版和颜色变化的悬停状态
导航不再局限于排列在窗口顶部的一排单行链接，而且肯定有更多的创意解决方案可以帮助用户找到他们。虽然创意和美学很重要，但设计师应该始终优先考虑可用性，确保用户能够快速轻松地找到所需的内容，而不是被过度的设计或花哨的解决方案混淆。
结论
与所有流行趋势的本质一样，UI的趋势也是不断地来来去去，但是也会有一些被保持下来变成了设计的基本准则。我在这里讨论的所有趋势或预测不是都可以与您正在开发的项目相关；作为一个设计师，它是由你自己的判断来决定什么是正确的，什么不是，而且有些东西将被客户和项目改变。
然而，在这个创意产业中变化以闪电的速度发生，所以追赶正在发生的改变是重要的。 UI设计总是通过实现一些伟大的UX，同时伟大的UX也将伴随着新技术的出现和发展而改变。这是一个不断变化的领域，需要不断的学习和创新。
我希望从这篇文章中你了解了一些关于2016年期间的设计是如何进展，更重要的是，这些变化将如何影响2017年及以后的设计。
原文链接：http://www.creativebloq.com/author/jamie-leeson
译者：Healan
分享
学员作品赏析
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
电影剪辑通常被称为“隐形的艺术”，尽管剪辑师的名号不如导演的名号响，但是如果缺少了剪辑师对拍摄素材的二次加工，电影作品将缺少其......
-
今天，我来和大家聊聊，迪士尼动画《海洋奇缘》系列是怎么用Maya软件为他们最新的续集打造获奖动画的。
-
有哪些听起来高大上、实际上转行同学也能胜任的岗位？试试虚拟现实工程师！
增强现实（AR）和虚拟现实（VR）是当前备受瞩目的创新技术，对相关的增强现实开发、虚拟现实开发、数字孪生开发工程师的人才需求，......
-
在这个短视频盛行的时代，越来越多的人想要尝试自己进行短视频剪辑，却常常因为缺乏专业知识而无从下手。别担心，今天就为大家带来短视......
-
今天，我们聊聊皮克斯的《头脑特工队》系列
-
中国首个AIGC导演共创计划今日正式上线：同学，做导演不要？
中国首个AIGC导演共创计划定于12月6日正式上线。该计划由快手自研视频生成大模型产品“可灵AI”，联合李少红、贾樟柯、叶锦添......
