资源简介

(共19张PPT)
Part of web design
第二章 网页色彩的
组成部分
网页的主色调The Main Tone of The Page1网页的辅助色The Auxiliary Colorof The Web Page2网页的点睛色The Highlight of The Web Page34目 录CONTENTS网页的背景色The Background Colorof The Web Page网页的主色调网页的主色调1PART请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。网页的主色调The Main Tone of The Page2.1. 网页的主色调从色彩学的角度上说，一个网页中只有一个主题色，也称为主色调。主色调是指在网页中运用的最主要的色彩，其中包括大面积的背景色和装饰图形、图片颜色等构成视觉中心的颜色。主色调是网页色彩设计的中心色，在搭配其他的颜色的过程中，通常以主色调为作为基础，与其互相协调和统一。图2-1所示网页的主色调是蓝紫色，与不同纯度和明度的蓝紫色相搭配，使整个页面相互协调，蓝紫色是此网页视觉中心的颜色。图2-1网页主色调2.1. 网页的主色调如图2-2所示，此网页的主色调选择了与背景色或者与辅助色相近的同色色相颜色或邻近色，营造了华丽而晦暗的场景，使得页面整体协调，视觉效果稳重。图2-2稳重的网页主色调网页的主色调The Main Tone of The Page2.1. 网页的主色调如图2-3所示的网页是太和环球嘉年华游乐园网站的首页，其使用了一种非传统配色方案，利用与背景色相对比的红色和橙色，再结合丰富的动画元素，为浏览者营造出一种欢快、愉悦的氛围。图2-3太和环球嘉年华游乐园网页的主色调The Main Tone of The Page2.1. 网页的主色调如图2-4所示的网站页面的主色调是渐变的蓝色，整体给人一种淡雅、清新与浪漫的心理感受，让人感到洗衣液产品的可靠性与真实性。图2-4蓝月亮网站网页的主色调The Main Tone of The Page网页的辅助色2PART网页的辅助色网页的辅助色The Auxiliary Color of The Web Page2.2. 网页的辅助色主色调与辅助色共同构成网页的标准色彩。辅助色的页面占用比例仅次于主色调，起到烘托主色调、支持主色调以及融合主色调的作用。辅助色在整体的画面中应该起到平衡主色调的视觉效果和减轻用户所产生的视觉疲劳，起到一定视觉分散的作用。图2-5所示，此网页的辅助色只使用一种色彩，网页选取了与主色调相协调的深蓝色作为辅助色，使得网页更加有层次。图2-5以一种色彩为辅助色的网页2.2. 网页的辅助色图2-6所示的是西班牙一个餐饮类网站的首页，设计者巧妙地让绿色系的美食作为辅助色，并悬浮在纯白的背景上，逼真的食物仿佛轻盈无重量一般，呈现出独特的视觉体验。图2-6一种单色系为辅助色的网页网页的辅助色The Auxiliary Color of The Web Page2.2. 网页的辅助色图2-7所示，此网页的辅助色是第三种形式：由几种色彩组合而成的色系。黄色和橙黄色偏多，这两种颜色有刺激食欲的心理效应，很好地宣传了网页的广告效益。另外，红色和黄色所占的比例恰当，使得这两种颜色起到很好的视觉效果，平衡了网页的主色调，吸引眼球。图2-7不同色彩组合为辅助色的网页网页的辅助色The Auxiliary Color of The Web Page2.2. 网页的辅助色图2-8主色调为大面积的蓝灰色。而白色与灰色则为辅助色，整个页面从主页到链接页都显得沉稳、冷静与高雅。图2-8 kazustyle网站网页的辅助色The Auxiliary Color of The Web Page网页的点睛色网页的点睛色3PART网页的点睛色The Highlight of The Web Page2.3.网页的点睛色在网页设计中，辅助色和点睛色能够丰富页面，增强页面的层次感，使整个页面看起来显得生动活泼。确定主色调和辅助色后，通过在小范围内加上强烈色彩，即点睛色来突出主题效果，使得页面更加鲜明生动。如图2-9所示的青岛科技大学网站首页的“学术聚焦”页面，在清爽的渐变蓝的主色调下，选择了其对比色—亮橙，作为网页设计中的点睛色，又与学校标识“QUST”相呼应，突出了网页的主题效果，使得页面更加鲜明生动。图2-9网页中橙色的点睛色应用在网页设计中，辅助色和点睛色能够丰富页面，增强页面的层次感，使整个页面看起来显得生动活泼。确定主色调和辅助色后，通过在小范围内加上强烈色彩，即点睛色来突出主题效果，使得页面更加鲜明生动。2.3.网页的点睛色点睛色面积越小，颜色越鲜艳，如图2-10所示，从主页到链接页，都使用了高纯度的黄色作为点睛色，活跃和调节画面的色彩关系。图2-10NAMDO ACRYL网站网页的点睛色The Highlight of The Web Page网页的背景色网页的背景色4PART网页的背景色The Background Colorof The Web Page网页背景经常出现的形式大概有四种：1、白色背景 2、纯色背景3、渐变颜色背景 4、图像背景网页背景色也被称为网页的“支配色”， 网页 背景是决定网页整体配色印象的重要颜色。网页背景色是指网页空间中大块面积的颜色，主要是网页最底层的底色，起到协调、支配整体的作用。网页中背景设计是相当重要的，影响用户对整个网页的印象。如图2-11所示，网页运用白色的背景色，突出主题。图2-11白色背景2.4.网页的背景色图2-12渐变色背景2.4.网页的背景色网页的背景色The Background Colorof The Web Page图2-12所示的网页运用渐变色作为背景，在体现出网页独特风格的同时又突出主题。图2-14华为耳机2.4.网页的背景色网页的背景色The Background Colorof The Web Page图2-13所示的故宫博物院首页，使用红色建筑一角的摄影图为背景，景深拉大，赋予网站沉浸感和神秘感。图片背景如图 2-14 所示，背景采用了灰色系列，体现了华为耳机产品的高格调与空灵感，明确地表达了“真无线，听起来真自在”意念，使浏览者有一种身临其境的感觉。

展开更多......

收起↑