2017年UI设计的10个最重要的趋势分享
网页设计和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,高档音响产品制造商,选择更微妙、更精致的视差,体现他们的时尚和高端的品牌身份
视差必须谨慎使用,因为它可以很容易变得让客户难以忍受。 但是,当谨慎使用时,它提供了一种很棒的动态感受,以帮助向上滚动切换内容并吸引住用户。 将它与图像、文字和不太严谨的布局结合使用,可以创建流畅的分层内容。