网页设计之色彩搭配优秀PPT.ppt

《网页设计之色彩搭配优秀PPT.ppt》由会员分享，可在线阅读，更多相关《网页设计之色彩搭配优秀PPT.ppt（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计之色调网页设计之色调书目n色调的基本学问n 色调的形成n色调的分类n色调的构成元素n色相环n冷暖色系n同一色系n色相环色相关系n色调的感觉n色调的意向n网页色调搭配n颜色在网站中的运用n网页色调搭配原理n色调运用技巧n色调运用忌讳n大公司网站颜色运用例子色彩基本知识色调的形成红、绿、蓝三种波长的光是自然界全部颜色的基础，光谱 中的全部颜色都是由这三种光的不同强度构成。这三种光本身各自独立，其中任何一种都不能由其余两种光混合产生。所以我们把这三种颜色的光称为“色光三原色”“三原色”色调是光照射在物体上而反射到人眼的一种视觉效应。我们日常所见到的白光，实际是由红、绿、蓝三种波长的光组成，物

2、体经光源照射，吸取和反射不同波长的红、绿、蓝光，经由人的眼睛，传到大脑形成了我们看到的各种颜色，也就是说，物体的颜色就是它们反射的光的颜色。色调的分类色调的构成元素色相 色调的相貌，类似于人名，准确地表示某种颜色色别的名称。如：中国红，军绿色等明度 颜色明暗深浅表现，各种颜色的不同明度。黄色明度最高，蓝紫色最低，红色为中间明度 颜色越浅 明度越高 颜色越深 明度越低色调的构成元素纯度（彩度、饱和度）色调的纯净程度，明丽程序，表示颜色中含有色部份的比例 纯色+白色 明度 越高 饱和度越低 纯色+黑色 明度越低 饱和度越低 纯色+灰色 明度不变 饱和度越低色调：色相、明度、饱和度结合 到一起,分有

3、彩色、无彩色 纯色+白色 浅色调 粉彩色调 纯色+黑色 深色调 暗色调 纯色+灰色 浊色调 浅灰色调色相环色相环，是以三原色为基础并把它做为主要色相，再两两混合成次要色相，两种次要色相混合，衍生而成（我们一般说的12色相环和24色相环就是如此）冷暖色系产生于人们生活阅历与干脆联想同一色相中 明度越高，越冷 明度越低，越暖色相环 暖色系：红橙黄 冷色系：蓝绿紫 中间色：黑白灰同一色系 同一色相 不同明度 饱合度呈现现的色调（同一色系色调进行配色最平安配色）色相环色相关系类似色 30-60度间的色调接近色 左右相临的色调对比色 120-150度色调 差异很明显，留意颜色面积，比例，明 度，饱和度上

4、的配置，才能显现出活泼，轻快的感觉互补色 180度对角位置 色调的感觉色调冷暖感觉 明度越高 越冷 如 粉红深蓝 凉爽 也与配色面积有关 较小黄配冷 冷 较小黄配暖色 暖色调的联想，可以是具体的，也可以想象的，因每个人生活的经验等不同产生的联想也不同，以大多数人的联想为依据，这样所产生的形象误差会比较小联想所产生的心理感觉 比如冷、热（以大多数人为主）色调的感觉色调轻重感觉 明度越高 越轻 明度越低 越重 明度高，饱和度越低 越轻 明度低，饱和度越高 越重 冷轻-暖重 女性网站 轻 温顺可爱 男性网站 重 稳重牢靠色调爽朗郁闷感觉 暖 爽朗 冷 郁闷 明度 越高 爽朗 明度 越低 郁闷 白色

5、爽朗 黑色 郁闷 色调的感觉色调兴奋沉积感 兴奋感觉 让心情沉稳 暖兴奋 冷 沉稳 明度越高 越兴奋 越低越沉稳 饱和度越高 越兴奋 越低越沉稳色调华丽朴实感 饱和度越低越朴实 越高越华丽 色调 低明度暗色调与深 色调 朴实 超群度纯色调为主 华丽色调酸甜苦辣色调的感觉色调的酸甜苦辣 酸：蓝、绿、黄、橙黄 甜：黄、橙、粉红、乳白 苦：棕色、黑褐色、灰黑色 辣：红，黄、黄绿、绿色调的意向红色是最具有视觉冲击力的色调；示意速度和动态；可以刺激心跳速度、加快呼吸、刺激食欲；红色的衣服使人身形显大；红色的车最简洁被偷红色的具象联想火焰、鲜血、性、西红柿、西瓜瓤、太阳、红旗、口红、中国国旗。红色的正面联

6、想激情、爱情、鲜血、能量、热心、激烈、热量、力气、热忱、活力。红色的负面联想侵略性、生气、斗争、革命、残忍、不道德、危急、无趣、卑俗。红色的文化域在非洲，红色代表死亡。在法国，红色代表雄性。在亚洲，红色代表婚姻、旺盛、快乐。在印度，红色是士兵的颜色。在南非，红色是丧服的色调。色调的意向红色：热忱、活泼、热闹、革命、暖和、祥瑞、进取、活力、忠诚、危急、警示、引起留意、禁止等。色相：大红、桃红、玫瑰红、砖红橙色：光明、华丽、兴奋、活力、快乐、警示、提示等。色相：大黄、柠檬黄、土黄、柳丁黄、米黄绿色：和平、安静、环保、通畅、正确、柔软、青春、平安、志向等。色相：大绿、草绿、翠绿、橄榄绿、墨绿蓝色：专

7、业、睿智、科技、深远、永恒、城市、朴实、寒冷、历练等。色相：湖蓝、普蓝、天蓝、深蓝色调的意向紫色：珍贵、奇妙、优雅、魅力、高傲、松软。色相：正紫、耦合、贵族紫、葡萄紫、深紫白色：纯结、天真、空灵、明快、弱小、朴实、神圣、恐怖、无味等。灰色：质朴、睿智、大气、谦逊、平凡、中庸、孤独、迟疑、消极等。色相：浅灰、中灰、深灰、老鼠灰、蓝灰黑色：奇妙、肃穆、崇高、坚实、诡异、黑暗、缄默、无望、死亡、罪恶等。褐色：古朴、高雅、原始、古老、陈旧、稳重、厚重等 色相：卡其、象牙白、可可、麦芽、焦炭、原木、茶色网页色彩搭配颜色在网站中的运用色在网站中的运用颜色能赐予网站以意义。无论你是否准备为他们加上某种意义，

8、颜色本身就有很多特定的印象。用户阅读网页时，颜色帮助转移用户的视线，指引用户怎么去阅读一个页面。、在很多企业的网站中可以看出，颜色表达了情感和价值观，向用户展示着他们的公司是怎样的、他们所售卖的产品是怎样的。配对色的运用能变更一个网站的意义。给以柔软的蓝色为色调的、表达出安静网站配上光明的橙色，就能让它变成让人更多感受到兴奋和趣味的网站。网页色调搭配原理色调的显明性。网页的色调要明丽，简洁引人注目色调的独特性。要有别出心裁的色调，使得大家对你的印象猛烈色调的合适性。就是说色调和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。色调的联想性。不同色调会产生不同的联想。蓝色想到天空，黑色想到黑夜

9、，红色想到喜事等，选择色调要和你网页的内涵相关联。色调运用技巧黑白灰色调的应用 灰色是万能色，可以根随意一种色调搭配，对一些明度较高的网站，配以黑色，可以适当地降低明度。白色是网站用的最普遍的一种颜色。很多网站甚至留出大块的白色空间，作为网站的一个组成总部份。这就是留白艺术。很多设 计性网站较多运用留白艺术。留白，给人一个遐想空间，恰当的留白对于协调页面的均衡起到相当大的作用。色调运用技巧确定主题色 一个网站不行能单一的运用一种颜色，让人感觉单调、乏味；但是也不行能将全部的颜色都运用到网站中，让人感觉轻浮，花哨。一个网站必需有一种或两种主题色，不到于让客户迷失方向，也不至于单调、乏味。所以确定

10、网站的主题色也是必需考虑的问题之一 色调运用技巧用一种色调。这里是指先选定一种色调，然后调整透亮度或者饱合度（将色调加深或减淡），产生新的色调。用于网页。这样的页面看起来色调统一，有层次感色调运用技巧用两种色调。先选定一种色调，然后先择它的对比色。比如蓝色与黄色。这样搭配可以使整个页面色调丰富但不花哨用一个色系。简洁的来说就是一个感觉的色调，例如淡蓝，淡黄，淡绿，或者土黄，土灰，土蓝。用黑色各一种颜色。比如：大红的字体配黑色的边框感觉很“跳”。色调运用忌讳不要将全部颜色都用到，尽量限制在三种色调以内背景和前文对比尽量要大，确定不要用花纹繁复的图案作背景，以便主要文字内容依据文化背景适当的选择颜

11、色 黄色在信仰基督教的国家是下 等色。大公司的网站中大公司的网站中颜色运用的例子色运用的例子耐克耐克耐克常常更新他们的网站，但通常还是黑色和灰色的色调，它通常是暗。黑色显示着他们产品中的力气，留给大家他们向爱运动的顾客出售优质产品的印象。大公司的网站中大公司的网站中颜色运用的例子色运用的例子白宫白宫白宫的网站主要是白色和浅灰色，再加上一些蓝色和红色作强调色。白色象征着希望和自由，显露出平安和纯净的价值。红色和蓝色当然是美国的代表色，红色代表着热忱和能量，蓝色则代表着稳定与和平。大公司的网站中大公司的网站中颜色运用的例子色运用的例子亚马逊亚马逊亚马逊的网站大多是白色的，白色有着最佳的对比度和可读

12、性。它还显露出整齐性，让用户能自由地阅读网站。以橙色和蓝色的强调色则让用户能感到安定、兴奋，也让他们期望找到最满足的选购。大公司的网站中大公司的网站中颜色运用的例子色运用的例子Verizon公司公司红色是Verizon的企业品牌主色调，也是贯穿整个网站的颜色。红色有助于刺激用户的兴奋性，展示出一个出售让人兴奋和快速更新的产品的公司形象。白色背景的运用与亚马逊类似，通过一个整齐有序的界面来帮助用户阅读这个网站。大公司的网站中大公司的网站中颜色运用的例子色运用的例子百思买百思买百思买的网站的色调是深蓝色，显露出他们在电子市场中的稳定和实力。顾客在百思买上的大量选购使得他们须要平安感与平和感。黄色散

13、发的快乐气氛让他们在选购时感觉到兴奋与趣味。大公司的网站中大公司的网站中颜色运用的例子色运用的例子嘉信理财嘉信理财嘉信理财是一家投资公司，在不稳定的市场环境下他们须要让消费者在他们的网站上感受到平和。他们运用柔软的深蓝色调来实现这一点，并建立起一种安静、祥和的气氛。中性的棕色则是另一种帮助协调偏激的用户感受的企业色调。橙色作为强调色，能让用户在买股票时产生兴奋感，同时也为网站带来了华蜜感。大公司的网站中大公司的网站中颜色运用的例子色运用的例子道奇道奇道奇的网站大多是黑色系，能让网站上的图片凸显出来。他们运用一种明丽的红色作为强调色。黑色给网站带来力气感，在一种精致与阳刚的氛围下展示他们的产品。黑色是一种不错的颜色，它能使产品看起来珍贵、有价值。红色则表达出激情和兴奋，是希望能让消费者认为他们是从一个值得信任、质量有保障的公司购买到的车辆。-THE END-