请选择 进入手机版 | 继续访问电脑版

HTML5星空

渐变色不能说的秘密

[复制链接]
发表于 2017-9-1 09:11:23 | 显示全部楼层 |阅读模式


设计师们在过往的工作当中或多或少的接触过渐变色,渐变色运用的好坏往往也是一步之差,那么我们究竟该怎样去正确理解渐变色?渐变色的使用在数量和形式上是否有着独特的奥秘?渐变色到底该如何使用才能发挥其最大优势?那么就让我们好好学习下面内容。



为什么使用渐变色?



用户在使用产品时,面对着越来越多的信息,往往容易眼花缭乱。为了突出内容,减少过度美观修饰对信息的干扰,扁平化风格应运而生并开始流行。然而,扁平化风格还是存在着不足的,比如:简洁有余,张力不足。有些时候,扁平化设计会变得太“平”了以至于影响了可用性。设计师为了弥补扁平化的这种缺陷,重新在色彩上寻求突破口。使用渐变色就是其中最好的手段。



了解渐变色



渐变色是指色彩按照一定的规律做阶段性变化,这个规律可以是从明到暗,或由深转浅,或是从一个色彩过渡到另一个色彩。所以了解渐变色需要从以下三个角度分析:颜色的选择、使用数量、使用方式



小贴士:HSB模式是最符合人眼所见最直观且最符合人脑感知色彩的方式。

H色相:用度表示位于色相环上的位置

S饱和度:用百分比来表示色彩的浓淡程度

B明度:用百分比来表示色彩的明亮程度





1
颜色的选择



色相渐变、明度渐变、饱和度渐变、综合渐变


渐变色在颜色的使用上,这里我们并不是指具体使用什么颜色,而是从色彩本身的角度出发将渐变大致分为色相之间的渐变、明度之间的渐变、饱和度之间渐变,这些只需要了解即可,因为毕竟我们在使用渐变色时最常使用的都是第四种类型综合渐变。


↑色相渐变


明度渐变


饱和度渐变


综合渐变




2
颜色的使用数量



单色渐变、双色渐变、三色渐变、多色渐变


渐变色在数量上的使用也没有一定的规范,可以是单色、双色、三色以及三色以上统称的多色。单色渐变即是上方演示的明度渐变或饱和度渐变,双色渐变是最常见的渐变,同时它也是一把双刃剑,因为常见所以用起来不会造成太大的错误,也因为常见所以常常不会给人视觉上的震撼,三色渐变是除了双色渐变之外另一种常见的渐变,而多色渐变比较少运用,因为把握不好就会给设计造成花俏轻浮的感觉,特定情况下除外。


单色渐变


双色渐变


三色渐变


多色渐变




3
渐变的使用的形式



线性渐变、径向渐变、对称渐变、混合渐变


渐变的形式有很多种,虽然在不同软件当中的名称各不相同,但是基本形式并没有太大差异。这里我们只列举在设计中常见的四种渐变形式,那就是线性渐变、径向渐变、对称渐变和混合渐变。在上方渐变的颜色和渐变的数量当中我们的演示均属于线性渐变。





渐变色的应用



渐变色在版式设计中最常见的应用形式大致分为三类,分别是用于背景和叠加图片以及置入元素。



1
用于背景



用于背景是渐变色最常见的应用形式之一,将渐变色用于背景都会为设计带来不错的视觉效果。用于背景的渐变色没有固定的模式限制,最常见的就是纯渐变背景和混合渐变背景,下面我们通过案例分别做具体演示:


纯渐变背景


混合渐变背景




2
叠加图片



将图片与渐变色叠加在一起的重点在于平衡色彩和图片之间的关系,需要注意渐变色、图片、主题内容三者之间的高度匹配。直接将图片与渐变色融合叠加和将图片弱化是叠加图片常见的两种形式,前者主要侧重于图片与渐变色的统一,后者主要侧重于将图片当做底纹或背景处理。叠加图片的优势在于可以协调图片与渐变色之间的关系,弱化图片凸显文字的同时又不失灵动,需要注意的是这种方法并不是十分适合需要突出图片或产品等主体的情况下。


↑融合叠加图片


弱化图片




3
置入元素



还有一种渐变色的使用方式是将渐变色置入到版面中的元素内,最常见的两种形式就是置入到几何元素当中和置入到文字当中。这两种形式都会为画面带来一些变化性,同时又能够缓冲色彩与色彩之间的冲突,但需要注意渐变色之间的统一与协调,建议一个版面当中不要置入数量过多的渐变色,以免造成设计的最终效果显得混乱。


置入几何元素


置入文字


通过以上的案例,大家会发现其实渐变色的使用在技术层面上并没有什么难度可言,重点在于使用的对象和主题。渐变色并不是一个独立的设计理论知识,你可以把它看作是配色当中的一种形式。渐变色使用的色彩属性与单色色彩的属性相通,比如色彩的色调深浅、色彩的冷暖关系等在渐变色中同样需要考虑。


最后为大家推荐一个渐变配色的网站,感兴趣的设计师小伙伴可以收藏起来。https://webgradients.com/



来源于:xinyu | 花火圆桌

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快讯
发布主题 快速回复 返回列表

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-25 02:39 , Processed in 0.156155 second(s), 33 queries .

快速回复 返回顶部 返回列表