变化之美!重新回归主流的渐变色设计趋势

2016/08/04 28451

gradient-making-a-comeback-1

在扁平化设计刚刚兴起之时,渐变是设计师们避之不及的设计手法,然而今天它已经正式回归。几乎是在一夜之间,无数的网站开始使用渐变色。

从背景到图片上的色彩叠加,包括UI元素上所遮盖的色彩,所有的这一切都表明渐变以一种微妙的方式回归了。不过和以往的我们所看到的渐变不同,重新回归的渐变色设计有着不一样的使用技巧和特色,更加贴合这个时代的风格和需求了。如果你也想使用,不妨从今天的设计示例中学习一下“全新”的渐变设计。

潮流的引领者

spotify-gradient

texture-gradient

在今年早些时候,Spotify 开始在自家网站上大量使用双色调设计,将双色调的潮流带了起来。如果你仔细查看Spotify 的页面会发现,其中色彩其实是有明暗、色调的渐变效果的。

而其他的著名品牌也开始逐步回归,开始在设计中融入渐变色彩。而在线电子杂志供应商 Texture 干脆使用了全屏的渐变色彩设计。

重新流行的“新”渐变设计的案例并不只有这么点儿。更多采用类似渐变设计的网站正如同雨后春笋般涌现,类型已经不拘泥于专题页,从产品展示到电商网站,不一而足。

现在所流行的渐变设计其实并没有什么特别与众不同的规范,或者规则,它可以是多种不同色彩支架你的加变,可以是从中央到周围的辐射,可以是从上到下的自然变化,也可以是从角落辐射到其他位置,它可以作为设计的主视觉而存在,也可以是诸多特性中的一个。

渐变最实在的一点在于设计师可以轻松驾驭,使用范畴不拘泥于一时一地,自由随性地使用同样可以创造实相当不错的效果。

扁平化配色与渐变

fila

wpcrew

渐变配色的回归正巧是在扁平化大行其道的今天,所以它不可避免地同大量扁平化的元素搭配到了一起,而其中最值得考虑的因素,就是色彩。某些用色最大胆、跨度范围最大的渐变色设计干脆直接就从扁平化配色中“借用”色彩。

这些色彩的使用让色彩的渐变同如今网站的现代风更加贴合,显得更加符合趋势。将渐变的设计同扁平化设计的美学特征融为一体,或者在Material Design 风格的界面中适当加入一些柔和的色彩组合,都是能带来不错的效果。

渐变色的使用对于其他的设计趋势而言,是一个不错的补充,渐变本身的缓冲作用,使得你即使要重设计也无需从头再来。

双色调的加入

lewis

symodd

双色渐变是渐变设计中的很重要的组成部分。而双色渐变同其他设计趋势的结合效果拔群,这一点值得再三强调。

而双色调渐变的唯一缺点,大概是……被用的太多了。如果你稍加注意就会发现,确确实实有一大堆网站采用了双色渐变来作为背景或者主要视觉模块,似乎没有哪种双色搭配没人用过。蓝绿和橙红搭配是用的最多的。

谨慎使用这一趋势,因为确实很容易与别的网站“撞衫”。

渐变背景图

timelikes

swiss-army

渐变的回归,使得我们再次可以看到许多拥有景深或者纵深的背景图。虚拟现实的流行让越来越多的设计师尝试更加现实、更加立体的网站设计,毫无疑问,你会在未来看到更多这样的设计。

扁平化设计确实时尚而更易于接受,但是它缺少富有现实质感的元素也是不争的试试。试想一下自然中元素给人的感受和体验。渐变色的使用很好地缓解了这个局面,毕竟自然界中很少有特别纯粹特别单一的色彩。

不难想象,渐变色和阴影背后的概念和规则是相通的。它们为设计创造了深度和层次。

图片上的渐变色叠加

nyc-pride

reveal

作为一种设计趋势,在图片上叠加色彩已经流行了相当长的一段时间。而从图片上的单色色彩叠加,到渐变色的叠加,是一个相当自然的“推导”过程。

在页面的背景、头图中加入渐变的色彩叠加,可以让它们的整体感更强,从而让用户注意到其他的更加重要、关键的元素,强化页面的可读性。这种设计对于大图的作用尤其明显。

在图片上叠加渐变色的技巧在于平衡色彩和图片之间的关系。色调是否要同图片的含义相匹配?叠加后能否看清图片中的细节?不同的色彩搭配方式带来的结果可能是截然相反的。

微妙的渐变与UI元素

tui

baldor

和渐变色的流行做法不同,有些设计师选择在UI元素中使用微妙的渐变色。在较小的UI元素中,色彩变化幅度更加微妙,并且通常使用的都是单色调。

在早期的iOS系统当中,这种设计相当的常见,不过现在已经很少见到了。

不可否认,渐变色还是更适合同较大的元素搭配起来。在较小的元素诸如小图标、小按钮等控件上使用的时候,色彩梯度并不是那么容易看清楚,甚至有可能让用户分心。

但是不论是在什么情况下使用渐变设计,都不要让用户产生停下来感慨“Wow好赞的渐变”的效果,这样就喧宾夺主了。渐变是用来强化用户体验,而非勾引用户来关注设计美学的。

结语

坦率的讲,当初渐变被斥之为“过时的设计”之时,我是相当伤感的。这也是为何今天看到渐变设计回归的时候如此的兴奋。

作为设计中最常见、最基本的一种技法,渐变设计应当会一直存在下去。

【技多不压身的设计师才有高薪资!】

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

原文地址:designshack
原文作者:CARRIE COUSINS
优设译文:@陈子木

yestone-uisdc-2

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/gradient-making-a-comeback

素材 界面设计 交互设计师 好文 UI 设计流程 转场动效 用户体验设计 设计师专访 设计师 排版布局 扁平化设计 素材下载 视觉设计 职场 设计规范 产品设计 配色 web前端开发 设计趋势 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里