网页版式设计-7 淡色调.pptVIP

网页设计中常用色调格局讲解训练（2） --淡色调的表现 什么是色调? 网页页面中总是由具有某种内在联系的各种色彩，组成一个完整统一的整体，形成画面色彩总的趋向，称为色调。也可以理解为色彩状态。色彩给人的感觉与氛围，是影响配色视觉效果的决定因素。 对比与调和就是形式美的变化与统一规律　　在一定条件下，不同色彩之间的对比会有不同的效果。在不同的环境下，多色彩给人一种印象，色彩单一给人另一种印象。　　各种纯色的对比会产生鲜明的色彩效果，很容易给人带来视觉与心理的满足。红、黄、蓝三种颜色是最极端的色彩，它们之间对比,哪一种颜色也无法影响对方。　　很多朋友都以为色彩对比主要是红绿、橙蓝、黄紫色的对比，实际色彩对比范畴不局限于这些。是指各种色彩的界面构成中的面积、形状、位置以及色相、明度、纯度之间的差别，使网页色彩配合增添了许多变化、页面更加丰富多彩。 何为淡色调？ 在我看来,淡色调应属于网页设计色彩中,颜色亮度偏高的色调称为淡色调. 色彩对比分析 纯度对比 → 纯度对比网页例图：http:// 纯度对比分析：　　整个页面看起来异常艳丽刺激然而又非常的协调。以上数值主要选取了几种较有代表性的颜色。　　大家注意看，以上色彩除了粉红色，其他几组颜色都是高饱和度高亮度的颜色，因此充分的发挥出了色彩的艳丽程度。包括粉红色在内的几种灰色阶，在中间起到了和谐作用。白色能拉开相近色阶的空间及明快页面的作用，在这里可以说是功不可没。　　结论：　　页面实际上用了不少颜色，配色大胆。抓住颜色主次冷暖的安排，适度再加上和谐的过渡色灰色，实现了作者对该页面的轻松配色。从多种高纯度的搭配协调能力上看，足可见作者对色彩设计搭配不一般的功底。　　这类网页配色非常能够体现出一个网站页面产品个性，配色难度大。让人过目难忘 明度对比 明度对比可分为:彩色差的明度对比及非彩色差的明度对比 　　　　是指色彩之间明暗程度的差别而形成的对比。是页面形成恰当的黑、白、灰效果的主要手段。明度对比在视觉上对色彩层次和空间关系影响较大。例如柠檬黄明度高，蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度。 → 明度对比网页例图： ?  面积调整 主次的面积区分。根据设计主题的需要，在画面的面积上以一方为主色，于是就掌控画面的色调作用，其他的颜色在使用面积上拉开距离，使画面的主次关系更突出，在统一的同时富有变化。 面积调整网页例图：http:// → 紫色浅紫色网页例图： 紫色系分析：（浅紫色）　　该页面使用特性最高的紫色提亮为100％高明度的主色调，很容易抓住人们的视线成为聚焦点，是非常大胆又时尚的配色。　　辅色调则是使用冷色系代表的深蓝色，明度较低。主要是为了烘托左边导航菜单，凸显上面的内容信息，由于人们对网页已然形成了视觉惯性，也起到了很好的视觉引导作用。　　主、辅色的搭配运用构成了较强烈的视觉对比效果。　　另一辅色调浅蓝色，在主色调浅紫色的烘托下呈现稚嫩的感受，里面的白色块起到浅紫的背景和浅蓝色调和、明快的作用。　　点睛色的使用实际有不少，这里只选几种起到主要作用的颜色做举例分析。中黄色运用得很珍贵，只在左上区域出现，旨在突出主题文字的效果。其他配色主要是根据左下文字字母而来，红和绿色出现在页面的浅紫色较为宽敞的位置，小范围的做色彩对比效果。其他点睛色则极少的零星分布，既调和呼应又起到活跃于页面的角色作用，以上这些都是点缀和渲染页面气氛不可缺少的配色元素。 　　结论：　　在紫色中加入白色，可使紫色略显沉闷的特征消失，变得清秀、优雅、娇气，并充满女性的魅力。　　白色、粉紫色、天蓝色的颜色搭配，是比较稚嫩的配色，同时也是最受少女欢迎的配色方案，这里运用也较得体。  紫色低纯度配色应用网页例图： 紫色系分析：（低纯度配色：紫色+绿色）　　该页面除了点睛色外，整体配色饱和度都很低，所以在视觉上呈柔和状态。　　主色调紫色的HSB模式H色相为308，数值稍向红色倾斜，由于饱和度及明度降低，颜色呈现很平和，空间感增强。辅助色绿色H色相为167，数值稍向蓝色偏移，从RGB模式上看，G为125（正绿色时为255，R为0，B为0），R为82，B116，有这两色混合，因此饱和度和明度都很低，然而在雅致的紫色背景的烘托下，较为突出了绿色的产品这一主角，达到配色目的。另一辅助色灰色，为整体的柔和状态增添了雅致的气息。　　点睛色黄色的特质因素，无疑是这页面最响亮耀眼的颜色尽管使用的面积较小，它是紫色的对比色，高纯度的黄色与低纯度的紫色形成较强烈的视觉反差对比效果，也因此使得页面的沉闷得到一定程度的缓解，提升页面配色的空间透亮感。