开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《网站设计 开发 维护 推广 从入门到精通》—— 2.2 网页色彩搭配

简介:
+关注继续查看

本节书摘来异步社区《网站设计 开发 维护 推广 从入门到精通》一书中的第2章,第2.2节,作者:何新起 ,娄彦杰,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 网页色彩搭配

色彩搭配既是一项技术性工作,同时也是一项艺术性很强的工作,因此在设计网页时除了考虑网站本身的特点外,还要遵循一定的艺术规律,这样才能设计出色彩鲜明、性格独特的网站。

2.2.1 网页色彩搭配原理

网页的色彩是树立网站形象的关键之一。网页的背景、文字、图标、边框及链接等,应该采用什么样的色彩,应该搭配什么色彩才能最好地表达网站的内涵和主题呢?下面是网页色彩搭配的一些原理。

色彩的鲜明性
网页的色彩要鲜明,容易引人注目,图2-6所示为色彩鲜明的网页。

色彩的独特性
要有与众不同的色彩,网页的用色必须要有自己独特的风格,这样才能给浏览者留下深刻的印象。图2-7所示的网页采用了独特的色彩。

6e141c7af5bbac12ae6111496a66de7f0beb066e

色彩的艺术性
网站设计也是一项艺术活动,因此必须遵循艺术规律,在考虑到网站本身特点的同时,按照内容决定形式的原则,大胆进行艺术创新,设计出既符合网站要求,又有一定艺术特色的网站。不同色彩会使人产生不同的联想,色彩的选择要和网页的内涵相关联。

色彩搭配的合理性
网页设计虽然属于平面设计的范畴,但又与其他平面设计不同,它在遵循艺术规律的同时,还需考虑人的心理特点。合理的色彩搭配,给人一种和谐、愉快的感觉。避免采用纯度很高的单一色彩,这样容易造成视觉疲劳。

2.2.2 网页设计中色彩搭配的技巧

到底用什么色彩搭配好看呢?下面是网页色彩搭配的一些常见技巧。

使用单色
尽管网站设计要避免采用单一色彩,以免产生单调的感觉,但通过调整色彩的饱和度和透明度也可以产生变化,使网站避免单调。

使用邻近色
所谓邻近色,就是在色带上相邻近的颜色,如绿色和蓝色,红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱,易于达到页面的和谐统一,如图2-8所示。

b04c05d3fa5f61ff8d131ebcc64e604c4af09550

使用对比色
对比色可以突出重点,产生强烈的视觉效果。通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调,对比色作为点缀,可以起到画龙点睛的作用,如图2-9所示。

c05c587f6478215009c003c42acd6f6fa9ab72b5

黑色的使用
黑色是一种特殊的颜色,如果使用恰当、设计合理,往往产生很强烈的艺术效果。黑色一般用作背景色,与其他纯度色彩搭配使用。

背景色的使用
背景色一般采用素淡清雅的色彩,避免采用花纹复杂的图片和纯度很高的色彩作为背景色,同时背景要与文字的色彩对比强烈一些,如图2-10所示。

9cb9490b0507e662fb6cc024022e8c29c5e65123

色彩的数量
一般初学者在设计网页时往往使用多种颜色,使网页变得很“花”,缺乏统一和协调,表面上看起来很花哨,但缺乏内在的美感。事实上,网站用色并不是越多越好,一般控制在三种色彩以内,通过调整色彩的各种属性来产生变化。

2.2.3 常见的网页配色方案

下面介绍一些常见的网页配色方案。

红色代表热情、活泼、热闹、温暖、幸福和吉祥。红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动,还是一种容易造成人视觉疲劳的颜色,如图 2-11所示。
黄色代表明朗、愉快、高贵和希望。黄色是各种色彩中最为娇气的一种色,图2-12所示为使用黄色的页面。

1b5608bd1359fa68392058962d400c2355382464

蓝色代表深远、永恒、沉静、理智、诚实、公正和权威。蓝色是一种在淡化后仍然能保持较强个性的颜色,如图2-13所示。如果在蓝色中分别加入少量的红、黄、黑、橙或白等色,均不会对蓝色的性格构成较明显的影响。

416014bcf6880dd86bfc89d238148f86b57a54e8

白色的色感光明,性格朴实、纯洁和快乐。白色代表纯洁、纯真、朴素、神圣、明快。白色具有圣洁的不容侵犯性。如果在白色中加入其他任何色,都会影响其纯洁性,使其性格变得含蓄。
紫色代表优雅、高贵、魅力、自傲及神秘。在紫色中加入白色,可变得优雅、娇气,并充满女性的魅力。
绿色代表新鲜、希望、和平、柔和、安逸、青春。绿色是具有黄色和蓝色两种成分的色。图2-14所示是以绿色为主色调的网站。

d9fe34b6924c9e17fc102cc3ac875711ac170dea

灰色在商业设计中,具有柔和、高雅的意象,而且属于中间性格,男女皆能接受,所以灰色也是永远流行的主要颜色。在许多的高科技产品中,尤其是和金属材料有关的,几乎都采用灰色来传达高级、科技的形象。使用灰色时,利用不同的层次变化组合或搭配其他色彩,才不会给人过于平淡、沉闷、呆板、僵硬的感觉。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
经典网页设计:使用颜色滤镜效果的20个网站
  大的背景图像已经成为了今年网页设计的趋势。在图像排布文本和按钮并很好的搭配相当具有挑战性。因此,设计师使用创意的 Photoshop 滤镜和渐变来在图像上创建一个遮罩,并在其上放置其他的网页设计元素。
661 0
经典网页设计:25个应用视差滚动的单页网站
  有许多有趣的网站类型,其中之一是视差技术,也被称为视差滚动(Parallax Scrolling)。在网页设计中,视差滚动是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动形成 3D 运动效果,有很强的视觉冲击力。
1136 0
经典网页设计:20个与众不同的 Flash 网站设计作品
  如果你正在为你的 Flash 网站设计项目寻找灵感和新思路,那么这篇文章推荐的20个非常有创意的 Flash 网站设计作品相信能帮助到你。Flash 网站页面美观,互动性强,可以声形并茂,实现普通的 HTML 网站不能制造出的质感和动作,特别是动态的视觉特果,能给人以震撼视听的效应。
834 0
国外网站设计欣赏:20佳优秀的网页排版设计
  网站设计欣赏系列今天给大家带来的是20佳优秀的网页排版设计作品。Typography 是一门字体排布,字体设计和符号调整的技艺。字体的排布涉及:字型、磅重、行长、行距的选择,字母间距的调整以及字偶间距的调整,还会对传统的字体作创意性、特殊化的美化与修饰。
1250 0
优秀国外网页设计欣赏的200佳网站推荐(系列十二)
  这个系列将向大家分享国外优秀网页设计欣赏的200佳网站。网页设计师们可通过这些网站收集的优秀网页设计作品来获取灵感,进而设计出更加时尚、更有创意的作品,网页设计师也可以把自己得意的作品提交到这些网站,分享给其它的设计师朋友。
1051 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
《网站性能与体验优化实践指北》
立即下载
如何高效的制作主机次时代游戏——高效游戏制作流程
立即下载
《优酷响应式布局技术全解析》
立即下载