`
gray888
  • 浏览: 529362 次
  • 性别: Icon_minigender_2
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

主页设计中配色方案的使用

阅读更多
          不论你做什么样的设计,色彩都是一个不容忽视的问题。色彩以一种“隐蔽”的方式传达的各种信息,这些信息会影响观看者的心理和感受,左右他们的判断和选择,色彩对于设计而言实在太重要。这篇文章就要比较系统地介绍一些在网页设计中如何使用色彩的入门知识。

  色彩是设计者的得力助手,前提是应用得当。对于网站设计而言,色彩的重要性尤其突出,不过经常被粗心的站长忽视。我们经常说“第一映像最重要”,于是设计网站时,设计者经常会花很多精力制作一个“富于冲击力”的LOGO或者BANNER,当然,它们很重要。但是,访问者访问网站时的第一映像实际上并不来自这些LOGO或者BANNER,而是——色彩!

  好了,在了解了色彩对于网站设计的重要性之后,我们开始探寻色彩的奥秘。

  色彩入门

  首先让我们熟悉一下色彩的一些基本概念。

  三原色

  一切颜色都来自三原色:红、黄、蓝。

  在这个圆环中,相邻的两个原色相混合可以得到另外三个比较重要的颜色(下文将其称为二级原色):红+黄=橙,红+蓝=紫,蓝+黄=绿

  让我们再深入一步,三原色和三种二级原色可以进一步混合得到更多的颜色,分别是橙红色、紫红色、蓝紫色、蓝绿色、橘黄色和黄绿色。这六种颜色可以称为三级原色。

  按照同样的方式不断进行下去,这个圆环中颜色之间的分隔线就会消失,得到下图所示的“色彩圆环”,在一些绘图程序的调色板中我们可以看到这样的色彩圆环。

  但是这个圆环仍然没有涵盖所有的颜色,对于圆环中的每一种颜色还有饱和度、亮度和灰度等的变化。也就是说,将上述圆环中的任意一种颜色和黑色、白色、灰色按照不同比例混合就可以得到更多的颜色,下面将详细介绍。
常用的色彩术语

  饱和度

  某种颜色的饱和度是指这种颜色所包含的基本颜色的多少。例如RGB值为(0,0,255)的蓝色是纯蓝色,他的饱和度是100%。随着饱和度的降低,颜色会越来越接近灰色。


 
 

  灰度

  基本色彩和黑色进行不同程度的混合可以得到不同的灰度,例如

  亮度

  基本颜色和白色进行不同程度的混合可以得到不同的亮度,例如::

  色调

  基本颜色和灰色进行不同程度的混合可以得到不同的色调,例如:

 

   色彩方案的种类

  不同网站应当使用不同的色彩方案,与站点的主题相吻合的色彩方案决不仅仅可以让网站“更加好看”,更重要的是在访问者心目中建立对这个网站的感性认识。所以,色彩方案的选择决不能草率,而且色彩方案绝对是网站建设的第一个步骤。如果选择色彩方案时过于草率,甚至根本不对网站进行色彩方案的整体规划,你将不可能制作出一个真正优秀的网站。

  例如,一个销售婴儿用品的网站应当使用比较活泼的色彩方案,而一个艺术网站则应当使用比较执重的方案。

  按照色彩方案中色彩使用方式的不同,我们可以将色彩方案划分成多种类型,单色方案、相似色方案、补色方案和三合一色方案。

单色方案

  单色方案是指在网站设计中终止使用一种基本颜色,为避免单调,我们可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色,由于整个颜色方案中事实上只有一种基色,因此这种方案称为单色方案。例如:

  在Photoshop的色彩选择窗口中,我们可以这样进行建立单色方案。首先调整H(也就是Hue的缩写)后面的值来调整色调。注意,H的单位是度,也就是基本颜色在颜色环上所处位置的角度。

  设置好H的值之后,再调整B后面的数字调整亮度以及S后面的数字调整饱和度。注意,其中B和S的单位是百分比,也就是向基本颜色中添加白色和黑色的百分比。这样就可以得到一个单色方案了。

  下面来看两个使用单色方案的成功实例。

  单色方案实例之一:

  这是一个女性网站,因此其基本颜色为粉红色,并通过调整粉红色的饱和度得到了其余几种颜色。总体颜色趋于淡雅,访问者的注意力会很自然地被吸引到几幅展示其产品的图片上。

  单色方案实例之二:

  这个色彩方案使用的基色颜色较深,并通过修改其亮度获得其他两种颜色,并用最浅的颜色作为主体部分的背景,使其突出出来。

  总的来说,单色方案是一种比较稳重的方案,或者说比较保守的方案。单色方案给人整洁、经典的感觉,最适合于内容比较严肃的网站,比如政府网站,学术网站,企业网站,高雅艺术网站。

  特别值得一提的是,商业网站也比较适合使用此种颜色方案,因为这种方案可以给人一种稳定感,使访问者容易建立对网站的信任感。当然,这种方案也有其灵活的一面,当使用较浅的基色时,这种颜色方案也可以用于时尚类网站,传达简约清雅的观念。

相似色方案

  在色彩圆环上选择彼此相邻的几种颜色构成的配色方案就是相似色方案。例如橙色、橙红色以及橙黄色就可以组成一个相似色方案。由于相似色方案中包含了多种基色,如果再加上亮度和饱和度的变化,可以构成的颜色就非常多。

 

  下面是相似色方案的实例。

 

  相似色方案实例一:

  这个网站使用了由橙黄色、橙红色和橙色组成的配色方案。Bullseye是一家ISP服务商,面向普通客户。选用这种方案和行业内惯用的蓝色系形成鲜明对照,个性凸现。

  相似色方案实例之二:

  这个网站使用了绿色和黄色这两种相似色构成配色方案。页面上很多绿色植物,因此文字使用了绿色,整个页面看上去自然清新,和网站的内容相得益彰。

  通常,相似色配色方案可以给人非常协调的感觉,因此在网站设计中非常常用。典型的运用方法就是,用一种颜色作为页面背景,而另外一种在颜色环中与其相邻的颜色作为前景色。除了上面介绍的绿色和黄色之外,蓝色和绿色以及红色和褐色也是比较常用的相似色配色方案。

分享到:
评论

相关推荐

    清爽配色15套.rar

    这些配色方案适用于网页设计、用户界面(UI)设计、图形设计等多种领域。 首先,我们来看一下"JS特效-颜色背景"这个标签。这表明这些配色可能与JavaScript特效有关,尤其是用于动态改变背景颜色的场景。在网页开发中...

    网页配色方案大全.pdf

    网页配色方案大全.pdf 是一份关于网页设计的配色方案集合,包含了九种不同的配色方案,每种方案都提供了浏览器边框颜色、顶部菜单表格背景、表格边框颜色、标题表格颜色、表格体颜色、表格标题栏字体颜色、表格内容...

    网站开发配色大全

    ### 网站开发配色大全:掌握网页设计的灵魂 在网站开发中,色彩搭配不仅是美学的展现,更是用户体验和品牌传达...在实际操作中,设计师可以参考本文提供的实例分析,结合自身项目的具体需求,探索出最适合的配色方案。

    网页设计配色工具包_v2_iRuif.cn.rar

    网页设计配色是创建引人入胜且具有良好用户体验的关键元素之一。"网页设计配色工具包_v2_iRuif.cn.rar" 是一个专门针对网页设计师的资源集合,它包含了一系列实用工具,帮助设计师轻松地进行色彩搭配和选择。这个...

    网页设计制作方案.doc

    首先,首页设计是网页的灵魂,它相当于企业的虚拟门面。首页设计必须精心打造,以体现企业的专业性和品牌形象。设计师应注重页面的整体布局,使其简洁明了,同时具有视觉吸引力。首页的内容通常包括企业标志、导航栏...

    网站设计模板-红灰配色极简线条个人博客模板.zip

    在这个模板中,CSS3可能被用来实现红灰配色方案,通过渐变、阴影等效果增强视觉层次感,以及通过媒体查询实现自适应布局,确保在各种屏幕尺寸下都有良好的用户体验。 个人博客模板通常包括首页、关于我、文章列表、...

    脚本设计PPT模板.ppt

    在【格式】-->【幻灯片设计】-->【配色方案】-->【编辑配色方案】中,用户可以调整配色方案,以满足自己的需求。 LOGO的添加 LOGO是企业或个人品牌的代表元素,在PPT文档中添加LOGO可以提高品牌认知度和权威性。该...

    十配色精美大型地方门户整站带演示数据 模板discuz3.2

    3.2版本的网站模板,该模板设计精美,拥有十个不同的配色方案,适用于创建大型地方门户类网站。"整站"意味着这个模板包括了所有必要的页面和功能,用户可以快速搭建一个完整的网站。 【描述分析】 描述部分与标题...

    灰白色建筑设计方案模板是一款高楼建筑设计企业官网模板。.zip

    该模板以其灰白配色方案为主调,旨在营造专业、简洁且高雅的视觉效果,以此来吸引潜在客户并展示公司的设计实力。在网页设计中,色彩的选择至关重要,灰白色系常常被用来传达优雅、稳重且不失现代感的氛围,特别适合...

    简洁白色设计师个人主页模板是一款另类设计的适合个人博客主页使用模板下载。.zip

    它突破了传统博客模板的框架,采用非主流的设计手法,如独特的布局、创意的导航菜单、个性化的配色方案等,让个人博客更具辨识度。这样的设计思路鼓励用户表达自我,让每个博客都能展现出独特的个人风格。 模板中的...

    个人博客网站完整设计方案

    4. **首页设计原则**:“简而全”是首页设计的核心理念。避免过于复杂的设计,以免分散用户注意力。首页的布局应清晰,信息层级分明,让用户一眼就能找到他们想要的信息。 5. **头部板块**:头部板块包括博客介绍和...

    精美品牌网站首页设计

    奢华感则可以通过独特的设计元素、高级的配色方案或者定制的交互效果来实现。设计师需要在保持简约的同时,巧妙地融入这些元素,打造出既能吸引眼球又能彰显品牌地位的界面。 "首页"是用户首次接触网站的关键页面,...

    网站主页版面的设计 实验一自学部分

    3. **Photoshop的使用**:作为常用的图形设计软件,Photoshop在网站主页设计中用于创建和编辑图像。熟悉其界面、工具和功能,如画布大小调整、渐变工具、图层管理、选区工具、文本工具、形状工具和自由变换等,是...

    精美古典中国龙卷轴背景PPT模板.ppt

    在PPT中,可以通过【格式】--> 【幻灯片设计】--> 【配色方案】--> 【编辑配色方案】来修改配色方案。用户可以根据自己的需求和喜好选择适合的配色方案,并对其进行修改和调整。 二、LOGO添加和修改 LOGO是PPT模板...

    学校实训毕业商用项目-精美十配色大型地方门户网站源码.zip

    在这个项目中,十种不同的配色方案可能通过CSS变量或独立的样式文件来实现,学生可以学习如何根据需求调整色彩搭配,以及如何使用CSS框架如Bootstrap进行响应式设计,适应不同设备的显示。 JavaScript是实现网页...

    首页设计的样式

    在网页设计中,首页设计是至关重要的,因为它不仅决定了网站的第一印象,还直接影响用户体验和用户对网站内容的导航。"首页设计的样式"这个主题涵盖了多种设计原则和技巧,旨在创造吸引人的、易于理解且功能齐全的...

    HTML网页编程技术综合课程设计教学方案1.pdf

    HTML网页编程技术综合课程设计教学方案的目标是让学生通过实践应用所学的网页制作知识,建立对网站设计的整体理解,学习网站功能规划、布局、配色等技能,并掌握使用Dreamweaver等工具的方法。课程设计强调制作实用...

    网页设计 作业 大学生 高中生 网页设计作业

    选择简洁的配色方案,如单色调或对比色,有助于保持页面的整洁。 3. **字体选择**:清晰易读的字体是基础,使用两到三种字体可以保持一致性,同时避免页面显得过于杂乱。 4. **导航**:良好的导航系统能帮助用户...

    AOA浙江省二级计算机考试高级办公软件运用历年真题ppt第二题数据仓库的设计详细操作步骤.pdf

    完成自定义后,将其添加为标准配色方案,方便后续使用。 - **修改配色方案**:如果需要调整已创建的配色方案,可以通过“编辑配色方案”对话框进行修改,如将标题文本颜色更改为绿色。 2. **幻灯片母板的设置和...

    计算机二级ppt题目要求及操作提示.pdf

    计算机二级PPT考试题目主要涉及PPT的基本操作,包括使用模板与配色方案、设置幻灯片的母板以及添加动画效果。以下是这些知识点的详细解释: 1. 使用模板与配色方案: - 模板:在PPT中,模板决定了幻灯片的整体布局...

Global site tag (gtag.js) - Google Analytics