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

开发者社区> 异步社区> 正文

《网站设计 开发 维护 推广 从入门到精通》——第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

    对于网页来说,创建完美的色彩是至关重要的。颜色是一个强有力的、高刺激性的设计元素,用好了往往能收到事半功倍的效果。颜色能激发人的感情,完美的色彩可以使网页充满活力,能向访问者表达准确的信息。当色彩运用得不适当的时候,表达的意思就不完整,甚至可能表达出一种错觉。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《ASP.NET 开发从入门到精通》----1.4 ASP.NET基础
ASP是微软公司推出的一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术,指动态服务器页面(Active Server Pages,ASP)运行于IIS之中的程序。在2000年第二季度时,微软公司正式推动.NET策略,ASP也顺理成章地改名为ASP.NET。
2636 0
学习准备(下):计算机基础 | Python从入门到精通:入门篇之二
本章节继续讲授关于计算机基础的课程,包括进制、Python编辑器的安装以及编码方式等。
5063 0
Scrapy 爬取动态网站
scrapy + selenium + headless 爬取动态网站,完美解决了因调用 chrome headless 导致内存泄漏
2422 0
基于Scrapy爬取伯乐在线网站
标题中的英文首字母大写比较规范,但在python实际使用中均为小写。 2018年7月20日笔记 Scrapy官方文档网址:https://doc.scrapy.
958 0
Python干货:用Scrapy爬电商网站
电商老板,经理都可能需要爬自己经营的网站,目的是监控网页,追踪网站流量,寻找优化机会等。
6583 0
从零开始搭建自己的VueJS2.0+ElementUI单页面网站(三、组件编写及通信)
前言 本文是本系列的第三篇文章。在前两篇文章中我们介绍了关于搭建vue+elementUI开发环境的方法和编写导航页的方法。
2443 0
从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建)
前言 VueJS可以说是近些年来最火的前端框架之一,越来越多的网站开始使用vuejs作为前端框架,vuejs轻量、简单的特性使得前端开发变得更加简易,而基于vuejs的前端组件库也越来越多。
2403 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载