满血复活!重新回归网页潮流前线的渐变设计

发布日期:2017-09-07
浏览次数:52
  
undefined
 
在扁平化设计刚刚兴起之际,设计师们就抛弃了渐变这种设计手法,这是因为早期的扁平化强调放弃一切装饰效果,着重突出信息本身。不过随着扁平化的进一步发展,它开始突破原有的限制,积极吸纳一些有用的元素,而渐变就是其中之一。这不,小飞最近发现许多网站的背景、图片或是UI界面上都有渐变色的身影,这一切都表明:渐变正以一种非常低调的方式重新回归到大众的视线之中。当然,渐变早已不是当年的那个它了,现在的渐变设计是更加贴合这个时代的风格和需求的。如果你对这种设计方式很感兴趣,不妨从今天这篇文章中学习一下"全新"的渐变如何设计吧!
 
 
 

1. 搭配扁平化配色

渐变色的回归正赶上扁平化设计的全盛时代,这意味着它不可避免地会与大量扁平化元素一起搭配使用,扁平化颜色则是其中最典型的一个。熟悉扁平化设计的站长们都知道扁平化网站中惯用明亮、大胆的配色,这也直接催生了许多用色大胆、色调跨度大的渐变色设计方案。扁平化颜色的使用让网站中的渐变更具现代感,看上去也更符合当代用户的视觉审美需求。
所以说,将扁平化色彩应用在渐变设计中,或在Material Design风格的界面中适当加入一些渐变设计,都能给网站带来不错的视觉效果。从这点上来说,渐变设计可以看作是对其他流行趋势的一个补充。
 
undefined
 
 
 

2. 双色渐变

双色渐变是渐变设计中一种很重要的配色方案,将双色渐变同其他的设计趋势结合起来使用常会带来令人意想不到的惊艳效果。不过,双色渐变最大的缺点在于,使用这种趋势的人实在太多了。如果你留心观察网站,你会发现很多网站都喜欢采用双色调渐变作为网站的背景或主要的视觉模块,似乎每一种配色方案都有人用过,其中蓝绿和橙红搭配可以说是用的最多的。所以,如果你想要使用双色调渐变,首先一定要有自己独特的观点和想法,这样才能避免和其他的网站"撞衫"。
 
undefined
 
 
 

3. 在网页背景上使用渐变

随着虚拟现实的流行,越来越多的设计师开始尝试在网页设计中添加现实、立体的元素,而渐变正好可以给网站背景带来深度和层次。人们确实很喜欢扁平化设计,这点从它受欢迎的程度就可见一斑,但整齐有序的扁平化设计同样也存在弊端,比如单一的视觉效果;细节设计的缺乏使得用户引导没有那么流畅。这时,渐变色就可以派上用场了,在网页背景上使用渐变色可以增加元素的深度,将重要内容(比如CTA按钮)从背景中独立出来,它还可以用来实现元素的自然过渡,营造和谐、朦胧的视觉效果。
 
undefined
 
 
 

4. 在图片上叠加渐变色

在图片上叠加色彩作为一种设计趋势,已经流行很长时间了。不过,以往叠加在图片上的一般是单个色调,现在却变成了渐变色。在图片上使用使用渐变色叠加尤其适合大图,特别是网页的背景图、头图。不同网站使用图片渐变色叠加有不同的目的,有的网站希望通过渐变色让用户注意到页面中重要、关键的设计元素,还有些网站则是为了让行为引导按钮的可读性更强。
不过,我们在图片上运用渐变色叠加时一定要注意图片和色彩的平衡。好好想想:渐变的色调是否符合图片意义?叠加的渐变色会影响原图的顺畅浏览吗?总的来说,想要将图片和渐变色很好的搭配在一起,既保证渐变色的效果又不丢失图片和信息的完整度,这是很有难度的。我们在选用这种设计方式时一定要多加注意,千万不要弄巧成拙。
 
undefined
 
 
 

5. 在UI界面上使用渐变色

在UI界面上使用渐变色其实由来已久。早在IOS系统中,人们就经常在UI元素中使用渐变色,不过后来随着扁平化设计的兴起逐渐过时了。现在,在UI界面上使用的渐变一般都比较微妙,而且通常以单色调为主。还有,渐变色最好不要用在一些小的UI元素上,因为这很容易影响元素的可见性,有时甚至会给用户带来糟糕的用户体验。将渐变色用在大一点的元素上,以有效吸引用户的注意力,大家对这种设计方式感兴趣的话可以在自己的网站中尝试一下。
 
undefined
 
 
其实,不管在网站使用哪种形式的渐变设计,最重要的一点就是记住,渐变等设计技巧往往是用来强化用户体验的,而不是纯粹展现设计美学的。不要喧宾夺主,不要让渐变等设计方式抢了网站核心内容的风头。虽然网站的设计流行趋势总是起起落落,但渐变作为网页中最常见、最基本的一种设计方式,小飞相信它会一直存在下去。

登录后即可发表评论,立即登录.