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

Iamafraid好吧

Iamafraid好吧

2016-02-19 17:23

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

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

  一、平衡

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

  1、对称平衡

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

  2、非对称平衡

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

  3、辐射平衡

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

  4、实战平衡

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

  二、对比

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

  三、连贯

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

  1、布局

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

  2、字体

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

  3、导航栏

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

  四、留白

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

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

  留白的原则包括:

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

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

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

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

展开更多 50%)
分享

猜你喜欢

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

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

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

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

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页设计留白 留白在网页中的运用

网页设计 设计
网页设计留白 留白在网页中的运用

浅谈留白在网页设计中的合理使用

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈留白在网页设计中的合理使用

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网页留白的艺术

Html CSS布局 Div+CSS XHTML
网页留白的艺术

网页设计中的点滴细节把握

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页设计中的点滴细节把握

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win10登录界面背景图片怎么更换

Win10登录界面背景图片怎么更换

支持UEFI PC的Win10安装U盘制作教程

支持UEFI PC的Win10安装U盘制作教程
下拉加载更多内容 ↓