网页设计基础配色及页面排版布局

色彩的联想性：不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，
红色想到喜事等，选择要和你网页的内容相关联。
http://www.8219333.com/zhuanti/zxxz/
Page 13
LOGO
网站配色基本技巧
1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度， （说得通俗些就是将色彩变淡或者加深），产生新的色彩，用于网页。这 样的页面看起来色彩统一，有层次感。 2.用两种色彩。先选定一种色彩，然后选择它的对比色（如用蓝色和黄色， 整个页面色彩丰富但不花哨）。
黑白的3.5倍。也即是说，在一般情况下，彩色页面较完全黑白页面更加吸引
人。我们通常的做法是：主要内容文字用非彩色（黑色），边框，背景，图 片用彩色。这样页面整体不单调，看主要内容也不会眼花。 ·任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以 至少可以制作几百万种色彩。
LOGO
Page 10
LOGO
Page 36
谢谢观赏
WPS Office
Make Presentation much more fun
3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿
或者土黄、土灰、土蓝。 4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳”。
LOGO
Page 14
配色实例
LOGO
Page 15
网页色彩搭配忌讳
· 不要将所有颜色都用到，尽量控制在三中色彩以内。 · 背景色和前文的对比尽量要大，绝对不要用花纹繁复的图案作背景， 以便突出主要文字内容。 · 边框和背景的颜色应相似，且边框的颜色较深，背景的颜色较浅。
LOGO
Page 16
广告图片文字排版技巧
提高文字的可读性
文字 要达到这一目的必须考虑文字的整体诉求效果，给人以清晰的
作者的意图，表达设计的主题和构想意念。
的主要功能是在视觉传达中向大众传达作者的意图和各种信息，
视觉印象。因此，设计中的文字应避免繁杂零乱，使人易认，易懂，切忌 为了设计而设计，忘记了文字设计的根本目的是为了更好，更有效的传达
备注： 彩度也叫色彩纯度，纯度用来表现色彩的鲜艳和深浅。纯度是深色、浅色等色彩鲜艳度的判断
定義 區別色彩相貌的名稱 區別色彩明暗程度的名稱 區別色彩鮮濁度的名稱
其他名稱 波長、色調 光度、輝度 純度、色度
标准。全部顏色中三原色為纯度最高色，随着纯度的降低，就会变化为暗淡的，没有色相的色彩。
纯度降到最低是就会失去色相，变为无彩色。 同一色相的色彩，不掺杂白色或者黑色，则被称为纯色。在纯色中加入不同明度的无彩色，会 出现不同的纯度。以蓝色为例，向纯蓝色中加入一点白色，纯度下降而明度上升，变为淡蓝色。继 续加入白色的量，颜色会越来越淡，纯度下降，而明度持续上升。加入黑色或灰色，则相应的纯度 和明度同时下降。
LOGO
Page 5
色相变化的范例
LOGO
Page 6
色彩明度对比表
越颜 高色 越 往 上 色 彩 明 度
LOGO
Page 7
色彩明度的变化范例
LOGO
Page 8
色彩纯度对比表
LOGO
Page 9
网页设计的配色方案
·颜色分非彩色与彩色两类：非彩色指黑、白、灰，其它为彩色。网页制作 用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是
一开始好象总感觉文字
在这里面的表现力有些 苍白了。对主题的表达 没有什么帮助。那么试 一下改成这样行不行
LOGO
Page 29
总结 实例欣赏
· 网页设计颜色 1.广告图片、文字与整体网站风格的统一协调性
LOGO
Page 30
总结 实例欣赏
2.主题突出有很多方法，尽量少用大红大绿来体现突出 内（且 ）尽颜 量色 保不 证宜 在太 多 种 太 颜 花 色 哨 以 3
LOGO
Page 2
CMYK与RGB色区别
CMYK色： C=100蓝 M=100桃红 Y=100黄 K=100黑
RGB混色： 三原色红、绿、蓝 电脑显示器的色彩 组成
LOGO
Page 3
CMYK色详解
C=100
M=100
Page 4
Y=100
K=100
LOGO
色彩的三要素
名稱 色相 明度 彩度
如果你不小心做成了这样（有意安排这种效果的不在此例）
LOGO
Page 21
文字的位置要符合整体要求
文字一定不要全部都顶着画面的边角，这样看起来很不专业
再说一点细节上应该注意的问题，这是容易忽视的地方，也是容易出问 题的地方
这样看起来就好一点了
LOGO
Page 22
在视觉上应给人以美感
在视觉传达的过程中，文字作为画面的形象要素之一，具有传达感情 的功能，因而它必须具有视觉上的美感，能够给人以美的感受。字型设计 良好，组合巧妙的文字能使人感到愉快，留下美好的印象，从而获得良好 的心理反应。反之，则使人看后心里不愉快，视觉上难以产生美感，甚至 会让观众拒而不看，这样势必难以传达出作者想表现出的意图和构想。 这是一个带有图形的文字版面，也许你认为这样也不错了
LOGO
Page 17
举例如下
让你想表达的内容清晰，醒目。让阅览者一开始就可以明白你的意思
避免使用不清晰的字体，否则容易使阅览者产生反感和麻烦 （除非你需要这种效果）
恰当的选择你所需要的字体
LOGO
Page 18
举例如下
但是，经过特别的处理，你可以使用一些本来并不合适的字体，比如
注意文字在编排时的方向，注意安排阅览者的视线
颜色搭配案例
Page 31
01
02
03
LOGO
总结 实例欣赏
3.知道图片中心在哪里？
4.把平面做出动态来
LOGO
Page 32
总结 实例欣赏
5.发挥素材最大的利用率,文字也是有生命的
网站实例： http://www.8219333.com/zhuanti/rltm/ http://www.8219333.com/zhuanti/rlsj/
但是是不是太平淡了呢？改一下文字的位置和大小，效果又会怎么样呢？
看下图
LOGO
Page 23
在视觉上应给人以美感
或者是这样也可以，看下图
感觉到了什么吗？其实就是这么微妙，有时只是一点小变化，味道却不一样多了。
再看看字间距的问题
改一下看看，好一点了吗？
LOGO
Page 24
文字的位置要符合整体要求
那么加一点自己的感受在里面，对文字的大小、间距、透明度做些调整， 就会是完全不同的效果了。很有意思是吗？
LOGO
Page 28
在设计上要富于创造性
根据画面或作品的要求，可以使用一些图形化的文字
（这可是 汉字设计的一种新观点）[解文说字]。 注：所谓“文字图形化”即将文字笔画做合理的变形搭配，使之产生类 似有机或无机图形的趣味。强调字体本身的结构美和笔画美。
每种色彩的饱和度，透明度上略微变化就会产生不同的感觉。一绿色
为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。
LOGO
Page 12
网页配色原理
色彩的鲜明性：网页的色彩要鲜艳，容易引人注目。 色彩的独特性：要有与种不同的色彩，使得大家对你的印象强烈。 色彩的合适性：就是说色彩和你表达的内容气氛相合适。如用粉色体现女性站 点的柔性。
对于大的字体如果你照搬上面的做法，也许你会处理成这个样 子，这样 看起来字与字之间会比较松散
调整后是这样，看起来紧凑多了。字与字之间的对应关系也出 来了
再看看段落文字的处理
LOGO
Page 25
文字的位置要符合整体要求
字体加大后，段落之间的距离也应该随之调整（在这里，小字体同样应 用这一规则，不过是相反的） 比如，没有调整段落距离的时候,调整后可以是这样
如果有多个段落，就要注意更多的问题，比如主次和轻重，以及在内容 表达当方面的重要程度等，看这个例子
Βιβλιοθήκη Baidu
LOGO
Page 26
文字的位置要符合整体要求
文字在画面中的安排要考虑到全局的因素，不能有视觉上的冲突。否 则在画面上主次不分，很容易引起视觉顺序的混乱。而且作品的整个含义 和气氛都可能会被破坏，这是一个很微妙的问题，需要去体会。不要指望 电脑能帮你安排好，它有时候会帮你的倒忙。细节的地方也一定要注意， 1个像素的差距有时候会改变你整个作品的味道。 安排好文字和图形之间的交叉错合，既不要影响图形的观看，也不能影 响文字的阅览。
好好学习， 天天向上！
网页设计色彩及布局
成功的战争，需要天时、地理、人和！成功的作品，也需要天时、地理、人和！
目录摘要
网页设计颜色搭配
1.CMYK与RGB色区别； 2.色彩的三要素； 3.网页色彩搭配； 4.网站字体颜色设计实例；
广告图片文字排版技巧 1.提高文字的可读性; 2.文字的位置要符合整体要求; 3.在视觉上应给人以美感； 4.在设计上要富于创造性; 总结 实例欣赏
如果：
LOGO
Page 19
举例如下
那么，你可以做成这样
那么，你可以做成这样
最后一点，通常情况下，你应该
LOGO
Page 20
文字的位置要符合整体要求
文字在画面中的安排要考虑到全局的因素，不能有视觉上的冲突。否 则在画面上主次不分，很容易引起视觉顺序的混乱。而且作品的整个含义 和气氛都可能会被破坏，这是一个很微妙的问题，需要去体会。不要指望 电脑能帮你安排好，它有时候会帮你的倒忙。细节的地方也一定要注意， 1个像素的差距有时候会改变你整个作品的味道。 安排好文字和图形之间的交叉错合，既不要影响图形的观看，也不能影 响文字的阅览。
如果你不小心做成了这样（有意安排这种效果的不在此例）
LOGO
Page 27
在设计上要富于创造性
根据作品主题的要求，突出文字设计的个性色彩，创造
与众不同的独具特色的字体，给人以别开生面的视觉感受，有利于作者设 计意图的表现。设计时，应从字的形态特征与组合上进行探求，不断修改， 反复琢磨，这样才能创造出富有个性的文字，使其外部形态和设计格调都 能唤起人们的审美愉悦感受。 这是一个很普通的文字版面
LOGO
Page 33
总结 实例欣赏
6.图片中的对比手法
7.其实平面也是有空间的
LOGO
Page 34
总结 实例欣赏
8.图片中的视觉流向 上 到 下 左到右
近到远
LOGO
Page 35
总结 实例欣赏
9.如果你感兴趣，每种方法都可以去试着做几张图片对比下
成功只在于你要与不要之间 没有可是怎么或可能怎么？
非彩色与彩色搭配
黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是中庸色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。 如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。
LOGO
Page 11
颜色分为：暖色系、中性色、寒色系
不同的颜色会给浏览者不同的心理感受，如：绿色---介于冷暖两色彩的中 间，显得和睦，宁静，健康，安全的感觉。他和金黄，淡白搭配，可以产 生优雅，舒适的气氛。