搜索
Web开发与技术设计网络中心孙润元nicstaff@ujn.edu.cn网页界面中的色彩设计2020/2/25Copyright2003SunRunyuan2色彩设计哲学色彩令这个世界变得缤纷，它能改变我们的心情，影响我们对某事某物的看法。在你和颜色相遇的一刹那，你可以意会到在那或温柔，或暴烈的色彩底下，它所传递给你的讯息。色彩运用是门学问，一件设计作品，一般包含三个元素：色彩、图像、文字。这三个元素中，以色彩较为重要。人对色彩是相当敏感，当他们首次接触一件设计作品，最先攫取其注意力的，就是作品的颜色，其次是图像，最後才是文字。2020/2/25Copyright2003SunRunyuan3色彩设计哲学——色彩密码色彩牵涉的学问很多，包含了美学、光学、心理学和民俗学等等。每一种色彩都具有象征意义，当视觉接触到某种颜色，大脑神经便会接收色彩发放的讯号，即时产生联想例如红色象征热情，於是看见红色便令人心情兴奋；蓝色象征理智，看见蓝色便使人冷静下来。2020/2/25Copyright2003SunRunyuan4色彩设计哲学——色彩象征红——血、夕阳、火、热情、危险橙——晚霞、秋叶、温情、积极黄——黄金、黄菊、注意、光明绿——草木、安全、和平、理想、希望蓝——海洋、蓝天、沉静、忧郁、理性紫——高贵、神秘、优雅白——纯洁、素、神圣黑——夜、死亡、邪恶、严肃。2020/2/25Copyright2003SunRunyuan5色彩设计哲学——色彩象征不同的人，对同一种颜色的密码，会作出截然不同的诠释个人的年龄、性别、职业、他所身处的社会文化及教育背景，都会使人对同一色彩产生不同联想在不同文化体系下，色彩会给设定为含有不同特定意思的语言，所表达的意义可能完全不同在选择运用何种色彩时，须得同时考虑作品面向的是那一个社群，以免得出反效果2020/2/25Copyright2003SunRunyuan6色彩设计哲学——流行色彩当某个时期，某种颜色或某系列的颜色成为当时社会上的主流偏好，设计师设计新作品时，便不免会较容易倾向选择那些流行色彩。流行色的研究，是近半世纪的一门新兴学科。世界上有一个国际流行色委员会，专门研究色彩的潮流。事实上，大部份的流行色彩都是因商业因素而产生，市场中，一群商业投资者和设计师共同努力推动某些色彩，营造一种「某色是最流行」的气氛，导致新的流行色系出世。2020/2/25Copyright2003SunRunyuan7色彩设计哲学——意念为体色彩为用色彩的魔力是巨大的，当一个人面对数以千计的颜色时，其瞬间的兴奋、眼花撩乱，足以令他完全忘记一个作品最初想要表达的是什么，真正要突出的是什么。设计三元素：色彩、图像、文字，全部都只不过是一个设计的外表，一个设计的真正灵魂其实来自设计师的创意。没有意念的色彩设计，无异于一具空有漂亮外表的躯壳，在最初目睹的一刻，或会慑住周围的目光，但观众能否长期记得这个设计，却很成疑问。只有把创作意念融入色彩设计中，整个设计才有灵魂，那些颜色才晓得向观众传情达意。2020/2/25Copyright2003SunRunyuan8网页的色彩选择和搭配网页的色彩选择和搭配是网页设计重点之一，用什么色彩才能最好的表达出网站的内涵？网页的色调、背景、文字、图标、边框、链接应该采用什么样的色彩，应该如何搭配，都是网页设计一开始就必须考虑的问题。色彩的运用在网页中的作用真是太重要了，有些网页看上去十分典雅、有品位，令人赏心悦目，但是页面结构却很简单、图象也不复杂，这主要是色彩运用得当。2020/2/25Copyright2003SunRunyuan9色彩在网页界面设计中的作用视觉区域划分利用色彩分布，可以将不同类型的信息分类排布，并利用各种色彩带给人的不同心理效果，很好地区分处主次顺序，从而形成有序视觉流程。2020/2/25Copyright2003SunRunyuan10色彩在网页界面设计中的作用突出主题利用不同色彩自身的表现力、情感效应以及审美心理感受，可以使网页的内容与形式有机地结合起来，以色彩的内在力量来烘托主题、突出主题。2020/2/25Copyright2003SunRunyuan11色彩在网页界面设计中的作用吸引视线网页界面中的色彩应用，或含蓄优雅、或动感强烈、或时尚新颖、或单纯有力，无论哪一种形式都是为了一个明确的目标，即引起更多浏览者的关注。2020/2/25Copyright2003SunRunyuan12色彩在网页界面设计中的作用增强艺术性以色彩的科学知识为基础，进而从美学的角度去探讨色彩设计的表现形式，可以大大增强界面设计作品的艺术性，创造出更富审美情趣的作品。2020/2/25Copyright2003SunRunyuan13色彩的要素自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。任何一种彩色具有三个属性：•色相(Hue)：也叫色泽，表示色的特质，是颜色的基本特征，反映颜色的基本面貌，是区别色彩的必要名称，例如红、橙、黄、绿、青、蓝、紫等。色相和色彩的强弱及明暗没有关系，只是纯粹表示色彩相貌的差异。•饱和度(Saturation)：也叫纯度，指颜色的纯洁程度。具体来说，是表明一种颜色中是否含有白或黑的成份。假如某色不含有白或黑的成份，便是「纯色」，彩度最高；如含有越多白或黑的成份，它的彩度亦会逐步下降。•明度(Brightness或Lightness或Luminousity)：也叫亮度，体现颜色的深浅，表示色彩的强度，也即是色光的明暗度。不同的颜色，反射的光量强弱不一，因而会产生不同程度的明暗。非彩色只有明度特征，没有色相和饱和度的区别。2020/2/25Copyright2003SunRunyuan14明度无彩色系中，最高明度为白，最低明度为黑，二者之间为系列灰色。有彩色系中，黄色为最明亮的色，明度最高，在光谱中处于中心位置；紫色为明度最低的色，处于光谱边缘。2020/2/25Copyright2003SunRunyuan15色相在可见光谱中，人的视觉能够感受到红、橙、黄、绿、青、蓝、紫这些不同特征的色彩，将这些可以相互区别的色彩定下称谓，就形成了色相的概念。处于可见光谱两端的颜色——红色与紫色，被巧妙地连接起来，使色相序列显现出循环的形式，这就构成了色环。2020/2/25Copyright2003SunRunyuan16色性色彩的冷暖感觉叫做色性。色性是按冷暖感觉区分色相的一种方法，冷暖色的划分将颜色看作两大类型，有助于我们在网页的色调设计时注意色调基本倾向，便于把握网页的整体效果，达到和谐美观的目的。色相能够给人以冷热感觉上的联想，蓝色、绿色给人的感觉是冰冷的，人们将它们称为冷色；红色、黄色给人的感觉是火热的，人们将它们称为暖色；黑、白、灰色属于中性偏冷色。2020/2/25Copyright2003SunRunyuan17纯度纯度指色彩的纯粹程度，又称彩度、饱和度、艳度。在光学上，它取决于色彩波长的单一程度。简单地讲，光波波长越单纯，则色光越鲜明；而色光越混杂，则越会趋近于纯度为零的白光。当一种色彩加入无彩色时都会不同程度地减弱该色相的鲜艳程度。色彩的纯度变化系列是通过一个水平的直线纯度色阶来表示的，它表示一种色彩从它的最高纯度色到最低纯度色的中性灰之间的鲜艳与混浊的等级变化。不同的色相不但明度不同，纯度也不相同。有彩色系中，红色的纯度最高，橙、黄、紫色的纯度居中，纯度最低的是绿和蓝。而无彩色系的黑、白、灰的纯度都为零。在人的视觉中所能感受到的色彩范围内，绝大部分是非高纯度的色，即含有一定程度灰的色。细微的纯度差异会使色彩效果大相径庭，在实际设计中，对色彩纯度的选择往往是决定一种色彩的关键。2020/2/25Copyright2003SunRunyuan18色彩空间色彩空间，又称色彩模型，是一种以概念和数字来科学地描述色彩的方法。在设计领域，设计师们习惯用HLS（H：Hue，色调；L:Lightness，亮度；S：Saturation，饱和度）或HSB（H:Hue，色调；S：Saturation，饱和度；B：Brightness，亮度）系统来描述色彩空间。CorelGRAW中的色彩拾取器2020/2/25Copyright2003SunRunyuan19色彩空间CIE*Lab色彩空间（CIE，CommissionInternationaldel’Eclairage）：以三维空间中3个坐标轴线上的数值来描述可感知的颜色，3个轴线分别代表：L，颜色的明度；a，从绿到红的色彩范围；b，从蓝到黄的色彩范围。2020/2/25Copyright2003SunRunyuan20色彩空间RGB色彩空间：也称加色空间，指由色光混合而形成的色彩空间。计算机的显示设备和输入设备采用的就是RGB色彩空间的加色混合原理。但实际使用过程中应该注意，RGB色彩空间与所用设备的显示性能密切相关。2020/2/25Copyright2003SunRunyuan21色彩空间CMYK色彩空间：也称减色空间，指由色料混合而形成的色彩空间。色料的三原色为品红（Magenta）、黄（Yellow）和湖蓝（青，Cyan），由此3种色料任意组合即可产生其他色彩。色料混合也称减色混合或减光混合，当白色光线透过有色滤光片后，一部分光被反射而吸收其余的光线，这样就减少了一部分辐射功率，最后透过的光是两次减光的结果，因此这样的色彩混合称为减色混合。2020/2/25Copyright2003SunRunyuan22色彩的三原色生活中我们所看到的颜色是光的吸收与反射而产生的，红、黄、蓝是三种最基本的颜色，又称三原色。原则上，所有的色彩都可以用这三种色彩调和而成。视频方式色彩的基本色与通常所说的基本色有所不同，电脑屏幕的色彩是由RGB（红、绿、蓝）三种色光所合成的，而我们可通过调整这三个基色就可以调校出其它的颜色，例如红色是(R：255,G：0，B：0)，十六进制的表示方法为(FF0000)。白色为（R：255，G：255，B：255），十六进制的表示法是(FFFFFF)。我们在网页编辑器里经常看到的描述语言“bgColor=#FFFFFF”就是指背景色为白色。2020/2/25Copyright2003SunRunyuan23数字色彩模式——色彩解析度色彩解析度：解析度又称解像度，通常也被称为分辨率，它是数字图像的基础。在数字图像中，颜色数据的数目，或每一像素内含可表现颜色数据的总和，就被称作像素的色彩解析度。在以二进制为基础的数字系统中，最简单的像素具有0和1两种选择，即有或无、黑或白，被称为一位元图像或2的一次方。增加位元级数可增加颜色数据组合的数目。1位2种颜色2位4种颜色4位16种颜色8位256种颜色16位65536种颜色24位1677万种颜色32位1677万种颜色和256级灰度值36位687亿种颜色和4096级灰度值2020/2/25Copyright2003SunRunyuan24数字色彩模式——色彩模式位图模式也称单色模式，这种模式下的图像由黑色区和白色区组成，色彩位数为1，即每个像素只包含一个黑或白的信息。灰度模式这种模式下的数字图像解析度为8位，即每个像素用8位元来描述，可以表现256级灰度，图像中的全部色调和颜色都是由256级灰度来表示。2020/2/25Copyright2003SunRunyuan25数字色彩模式——色彩模式RGB色彩模式该模式下的数字图像解析度为24位，即每个像素以24位元来描述，其中R、G、B三色各占用8位，共计可表现1677万种色彩，被称为真彩色。CMYK色彩模式这种模式下的数字图像解析度为32位，C、M、Y、K四色各占用8位，其中K为256级灰度阶。2020/2/25Copyright2003SunRunyuan26数字色彩模式——色彩模式Index色彩模式若要把24位元的全彩图片转成256色的8位元，通常必须经过索引的步骤（Indexed），也就是在原本24位元的1677万色中，先建立颜色分布表