网页设计中的对比原则与接近性原则
发布时间:2010-03-30 14:51:00
一、 网页设计中的对比原则
一件网页设计作品由许多元素构成,它们的重要性各不相同,其中一些元素的重要性要高于其它元素。一些相互关联,而另一些则没有任何联系。棘手的是如何有效地和可视化地表达这些元素,这正是对比原则发挥作用之处。
对比产生在两个或多个元素之间,设计者可以利用对比对用户产生直接的视觉吸引。想象一下,如果页面上所有的元素都是同样的样式,那么整个页面将是无序的,页面结构也没有流动性和层级性。内容阅读起来将变得非常困难。这使得对比原则成为页面web设计中一个必要的方法。
这篇文章中我们将看看如何使用对比在颜色、大小和对齐方式三个方面创建一些不同之处。
颜色对比
许多人一想到对比便立刻想到颜色。尽管对比原则并不仅仅限于颜色对比,但它对于用户识别各种元素的确大有帮助。
现在几乎所有的页面一般都包括头部、内容区域和底部。这三部分是完全不同的,它们在视觉上应当区分明确,使用背景颜色产生对比是一个不错的方法。
站点Church Media Group就是一个非常好的例子。它的头部和底部均采用了深色背景,而内容区则采用白色背景。这使内容区域和其他部分截然分开,并且使其重要性更加突出。如果仔细观察,我们会发现在内容区还有另外一层的背景对比。内容区上半部分的特色产品区用了亮蓝色的背景,而它和内容区其他部分的对比则并不强烈,这就告诉我们这两部分是相互关联的。
Phil Renaud's portfolio 使用了一个独特的布局和色系。他使用了金黄色来使左侧的导航和其他部分的棕色产生对比。
文字也可以使用颜色产生对比。Billy Tamplin 在这方面有一个非常棒的作品,它分别给页面标题、副标题和段落文本使用不同的颜色。对于博客风格的布局,在文章标题和内容文本之间创建对比是非常重要的。它可以使用户在拖动滚动条时很容易地看到文章的起始部分。
猜你喜欢
- 目录1、概述2、__new__ 和 __init__ 的区别3、应用1:改变内置的不可变类型4、应用2:实现一个单例5、应用3:客户端缓存6
- 一、定位 oracle分两大块,一块是开发,一块是管理。开发主要是写写存储过程、触发器什么的,还有就是用Oracle的Develop工具做f
- 一、Pytest简介Pytest is a mature full-featured Python testing tool that he
- 目录1. 柱状图概述1.1什么是柱状图1.2柱状图使用场景1.3柱状图绘制步骤1.3案例展示2. 柱状图属性2.1柱状体颜色填充2.2状描边
- 背景开工前我就觉得有什么不太对劲,感觉要背锅。这可不,上班第三天就捅锅了。我们有个了不起的后台程序,可以动态加载模块,并以线程方式运行,通过
- 最初我们介绍到 Matplotlib 可以绘制2D图形,并且介绍了一些常见图形的绘制方法,其实不仅可以绘制2D图形,现在较新版本的 Matp
- 1. 使用readline模块逐行读取流数据1.1. 创建Interface对象在readline模块中,通过Interface对象的使用来
- 这篇文章主要介绍了pyftplib中文乱码问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋
- 在安装某个包的时候出现如下错误然后按照提示运行python -m pip install --upgrade pip并更新pip后再次运行p
- Python 文件自动去重平日里一来无聊,二来手巧,果然下载了好多无(luan)比(qi)珍(ba)贵(zao)的资料,搞得我小小的硬盘(已
- 问题描述当前使用的PyCharm社区版版本号2022.1.2,配置镜像源时,没有manage repositories解决方案:镜像源:清华
- 本文实例讲述了python和bash统计CPU利用率的方法。分享给大家供大家参考。具体如下:开始的时候写了一个 bash 的实现;因为最近也
- 方法一、简单安装(通过yum)1.安装epel-releaserpm -ivh http://dl.fedoraproject.
- keras 模块里面为我们提供了一个预训练好的模型,也就是开箱即可使用的图像识别模型趁着国庆假期有时间我们就来看看这个预训练模型如何使用吧可
- Mysql常用显示命令1、显示当前数据库服务器中的数据库列表:mysql> SHOW DATABASES;注意:mysql库里面有MY
- 在深入研究这些库之前,首先,我们需要一个数据库来绘制数据。我们将在本完整教程中使用 tips database。让我们讨论一下这个数据库的简
- 外联接。外联接可以是左向外联接、右向外联接或完整外部联接。 在 FROM 子句中指定外联接时,可以由下列几组
- 一、观察者模式观察者模式,必须包含 “观察者” 和 “被观察者&rdqu
- 当然,每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗?开始用这5个Tips改进你的CSS吧!1.合理
- 一、下载下载链接:https://www.anaconda.com/二、安装过程安装过程,所有都选默认项目。三、系统环境配置路径:此电脑-属