颜色搭配和布局.docx

1、绿色在黄色和蓝色（冷暖）之间，属于较中庸的颜色，这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。 绿色与人类息息相关，是永恒的欣欣向荣是的自然之色，代表了生命与希望，也充满了青春绿色在黄色和蓝色（冷暖）之间，属于较中庸的颜色，这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。 绿色与人类息息相关，是永恒的欣欣向荣是的自然之色，代表了生命与希望，也充满了青春活力，绿色象征着和平与安全、发展与生机、舒适与安宁、松弛与休息，有缓解眼部疲劳的作用。 它本身具

2、有一定的与自然、健康相关的感觉，所以也经常用于与自然、健康相关的站点。绿色还经常用于一些公司的公关站点或教育站点。 绿色能使我们的心情变得格外明朗。黄绿色代表清新、平静、安逸、和平、柔和、春天、青春、升级的心理感受。 从上图的主色调、辅色调 HSB 模式的数值可看出，这两中颜色只是在明度上有区别，其显示的色相与饱和度是一样的。正绿色是 120 度，这两种颜色从 RGB 数值上看，都不同程度的混合了其他少许颜色，因此离正绿色稍有些偏差。由于绿色本身的特性，所以整个网页看起来很安稳舒适。辅助色只在明度上降低，让页面多了些层次感、空间感。白色块面使得绿色的特性发挥到最好的状态并增强了视觉节奏感。点睛

3、色恰到好处的体现出了”点睛”这一妙笔，极尽诱惑力，整个页面顿时生动提神起来，增强了页面主题的表达力。 结论： 主、辅色调是属于同类色绿色系，通过不同明度的变化，能较递增缓和变化同时却也较明显的体现出页面的色彩层次感来。如果不是通过数值来分析判断，可能会有些朋友凭经验判断，容易误认为这两种颜色除了明度外有可能纯度会有所不同，这时候适当的使用数值模式会很容易得到正确的结论的。 整个页面配色很少：最大色块的翠绿，第二面积的白色，第三面积的深绿色，但得到的效果却是强烈的、显眼的，达到充分展现产品主题的目的。 深绿色给人茂盛、健康、成熟、稳重、生命、开阔的心理感受。绿色在黄色和蓝色（冷暖）之间，属于较中

4、庸的颜色，这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。 绿色与人类息息相关，是永恒的欣欣向荣是的自然之色，代表了生命与希望，也充满了青春绿色系分析： (高纯度配色：绿色 对比色组合) HSB 数值 H 显示 60 度为正黄色，该主、辅色调只向绿色倾斜了一丁点H 为 75 度。大面积明度稍低的黄绿色为主要色调，饱和度却非常高，达到了 100%，辅助色使用了提高明度的嫩绿色和白色，这两种辅色除了增加页面的层次感的同时，还能让整个页面配色有透亮的感觉，增强了绿色的特性。背景深褐色无疑把前景的所有纯色烘托得都耀眼于舞台上。

5、该页面有两组小小的对比色，一组是黄绿与橙红色，一组是橙黄色与天蓝色，这两组配色严格的来说不算对比色，因为色彩多少有些偏差。虽然它们的饱和度降低，但在这个页面中足以构成了最响亮的色调，把整个页面烘托得非常活跃、鲜明。 结论： 主、辅色调黄绿色大面积使用并不刺目，反而使得页面看起来很有朝气、活力。 适当运用不同纯度的不是相当严格意义上的对比色系组合时，通常能起到的主要作用是主次关系明确。不”标准” 的对比色系对比特性虽然减弱，页面色彩看起来容易协调、柔和，但一样能突出主题。 同类色浅绿色系分析：(同类色浅绿色 ) 主色调绿色属性是明度很高的浅绿色，前面提到过，通常情况下明度高饱和度就降低，饱和度低

6、页面色彩度就降低，除非颜色本身有自己的特性，加上大面积的辅助色白色，整个页面看起来很清淡、柔和、宁静，甚至有温馨的感觉。 页面中使用了渐变的浅绿色，使得整个页面视觉上更加柔和舒适。 尽管点睛色只在主要标志上出现，按钮也只有少许一点，但也给整个页面的色彩带来些亮笔。尤其是红色的 HSB 模式的 H 数值显示颜色接近于正红色，饱和度达到最高值。另一个点睛色中黄色，在页面视觉上呈绿色与红色这一组对比色起到缓和视觉的作用。因为在色轮表上，黄色正是在绿色和红色之间的过渡色。 结论： 浅绿色系有优雅、休息、安全、和睦、宁静、柔和的感觉。 渐变的效果更能加深这种印象。但页面配色上浅色过多时，整个页面容易呈现

7、发”灰” 的感受，这就需要适量的添加纯度稍高的颜色例如左下角的辅助色绿色块，适当的鲜艳的点睛都能很好的解决这一问题。布局：症状描述：在 ie 下（6 或 7，8 没有试过）当出现中英文混排，都采用默认字体时，并使用 li 列表做 float 时，会出现如上图的症状，文字排列上下不对齐的情况。影响了布局的美观性，造成上图情况的原因是中英文的文字基线不同，arial 字体的下边缘要比宋体（同为 12号）低一个象素，上边缘比宋体矮两个象素，而且英文还有 i,y 这种上下基线不同的情况。所以当中英文混排对齐时，就会出现明显的高度差异，使排版不均。可见放大图。 采用中英文字均使用宋体的方案 可以解决文字

8、排列不对齐的情况，但宋体英文字是衬线字体（Times New Roman 即是英文中的衬线字)，字型紧凑，细节较多，排列在一起很醒目，但在连续成文时，容易造成辨识困绕，看错行的情况。关于衬线字体的优缺点，请见这篇文章。相比之下，表示英文还是使用无衬线字体更美观大方。 解决方法一 “饺子”童鞋的 发现。 英文采用 tahoma 字体 宋体， arial 及 tahoma 字体比较arial 与 tahoma 的无衬线体比较精致 当中英文混排时，使用 tahoma 字体的情形 中英混排，纯中文组合的行高都一致了，但 a 在 hover 状态下下划线与中文粘联在一起。 缺陷：使用 tahoma 字体

9、时，在 ie6 及 ie6 以下版本，会导致所有中文字体链接的下划线会出现与字体粘连现象。淘宝使用的也是这一解决方案。相信大型项目，不同的人来共同完成一个页面的模块时，在统一的规范下，使字体更规范，减少错位，而采用带有下划线会出现与字体粘连的 tahoma 字体，是值得的 以下是携同大米童鞋 发现的： 英文采用 arial 字体，中文使用宋体。可在标签内注明 line-height:1.231,可解决行高不等以及字体与下划线粘连问题。 （不知道大范围中英文混排适不适用，有待后续校验。 ） CSS 混沌初开 I：导航菜单素材的设计 现在开始我们将学习如何一步一步的构建一张 CSS 页面。本教程分

10、成以下几个部分：第一讲主要是关于如何在 PS 中制作导航按钮素材；第二部分主要针对的内容是背景，接着是页面的整体布局以及顶部解析，最后一部分是如何整合 CSS 和 XHTML。 有些人可能会疑惑为什么要从导航按钮图片的制作开始，事实上我的初衷是让大家了解进而注重素材制作中的一些细节处理，这对最终的作品效果有很大的影响，至少在视觉上而言。首先看一下完成的效果： 玻璃质感导航图片的制作： 首先我们在 Photoshop 中建立一个 178x22 像素的 RGB 空白文档，添加一个新图层命名为“按钮 ”，并用灰色#ECECEC 进行填充。再新建一个图层命名为“高光” ，在其上、左边缘各绘制 1px

11、的白色线条，你用画笔或单像素选取工具都可以。然后我们用橡皮工具把左边缘白线的底部擦除一段，在这里我使用的是大小 20px 透明度为 50%的橡皮刷： 新建一个名为“网点” 的图层，用 1px 的铅笔工具在适当的位置绘制几个小点，示例中的颜色是#727272，当然这里你可以自由发挥设计更有创意的小点组合，关键就是要让它们看起来精致有序： 接着我们可以通过钢笔工具绘制路径创建选区，并在选区内填充#d6d6d6 颜色，来模拟玻璃的质感效果。整个图片素材的制作过程虽然不是很复杂，但是最终效果看起来也不是很差，不是么？ 鼠标经过导航时的翻转图片： 创建翻转效果图片，我们只要简单的在原有素材基础上调整色调

12、就即可，关于文本的添加在这里就不细说了。我们可以为每个图层调整色调，在示例中我主要使用了一下几种颜色：背景#BFE3FF、玻璃质感#A5D1F3、网点#E4001B。这部分教程涉及到一些 Photoshop 的基本知识，如果你不是很了解，建议先学习一些 PS 的入门基础，毕竟 Adobe 合并了Macromedia 之后，其旗下软件尤其是 PS 与网页设计的关联性已经越来越紧密了，大多时候你要设计出优秀美观的网页，都离不开这些软件的帮助。当然颜色选择要视乎你的需要，制作的方法大致还是相通的，你也可以发挥创意进行更好的细节设计： CSS 混沌初开 II:背景图案及配色 本教程的第二部分主要有两个

13、重点：一是如何正确选择导航菜单中所涉及的颜色，虽然它没有很多的技术含量，但使用的颜色是否恰当，与后期出来的效果是有很大影响的；另外一部分主要是关于页面背景的，侧重于制作背景图片素材时的一些细节问题。 在第一讲中，我主要是介绍一种实现玻璃材质按钮的快捷途径，现在来讲颜色的选择似乎有点滞后了。不过鉴于网站的风格存在差异，素材色系的选择也是界面设计阶段很重要的一块内容，网络上也有很多关于网页色彩的文章，大家可以依据其中介绍的一些基本知识进行参考，虽然良好的色彩感觉需要很长一段时间来培养。 选择你的色彩体系 事实上色系的选择会体现很多个人因素，毕竟每个人都会有各自的色彩偏好，你的选择也会彰显你的个人风

14、格。没人能建议你“必须选择什么颜色”，这里我也只能提供一些个人认为比较实用的意见： 使用至少一种高饱和度、高辨识度的色彩，并以其色调定义站点的整体基调。把这个色彩运用在文本链接上，能使其更加显眼、引人关注； 谨记不要在一张页面中使用过多的颜色，这样只会让你的网页看起来很花哨繁杂。我的建议是最好保持在三种之内：一个强调色和两个辅色； 在颜色的搭配上，不论是主色还是辅助色，都要善于通过它们明度变化来衍生更多的色彩，如果只是反复的使用三种以下的颜色未免会让人感觉单调，当然这也不是意味着颜色变化越多你的页面看起来就会越出色，仍然要视乎网站的整体风格和设计者对颜色的驾驭能力：在 PS 中我们可以通过在色

15、相/饱和度（Ctrl U）面板中调整参数来调配颜色。事实上图中的几组颜色就是通过这种方法调制出来的，当然在这个面板中可以变化出很多颜色，具体哪个参数应该为什么值都没有硬性的规定，网络上有很多推荐的色彩组合并明确给出了RGB 值，大家在利用这种方法配色的时候也可以参考那些文章教程。 如果你看了上面的讲解之后仍然不知道如何着手，这段关于颜色的影片 或许会对你有所帮助。事实上我觉得每个人都应该去看一下这个影片，不仅因为它本身设计得相当有趣，更重要的是对于认识和了解大众化的色彩体验和感知从而运用到网页设计中，它都是一个很好的引导和巩固。 是时候开始绘制背景图案了 现在我们开始讨论网页的背景图案。当我们

16、在 PS 等软件中创作背景图案时，往往要精细到像素，尤其是那些平铺填充的背景。首先我们在 PS 中新建一个 30x 像素的空白文档，填充适当的颜色，并用铅笔工具在其上绘制一些单像素小点，下面是一些例子： 如第一讲中导航按钮上的小点一样，在这里你也可以尽量的发挥自己的创意，但是还是有几个需要注意的地方，比如小点的颜色，不能跟背景色反差太大，不然平铺以后它们会变得很刺眼。如果要利用小点来组合出一些图案或线条，我通常会采用复制图层并通过方向键调整其位置的方法，适当的时候还会变化其图层模式或透明度等。 制作这些背景图案的一个难点就是，如何保证图案平铺时能实现无缝接合，毕竟背景的面积往往比较大，它上面若

17、有割裂就会很显眼。我通常采用的方法是利用 PS 中的矩形选框工具，比如下图中，正方形选区左上角标识出的像素必须与其它三个标识区一致，那么当我们把这样一块区域截取下来进行平铺的时候就不会有问题： 当然这个问题是否容易解决，也是视乎你最初设计的背景图案，如果我们动手的时候就把可能遇到的一些问题考虑在内，那么到解决的时候也不会太费力甚至返工了。CSS 混沌初开 III:顶部图片视觉修饰 这节是关于素材设计的最后一部分了，设计工作完成后将会开始讲解如何切片以及在 CSS和 XHTML 中构建最终页面。首先看一下这节设计的效果图： 在制作按钮时，我用了粉红和暗绿两种色调，可能看起来有点怪，但个人很钟意这

18、个组合。在设计网页整体界面的过程中，我会给出一些意见和建议，重点是顶部的图片，如何增加一些细节，让它看起来更加的美观、精致。 顶部图片的视觉处理 在教程的前两部分中，提到过导航按钮的颜色选择，现在我们来看一下如何处理一张花卉图像的色调，使其与页面的风格达到统一。在用到的花卉图像素材中，大家可以发现它上面也有红和绿两种色调，我要做的事情就是把其中的颜色调制成粉红和暗绿，就好似导航菜单中使用的色调一样： 首先来看一下图片中花朵的颜色，它的色调偏向于大红，还是使用 PS 中的色相/饱和度命令来对它进行调整。利用快捷键按 Ctrl U 调出色相/饱和度面板，在“编辑” 项的下拉列表中选择“ 红色（ C

19、trl 1） ”，这样我们就能只针对图像中的红色进行调整了。拖动色相滑块调制出我们需要的红色，具体的数值依据实际情况，比如我这里是大致是-30 左右： 下一步就是通过修饰细节增加一些辅助色调来增进视觉效果，为接下来的滤镜处理作一些预处理。顶部图片的处理对创意有一定的要求，如果有相关的经验的话也就不是件难事，所以素材处理能力以及个人的美工基础都会对设计过程、设计结果产生影响： 在之前的步骤中图片的尺寸和体积无疑已经进行了调整，但是如果有比较多的细节要处理的话，建议还是在原始尺寸上操作，像示例中的图片我刚开始也是在 1600 1200 的原始大小下进行处理的。我为图像添加了个人比较偏爱的绘画涂抹滤

20、镜（滤镜菜单艺术效果） ，效果如下图。在 PS 中，滤镜的运用是很有趣的一件事情，调节其中的参数就可以达到很多意想不到的效果，加之在 CS 版本中提供了可用滤镜效果的缩略图预览，让这个实用的工具用起来更加方便： 接着我们添加一些波浪线条来营造虚幻的意境，可以用笔刷或者钢笔绘制一些曲线，当然也可以用渐变工具制作，只要达到下图中渐隐效果即可。事实上我们只需要做出其中一条就可以了，然后复制图层调整其透明度、角度、扭曲制作出其它的线条。这里使用的颜色还是推荐使用粉红，为了区别于花朵的颜色，可以把线条的粉红明度调大一点。在图片的右边，我利用 Tamuz 字体添加了一个修饰符号，效果如下： 如果对以上操作

21、有疑问，可以 下载 QuickTime 演示影片 观看！ 在图片上添加 BLOG 标题 Blog 的标题反映了你网站的内容主题，其文字组织因人而异，一般还会加上一个图标或LOGO，毕竟每个人都想自己的 Blog 与众不同，有一些标志性的元素，在这里我就简单的选用一个仙人掌标志： 下面是一些关于字体或修饰符号的资源链接： Minion 修饰符和 Tamuz 字体 Adobe 提供的修饰性字体 一系列免费的 Dingbats 字体 最终的界面设计效果 至今为止，不论是在导航按钮还是顶部图片的制作，我们都还没有遇到什么棘手的难题。现在让我们把做出来的素材整合在一起，拼合成一张 最终的界面效果 。这已

22、经是界面设计的最后一个阶段了，所有若还有什么可添加的修饰元素，最好都在界面效果图中体现出来。在我的示例页面中，文章标题和友情链接的前面我都用精致的图标进行修饰，效果看起来还可以，当然你们可以选择自己喜欢的素材替换，最好也能在设计过程中体会到乐趣！CSS 混沌初开 V：侧边栏导航菜单的实现 首先对教程的第四部分作一点补充。有人建议 Blog 的标题最好使用 H1 标签，以文本的形式表现标题内容，原因是不论是在 CSS 关闭的情况下，还是对于搜索引擎的抓取，H1 标签结合文本的形式都具有更好的可访问性。这个提议很有道理，很多人也是这么做的，所以我也建议大家对之前的代码进行调整。 若使用 H1 标签

23、来实现 Blog 标题，又想保持原来标题位置的图片的话，那么就有必要了解一下 CSS 中很经典的图像替换文本技术。简单点说就是在 XHTML 中包含了文本，并为其设置背景图片，但是要通过 CSS“隐藏”文本而仅仅显示背景图片。若你对这个技术不是很了解，本站也有一篇专门关于 图像替换文本技术 的文章，希望对你有所帮助。 图像替换文本技术 这个技术有时候我们也称之为文本替换或图像替换，其强调的核心是在 HTML 代码中我们使用文本，然后通过一些方法将文本“隐藏”，而仅显示背景或其它形式的图片，这样在保证可访问性的同时，也使得页面因图像的应用而更加美观。比如我们可以将图片设置为背景，让后利用 tex

24、t-indent 使文本有足够的缩进实现隐藏，代码如下： h1 width: 692px; height: 90px; text-indent: -9999px; background: url(images/header.jpg); margin: 0; padding: 0; 其中的 width 和 height 是必须定义的，且需和背景图片的尺寸保持一致。 text-align: center被转移到了 body 标签中，这样页面中所有的内容都被定义为居中显示，而那些不需要居中的内容，如文章正文，我们可以再添加 text-align: left 进行覆盖。当然对于外围容器而言，我们利用 margin: 0px auto 使其在水平方向上保持在页面的中部。 导航菜单的实现 首先定义导航外围容器的样式： #left width: 178px; 现在外围容器我们只要简单的定义其宽度，并赋予 left 的 id 名。在 left 容器中，我们添加一个名为 navcontainer 的子容器来放置导航菜单。实现导航的标签推荐使用无序列表 ul，通过 CSS 我们可以改变其外观和形式。HTML 结构如下： Home