把握网页设计中的平衡 对比 连贯和留白原则

2016-02-19 17:23 8 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的把握网页设计中的平衡 对比 连贯和留白原则,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - Web开发 】

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

  一、平衡

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

  1、对称平衡

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

  2、非对称平衡

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  3、辐射平衡

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

  4、实战平衡

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  二、对比

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

  三、连贯

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

  1、布局

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

  2、字体

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

  3、导航栏

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

  四、留白

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

  留白的原则包括:

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

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

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

来源:http://www.tulaoshi.com/n/20160219/1615104.html

延伸阅读
前几天有一篇给大学生的海报设计教程很火,看过的同学还记得作者重点圈出来的设计四大原则吗?为了帮同学们彻底掌握,并且灵活运用它们,今天我们深入聊一下四大原则中的对比,全文近5000字,案例生动,赶紧趁着这回把对比原则学个透吧。 等同和对比,联系与分别,归类和不归类等都是能将元素中相同或不同的元素加以区别的方式。基于它们所承载...
标签: Web开发
以下是在网页制作时要注意的一些小问题: 1、20秒60kb原则 据统计,按目前网络下载速度(窄带),浏览者可忍受的时间大约为20秒,文件大小约为60KB,否则一页图文太大,没有人愿意等待。 2、设计工具选择 我个人观点是使用Micromedia出品的Dreamweaver。其功能强大,可以区分两大主流浏览器Netscape和IE各自所支持的语...
标签: Web开发
最开始,网页呈现在你面前的时侯,它就好像一张白纸,它需要你任意挥洒你的设计才思。在开始的时侯,你需要明白,虽然你能控制一切你所能控制的东西,但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯,那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案,但如果你是初学者,那么最好明白网页布局...
标签: 设计
如果说眼睛是心灵的窗口,那心理学与设计就必然存在某种联系。我们对某些图案的认知及视觉理解与人的心理有着非常密切的关系。而对心理学某些原则的了解则有助于我们对设计的整体把握。其中,平衡感是最重要的一个视觉法则。 这个世界上到底没有设计的法则?上个世纪初,奥地利及德国的心理学家创立了格式塔理论(Gestalt),该理论旨在解释人类...

经验教程

469

收藏

33
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部