网页设计中的对比原则
作者：党韬 来源：猪窝 发布时间：2010-03-20 21:50:00
网页设计是由很多个不同的元素构成的,而这些元素的重要性都不同,并且有些元素还需要尤为的突出.有些元素彼此之间存在着联系,而另外的元素之间则一点关联性都没有.比较难办的部分就是如何有效的在视觉上来传递元素之间的关系.这就该用到对比原则了.
对比就是两个或更多个元素之间的不同.通过对比,设计师就可以创造出视觉趣味性,同时引导用户的注意力.想象一下,如果页面上所有的元素都是一个模样,那就会觉得这些内容没有组织,没有”(视线)流”,没有明确的结构,也很难去理解和接受.因此在网页设计中,对比是很重要的一部分.
在这篇文章中,我们将会看到如何通过颜色,尺寸,对齐方式这三个方面来建立对比.
颜色中的对比
大多数人听到”对比”这个词,他们首先想到的就是颜色.尽管对比原则中不只包含颜色,但是颜色对于帮助用户识别页面中不同的元素有很大的帮助.
一般页面都包含页头,内容区,页脚.那么我们就需要从视觉上清晰的区分中这三个不同的部分.很好的方法就是: 使用不同的背景色.
先来看看Church Media Group’s website,这是一个很好的例子.页头和页脚都使用较深的背景色,内容区是白色.通过这种差异,可以很明显的突出内容,并表现出它的重要性.如果我们再深入点看,在内容区域也有不同的背景色对比:”案例”部分使用了浅蓝色.正因为它与其他内容部分的对比很小,表示两个部分是有关联的.
Phil Renaud’s portfolio使用了一个独特布局和极其漂亮的配色方案.网站整体使用了棕色来设计,他使用了一种金黄色来增加垂直导航区域和其他区域的对比.
文本之间也可以使用颜色来形成对比.在Billy Tamplin中,标题,副标题,文章段落分别使用了不同的颜色,将各部分合理的区分并建立视觉结构,最终获得了很好的效果.作为博客的界面来说,在文章标题和主体内容之间建立对比是很重要的.这样在用户滚动页面的时候,就可以让他们清楚的看到文章的从哪开始和到哪结束.
0
投稿猜你喜欢
- 第四篇《WEB标准能有多难？》专栏文章将结束关于文本部分的XHTML的讲解。那么这篇主讲的内容涉及链接、标题、插入、删除、上下标、分割线、换
- 本来想等到IE8正式发布时再在blog中写段代码，用来提示IE6用户升级到IE8的，不过貌似IE 8已经RTM了，今天又正好看到这个“升级I
- 说明：本文内容都是从Google上搜索来的，本想上http://www.alexa.com/查官方数据，访问非常慢暂且没查。使用本接口将返回
- 阅读上一篇：javascript面向对象编程（一）[javascript模拟传统OOP]javascript是一种非常灵活的语言，它的灵活度
- bcp是SQL Server中负责导入导出数据的一个命令行工具，它是基于DB-Library的，并且能以并行的方式高效地导入导出大批量的数据
- 首先，了解下原理。1，提供文本框进行查询内容的输入2，将查询信息提交页面程序处理3，程序页主要作用：接受查询信息，根据此信息调用特定的SQL
- 现在我将清除页面缓存的一些方法总结如下：1、在Asp页面首部加入<％ Response.Buffer = True
- SQL语句先前写的时候，很容易把一些特殊的用法忘记，我特此整理了一下SQL语句操作，方便自己写SQL时方便一点，想贴上来，一起看看，同时希望
- 前面已经了解了关于PL/SQL编程的基础，本文将结合一个案例来加深对这些知识点的理解。一． 案例介绍 某数据库有两张表，是关于某公司员工资料
- 在一般的情况下，使用批量fetch的几率并不是很多，但是Oracle提供了这个功能我们最好能熟悉一下，说不定什么时候会用上它。declare
- 首先数据库里需要有一个自动编号字段（ID）。然后第一次访问的时候，取出所有记录，定制好每页的记录数PageSize，计算出页数，然后根据页数
- 大家已经从实际使用中了解了jquery这个javascript框架的强大，其实jquery更加强大的是可扩展。你可以编写自己的基于jquer
- 这些日子,几乎每个人都在谈论XML (Extensible Markup Language)，但是很少有人真正理解其含义。XML的推崇者认为
- 比如 <div><img .../></div>想通过对这个div设置透明度来达到调整图片的透明度如果不
- 主页上的鼠标是不是就只有箭头和小手两种模样呢？如果鼠标移到“帮助”等字样上时，形状就变成求助的问号；鼠标移到可能需要较长时间等待的超链接时，
什么是1433端口 1433端口，是SQL Server默认的端口，SQL Server服务使用两个端口：TCP-1433、UDP-1434- 两组字符串数据，需要比较其中相同的数据，并将其值相加并组成一个新的字符串数据a1="sp2=20;sp1=34;"a2=
- 内容摘要：您是否想让您的网站有多种显示风格呢，本文介绍了如何使用CSS结合js实现动态更换页面皮肤风格。看了下面的介绍您就明白了如何实现了这
- 早上一开Google Reader，发现已经全部被Silverlight 3的消息占领了，基本上都来自于Silverlight
- 在数据库的开发过程中，经常会遇到复杂的业务逻辑和对数据库的操作，这个时候就会用SP来封装数据库操作。如果项目的SP较多，书写又没有一定的规范
