网页中的平衡、对比、连贯和留白
作者:edream 来源:沉寂博客 发布时间:2008-11-24 12:11:00
网页制作中需要把握好很多原则和细节,今天我们来谈谈网页设计中的平衡、对比、连贯和留白。
一、平衡
如果你的页面是平衡的,当用户浏览这个页面的时候就会感觉它们是一个整体,看得时候目光的跳转也会很自然。同时,构成页面的元素仍然是彼此独立(注意不是孤立)的,你不需要用线用颜色将它们直接地串接起来,这是为什么呢?因为它们彼此之间是平衡的。这就好比跷跷板,即便你看不到连接两端的人的木板,你也能感觉到他们是一个整体,因为“平衡”!
1、对称平衡
对称是最常见、最自然的平衡手段,这种方式通常用来设计比较正式的页面,不过也还需要和下面介绍的多种方式结合起来使用。
2、非对称平衡
非对称其实并不是真正的“不对称”,而是一种层次更高的“对称”,如果把握不好页面就会显得乱,因此使用起来要慎重,更不可用的过滥。
3、辐射平衡
页面中的元素以某一个点为中心展开就可以构成辐射平衡。
4、实战平衡
二、对比
如果说平衡搭起了一个稳定的页面框架,那么对比就是这个框架中的动态点缀。这里说动态并不是说要真的让元素动起来,而是要有“变化”。可以变化的因素包括:大小、颜色、字体、重心、形状、纹理等等。
三、连贯
前面谈到了对比,对比离不开变化,然而如果对比太多,变化也会太多,页面就会显得零乱,因此我们现在来谈“连贯”。在一个成功的页面设计中,有很多要素是必须保持一致的,这些要素通常包括:
1、布局
页面的上下、左右,页面与页面中间要保持布局一致。比如如果页面上方的表格居中对齐而页面下方的表格却左对齐,那么整个页面就会很难看。
2、字体
字体的大小、颜色应当基本保持一致。
3、导航栏
导航栏应当保持完全一样,通常应单单独为导航栏建立一个框架页,这样就可以保证更新导航栏的时候,所有网页都会被自动更新。
四、留白
国画中“画鱼不画水”的妙处就是留白的妙处。留白可以让访问者有更大的想象空间,就好像就如一个没有过多摆设的房间一样。上上下下、里里外外都塞得满满当当就是很糟糕的设计。
留白的原则包括:
1、元素之间的留白不能太大 这是基本的原则,留白过多,叶面会变得零碎。
2、文本中间的间隔不能太大 文本应当紧凑,尤其汉字文本,如果字与字之间或者行与行之间空白太大页面就会非常难看。
总的来说平衡、对比、连贯和留白设四条原则是在网页设计中必须始终牢记,但绝不是教条,应当结合自己的实际需要灵活的应用。


猜你喜欢
- 简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM因为vue是虚拟DOM,所以在拿到
- 最近由于单位数据库硬盘空间不足,整理的时候查了许多文章,也进行了测试,整理后得出一些经验供大家参考。首先,在网上看到一篇文章,如何Shrin
- 一、保存:graph_util.convert_variables_to_constants 可以把当前session的计算图串行化成一个字
- 第一种 #This File was made using the WinMySQLAdmin 1.4 Tool #2004-2-23 16
- 前言matplotlib是Python中的一个第三方库。主要用于开发2D图表,以渐进式、交互式的方式实现数据可视化,可以更直观的呈现数据,使
- MySQL安装说明MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于Oracle旗下产品。MySQL 是最流行
- 实现1)有相同的数据,直接返回(返回值:0);2)有主键相同,但是数据不同的数据,进行更新处理(返回值:2);3)没有数据,进行插入数据处理
- 数组统计函数ndimage提供一系列函数,可以计算标注后的数组的相关特征,比如最值、均值、均方根等。下列函数,如果未作其他说明,那么就有3个
- MySQL安全性指南(2) 作 者: 晏子2.1.3 数据库和表权限下列权限运用于数据库和表上的操作。ALTER允许你使用ALTER TAB
- 每种编程语言都会有一些特殊的单词,称为关键词。对待关键词的基本要求是,你在命名的时候要避免与之重复。本文将介绍一下Python中的关键词。关
- 环境搭建python 安装:建议使用python3.7pycharm安装requests安装 :pip3 install requestsr
- 在一些微服务或web服务中我们难免需要日志功能,用来记录一些用户的登录记录,操作记录,以及一些程序的崩溃定位,执行访问定位等等;Python
- 任务说明:编写一个钱币定位系统,其不仅能够检测出输入图像中各个钱币的边缘,同时,还能给出各个钱币的圆心坐标与半径。效果代码实现Canny边缘
- 1.ROOT_URLCONF = '总路由所在路径(比如untitled.urls)'<===默认情况是这样根路由的路
- 本文将通过一下几个方面来一一进行解决 1、程序的主要功能
- pycharm from lxml import etree标红##原因:没有lxml这个包###解决方法:需要安装xlml包####下载地
- 本文实例讲述了JavaScript简单计算人的年龄的方法。分享给大家供大家参考,具体如下:注意Date()类型转换,否则会出现NaN的错误b
- 上节基本完成了SVM的理论推倒,寻找最大化间隔的目标最终转换成求解拉格朗日乘子变量alpha的求解问题,求出了alpha即可求解出SVM的权
- 當我們有很多筆的條件要對資料庫進行搜尋時,常常會用到下列的語法 SELECT * FROM Member WHERE accun
- 本文实例讲述了python判断windows系统是32位还是64位的方法。分享给大家供大家参考。具体分析如下:通常64的windows系统p