前端

网页中的平衡、对比、连贯和留白

我爱IT资讯库   2021/02/21

网页中的平衡、对比、连贯和留白

<!-- Body Copy -->

网页设计中需要把握好很多原则和细节,今天我们来谈谈网页设计中的平衡、对比、连贯和留白。  

一、平衡

  如果你的页面是平衡的,当用户浏览这个页面的时候就会感觉它们是一个整体,看得时候目光的跳转也会很自然。同时,构成页面的元素仍然是彼此独立(注意不是孤立)的,你不需要用线用颜色将它们直接地串接起来,这是为什么呢?因为它们彼此之间是平衡的。这就好比跷跷板,即便你看不到连接两端的人的木板,你也能感觉到他们是一个整体,因为“平衡”!

1、对称平衡
  对称是最常见、最自然的平衡手段,这种方式通常用来设计比较正式的页面,不过也还需要和下面介绍的多种方式结合起来使用。比如图 1所示的网站,如果你在页面正中间划一条垂直向下的直线,你会发现页面的两边的布局是基本对称。

2、非对称平衡

  非对称其实并不是真正的“不对称”,而是一种层次更高的“对称”,如果把握不好页面就会显得乱,因此使用起来要慎重,更不可用的过滥。比如这个网站http://www.graphic.com.cn(图 2)就打破了常见的对称。但是如果仔细看的话还是能够感到某种“对称”的影子。

3、辐射平衡
  页面中的元素以某一个点为中心展开就可以构成辐射平衡。比如图3就是典型的例子,页面的正中是一个大大的LOGO,外侧环绕着多个链接 。

4、实战平衡
  下面我们通过一个LOGO设计实例来看一看平衡的多种变化。

二、对比
  如果说平衡搭起了一个稳定的页面框架,那么对比就是这个框架中的动态点缀。这里说动态并不是说要真的让元素动起来,而是要有“变化”。可以变化的因素包括:大小、颜色、字体、重心、形状、纹理等等。 我们还是通过简单的例子来介绍一下对比的应用,图 9是我们设计的底版,字体一样、大小一样、颜色一样,单调枯燥。

三、连贯
   前面谈到了对比,对比离不开变化,然而如果对比太多,变化也会太多,页面就会显得零乱,因此我们现在来谈“连贯”。在一个成功的页面设计中,有很多要素是必须保持一致的,这些要素通常包括:

1、布局
  页面的上下、左右,页面与页面中间要保持布局一致。比如如果页面上方的表格居中对齐而页面下方的表格却左对齐,那么整个页面就会很难看。

2、字体
  字体的大小、颜色应当基本保持一致。

3、导航栏
  导航栏应当保持完全一样,通常应单单独为导航栏建立一个框架页,这样就可以保证更新导航栏的时候,所有网页都会被自动更新。

四、留白
  国画中“画鱼不画水”的妙处就是留白的妙处。留白可以让访问者有更大的想象空间,就好像就如一个没有过多摆设的房间一样。上上下下、里里外外都塞得满满当当就是很糟糕的设计。

留白的原则包括:

1、元素之间的留白不能太大 这是基本的原则,留白过多,叶面会变得零碎。

2、文本中间的间隔不能太大 文本应当紧凑,尤其汉字文本,如果字与字之间或者行与行之间空白太大页面就会非常难看。

总的来说平衡、对比、连贯和留白设四条原则是在网页设计中必须始终牢记,但绝不是教条,应当结合自己的实际需要灵活的应用。




热门内容

好高兴啊

好高兴啊

  好高兴啊…..好高兴啊….终于发现了…..   ... ...

WCF技术剖析(卷1)之目录

第1章  WCF简介 (WCF Overview)      ... ...

EXT核心API详解(五)

[转载]EXT核心API详解(五)-Ext.EventManager/EventObject/CompositeElem... ...

xorg如何使用 xkbprint?

问题:手册中没有例子,我所尝试的每个文件都需要一些几何。$ xkbcomp/usr/share/x11/xkb/symb ...
织梦淘宝客常见问题

织梦淘宝客常见问题

一、下载安装 见官方帖子,不细说。http://bbs.dedecms.com/203194.html 在此强烈建议新手... ...

(转)批处理(bat)全盘搜索指定文件获取其完整路径方法大全

本文总结了4种实现全盘搜索指定文件获取其完整路径的bat批处理文件源码,有需要的朋友可以参考下 【方案一】fo... ...

Java线程讲解

一 线程的基本概念 线程是一个程序内部的顺序控制流.一个进程相当于一个任务,一个线程相当于一个任务中的一条执行路径. ... ...

css display:none和visibility:hidden和visible="false"区别

  如果在p的style中把visibility设为 hidden则p隐藏,但是它会占据空白空间,... ...

ASP.NET[1]

   有很多人学过ASP,用ASP做过网站,可是到ASP .NET环境下发现,变化真是太大了... ...

构建一个安全的软件系统时,可能遇到的风险及解决方案(未完)

随着汽车工业的发展,汽车早以不是那个由一堆零件组成的大机器,而是由机械和电子器件构成的整体系统。并且,这个... ...
VPS上安装ShadowSocks

VPS上安装ShadowSocks

shadowsocks 是一个轻量级隧道代理,用来穿过防火墙。 我的VPS机器安装的是CentOS系统、... ...

ResultSet 调用getString 抛出NullPointException问题的解决

在Java连接数据库时,有时候在ResultSet 调用getString (或其他类似的方法),有时候会抛出Nu... ...

浅谈OSIV与泛型DAO模式

open session in view  简称 OSIV 模式 在Hibernate中能更好的应... ...

数据库设计原理:数据建模的三个阶段

如果你在Google或者百度上搜索数据建模,相信可以搜索出很多关于数据建模的文章,但是你会发现其中绝大部分是理论、... ...

ajaxfileupload.js 文件上传

一,前台代码。 <input id="fileToUpload" type="... ...

ios的标志常量

1 dec 2 fixed 3 hex 4 internal 5 left 6 oct 7 right 8 scien ...

discuz删除垃圾帖子

有时候如果你的论坛被垃圾帖子占满后,会发现使用后台的删除功能还是有些慢, 我们需要先备份自己需要的帖子,然后进行下面的 ...

Hibernate的主配置文件hibernate.cfg.xml

1:hibernate的主配置文件的名字必须是hibernate.cfg.xml:   1.1:主配置文件主要分为三部分 ...

关于html base元素的使用

base元素可以用于设置页面嵌入的css文件或js文件链接的基地址。 例子: <h... ...

类型转换与强制转换

自动转换: 举一个例子:把一个小的东西放到一个大的盒子里,是件非常容易的事,不用做任何改变,在这里理解成自动转换。... ...

利用wxwidgets操纵word

最近在学习怎么用wxwidgets来操纵word,寻找之中发现MedeoSoftware,里面有很多wxwidgets的... ...

Python中的简单类型

整数 & 浮点数 整数有两种,分别是 int 和 long。其中 int 最大值是 2147483647... ...

JS-时间函数

/** * 日期范围工具类 */ var daterangeutil = (function () { /** ...
“大数据”信息平台 覆盖社区5000老年人

“大数据”信息平台 覆盖社区5000老年人

突然头疼脑热,身边没人照顾;电灯坏了、水管漏了,该找谁来帮忙修?菊园新区智慧养老项目搭建了一个为老综合服务平台... ...

在PHP中全局变量的使用详解

即使开发一个新的大型PHP程序,你也不可避免的要使用到全局数据,因为有些数据是需要用到你的代码的不同部分的。一些常见的全... ...

名称空间也可以自定义

名字空间的定义 名字空间除了系统定义的名字空间之外,还可以自己定义,定义名字空间用关键字namespace,使用名字空 ...
从量价变化中洞察主力意图

从量价变化中洞察主力意图

成份B指(399003.SZ) <script language="JavaScript" typ... ...
android 继承view类刷新页面【安卓进化十一】

android 继承view类刷新页面【安卓进化十一】

       最近做项目中发现,继承了view类的子类... ...

C# XmlSerializer 对象的Xml序列化和反序列化

    .Net程序执行时,对象都驻留在内存中;内存中的对象如果需要传递给其他系统使用;或者在... ...

hdu-1286找新朋友(欧拉函数,水题)

题目链接: 找新朋友 time limit: 2000/1000 ms (java/others)memory limi ...