网页配色从入门到精通(txt+pdf+epub+mobi电子书下载)


发布时间:2020-05-25 22:12:42

点击下载

作者:张晓景

出版社:人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

网页配色从入门到精通

网页配色从入门到精通试读:

内容提要

本书通过大量的案例分析,详细介绍了网页配色的基本知识和色彩搭配技巧。同时从色彩搭配基础、网页设计配色基础和色彩搭配的选择标准等方面深入分析了网页配色的思路和方法。并对色彩搭配中的不足之处进行分析,同时给出改进的具体方案。全书共分为5章,具体包括色彩搭配基础、网页设计配色基础、色彩搭配的选择标准、网页布局配色和移动端网页配色等内容。

本书适合网站设计人员和网页设计爱好者阅读,也可作为网页设计师、专业平面设计师、包装设计师、艺术院校师生及色彩设计爱好者的理想参考书。

前言PREFACE

色彩的魅力是无限的,它可以让本身很平淡的东西,瞬间变得漂亮起来,就如同一个人的着装一样,如果穿着一件色彩搭配漂亮的衣服,这个人就自然显得比较光鲜亮丽一些。网页也同样如此,随着网络时代的迅速发展,简单的文字与图片组合的网页已经不再能够满足人们的需要,一个网页给人们留下的第一印象,既不是它丰富的内容,也不是合理的版面布局,而是网站的整体颜色,这将决定用户是否继续浏览下去。

为了能够满足人们的需要,当代的设计者除了需要掌握基本的网站制作技术以外,还必须能够很好地应用色彩,搭配色彩,掌握一些基本的色彩搭配技巧。其实,色彩就好像是食物一样,它的味道主要取决于调味品,不同的调味品将调出不同的味道,调成功的好吃,调失败的往往叫人难以下咽。网站的成功与否在某种程度上就取决于设计者对色彩的运用与搭配。

网页的色彩搭配往往是设计者感到最头疼的问题。尤其是那些非美术或平面设计出身的网页设计者,在掌握了网页制作软件和相关技术的同时,还想多学习一些色彩的基础知识和网站的配色方法,除了借鉴大量的成功作品,体会不同的网页设计师的配色技巧以外,最直接的方法就是寻找一本理想的网页配色参考书,通过学习快速提高网页的配色水平。

本书正是遵循广大设计者的需求,采用循序渐进的方式指引设计者正确地采用网站配色,从色彩的基础开始学习,牵引到色彩的应用,从所属行业、浏览对象、色彩心理学的原理、色彩个性、色彩联想和产品生命周期的角度出发传授色彩的选择方法,以案例的形式分别从网页布局配色、网页交互配色和移动端网页配色3个方面分析网页配色要点,带领读者从简单开始,逐步深入了解色彩搭配在网页设计中的应用。

本书的定位是一本对读者真正有帮助的配色宝典,让读者在阅读过本书后可以轻松地驾驭网页的颜色搭配,对制作网页的过程可以起到事半功倍的作用。由于互联网的更新较快,书中所提供的网址仅供参考。

本书可供没有美术基础的网页设计者学习,也是在职网页设计制作人员在实际配色工作中的理想参考书。希望本书可以为广大网页设计者提供最大的帮助。编者2018年7月  第1章 色彩搭配基础

作为一种视觉语言,色彩随时随地影响着人们的日常生活。自然界中美妙的色彩,刺激和感染着我们的视觉,提供给我们无限的视觉空间。人们对于色彩从认识到运用的过程也就是感性认识向理性认识升华的过程。1.1 色彩入门知识

在人类赖以生存的地球上,人们每天的生活都被各种各样的色彩包围着,色彩使得周围的环境更加妙趣横生、丰富多彩。如果世界上没有光,人类所看到的一切都是黑色的。因为有了光,色彩才会出现。1.1.1 色彩的产生

在日常生活中,充满各种各样的色彩。从光学的角度来说,世界上的一切物体之所以会出现不同颜色,是因为光源照射。

提示:既然光是色彩存在的必备条件,那么色彩产生的理论过程为:光源(直射光)——物体(反射光、投射光)——眼(视神经)——大脑(视觉中枢)——产生色感(知觉)。

我们日常所见到的白光,是由红、绿、蓝3种波长的光组成的,在同一种光线条件下,经由人的眼睛,传达到大脑形成了我们所看到的各种不同的颜色,反射光不同,眼睛就会看到不同的色彩。由此看来,物体的颜色就是它们反射的光的颜色,如下图所示。

提示:nm是一个长度单位,意思就是纳米的意思,1纳米的长就-9是:10米。也就是10亿纳米等于1米。1.1.2 光源色、物体色和固有色

光源可以分为两种:一种是自然光,如太阳光等;另一种是人造光,如蜡烛光、灯光等。物体色是光被物体反射或透射后的颜色。所以,光源色和物体色有着必然的联系,如下图所示。

提示:由此可以得出以下结论:没有光就没有色,不同的光可以产生不同的色;不同的物体对各种光照的反映不同。正常绿色光红色光

1 光源色

各种光源发出的光,由于光波的长短、强弱、光源性质的不同,呈现出的颜色也不同,这种不同的色光被称为光源色。如一张白纸,在红光下呈现红色,在白光下呈现白色。像霓虹灯、饰灯等的光线都可以直接进入视觉,如下图所示。阳光灯光

●精彩案例分析

该网页以蓝色渐变为背景色,蓝色可以给人一种沉稳、理性、踏实的感觉,加上黄色点缀,突出主题。

以黄色为主调色,而且使用了大量的渐变色,使黄色既带给浏览者明朗愉快的感觉,又不会过分夸张。

提示:光源具有很多属性,如波长的强弱、性质等。因此,得到的色彩也不同,不同光照射在相同颜色的物体上,呈现的颜色是不同的。当夕阳照射不同的物体时受到光源色的影响,呈现出浓郁的橙黄色。

2 物体色

日常所见的非发光物体会呈现出不同的颜色。它是由光源色经过物体的吸收反射,反映到视觉中的光色感觉,这些感觉到的色彩称为物体色,如动植物的颜色、服装的颜色和建筑的颜色等。物体分为透明体和不透明体两种,透明体呈现出的色彩由它所能透过的光决定,而不透明体呈现的色彩是由它反射的色光决定的,下图所示为物体色。植物颜色物体颜色

●精彩案例分析

该网页使用高纯度低明度的对比冷暖色调进行对比配色,使网页画面颜色艳丽丰富。

该网页背景由橙色渐变到黄色,给人一种平稳、亲和的感受,红色的点缀丰富了网页色彩。

3 固有色

固有色,就是指物体在正常阳光下呈现出的固有色彩效果。自然界中的一切物体都有其固有的物理属性,它对入射的光都有固定的选择吸收特性,即具有固定的反射率和透射率。人们在标准的日光下看到的物体颜色是稳定的,下图所示为固有色。固有色

●精彩案例分析

该网页运用了大面积的灰色作为背景。在减少浏览者视觉压力的同时,更加衬托了页面中的产品,强烈吸引浏览者的视觉,更让人感觉回味无穷。

该网页背景是由黄色、红色和橙色3种暖色调组成的,令人心态平稳、缓和,红色的加入为页面增添了亮点。1.2 色彩的属性

在运用和使用色彩之前,要掌握使用色彩的原则和方法。自然界中的颜色可以分为无彩色和彩色两大类。无彩色指黑色、白色和各种深浅不一的灰色,而其他所有颜色均属于彩色。每一种色彩都会同时具有3个基本属性:色相、明度和纯度。1.2.1 色相

色相是指色彩的相貌,准确地说是按照波长来划分色光的相貌。各种色相是由射入人眼的光线的光谱成分决定的,人眼对每种波长色光的感知就形成一种色相。色相环如下图所示。

色相环是由原色、二次色和三次色组合而成的。色相环中的三原色是红、蓝和黄,二次色是橙、绿和紫,红橙、黄橙、黄绿、蓝绿、蓝紫和红紫为三次色。三次色是由原色和二次色混合而成的,如下图所示。1.2.2 明度

明度是指眼睛对光源和物体表面的明暗程度的感觉,所有的颜色都有不同的亮度,亮色称为“明度高”,反之,称为“明度低”。明度最高的颜色是白色,明度最低的颜色是黑色。明度的变化如下图所示。

色彩的明度变化,越往上的色彩明度越高,越往下的色彩明度越低。1.2.3 饱和度

饱和度也叫纯度,指颜色的纯洁程度(鲜艳程度),表示色彩中含色成分与消色成分的比例。色彩的纯度越低,含有色彩的成分比例越小。色彩的纯度越高,则色彩成分的比例越大。

不同的颜色的纯度也有高低之分,如红色的纯度最高,而青绿色的纯度最低。从科学角度来看,一种颜色的鲜艳度取决于这一色相发射光的单一程度。不同的色相不仅明度不同,纯度也大不相同。效果如下图所示。

从上至下色彩的纯度逐渐降低,上面是不含杂色的纯色,下面则接近灰色。1.3 色彩在网页中的应用

一个好的网页设计会给用户带来记忆深刻、好用易用的体验。色彩在网页设计的版式、信息层级、图片等视觉方面的运用,直接影响到用户对网站的最初感觉。在这些内容中,色彩的配色方案是至关重要的,网站整体的定位、风格调性都需要通过颜色,给用户带来感官上的刺激,从而产生共鸣。1.3.1 网页色彩特征

在浏览信息、观看网页时,色彩是最富有表现力和感染力的视觉元素,在网页中是最能吸引阅览者视线的。网页上的色彩会随着用户的计算机显示器环境的变化而变化,无论颜色是多么相同,不同的显示器下也会有细小的差异。但这不是色彩的基本概念不同而产生的问题,只不过设计人员在网页中使用色彩要多费些脑筋。

提示:计算机显示器是由一个个被称为像素的小点构成的。像素把光的三原色红、绿、蓝(实际工作中的三原色和美术学中的三原色有区别)组合成的色彩按照科学的原理表现出来。一个像素是8位元色彩的信息量,从0~255,0是完全无光的状态,255是最亮的状态。

●精彩案例分析

红色与橙色进行搭配,通过渐变的手法构成和谐的背景色,不同程度的黑色融入使画面具有一定的安定感。

网页上的色彩会随着用户的显示器环境的变化而变化,无论颜色是多么相同,也会有细小的差异。1.3.2 网页安全色

网页安全色颜色使用了一种颜色模型。该模型可以用相应的十六进制值00、33、66、99、CC和FF来表达三原色中的每一种。这种基本的Web调色板将作为所有的Web浏览器的标准,包括了十六进制值的组合结果。

网页安全色是当红色、绿色、蓝色颜色数字信号值分别为0、51、102、153、204、255时构成的颜色组合,一共有6×6×6=216种颜色(其中彩色为210种,非彩色为6种)。安全色效果如下图所示。

提示:256色里有40种颜色在Macintosh和Windows里显示的效果不一样,所以能安全使用的只有216色。为了尽量让用户看到色彩相同的网页,请尽量使用下面的216色,合理的色彩运用可以让你的网站更加完美。网页安全色效果图Photoshop的安全色1.4 色彩的联想作用

色彩是我们接触事物的第一直观认知。在浏览一个新的网页时,第一认知的不是页面的具体结构和信息内容,而是页面色彩搭配的视觉效果。色彩对每个人、地域或国家都有不同的情感认知和联想意义。从某种程度看,大多数人对色彩的认知和联想是一致的。网页的色彩,是访问者登录页面时的第一印象,好的页面色彩能给用户留下深刻的印象,并且能产生很好的视觉效果和营造网站整体氛围的作用。1.4.1 红色

红色是热烈、冲动、强有力的色彩,对于人的眼睛的刺激效果最显著,最容易引人注目。最受瞩目的颜色就是红色。它除了具有最佳的明视效果之外,更有积极、热力、温暖等含义的精神。另外红色经常作为警告、禁止等表示用色,人们在一些场合或物品上看到红色标识时,就了解其警告着某些危险。

●红色系

●精彩案例分析

页面使用橙色和红色作为背景色,同属于高纯度的色系,使页面的视觉冲击力变强,也使页面的设计感增强。

该网页的背景色为红色,红色是非常温暖的颜色,更能刺激人的食欲,加入黄色,可以突出主题。

●配色辞典1.4.2 橙色

橙色是活泼欢快的色彩,是暖色系中最温暖的颜色,它使人联想到秋天——收获的季节,因此是一种富足、欢乐而幸福的颜色。由于橙色非常明亮刺眼,因此这种颜色尤其运用在服饰上。

●橙色系

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载