Web设计之颜色设计 让你的网站熠熠生辉

今天给大家讲讲Web Design中的颜色设计(Color Design)。

Web设计之颜色设计 - 如何令你的网站熠熠生辉.jpg

当你第一次点进一个网页时,吸引你的第一眼是什么?内容?字体?布局?都不是,最吸引你第一眼的,是颜色。为什么会这样?科学的解释是,颜色是通过眼、脑和我们的生活经验所产生的对光的视觉感受,而且是直接的,没有进行任何思考的感受,而网页中的其他部分,很多都是要经过我们大脑过滤以后才会被记住。

Web设计中为什么对主题色设计很看重?第一就是因为,它能影响网站带给用户的第一感觉,第二就是用户对于使用网站的接受度以及舒适度。你让用户觉得舒服了,就说明你的网站主题设计成功了。

新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。

那么,如何进行主题颜色设计呢?以及如何设计好一个网站的主题颜色呢?下面我就给大家从理论到实践简要的介绍一下。

颜色 理论

我们要怎么才能知道我们选择的颜色搭配是否好看呢?这就要设计到颜色理论了。

无论是艺术家还是设计师,在创作或者设计的过程中,都是遵循基本的颜色理论而进行的。也许有些人觉得很高深。其实每个人都可以通过颜色理论做到颜色的最佳搭配。

基础色论

大家上过学的肯定都知道三原色。三原色包括了三种色彩中不能再分解的基本色:

红色(Red)、黄色(Yellow)以及蓝色(Blue),这三种颜色也被称为 Primary Color

Web设计之颜色设计 - 如何令你的网站熠熠生辉.jpg

两种原色叠加,可以生成另外一种颜色,也被成为二次色 Secondary Color(由两种Primary Color组成的颜色)

其中,红色+黄色 = 橙色;黄色+蓝色 = 绿色;蓝色+红色 = 紫色

Web设计之颜色设计 - 如何令你的网站熠熠生辉.jpg

如果我们混合更多的颜色,相应的也会生成更多不同的颜色,也被称为第三色 Tertiary Colors(由一种Primary Color和一种Secondary Color叠加而成),命名也是根据叠加的两种颜色共同命名的,比如Yellow-orange橙黄色以及Blue-green蓝绿色等等。

Web设计之颜色设计 - 如何令你的网站熠熠生辉.jpg

而这些所有生成的颜色,则组成了我们经常听说的Color Wheel(色环)

Web设计之颜色设计 - 如何令你的网站熠熠生辉.jpg

基于红色,黄色和蓝色的色环在艺术领域中是传统的。艾萨克·牛顿爵士于1666年开发出第一个颜色圆形图。从那时起,科学家和艺术家就研究并设计了这一概念的多种变体。关于一种格式相对于另一种格式的有效性的意见分歧继续引发争论。实际上,任何呈现逻辑排列的纯色调序列的色环或色轮都具有优点。

有了色环,再简单介绍一下颜色的三个基本特性(色彩三要素):色调(Hue)、饱和度(Saturation)、明度(Value)。这三种特性在PS学习中是必须掌握的。

色调(色相):色彩是由于物体上的物理性的光反射到人眼视神经上所产生的感觉

饱和度:用数值表示色的鲜艳或鲜明的程度称之为彩度

明度:表示色所具有的亮度和暗度被称为明度

那么我们如何将这些理论用在我们实际的设计过程中呢,如何通过理论来创建专业的、有效的颜色搭配呢?

除了艺术天赋以外,实际上是有一些颜色搭配方式和公式的,下面就给大家介绍一下如何通过一些技巧来形成比较好的颜色搭配。

而你所需要的,只有Color Wheel(色环)

Web设计之颜色设计 - 如何令你的网站熠熠生辉.jpg

颜色搭配方式

公式一:单色搭配

Web设计之颜色设计 - 如何令你的网站熠熠生辉.jpg

单色搭配也是最简单的颜色搭配,你需要一种颜色就可以了,只需要根据你的主题或者公司形象来选择一种比较合适的颜色。然后添加一些相似的色调,调整一下饱和度或者明度就行了。比如:

Web设计之颜色设计 - 如何令你的网站熠熠生辉.jpg

高明度页面展示:

Web设计之颜色设计 - 如何令你的网站熠熠生辉.jpg

低明度页面展示:

Web设计之颜色设计 - 如何令你的网站熠熠生辉.jpg

发布了55 篇原创文章 · 获赞 11 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/html886/article/details/104598768