网页布局和配色设计——配色小手册(综合)
使用配色软件Colorkey Xp
很多设计师都会为色彩问题而烦恼，他们常常对色彩的理解和认识各抒己见，花费很多精力去讨论和研究色彩搭配的问题。为了使设计师摆脱关于配色的困扰，越来越多的辅助配色工具开始出现，例如ColorImpact、ColorKey等等，这些软件都可以为设计师在色彩的搭配上提供好的帮助，使得设计师将更多的精力放在设计的其他部分，从而设计出更多精美的作品。下面介绍的ColorKey Xp软件就是一款人性化、科学化的交互式配色辅助工具。
4.1 熟悉软件功能
ColorKey是由Quester主导开发，https://www.360docs.net/doc/7a7541164.html,软件开发工作组测试发行的配色辅助工具，最新版本为ColorKey Xp Beat5，下载地址为https://www.360docs.net/doc/7a7541164.html,/2003/ 09/627/CKXP.zip。它可以使用户的配色工具变得更加轻松和更有乐趣，使用户的配色方案得以延伸和扩展，使用户的作品更加丰富和绚丽。
4.1.1 软件简介
ColorKey 所采用的色彩体系（Color System），是以国际标准的“蒙塞尔（Munsell）色彩体系“配色标准和Adobe标准的色彩空间转换系统为基准的。程序采用了和标准图形图像设计软件兼容的色彩分析模式和独创的配色生成公式，使得一切色彩活动都严格控制和有据可循。程序在合理的配色范围内也允许用户发挥自我调控的能动性，使配色方案的生成更加特色化和适应不同的需求。
程序按照蒙塞尔色彩体系的配色原理，对色彩的搭配进行了补色配合、同类色配合、对比色配合等不同分类，最新的ColorKey Xp Beat5版本中扩展了对整体配色区域的色彩调整功能，使得设计者可以更大程度地控制色彩倾向，并为Web色彩提供了Web安全色接近模式。新增了色彩配色方案的输出模式，修改了原有HTML输出的面貌，使色彩代码可以更好地显示和使用。通过使用AI格式色彩配色方案输出扩展了ColorKey 的适用范围，使它不仅能服务于网页色彩设计（RGB及HEX色彩描述），也可以为专业的图形图像色彩设计（CMYK色彩描述）提供辅助，并在多个设计师交流色彩方案时，有了一个方便的交换文件指导设计沟通。
目前该最新测试版只提供了配色中难度较大的和最能让色彩作品有光彩的“补色配合方案”。
4.1.2 软件基本功能
ColorKey Xp是一款简单易用的配色软件，接下来针对软件的操作界面、色彩控制面板、外部拾色器和输出功能等几方面全方位介绍其基本的使用方法。
ColorKey Xp操作界面
安装ColorKey Xp之后，可以在桌面上看到ColorKey Xp软件的快捷图标，如图1
所示。双击该图标可以打开ColorKey Xp 软件。或者在开始菜单中找到相应的程序单击打开，如图2所示。
图1 双击桌面图标 图2 单击程序菜单 进入软件，首先看到的是选择界面，目前“另类锋芒”版本在体验版中还没有发布内容，我们单击“传统经典”按钮，如图3所示。进入软件操作界面，如图4所示。
图3 选择界面 图4 软件操作界面 软件界面左上角显示当前操作的文字说明或解释。界面右上角分别是“返回开始菜单”按钮和“关闭”按钮。左下角为功能按钮。界面中间左侧显示的19个六边形色块是软件的配色区域。其中正中间的色块为主色块，是用户可以自定义色彩的，而其他色块将
图5 界面分解 ColorKey Xp 色彩控制面板
操作界面有色的4个色彩控制面板，其中调整配色限制阈值面板和整体色彩偏移面板提供了配色调整的高端功能。善用细节调整，可以获得更好更灵活的配色方案。
功能按钮
具体介绍如下：
RGB 色彩调节器面板可以通过拖动滑块或者直接输入数值来产
生RGB 色彩。在色彩条上单击鼠标，也可使滑块迅速移动到单击位
置。
在调节器左侧的色彩方块中可以及时浏览当前所配的颜色，单
击该颜色块，可以将当前调配的色彩显示在六边形主色块上。
调整配色限制阈值面板中显示的是默认设置，用户如果想要得
到更多样化的组合，可以调整色彩HSB 参数或者使用其他选项按
钮。
整体色彩偏移面板可以使整个配色区域的颜色都向一个方向偏
移。“全部为Web
安全色”选项相信对许多网页设计者比较实用。
Web 颜色调节面板完全展开时，可以提供256种网络安全
色。另外，用户还可以通过该面板底部的“Web 颜色”文本框来输
入或者粘贴色彩值。
ColorKey Xp 外部拾色器
在操作界面中单击“启动外部拾色器
”按钮，弹出“
外部拾色器面板
”，如图6所示。在打开的外部拾色器面板中单击“吸管”图标，就可以在屏幕范围内自由吸取所需要的色彩，如图7所示。
图6 外部拾色器面板 图7 拾色效果
在面板上单击鼠标右键，在弹出的菜单中可以选择不同的色彩代码格式，如图8所示。在ColorKey Xp 的RGB 文本框中输入RGB 数值，然后单击“刷新配色”按钮，即可在色彩六边形中显示新的配色方案，如图9所示。
图8 选择不同的色彩代码格式
图9 创建新的配色方案
如果对颜色明暗度不满意，可以通过单击“整体色彩偏移”面板上的调整按钮，获得更好的配色效果，如图10所示。单击“接近补色”按钮，可以改变配色的方案，或者补色配色方案。如果是为网页设计制作方案，可以通过单击“全部为Web安全色”按钮，将颜色转换为Web安全色，如图11所示。
图10 提高色彩亮度图11 获得补色的Web安全色ColorKey Xp的输出功能
此软件中色彩文件的输出功能，使得设计师在团体工作时就色彩意见沟通和色彩信息共享方面有了一个可以通用的简单的解决方案。通过共享色彩配置文件可以让团队内的色彩设计有一个统一的标准。
单击操作界面中的“输出配色方案”按钮，弹出“配色文案文件输出选项”对话框，如图12所示。选择输出HTML格式配色文件或者AI格式配色文件，单击“输出文件”按钮，如图13所示。
图12 选择输出格式图13 输出文件过程
将方案发布为HTML格式，使用IE浏览器打开，效果如图14所示。将方案发布为AI格式，使用Illustrator打开，如图15所示。
图14 发布为HTML格式图15 发布为AI格式
4.2 网页配色案例——汽车网站颜色搭配
按照常理来说，汽车类网站的配色较为单调，一般都是使用较为神秘和高贵的黑色或者银色作为主色调。但是随着年轻一代的成长，越来越多的主打时尚品牌的汽车厂商，开始将汽车的主要用户指向了年轻一代，这也就使得网站的配色也呈现出了多样性，如图16所示。
图16 配色案例效果
步骤1设计网站页面之前，首先要根据网站的行业分类来决定整个页面的色调，本案例将设计一个汽车类的时尚网站，所以将选择色彩较为鲜艳的颜色作为主色，使用Photoshop 创建一个新文件，如图167所示。设置前景色为#cd0e13，为画布填充，如图178所示。
图167 新建网页文档图18 填充主色
步骤2 为了增加页面的层级感，一般情况下不会直接使用纯色作为背景。会使用渐变颜色增加页面的空间和层次感。在“渐变编辑器”中分别降低和提高颜色的亮度，制作线性渐变效果，如图189所示。并为画布填充颜色，如图20所示。
图179 设置渐变颜色图20 填充渐变效果
步骤3启动ColorKey Xp，在“色彩调节器”中输入颜色值# cd0e13，按下回车键，如图191所示。单击“刷新配色”按钮，得到一个配色方案，如图202所示。
图181 选定主色图192 选择配色方案
步骤4单击整体色彩偏移面板上的“接近主色”按钮，单击“刷新配色”按钮，得到如图213所示的方案。单击其中一个色块，记下其颜色值为#f38400，如图224所示。
图203 调整颜色方案 图214 记下颜色数值
步骤5 打开标尺，从标尺中拖曳出辅助线，用来定位网站的格局，如图235所示。
图225 辅助线定位
步骤6设置“前景色”为“步骤4”中的颜色，使用“圆角矩形工具”绘制如图246所示的图形。使用相同的方法绘制色块，并使用中性色（也就是白色）绘制色彩，效果如图257所示。
图236 绘制图形 图247 绘制图形 步骤7 设置“前景色”为白色，使用“矩形选框工具”绘制矩形，制作网页的头部导航，效果如图268所示。为所有形状图层添加“描边”样式，效果如图279所示。
图258 添加描边效果图269 添加图层样式
步骤8
此处选择描边颜色时，尽量选择页面中已有的颜色，例如暗红色#ae0c0f，描边效果如图30所示。选择跟页面中颜色色调一致的素材图片作为装饰，效果如图281所示。
图30 描边效果图271 全部描边效果
步骤9导入网站的Logo，并输入二级导航内容，如图292所示。继续设置页面中的文字部分，注意文字的颜色要尽量在主色和辅色中选择，完成效果如图303所示。
图282 插入图片图293 添加部分文字
步骤10为页面中橙色部分添加文字，依然从现有颜色中选择，继续设置页面中的文字部分，注意文字的颜色要尽量在主色和辅色中选择，完成效果如图314所示。
图304 继续辅助添加颜色
步骤11同样的配色方法，输入其他辅助的图片和版底信息，完成页面效果如图35所
示。
图315 最终配色效果
4.3 平面广告配色案例——洗发水配色案例
在设计行业中颜色搭配一直贯穿始终，本案例将根据一张主题图确定广告的各种配
色。要确定行业的主色调，首先要根据不同的广告内容确定。洗发水广告可以选择蓝色、
绿色或者紫色作为主色调，如图36所示。
图36 配色案例效果
步骤1 首先打开制作广告的主题图像，效果如图327所示。将背景图层复制一个，如图338所示。
图327 打开主题图图338 复制图层
步骤2 执行“色相/饱和度”命令，调整图像色调，效果如图349所示。为“背景副本”图层添加图层蒙版，如图40所示。
图349 调整图像色调图40 添加蒙版
步骤3 使用“剪切工具”对图像剪切，调整图像构图，效果如图41所示。返回ColorKey Xp软件，单击“启动外部拾色器”按钮，如图42所示。
图41 调整构图图42 启动外部拾色器
步骤4 在人像中范围最广的青色部分单击，取样效果如图43所示。将数值输入到数值框中，效果如图44所示。
图43 颜色取样图44 选择主色
步骤5 单击“刷新配色”按钮，得到配色方案，如图45所示。使用“钢笔工具”绘制路径并转化为选区，使用配色方案颜色填充，效果如图46所示。
图45 选择配色方案图46 添加装饰条
步骤6同样的方式填充另外两种颜色，采用中性色白色和灰色填充，效果如图47所示。加入产品图像和商标文字，效果如图48所示。
图47 添加辅助色图48 添加商标和文字
步骤6使用文本工具，分别使用白色和灰色输入主题文字，突出效果，完成页面效果如图
49所示。
图49 最终配色效果
网页色彩的搭配教案
顺德区胡宝星职业技术学校公开课教案 教师: 杨海隆2010 年10 月12 日计算机092 班 1 节 课题色彩搭配在网页中的应用 课型理论课课时1学时 教学目的1．知识与技能：色彩带给人们的情绪变化，培养学生对 色彩感知能力 2．过程与方法：使同学掌握网页色彩搭配的一般原则教学重点掌握网页色彩搭配的一般原则 教学难点如何合理用色彩搭配网页 教具计算机，dreamweaver软件 教学方法讲授、提问、讨论、总结 教学过程一、引入新课 1．提问：我们每天早上起床第一眼看到的是什么东西？ 2、利用一个关于色彩的实验，让同学们感受到色彩的神 奇，激起同学们的学习兴趣，活跃课堂气氛。二、讲授新课 1．如何确立网站色调 1）一般原则 向同学们展示实例 讨论总结：在制作政治题材时，可以使用红色为主色调，在制 作环保题材时，可以使用绿色为主色调。 2）色彩情感 色彩与人的心理感觉和情绪也有一定的关系，利用这一点可以 在设计网页时形成自己的独特效果，给浏览者留下深刻的印象。 一般情况下色彩给人的感觉如下： A:红色代表热情、活泼、热闹、温暖、幸福、吉祥 B：黄色代表明朗、愉快、高贵、希望 C：绿色代表新鲜、平静、和平、柔和、安逸、青春 D：蓝色代表深远、永恒、沉静、理智、诚实、寒冷 E：紫色代表优雅、高贵、魅力、自傲
F：白色代表纯洁、纯真、朴素、神圣、明快 J：灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 H：黑色代表崇高、坚实、严肃、刚健、粗莽 2．网页配色的技巧 通过实例演示，同学讨论 讨论总结：a：如果在网页中使用一种主色调，其他颜色应是由 主色调派生出来的 b：如果要使用两种色彩，这两种颜色最好是互为对 比色 C：如果用多种色彩，两种颜色最好是同一个色系3．注意的事项： A：不要将所有颜色都用到，尽量将颜色控制在一定范围之内 B：背景和前文的对比尽量要大些，不要使用繁复的图像作背景，以便突出主要的文字内容 4. 同学们启动软件然后根据自己的颜色喜好，搭配网页色彩。使用自 己的网页三、巩固新课 A：色彩情感的培养 B：掌握了简单的网页配色技巧 四、布置作业 同学们写出自己网站的配色方案 五、教学后记 评讲意见： 教务主任意见： 参加听课人 学校盖章年月日
Web配色：色彩设计方法
为什么要整理设计色彩方法？ 在色彩设计应用中，我们对颜色不同程度的理解，影响到设计页面的表现，熟练地运用色彩搭配，设计时岂不事半功倍。一张优秀的设计作品，它的色彩搭配必定和谐得体，令人赏心悦目，反思我们在设计过程中，怎样的色彩搭配更容易达到设计目的，又是什么影响了我们的配色思维呢？ 以下几点常会影响色彩搭配思维： 1.仅关注色彩表象 2.搭配方法不够系统 3.色彩与构成掌握不到位 首先，我们简单理解一下色相和色调概念：
接下来我们按三个大类的配色方法，结合一些案例，分析色彩在页面中的应用手法。 (一)色相差而形成的配色方式
1.1 有主导色彩配色 这是由一种色相构成的统一性配色。即由某一种色相支配、统一画面的配色，如果不是同一种色相，色环上相邻的类似色也可以形成相近的配色效果。当然，也有一些色相差距较大的做法，比如撞色的对比，或者有无色彩的对比，但这里先讲述带主导色的配色案例。 根据主色与辅色之间的色相差不同，可以分为以下各种类型： 1.1-1 同色系主导 1.1-2 邻近色主导 1.1-3 类似色主导 1.1-4 中差色主导 1.1-5 对比色主导 1.1-6 中性色主导 1.1-7 多色搭配下的主导 ...
1.1-1 同色系配色 同色系配色是指主色和辅色都在统一色相上，这种配色方法往往会给人页面很一致化的感受。 twitter的案例：https://https://www.360docs.net/doc/7a7541164.html,/ 整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内容信息，比如信息内容模块，白色底代表用户内容，浅蓝色底代表回复内容，更深一点的蓝色底代表可回复操作，颜色主导着信息层次，也保持了twitter的品牌形象。 观点：颜色差分割页面层次和模块，并代表不同功能任务属性。
网页24种基本配色
网页24种基本配色 强烈丰富浪漫奔放土性友善 柔和热情动感高雅流行清新 传统清爽热带古典可靠平静 堂皇神奇怀旧活力低沉专职 基本配色——奔放 藉由使用象朱红色这种一般最令人熟知的色彩，或是它众多的明色和暗色中的一个，都能在一般设计和平面设计上展现活力与热忱。中央为红橙色的色彩组合最能轻易创造出有活力、充满温暖的感觉。 这种色彩组合让人有青春、朝气、活泼、顽皮的感觉，常常出现在广告中，展示精力充沛的个性与生活方式。把红橙和它的补色——蓝绿色——搭配组合起来，就具有亲近、随和、活泼、主动的效果，每当应用在织品、广告和包装上，都是非常有效。 补色色彩组合三次色色彩组合单色色彩组合 61 1360 12 76 44 12 9 15 12 12 64 1658 15 73 42 10 14 10 12 15 12 62 1557 13 78 46 14 9 11 12 10 12 63 12 57 10 79 42 12 10 16 12 16 12分裂补色色彩组合类比色彩组合 9 6852 12 12 20 4 12 92 4
5268282012 13 70 5150 12 70 11 23 28 4 15 20 90 6 13 11 68 5054 12 71 15 24 28 7 13 20 93 5 12 14 68 55 55 10 68 14 18 32 8 10 22 94 5 11 中性色彩组合冲突色彩组合分裂色彩组合 98 100 129 16 68 12 51 12 65 52 5 101 12 10610 12 67 14 54 14 70 56 12 12 98 10411 12 66 15 49 13 66 51 11 98 102 129 12 65 11 50 11 69 54 12
网页配色技巧：不同背景下文字颜色搭配
简介 网页设计的初学者可能习惯使用漂亮的图片作为网页的背景，但是当人们浏览一些著名、专业的大型商业网站时，会发现其运用最多的是白色、蓝色、黄色等单色，这样会让浏览页显得典雅、大方和温馨，最重要的是极大地增进浏览者开启网页的速度。 一般而言，网页的背景色应该柔和、素雅，配上深色的文字之后，看起来自然、舒适。但如果为了追求醒目的视觉效果，也可以为标题使用较深的背景颜色。下面是关于网页背景色和文字色彩搭配的一些经验值，这些颜色既可作为文字底色，也可以作为标题底色，适度配合不同字体，相信会有不错的效果，希望对用户的网页制作有所帮助。 工具/原料 dreamweaver 方法/步骤 背景色：“#f1fafa” 适合做正文的背景色，比较淡雅。配以同 色系的蓝色、深灰色或黑色文字都很好。 背景色：“#e8ffe8” 适合做标题的背景色，搭配同色系的深绿色标题或黑色文字。 背景色：“#e8e8ff” 适合做正文的背景色，文字颜色配黑色比较和谐、醒目。 背景色：“#8080c0” 配黄色或白色文字较好
背景色：“#e8d098” 配浅蓝色或蓝色文字较好 背景色：“#efefda” 配浅蓝色或红色文字较好 背景色：“#f2fld7” 配浅蓝色或红色文字较好 背景色：“#336699” 配白色文字比较合适，对比强烈 背景色：“#6699cc” 适合搭配白色文字，可以作为标题 背景色：“#66cccc” 适合搭配白色文字，可以作为标题
背景色：“#b45b3e” 适合搭配白色文字，可以作为标题 背景色：“#479ac7” 适合搭配白色文字，可以作为标题 背景色：“#00b271” 配白色文字显得比较干净，可以作为标题 背景色：“#fbfbea” 配黑色文字比较好看，一般作为正文 背景色：“#d5f3f4” 配黑色或蓝色文字比较好看，一般作为正文 背景色：“#d7fff0” 配黑色文字比较好看，一般作为正文
网页设计,色彩搭配分析
在网页设计中，对目前的网站配色(Landscape of color)认真琢磨一下还是非常有趣的。大多数网站或多或少相同，但是颜色的设计搭配却是一个非常给力的工具。 我并不想尝试去阐述一些具有革命性的东西或者是特别的发现。但如果大部分网站都采用同样的配色方案，那对颜色意味着什么呢？实际上，远超出你的想象。幻想一下整个世界的每一个网站都是非常漂亮和五彩缤纷的，但它同时也意味着千篇一律。这就像你文章中每一个段落的粗体。 因此，当配色方案比较柔和的时候，它允许有更多的机会。 关注你想要的任何东西 许多网站都有一个基本的灰度配色方案-白色的背景和黑色的字体。(网页中)想让你看到的部分会赋予颜色作为强调。这就是为什么网页不会充满颜色—它们使用在想让你看到的按钮，标题或者链接上面。 Vibrant ，当你第一次登陆它们的主页，主页的背景和图片是黑白的，网站标志，可点击的按钮和汉堡菜单是亮黄色，这些可以很快的（在灰度背景中）脱颖而出，吸引你的注意力。 另一个例子是Takeit; 当你第一次登录他们的主页就看一个大大的蓝色背景。然而，其他的都是白色的。最前面并且居中的大标题会让你的注意力集中在中间。
同时，你的眼睛在很短的时间内就能注意尺寸较小但是仍然明显的APP商城的按钮。你可以从中研究一下是颜色如何引导用户的注意力的。 创造个性 颜色是非常奇妙的，因为它可以展现一个网站或者品牌的语气和情绪。Beagle （很遗憾，译者访问的时候，网站已经不在了）提供创建项目简介的服务，他们的网站使用了较轻的茶色。当你向下滚动他们的主页时，你会看到棕色,炭色，绿色，甚至粉红色这样一些愉快的色调。世俗的色调（earthly tones）看起来专业和优雅，给人对于其所代表的公司（留下）一个非常好的印象。 An Interesting Day网站它特指“在奥斯陆峡湾（Oslofjord）的一个小岛上举办的一个不可思议的，为期一天的会议”（“a weird, one-day conference on a tiny island in the Oslofjord”）。当红色的背景和红色的字体在上面的时候，
网页-分类-布局-色彩
网站策划（网站类型网站导航网站风格网站功能网页布局）网页效果设计图 一.网站布局特点 .资讯类网站 布局特点：以发布信息为主要目地.页面信息量大，页面高度较长，布局以栏为主，页面高度接近屏左右，重要信息放置顶部.导航排在页面上部.左右两列是功能区和附加信息区，中间位主要信息和重要信息显示区.个人收集整理勿做商业用途 页面内容以文字为主，图像较少，多以敏感地新闻图片吸引访问者. 色彩特点：政策法规类资讯网配色以灰色、红色、黄色.体现庄重、严谨、大气. 娱乐资讯类配色上以动、时尚地颜色为主：蓝色、绿色、洋红和紫色. 例：人民网、雅虎网 .电子商务类网站 布局特点：以实现交易为目地，以订单为中心.必须实现商品展示、订单生成以及订单执行.页面包含产品分类提供搜索功能多采用栏地布局给人开放、大气地感觉.导航以搜索为主横排在页面上部，左右两侧一般为内容区和产品分类区.产品展示多以图片和文字结合体现产品地说服力，搜索、注册和登录等模块应放置于页面最醒目地位置.个人收集整理勿做商业用途 色彩特点：电子商务了网站图片较多，本身色彩已经非常丰富配上上应尽量简单，配色多以动感活力为主：蓝色、洋红、橙色、青色和黄色等.个人收集整理勿做商业用途例：阿里巴巴网、易趣网 .互动游戏网站 布局特点：此类网站一般分为游戏地官方网站和在线游戏网站，面对人群年纪较轻页面设计以大量地图片、动画增强视冲击布局以图像或为主地静态布局和静态分栏相结合地布局，静态布局页面信息与背景融为一体类似平面出版物创意设计，布局相对比较自由.静态、分栏结合布局在体现静态视觉效果之后又具有分栏布局信息清晰地特点.个人收集整理勿做商业用途 色彩特点：游戏类网站主要针对人群年纪较轻，配色大多以活力、时尚颜色为主.一般会以一种颜色为主调，配合红色、黄色等明度较高地颜色进行强烈对比让访问者过目不忘个人收集整理勿做商业用途 例：天堂、 .教育类网站 布局特点：与资讯类网站相似以提供教育咨资讯为主.部分针对学校本身宣传或提供在线教学.对于教育机构网站多以静态分栏相结合为主，对于提供在线教学功能网站多以分栏布局为主.个人收集整理勿做商业用途 色彩特点：教育类网站是为学生服务在配色上主要体现轻松气息蓝色、绿色等，并且颜色明度较高，同时要考虑不同年龄层次.个人收集整理勿做商业用途 .功能性网站： 布局特点：百度、、网址之家是其主要代表，主要功能是提供互联网网址导航.布局简单搜索框和按钮占据页面绝对重要位置.页面设计尽量简没有广告、图片.页面文字、下载速度功能实用、信息提示与布局清晰都是页面布局所需考虑.在视觉设计中提高用户对网站地感情和粘合度.个人收集整理勿做商业用途 色彩特点：功能性网站色彩搭配要求不花哨，没有特别鲜明地色彩.多以白色、单色，平和协调. .综合性网站 布局特点：综合性网站共同特点是提供两种以上典型地服务布局主要以分栏为主，和资讯类
网页设计中颜色搭配的重要性常见颜色的含义资料
网页设计中颜色搭配的重要性, 常见颜色的含义( 网页设计中颜色搭配的重要性, 常见颜色的 含义（1） 贝塔网络 发布时间：2007-12-1916:37:29评论：0点 击：23一步、底色和图形色色彩搭配的问题确实不是一个简单的问题。这一代的设计师比上一代的设计师，所能运用的色彩工具多了许多。如今，我们能运用好计算机为我们提供的丰富色彩，看来不是很简单的事情。就我个人而言，在我从事设计师工作以来，往往也会迷失在色彩的世界。现在交流一下自己学过的和掌握的一些经验，希望大家指正。配色所要注意的要素实际设计时，我们经常会按照设计的目的来考虑与形态、肌理有关联的配色及色彩面积的处理方案，这个方案就是我的配色计划。在做配色计划时，我们应该考虑下述几点以突出视觉效果。1. 底色和图形色在设计时我们会经常遇到用几个色做各种形的构成，作为底的色我们往往会将它推远，而作为图形或文字的色我们要将它拉近。这就需要我们了解受配色关系的影响是什么样的。一般明亮和鲜艳的色比暗浊的色更容易有图形效果。因此，配 色时为了取得明了的图形效果必须首先考虑图形色和底色的关系。图形色要和底色有一定的对比度。这样才可以很明确的传达我们要表现的东西。我们要突出的图形色必须让它能够吸引观者的主要注意力。如果不是这样就会喧宾夺主。 第二步、整体色调如果我们想使我们的设计能够充满生气，稳健，冷清或者温暖，寒冷等感觉都是由整体色调决定的。那么我们怎么能够控制好整体色调呢？只有控制好构成整体色调的色相、明度、纯度关系和面积关系等。才可以控制好我们设计的整体色调。首先要在配色中心决定占大面积的色，并根据这一色来选择不同的配色方案会得到不同的整体色调。从中选择出我们想要的。如果我们用暖色系列来做我们的整体色调则会呈现出温暖的感觉，反之亦然。如果用暖色和纯度高的色
网页设计色彩搭配的基本知识
网页设计色彩搭配的基本知识 网页设计色彩搭配的基本知识 一、确定主体色 遵循主从关系，这是最稳定的处理色彩原则。 其实红、黄、绿、蓝、紫等每一个字都代表一类具体的颜色，也就是色相了，它是指色彩的相貌，是区别色彩种类的名称。在页面上，除白色为背景外大量使用的颜色，就是这个网页的主体颜色。 如果在同一个页面内运用了多种颜色，把握不好的话，就无法确定 哪个是主体色。因为其他的颜色面积不能过大，遵循主从关系。 二、相近色 选择色彩相近的颜色，非常容易搭配。 解释一下：假设在红色里面加白，红色就会越来越亮，明度提高。而加黑，红色就越来越暗。明度降低。那么色彩的明度就是指任何 一种色彩的明暗程度。 假设在蓝色里面加了黑、白、灰，或另一种颜色，就会使得蓝色不纯，不再鲜艳。那么色彩的纯度就是指彩色系中每个色彩的'鲜艳 程度。 同色彩系(同色相)，明度不同或纯度不同的几种颜色容易搭配，比如挑几种深浅不同的绿色来搭配，一般页面不会有太大问题;同一 页面尽量不要多出4种颜色。超级连接的色彩搭配也是遵循以上的 原则。而文字颜色的搭配，则要与背景分离。有个小方法：打开Dreamweaver的颜色盒(如下图)。如果它们6色为一组的话，每组 都是很不错的配色方案，但是都比较高调。其实如果搭配颜色的时 候遇到麻烦，就可以在颜色面板中，调入不同的几种色系，看看它 们相邻的颜色，或隔几种色来搭配，找合适你页面的颜色绝对不难。
三、色彩均衡 它是比较保险的配色互补原则。多种颜色同时存在的时候不容易把握好，一定要调和统一。 比如利用色彩错视现象，其中的重量错视在实用设计时用处很多。也就是明度高的浅亮色看起来较轻，明度低的深暗色则较重。 那么在网页设计中，如果运用了较多明度较高的颜色。比如图3 中左边是比较浅的颜色或亮的颜色，就可以用黑色，或同色相的深 色小面积压一下，点缀一下，使得页面不要太轻，达到色彩重量的 平衡。平衡的颜色较符合多数人的色彩心理。根据你的情况，如选 用黑色，可能会严肃和庄重，而用同色相的深色，则轻松一些。 四、黑白灰运用 其实黑白灰是宝贝，万不可小看它们。 如果在用色上遇到麻烦，可以大面积的加白，灰;小面积加黑来 调节其他颜色搭配不当。遇到使用纯度很高的颜色，比如纯蓝，纯 黄等，这样的搭配会很鲜艳，视觉感觉比较兴奋。把这样的颜色明 度抬高或降低，搭配上灰、白色，也是调节的方法。 五、色彩心理与情感 选择适合内容风格的颜色。 1.色彩有冷暖的感觉。如儿童类站点不要使用冷色系，且色彩要丰富一些。 2.色彩有柔软和坚硬感。同色相，明度高，则有柔软感。明度低，则会有坚硬感。女性站点，适量选用柔美的淡粉色或高级灰，而男 性类站点，就可以使用棕色，深蓝色。 3.从色相看，暖色给人的感觉华丽;从明度看，明度高的感觉华丽;从纯度看，纯度高的色彩给人的感觉华丽。由此首饰类站点可以 使用高雅的咖啡和金黄色，而香水类站点可以用明度高的淡绿或浅 蓝色。
《网页色彩搭配实训》课程标准
《网页色彩搭配实训》课程标准 一、课程性质 技能训练课 二、课程开设学期及基准学时、学分 1、课程开设学期：第三学期； 2、基准学时：54学时； 3、学分：3学分。 三、先修课程 先修课程：计算机基础、程序设计课程；网站策划与网页设计：商务网站美工实训。 四、课程目标 《网页色彩搭配实训》主要针对网页设计中的配色进行研究和讲解。《网页色彩搭配实训》共分为13章，第1-4章主要阐述了色彩的基本原理、色彩的象征意义、网页设计中的搭配技巧等基础知识。第5-12章是《专业色彩搭配手册:网页配色》的核心部分，对不同色彩（红、橙、黄、绿、青、蓝、紫、黑）在不同行业（食品类、公司展示类、女性用品类、综合门户类、电子商务类、产品类等）的典型应用进行详细地分析和讲解，也详细地介绍了不同色彩之间的搭配，把理论融入到设计中，既锻炼了网页设计者对网页设计的分析能力和审美能力，又能够激发出网页设计者的创意与灵感，使网页设计者能够很好地掌握网页配色在设计中的应用要点。第13章列举了常用的网页颜色代码，每种色系都有16进制数值的对照，可以使网页设计师在工作中提高效率。 《专业色彩搭配手册:网页配色》是网页设计师在实际工作中必备的网页配色案例参考拍，也是网页设计爱好者的学习工具书。 1、知识目标： （1-1）掌握网页色彩的基本原理，色彩的象征意义，色彩的搭配技巧； （1-2）掌握不同色彩的搭配方法； （1-3）掌握常用网页颜色代码，以及16进制配色对照； （1-4）掌握网页中色彩构成； （1-5）了解网页设计中色彩的搭配、以及颜色模式； （1-6）掌握三原色在网页设计中的运用； （1-7）掌握网站设计； （1-8）掌握网站色彩管理； 2、能力目标： （1-1）对网页的色彩构成具有一定的了解，并了解三原色； （1-2）具备感知色彩的能力； （1-3）具备一定色彩搭配的能力； （1-4）具备色彩构成在网页设计的运用。 （1-5）具备了解RGB、CMYK模式的运营； （1-6）具备三原色运用的能力； （1-7）具备一定网页设计的能力； （1-8）具备项目中色彩管理的能力；
网页设计中的色彩选择与搭配技巧
网页设计中的色彩选择与搭配技巧 Color selection and matching techniques in Web Design 朱晶 zhujing 江西先锋软件职业技术学院网络学院专职教师network Academy of ahead software vocational college,Jiangxi,330041,china [摘要]在网页设计中,色彩有着不可或缺的重要地位。提出色彩运用应注意的原则、色彩搭配的建议,从美学角度探讨色彩在网页设计中的运用,以发挥色彩在网页中的视觉冲击作用,以高超的配色技巧大胆创新,创造出更时尚、更具吸引力的网页设计作品。 网页的色彩是树立网站形象的关键之一，色彩搭配却是让网页设计者感到头疼的问题。网页的背景，文字，图标，边框，超链接等，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵，在本章中将详细叙述色彩的选择与和搭配技巧。[summary]Page design, color has an important status. Proposed the use of color should be noted that the principle of the proposal with a color, from an aesthetic point of color in web design to explore the use of color in order to play at the page of the visual impact of the role of the color superb skills to bold innovation, to create a more stylish, more an attractive Web page design。 Page color is to establish the image of one of the keys to web, color match is so that the page was headache Designer. Web page background, text, icons, borders, hyperlink and so on, should be what color, what color should match the best in order to express the desired content, in this chapter will be described in detail and select colors and match skills。 [关键字]色彩、网页、搭配 [key word] color、web page、match [中图法分类号] Z42 引言 众所周之，在网页设计中色彩的运用和搭配是很重要的环节，色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合．搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。 1、非彩色的搭配 黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。 1.1 黑色 黑色的内涵最为丰富和复杂，黑色具有很强的感染力，能够表现出特有的高贵显得严肃、庄严和坚毅。另外，黑色还具有恐怖、烦恼、忧伤、消极、沉睡、悲痛甚至死亡等意象。黑色用在宗教网站中显出严肃和庄严。黑色是一种流行色，适合于许多色彩搭配。黑色还具有高贵、稳重、科技的意象，是许多科技网站的主色调配合其他辅助色，营造出科技的神秘感。另外在一些音乐网站中也常常用黑色为主色调，营造出炫酷的氛围。 1.2 白色 白光是所有颜色光线的集合，白色反射所有的光线，不吸收任何可见光，因此白色被作为纯粹、虚无、轻盈、光明及金属的象征。在商业设计中，白色具有洁白明快纯真
网页风格设计及色彩搭配技巧
网页风格设计及色彩搭配技巧 一、网站设计风格 一个人拥有自己独特的风格，是一般人所没有的，就会让人注意到那个人的特别，若那个人的风格是正面的，甚至就会引起别人的羡慕与注意，或是赞赏。就如同一个网站，拥有别的网站所没有的风格，就会让浏览者愿意多停留些时间，细细品尝该站的内容，甚至该站会得到多人的鼓励与注目，粗略的说，网站风格可以从以下几个方向来探讨，而每一项都是有关联性的： 1. 色系：网页的底色、文字字型、图片的色系、颜色等等。 2. 排版：表格、框架的应用、文字缩排、段落等等。 3. 窗口：窗口效果，例如：全屏幕窗口、特效窗口等。 4. 程序：网页互动程序，例如：ASP . PHP . XML . CGI等等。 5. 特效：让网页看起来生动活泼的各种应用，如：Flash . Java script . Java applets . DHTML等等。 6. 架构：目录规划、层次浅显易懂、选单应用等等。 7. 内容：网站主题、整体实用性、文件关联性、内容切合度、是否有不必要的档案等等。 8. 走向：对于网站的未来规划、网站整体内容走向等。 以上这些项目都与网页风格有密切的关系，网页的风格不是某一项相同，网站就是有整体感，而是要各项目的配合应用，才能达到完美的网站风格设计。接下来的段落，将会为每个项目做简单的介绍。 （一）色系
网站的色系是浏览者整体的视觉观感，若一个网站色系能有一致性，不仅会使网站看起来美观，更能让浏览者对内容不易混淆，增加了浏览的简洁与方便。而网站的色系更能衬托出网站的主题，若色系能与主题合理搭配，将会增加浏览者的易读性。 网站的色系包含了网页的底色、文字字型、图片的色系、颜色等等，这不单只是将颜色搭配得当就算完美，还要配合每个内容，及网站主题。对于网站的色系，应该要在网站开始制作前，做好规划及设计，才不会到着手制作网站时，难以搭配，甚至造成混乱的设计。 网页的底色是整个网站风格的重要指针。举例来说，以黑色作为背景颜色的网页，因黑色本对人的视觉上会造成黯淡的感觉，若是拿来用作活泼的儿童网站，就是不适合了。因为小孩子是天真无邪的、活泼的、有朝气的，与黑色的沉稳、黯淡，很难联想在一起。 再举个例子，若是写一个有关于环保的网站，若用暗红色作为网页底色，决计不会有人联想到网页的内容是与环保有关。当然，每个人的审美观不同，可能也会对颜色的代表性看法不同，但既然网站不是只写给自己看的，就应该要注意到大部分人可能会有的观点，然后以众人居多的观点出发，来设计网页。 文字字型上的设计，最好的网站是以所有浏览者都能看到的字型为主。常会看到有需多网站要求浏览者须自行下载某种字型，才能达到最佳浏览效果，这是种非常奇怪的行为。毕竟浏览者只是来找资料或是来看网站的内容，不可能会因为这种「为达最佳浏览效果」，而自行下载所需要的字型。 当所要求的字型若不下载，并不会影响到网站内容上的浏览与不便，那么对浏览者的要求就微乎其微的不可能发生任何作用。这么一来，对于网页设计者来
网页颜色搭配表及颜色搭配技巧
网页颜色搭配表及颜色搭配技巧 网页颜色搭配表及颜色搭配技巧 颜色搭配常识： 1.网页中色彩的表达使用三种颜色，及红(R)、绿(G)、蓝(B)，及通常所说的RGB色彩，它包含了人类所感知的所有颜色，网页中表达颜色如下（红色为例）RGB格式：红色是(255,0,0) 或十六进制hex格式为(FF0000)。 2.将色彩按"红->黄->绿->蓝->红"依次过度渐变可得到12色环：红，橙红，橙，橙黄，黄，黄绿，绿，蓝绿，蓝，蓝紫，紫，紫红。 3.颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。通常内容文字用非彩色(黑色)，边框，背景，图片用彩色。所以即使页面丰富，看内容依然不会眼花,通常背景与内容对比要大。 按单一色彩为主色彩分类 网页设计一般以单一色彩为主，下面每类都以该色彩为主，
配以其它或类似色彩的，并按照从轻快到浓烈的顺序排列。红色-是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。 #FFFFCC #CCFFFF #FFCCCC #99CCCC #FFCC99 #FFCCCC #FF9999 #996699 #FFCCCC #CC9999 #FFFFCC #CCCC99 #FFCCCC #FFFF99 #CCCCFF #0099CC #CCCCCC #FF6666 #FF9966
#FF6666 #FFCCCC #CC9966 #666666 #CC9999 #FF6666 #FFFF66 #99CC66 #CC3333 #CCCCCC #003366 #993333 #CCCC00 #663366 #CCCC99 #666666 #CC9999 #FF6666 #FFFF00 #0066CC #CC0033 #333333
网页设计中文字颜色的搭配技巧
对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。 一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。下面是我做网页和浏览别人的网页时，对网页背景色和文字色彩搭配积累的经验，这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体，一定会有不错的效果，希望对大家在制作网页时有用。 BgcolorΚ″＃F1FAFA″———做正文的背景色好，淡雅 BgcolorΚ″＃E8FFE8″———做标题的背景色较好 BgcolorΚ″＃E8E8FF″———做正文的背景色较好，文字颜色配黑色 BgcolorΚ″＃8080C0″———上配黄色白色文字较好 BgcolorΚ″＃E8D098″———上配浅蓝色或蓝色文字较好 BgcolorΚ″＃EFEFDA″———上配浅蓝色或红色文字较好 BgcolorΚ″＃F2F1D7″———配黑色文字素雅，如果是红色则显得醒目 BgcolorΚ″＃336699″———配白色文字好看些 BgcolorΚ″＃6699CC″———配白色文字好看些，可以做标题 BgcolorΚ″＃66CCCC″———配白色文字好看些，可以做标题 BgcolorΚ″＃B45B3E″———配白色文字好看些，可以做标题 BgcolorΚ″＃479AC7″———配白色文字好看些，可以做标题 BgcolorΚ″＃00B271″———配白色文字好看些，可以做标题 BgcolorΚ″＃FBFBEA″———配黑色文字比较好看，一般作为正文 BgcolorΚ″＃D5F3F4″———配黑色文字比较好看，一般作为正文 BgcolorΚ″＃D7FFF0″———配黑色文字比较好看，一般作为正文 BgcolorΚ″＃F0DAD2″———配黑色文字比较好看，一般作为正文
解析网页界面设计和布局
近几年来，随着科技、计算机技术的迅猛发展和人们生活水平的不断提高。互联网以惊人的发展速度并且越来越深入到人们的生活和工作、学习中。信息的传播形式、内容、数量也在空前的改变着。互联网它凭借着一个崭新的媒介和独特传播形式打破了传统性的、地域性的、经济文化性的阻隔，并且在信息的传播范围和传播速度达到一个质的飞跃。随着互联网的发展，周边的附属品也同时在飞速的发展。而最明显的就是互联网最常用的网络媒介“网页”。网页设计—也开始慢慢上升到一个举足轻重的位置，一个好的网页界面设计小则可以让人赏心悦目，大则可以称之为现代原创艺术的结晶。越来越多的设计师也开始投入到追求网页界面形式美的行列中来。然而设计师们在设计界面的同时却忽略了一个微不足道的，但是却又是至关重要的“微观”元素—网页设计的“细节”处理。它可以让设计师们的界面美观度达到极 致的升华，也可以让界面变得暗淡和乏味。 然而，一个网页设计的“微观细节”都表现在哪里呢?它们要在何时何地出现才能为我们的界面设计带来一个极致的升 华呢?网页设计的“微观细节”主要表现有以下几点： 壹—页面的整体颜色，也可以称之为颜色。 貳—页面的整体布局，也可以称之为排版。 叁—页面的字体元素。也可以称之为字体。 肆—页面的效果元素。也可以称之为效果。 以上四点归纳出网页设计的“细节”主要在以上这些地方着重处理。 页面的整体色彩可以直接反映这个页面对用户的视觉感官，鲜艳的颜色可以给用户一种清新、活泼的视觉感受，然而此 时细节就在于设计师对于色彩与色彩间的把握。 图：
单一的色彩元素也可以给用户带来另一种不同的视觉感受，如：黑白单一色调可以给用户一种稳重、时尚的视觉体验，然而此时细节就在于设计师如何“画龙点睛”打破单一的色彩体系，不让用户感受到压抑的心理。 图：
网页配色方案大全
配色方案大全 配色方案一(粉绿色): 浏览器边框颜色#e8ffe8 顶部菜单表格背景(深背景) #e8ffe8 顶部菜单表格背景(浅背景) #f7fff7 表格边框颜色一#00b700 表格边框颜色二#b0ffb0 标题表格颜色一（深背景）#e8ffe8 标题表格颜色二（浅背景）#f7fff7 表格体颜色一#f7fff7 表格体颜色二(1和2颜色在首页显示中穿插) #e8ffe8 表格标题栏字体颜色#006a00 表格内容栏字体颜色#006a00 警告提醒语句的颜色#000000 配色方案二(水橘红色): 浏览器边框颜色#ffe9e1 顶部菜单表格背景(深背景) #ffe9e1 顶部菜单表格背景(浅背景) #fff9f7 表格边框颜色一#ff8e68 表格边框颜色二#ffa98c 标题表格颜色一（深背景）#ffe9e1 标题表格颜色二（浅背景）#fff9f7 表格体颜色一#fff9f7 表格体颜色二(1和2颜色在首页显示中穿插) #ffe9e1 表格标题栏字体颜色#9b2700 表格内容栏字体颜色#9b2700 警告提醒语句的颜色#000000 配色方案三(西瓜红色): 浏览器边框颜色#ffe1f0 顶部菜单表格背景(深背景) #ffe1f0 顶部菜单表格背景(浅背景) #fff4fa 表格边框颜色一#ff51b0 表格边框颜色二#ff8cc6 标题表格颜色一（深背景）#ffe1f0 标题表格颜色二（浅背景）#fff4fa 表格体颜色一#fff4fa 表格体颜色二(1和2颜色在首页显示中穿插) #ffe1f0 表格标题栏字体颜色#bf0069
警告提醒语句的颜色#602060 配色方案四(宝石蓝色): 浏览器边框颜色#d0dcff 顶部菜单表格背景(深背景) #d0dcff 顶部菜单表格背景(浅背景) #eef2ff 表格边框颜色一#002cae 表格边框颜色二#7d9aff 标题表格颜色一（深背景）#d0dcff 标题表格颜色二（浅背景）#eef2ff 表格体颜色一#eef2ff 表格体颜色二(1和2颜色在首页显示中穿插) #d0dcff 表格标题栏字体颜色#001c7b 表格内容栏字体颜色#001c7b 警告提醒语句的颜色#000000 配色方案五(湖蓝色): 浏览器边框颜色#cef3ff 顶部菜单表格背景(深背景) #cef3ff 顶部菜单表格背景(浅背景) #ecfbff 表格边框颜色一#007ca6 表格边框颜色二#15b9ff 标题表格颜色一（深背景）#cef3ff 标题表格颜色二（浅背景）#ecfbff 表格体颜色一#ecfbff 表格体颜色二(1和2颜色在首页显示中穿插) #cef3ff 表格标题栏字体颜色#00637b 表格内容栏字体颜色#00637b 警告提醒语句的颜色#007a99 配色方案六(金黄色): 浏览器边框颜色#ffeed0 顶部菜单表格背景(深背景) #ffeed0 顶部菜单表格背景(浅背景) #Fffaf0 表格边框颜色一#co7800 表格边框颜色二#ffc562 标题表格颜色一（深背景）#ffeed0 标题表格颜色二（浅背景）#Fffaf0 表格体颜色一#Fffaf0 表格体颜色二(1和2颜色在首页显示中穿插) #ffeed0
网页的排版布局和原则
1.网页的排版布局和原则 2.网页色彩搭配的技巧 一.知识点: 一.网页排版布局的步骤： 1.构思,并且有多个草稿进行粗略布局 2.将粗略布局精细化，具体化 3.修改 二.网页排版布局的原则 1.平衡性 (1)文字、图像等要素的空间占用上分布均匀 (2)色彩的平衡，要给人一种协调的感觉。 2.对称性 对称是一种美，我们生活中有许多事物都是对称的。但过度的对称就会给人一种呆板、死气沉沉的感觉， 因此要适当地打破对称，制造一点变化。 3.对比性 让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。例如黑白对比，圆形与方形对比等， 它们往往能够创造出富有变化的效果。 4.疏密度 网页要做到疏密有度，即平常所说的“密不透风，疏可跑马”。不要整个网页一种样式，要适当进行留白， 运用空格，改变行间距、字间距等制造一些变化的效果。 5.比例 比例适当，这在布局当中非常重要，虽然不一定都要做到黄金分割，但比例一定要协调。三常见的布局样式： 1.T字型 最上方是广告条，页面下方左面是菜单，右面显示页面内容，整体上类似英文字母“T”，所以我们称之为T字型布局。这种布局条理清晰、主次分明，非常适合初学者学习，但略微有点呆板。 2.口字型 这种布局类似一个方框，上下是广告条，左面是菜单，右面是友情链接，中间是网页内容，页面布局紧凑、 信息丰富，但四面封闭，给人一种压抑的感觉。 3.对称型 整个网页呈上下或左右对称布局，非常醒目，如果两部分搭配协调，网页的视觉效果非常好，很有冲击力。 4.海报型 这种布局就像我们平时见到的海报一样，中间是一幅很醒目、设计非常精美的图片，周围点缀着一些图片 和文字链接。这种设计常用于一些时尚类和公司的首页，非常吸引人。但大量的运用图片导致网页下载速度很慢，
网页设计的布局与用色技巧
网页设计的布局与用色技巧 摘要：网页设计是一们新兴的设计类和网络的交叉学科，近几年`随着网络的发展而逐渐收到人们的重视，它本身以网络为载体,把各种信息以最快捷、方便的方式传达给民众。在这种标准的要求下，逐步产生了审美的需求。人们对美的追求是不断深入的，网页设计同样如此。一个内容空洞无物的网页既使做得再漂亮也不会吸引人，顶多赢得几声赞叹，没有任何的用处。没有实用性的东西是不会具有生命力的。要想将页面做的更漂亮，就要求设计师要用较好的审美方面的素质，同时要有丰富的平面设计的经验。这样才能在设计时驾轻就熟。 关键词：网页，布局，用色 一、网站首页设计、风格定位、色彩搭配、版面布局的技巧 首先我们需要了解一下网站的页面组成，网站一般包括以下几部分： 首页：网站的门面，如同公司的形象，特别注重设计和规划。 框架页：网站的主要结构页面，又称次首页、内页，大型网站往往框架页即首页，如一些门户网站。框架页主要是网站内部主要栏目的首页，讲究风格的一致性，并于主页呼应。 普通页：网站主要的承载信息的页面，设计要求不高，但要求链接准确、文字无误、图文并茂，并沿袭网页的风格。 弹出页：一般用于广告、新闻、消息、到其他网站的链接等等，
一般用的很少。 从功能上来看，首页主要承担着树立企业形象（当然不仅仅是首页）的作用，框架页在导航方面起着重要的作用，比如各栏目内部主要内容的介绍，都可以在框架页中体现再进入普通页，让浏览者能够迅速了解网站各栏目的主要内容，择其需要而浏览，而普通页则是主要的信息页面，也是网站的最终页面. 二、色彩搭配 1、运用相同色系色彩：所谓相同色系，是指几种色彩在色相环上位置十分相近;左右或同一色彩不同明度的几种色彩这种搭配的优点是易于使网页色彩趋于一致，对于网页设计新手有很好的借鉴作用，这种用色方式容易塑造网页和谐统一的氛围，缺点是容易造成页面的单调，因此往往利用局部加入对比色来增加变化，如局部对比色彩的图片等。 2、运用对比色或互补色：所谓对比色，是指色相环相距较远，视觉效果鲜亮、强烈，而互补色则是色相环上相距最远的连种色彩，其对比关系最强烈、最富有刺激性，往往使画面十分突出，这种用色方式容易塑造活泼、韵动的网页效果，特别适合体现轻松、积极的素材的网站，缺点是容易造成色彩的花，使用中注意色彩使用的度。 3.使用过渡色：过渡色能够神奇地将几种不协调的色彩统一起
网页颜色搭配表
网站建设知识 版权所有Copyright© 2006-2008 黑马网上创业指南联系方式：heima123#gmail；QQ交流群： 1 预早筹划 设计主页未必很艰难。但这一工作与编制传统的宣传品一样，都需要我们谨慎处理和筹划。换言之，我们必须首先确定自己需要传达的主要信息，然后细意斟酌、把所有意念合情合理地组织起来；之后是设计一个页面式样，试用于有代表性的用户，接着重复修订，务求尽善尽美。 2 尽量精简 主页的作用好比一本书的封面，是为了吸引用户测览你的网址内容。因此，主页的设汁应以醒目为上、令人一目了然。切勿堆砌太多不必要的细节，或使画面过于复杂。在主页上清楚列出三项要点，例如机构名称、提供的产品或服务、以及主页内容(亦即你的其他页面还载有什么资料)。应切记页面给人的第一观感最为重要。在网上到处浏览的人很多。如果你的主页真没有吸引力，很难今他们深入观赏。 3 尽量简朴 现今大部分用户那是用调制解调器接驳万维网，所以他们一般都要花很多时间等待主页传送到自己的系统。切勿令他们加倍望穿秋水。主页上的图形应力求简朴，避免耽搁用户的时间。图像愈大、颜色愈深，传送页面的时间愈长。这并不是说你要完全略去图像不用，只是提醒你要注注意使用图像所引起的效果。主页上的颜色最好不超过六十四种，页顶图像最好保持在大约10KB(千字节)以下。切勿禁不住诱惑。觉得非要放入大幅的图画不可；应考虑只用三两幅短小精悍的图像。主
页整体上要能够迅速传送。如果载入的时间超过十至十五秒，很多用户就会等得不耐烦。如果情况许可，最好先测试一中你的主页在稍差的条件下的传送速率，14.4千波特的调制解调器，或透过Prodigy 等网上服务接驳万维网等。此外、还须注意配合最低档的设备，例如标准的小型显示器，不要假设人人都用高解像度的大荧幕。运用先进测览软件所提供的一些尖端功能是可以的、但应确保你的主页在次一级的浏览软件上(例如某些网上服务所提供的专用浏览软件)仍可畅顺地显现。 4 善用图像 用户在网上四处漫游，你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力，所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的字款，使其别具特色，令人过目不忘。图像的内容应有一定的实际作用，切忌虚饰浮夸。最佳的图像足集美观与传讯于一身。注意图画可以弥补文字之不足，但并不能够完全取代文字。很多用户把浏览软件设定为略去图像，以求节省时间他们只看文字。因此，制作主页时，必须注意将图像所戴的重要信息或联接其他页面的指示用文字重复表达—次。用“纯文中”模式测试已制成的主页，确保其传达到所有信息。 5 使主页易于漫游 主页的其中一个主要功能是作为漫游工具，指引用户查阅你存储在网址或其他地点的信息。尽量使漫游过程不费吹灰之力。基于清晰明确和速度的考虑，主页上的联接项目应只限于几个高级的类别，例如公司、产品、服务、支援等。用六至八个联接项目最为理想。 此外，你提供的信息不应埋藏在重重叠叠的页面之下。穿越五个以上的联接项目已足以令人厌烦。因此，你必须在广度