网页设计中的对比原则
作者：党韬 来源：猪窝 发布时间：2010-03-20 21:50:00
网页设计是由很多个不同的元素构成的,而这些元素的重要性都不同,并且有些元素还需要尤为的突出.有些元素彼此之间存在着联系,而另外的元素之间则一点关联性都没有.比较难办的部分就是如何有效的在视觉上来传递元素之间的关系.这就该用到对比原则了.
对比就是两个或更多个元素之间的不同.通过对比,设计师就可以创造出视觉趣味性,同时引导用户的注意力.想象一下,如果页面上所有的元素都是一个模样,那就会觉得这些内容没有组织,没有”(视线)流”,没有明确的结构,也很难去理解和接受.因此在网页设计中,对比是很重要的一部分.
在这篇文章中,我们将会看到如何通过颜色,尺寸,对齐方式这三个方面来建立对比.
颜色中的对比
大多数人听到”对比”这个词,他们首先想到的就是颜色.尽管对比原则中不只包含颜色,但是颜色对于帮助用户识别页面中不同的元素有很大的帮助.
一般页面都包含页头,内容区,页脚.那么我们就需要从视觉上清晰的区分中这三个不同的部分.很好的方法就是: 使用不同的背景色.
先来看看Church Media Group’s website,这是一个很好的例子.页头和页脚都使用较深的背景色,内容区是白色.通过这种差异,可以很明显的突出内容,并表现出它的重要性.如果我们再深入点看,在内容区域也有不同的背景色对比:”案例”部分使用了浅蓝色.正因为它与其他内容部分的对比很小,表示两个部分是有关联的.
Phil Renaud’s portfolio使用了一个独特布局和极其漂亮的配色方案.网站整体使用了棕色来设计,他使用了一种金黄色来增加垂直导航区域和其他区域的对比.
文本之间也可以使用颜色来形成对比.在Billy Tamplin中,标题,副标题,文章段落分别使用了不同的颜色,将各部分合理的区分并建立视觉结构,最终获得了很好的效果.作为博客的界面来说,在文章标题和主体内容之间建立对比是很重要的.这样在用户滚动页面的时候,就可以让他们清楚的看到文章的从哪开始和到哪结束.
0
投稿猜你喜欢
- 前言favicon.ico是网站的图标也是网站的头像，简单来说，就是让我们的网站更加好看。本文主要给大家介绍了关于优雅处理Django中fa
- mysql可以通过下面语句判断是否支持分区：SHOW VARIABLES LIKE '％partition％';如果输出：h
- 本文实例讲述了python生成器用法。分享给大家供大家参考，具体如下：1. 生成器利用迭代器，我们可以在每次迭代获取数据（通过next()方
- 微博上讨论MySQL在删除大表engine=innodb（30G+）时，如何减少MySQL hang的时间，现做一下简单总结： 当buffe
- 代码如下:Class Vector Private vector_datas() Private&n
学了python后，之前一些我们常用的方法，也可以换一种思路用python中的知识来解决。相信操作出来后，能收获一大批小粉丝们。就像我们没学- from http://www.devshed.com/c/a/MySQL/Error-Handling-Examples/ Error H
- 看起来现在经常用到这样的效果来提高用户体验，所以就没事写了一个输入框提示列表的效果使用宽屏的朋友麻烦帮忙测试下，列表的位置有没有错位。代码可
- 其实如果要去除字符串前后的空格很简单，那就是用strip()，简单方便>>> ' A BC '.strip
- 题目描述原题链接 :66. 加一给定一个由 整数 组成的 非空 数组所表示的非负整数，在该数的基础上加一。最高位数字存放在数组的首位， 数组
- eval函数就是实现list、dict、tuple与str之间的转化str函数把list，dict，tuple转为为字符串一、字符串转换成列
- 一、功能分析简单分析一下网站的功能，大致如下：需要用户在地址栏中提交参数，根据参数中的id查询对应的用户信息。如果id存在，则显示查询成功，
- 可能大多数人在学习C语言的时候，最先接触的数据类型就是字符串，因为大多教程都是以"Hello world"这个程序作为入
- Scrapy回调函数回调方法示例：yield Request(url=self.base_url + 'QueryInfo'
- 项目背景最近在做的项目，涉及到数据库的操作了，之前做的是直接调用接口，不用做存库操作。因此要增加大量特殊格式的实体类。比如我们用的是 JPA
- 在神经网络计算过程中，经常会遇到需要将矩阵中的某些元素取出并且单独进行计算的步骤（例如MLE，Attention等操作）。那么在 tenso
- 记得自己学习的心得，为了自己以后调试方便些。1.操作步骤：1.1 添加断点直接在标记处点击鼠标左键即可。（删除断点只需再点击断点处即可）1.
- 简介CSS Sprites并没有一个确定的中文翻译，通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技
- modelform是model衍生出来的form .modelform的用法非常死.首先在models.py里创建模型表.所有的form组件
- 今天遇到一个问题，在通过php的mssql函数读取sql server数据导入mysql数据库时，sql server 的datetime类
