《网站设计 开发 维护 推广 从入门到精通》——第2章 网站页面配色和创意 2.1 色彩基础知识

简介:

本节书摘来自异步社区《网站设计 开发 维护 推广 从入门到精通》一书中的第2章,第2.1节,作者: 何新起 , 娄彦杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

第2章 网站页面配色和创意

人类的视觉对于色彩最为敏感。网页色彩处理得好,可以锦上添花,达到事半功倍的效果。色彩总的应用原则应该是“总体协调,局部对比”,即网页的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些色彩强烈的对比。在色彩的运用上,可以根据网页内容的需要,分别采用不同的主色调。

学习目标

  • 色彩基础知识
  • 网页色彩搭配

2.1 色彩基础知识

色彩的魅力是无限的,它可以让本来很平淡无味的东西变得漂亮、美丽。随着信息时代的快速到来,网页也开始变得多姿多彩。人们不再局限于简单的文字与图片,而是要求网页看上去漂亮、舒适。所以网页设计师不仅要掌握基本的网站制作技术,还需要掌握网站的风格、配色等设计艺术。

2.1.1 色彩的基本概念
为了能更好地应用色彩来设计网页,先来了解一下色彩的基本概念。自然界中色彩五颜六色、千变万化,但是最基本的只有三种(红、黄、蓝),其他的色彩都可以由这三种色彩调和而成,这三种色彩称为“三原色”。平时所看到的白色光,经过分析在色带上可以看到它包括红、橙、黄、绿、青、蓝、紫七色,各颜色间自然过渡,其中,红、黄、蓝是三原色,三原色通过不同比例的混合可以得到各种颜色。

无论是平面设计,还是网页设计,色彩永远是非常重要的一环。当距离显示器较远的时候,人们首先看到的不是优美的版式或者美丽的图片,而是网页的色彩。如图 2-1 所示,远距离看网页看到的是网页的色彩。

在网页设计时应注意以下几个原则。

  • 用一种色彩:这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。
  • 用两种色彩:先选定一种色彩,然后选择它的对比色。

    86fb63a948c075af8acf2a0b547e365d58eca1e8

    • 用一个色系:简单地说就是用一个感觉的色彩。
    • 不要将所有颜色都用到,尽量控制在3~5种色彩。
    • 背景和前文的对比尽量要大,以便突出主要文字内容,绝对不要用花纹繁复的图案作背景。

    2.1.2 常见色彩表达的意义
    现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列,其他的色彩都属于彩色。任何一种彩色都具备三个属性:色相、明度和纯度。其中非彩色只有明度属性。

    • 色相:指的是色彩的名称,这是色彩最基本的特征,是一种色彩区别于另一种色彩的最主要的因素。如紫色、绿色、黄色等都代表了不同的色相。同一色相的色彩,调整一下亮度或者纯度,就变得很容易搭配,如深绿、暗绿、草绿。
    • 明度:也叫亮度,指的是色彩的明暗程度,明度越大,色彩越亮。如一些购物、儿童类网站,多用一些鲜亮的颜色,让人感觉绚丽多姿、生气勃勃。图 2-2 所示是色彩鲜明的购物网站。


    c1f0863afcb1901af19c4980c7e4941163e65edb
    • 纯度:指色彩的鲜艳程度,纯度高的色彩鲜亮,纯度低的色彩暗淡,含灰色。
    • 相近色:色环中相邻的三种颜色。相近色的搭配给人的视觉效果很舒适自然,所以相近色在网站设计中极为常用。
    • 互补色:色环中相对的两种色彩。
    • 暖色:暖色跟黑色调和可以达到很好的效果。暖色一般应用于购物类网站、电子商务网站、儿童类网站等,用以体现商品的琳琅满目,儿童类网站的活泼、温馨等效果。图2-3所示的页面有一种温馨的感觉。


    a3428cd752e2dc38cb8a7c0713bd77defa6191bc
    • 冷色:冷色一般情况下跟白色调和可以达到一种很好的效果。冷色一般应用于一些高科技网站,主要表现严肃、稳重等效果。绿色、蓝色、蓝紫色等都属于冷色系列,如图2-4所示。


    166c31d14e3f6021ab7de476c2d42f79027411ba
    • 色彩均衡:网站让人看上去舒适、协调,除了文字、图片等内容的合理排版,色彩的均衡也是相当重要的部分。一个网站不可能单一地运用一种颜色,所以色彩的均衡问题是设计者必须要考虑的问题。色彩的均衡,包括色彩的位置、每种色彩所占的比例、面积,等等。比如鲜艳明亮的色彩面积应小一点,这样会让人感觉舒适、不刺眼,这就是一种均衡的色彩搭配。图2-5所示的是色彩均衡的网站。


    4fa366307aa864a6c9bb9281425ba02ba112605f

    对于网页来说,创建完美的色彩是至关重要的。颜色是一个强有力的、高刺激性的设计元素,用好了往往能收到事半功倍的效果。颜色能激发人的感情,完美的色彩可以使网页充满活力,能向访问者表达准确的信息。当色彩运用得不适当的时候,表达的意思就不完整,甚至可能表达出一种错觉。
相关文章
|
6月前
|
前端开发 JavaScript SEO
学成在线制作【网页布局实战】
学成在线制作【网页布局实战】
103 0