2016年度视觉设计趋势分析

1458215665-4805-startup-593344-960-720

作者:沪江用户体验视觉设计团队

前言

经历了整个2015年,沪江的视觉设计团队从需求的承接方开始逐渐转型,开始从专业角度发现问题,提出产品改进的需求,并推进落实,从下而上收集和从上而下推导两种模式的结合,有利于我们梳理更多可以沉淀的内容。

这次视觉设计趋势分析的流程分为:收集素材-划分纬度-小组讨论-分析聚类几个主要阶段:

1. 从互联网、平面媒体、工业设计、时尚、建筑室内等五大主流领域进行素材收集;
2. 根据字体、颜色、材质、形状、版式、动效六个维度归纳;
3. 从前期的脑爆到后期持续做减法,合并共性部分,最终聚类出多个关键词风格。

每个关键词风格包含概念简述和运用案例两部分。从中,我们可以看出在不同的设计领域存在着相当多的通用性,也对如何运用在沪江的产品中也有着很大的指导价值。

期间,非常感谢上海交通大学设计趋势研究所 傅炯老师予以趋势研究方法与专业知识上的悉心指教。

步入2016,我们希望能更专业,更系统,更全面地梳理出一份可以作为我们未来工作专业指导方向的分析。无论是对内部团队的学习归纳,提升行业敏感度;还是对外提升团队影响力,都是新一年我们想要走的方向。

– 沪江用户体验部 视觉设计团队

 

 

柔和冰激凌  LIGHT ICE CREAM

概念简述

低饱和度的色调,冷暖融合,不鲜亮夺目,却更柔和平衡。无视材料的软硬,冰激凌色调都能让我们平静、放松。其自身也可以与各种低饱和度的色调轻松搭配。

这一年来,流行色调趋势越来越偏向沉稳安宁。他们如同空气一般,通过明丽的搭配吹起一股清新怡然的简约之风,朴素、清新的生活之美直入人心。

1458215665-5919-03

运用案例

柔和的色调越来越多地运用到界面中,作为网站的背景色营造和谐的氛围以突出前景主体;作为图标色的运用也日益广泛,表达品质的同时不失活泼性;在各类运营图中,以柔和饱满的颜色替代过于刺眼醒目的,提升界面环境的整体气质。

1458215664-3421-03

 

 

弱渐变光影 GRADIENT SOFT SHADOW

概念简述

随着扁平化趋势的发展,从最初的纯扁平基础上逐步增加了更多细节化元素。无论是摄影还是插画,同色系弱渐变与浅阴影相结合,浅阴影突显重要转折面,虚实收放有度,营造出柔美和谐质感。

1458215665-8264-03

运用案例

在扁平基础上增添的渐变光影越来越成为一种主流趋势,无论是体现界面的层次,或图标的质感都可以使用这类元素。

在运营活动中也可加入大块背景,以及文字的变化,使画面变得丰富更吸引用户。

1458215664-9538-03

复古混搭 MIX VINTAGE

概念简述

现在海报设计中,流行实物、图形与文字前后层级排列,利用不同材质的混搭,打破了普通的图文排版方式,在2d的环境下营造出3d的纵深感;时尚圈近来低调内涵的复古色系将会强势来袭,对比去年的亮色系,饱和度较低的颜色,可以帮助我们舒缓压力,放松心境;一些建筑墙面和工业设计领域的陶瓷使用特殊材质,营造出美轮美奂的半透明质感。

1458215665-2066-03

元素提炼

复古花纹与文字的混搭方式在营造空间感和强化主体方面有突出效果。

磨砂材质是扁平设计的一种变异形式,是在扁平加弱渐变的框架下,又加上了材质的效果。

复古色被越来越多的产品选择,低饱和的复古色来作为产品的主色调,更加优雅。

1458215665-6945-03

运用案例

网页的banner或者专题网页的设计可以复古色和复古元素表现更有质感的细节;这种带有复古质感的风格2015年底开始流行起来的,现在有一些引导页已经开始也采用了这种风格来丰富画面,我们在将来也可以运用到引导页、闪屏,以及一些icon的设计当中。

1458215665-2750-03

动感曲线 DYNAMIC CURVE

概念简述

最美的设计,天人合一,应该是圆润的,有曲线的。

工业设计讲究“人体工程学”,作品都已变得有弧度。建筑大师扎哈说“没有曲线没有未来”。

曲线在原本四四方方的移动端,让展现的页面更美、更戏剧、更博爱。

1458215666-5201-03

 

运用案例

曲线在视觉体系里的运用比较多元,无论是控件元素还是一些可视化图表都走向了以弧线取代直线的方向。

以曲面来解构物体是一种类似低面建模的方法,在扁平质感上突显体积感,不失柔韧亦有空间感。

这种形式广泛运用于ui界面元素中,不止图形和字体,通过这些弧线元素的组合后有效提升了整个界面的视觉体验。

1458215666-5331-03

错层叠色 DISLOCATION OVERLAY

概念简述

线型风格的图形样式已经风靡了一段时间,以扁平化的元素点缀,在单色描边的样式上增添更多质感。

错层叠色类似古早印刷的风格,在描边下层以纯色平铺进行叠加,一些新的涂色方案是略微错位的,使画面富有更多活泼趣味性。亦可用浅色平铺作为阴影,增添扁平光影感,即符合时下扁平风又不失细节特色。

1458215666-4271-03

运用案例

在这两年的网页和移动界面中经常使用的手法,在一些界面小元素上使用这样的风格丰富画面细节和情感化元素。如引导页、图标、以及页面提示等。

从简单的涂色表现阴影到错层叠色,这样的手法可以很好同时表达阴影和高光部分,平滑的边缘使图形更清爽不黏腻,比普通的扁平涂色更有质感。

1458215666-7816-03

阴影折叠 SHADOW PLEATS

概念简述

为了让用户更加聚焦在他们所应该关注的内容上,设计师们通过各种方法减少、弱化界面元素,利用形状与景深来表达空间层级关系。其中,折线运用最为天马行空,事半功倍。

如何让一张纸能立起来不倒?——折叠,可以轻易让平面变为立面。无论是Nike Lab最新系列的百褶花边设计,还是来 IF 设计的获奖花盆,或是“折叠设计”鼻祖三宅一生的Issey Miyake包包,平面三角形折叠在建筑学中的运营更是天马行空,在2016它将会继续发光发热。

1458215666-4267-03

运用案例

在低面建模流行了一段时间之后,折叠以各种类同形式持续发热中。

从形体本身延续到背景,从规则到不规则,各种形状的实验性相互折叠,成为2016非常有趣的设计重点。

1458215667-3361-03

满屏视频 FULL-SCREEN VIDEO

概念简述

近来,随着性能和网速的提升,越来越多的短视频作为背景在网页和移动端上流畅地播放,代替了网页首屏banner和APP功能介绍。 相比静态画面,视频和动效可以更好地展现产品特性,更直观地展现品牌形象。

运用案例

除了替代大幅面的图片,带来更强的视觉印象之外,一个常见的视频元素应用场景还在于新用户引导和新功能介绍,很多APP在首次启动时触发的引导页不再是以静态图片和文字或者最为经(lao)典(tao)的蒙层引导,而是以短视频的形式为用户展示使用场景和操作方法;在用户使用过程中,新功能的引导也加入了真人视频教学的方式,增加了引导的趣味性和亲和性。

关于视频元素在界面设计领域的运用,在沪江交互设计团队的2016年度设计趋势分析中将进一步展开。

1458215667-8683-03

下载网址:http://pan.baidu.com/s/1eRsXuCi

去年今日运营文章

  1. 2023:  科普丨关于数据分析模型的十问十答(0)
  2. 2023:  LinkedIn(领英):从50万增长到5亿用户(0)
  3. 2023:  小红书-薯条产品通案(36P)(0)
  4. 2023:  刘澜10句口诀打造领导力(0)
  5. 2022:  《原则》-24张思维导图合集(0)

原创文章,作者:爱运营,如若转载,请注明出处:https://www.iyunying.org/ue/ui/48789.html

(0)
爱运营爱运营管理员
上一篇 2016年3月18日 上午10:28
下一篇 2016年3月18日 上午10:36

推荐资讯

发表回复

登录后才能评论
分享本页
返回顶部