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

 更新时间:2016年9月20日 19:05  点击:1466

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

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

  一、平衡

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

  1、对称平衡

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

  2、非对称平衡

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

  3、辐射平衡

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

  4、实战平衡

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

  二、对比

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

  三、连贯

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

  1、布局

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

  2、字体

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

  3、导航栏

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

  四、留白

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

  留白的原则包括:

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

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

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




  做网站时经常要用到其他网站的Logo,一个一个从其他网站上copy即费时间,而且下载下来的图片通常都要进行二次加工,很不方便。今天无意中找到一种更好的查Logo的方法:

  用Google的图象搜索(images.google.com),在搜索框中输入“logo-网站名称”(如logo-sohu),返回的都是现成的logo,而且大小各异,下面还有图象分辨率,实在是“众里寻他千‘百度’”,得来全不费工夫“,喜欢哪个,您就自己随便挑吧。

  另外还可通过“logo_sohu"、”logo(空格)sohu"、"logo.sohu"查,不过好象最准确的还是中间带横杠的。



     大家一定在设计网面时,苦恼过不同分辨率下显示的问题,不论你喜欢打表格,还是运用图层,或者利用框架以及帧『内联帧』,当你在800×600下完成创作,1024×768下就会错位,或出现左对齐

     1.如果你喜欢打表格,解决的办法就很简单了,只要把最外边的<table>水平居中即可;如果你处理不好单元格,就把最外边的<table>的width设成"768"[针对800×600而言];这样你的网页在800×600满屏,1024×768就水平局中了,如果想1024×768下也满屏,你只要把最外边的<table>的width设成"100%"。

     说明:层,其实你可以把他看做是绝对定位标记区域,标记为<div></div>

     2.如果你喜欢运用图层,【我很喜欢,而且极爱】,居中问题就是一个大问题 

     图层的好处就是想怎么放就怎么放,比表格灵活的多,再者众多的动态页面技术javascript的运用都涉及到了层的概念,页面中表格与层的混合运用,在很多知名网站都可见其踪影因为是绝对定位的,【相对于浏览窗口0.0坐标】所以由于客户端分辨率的设置不同,显示时就会出现错位问题。

     我的方法是:利用子层与父层的关系解决,具体细节请看下面的代码:

<html>
<head>
<title>New Page 1</title>
</head>
<body>
<div ID="blockdiv" style="position: absolute; top: 0; left: 0; width: 780; height: 26">
<table border="0" width="100%" bgcolor="#00FF00" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="13">
<div style="position: absolute; left: 100; top: 75; width: 54; height: 23">
aaaa
</div>
<div style="position: absolute; left: 172; top: 178; width: 54; height: 23">
bbbb
</div>
</td>
</tr>
</table>
</div>

<script language="javascript">
<!--
var a
ie4=(document.all)?true:false
if(ie4) block=blockdiv.style
a=screen.width
if (a=="1024")
{
alert(block.left);
block.left=112;
}

if (a=="800")

{ alert(block.left);
block.left=0;
}
-->
</script>
</body>
</html>




<      作为一名希望成为服务器端软件的开发人员,总是想在需求中找到业务规则,根据设计方法把业务规则组合起来,配置好一些底层的结构,然后在该基础上来实现设计的框架,最后完成整个服务的功能。而服务器的软件与浏览器之间交互是服务器软件的窗口,因此前台网页的美观和实用在一定程度上反映服务器软件的功能特性。

     前台网页的实用不仅对于服务器端软件的开发重要,而且对于用户的可操作的流畅性和易用性也很重要。首先前台的网页的实用对于服务器软件而言:就是它们之间的交互参数。服务器后台软件将依照参数来设定相关的接口。只有把这些参数有业务逻辑的形式组合起来,才能避免功能的分化,甚至是凌乱;才能使服务器软件的按功能模块来实现,而不是表面看有很多功能,其实由大量功能之间的冗余。这样对于用户在功能上的请求也方便多了,从而达到了实用的效果。

    前台网页的美观对于用户来说是很重要的,爱美之心人皆有之,好的网页能起到赏心悦目的作用。并不是要在网页用大量的色彩,也不需要大量的javascript,而是应该根据网页的性质选定一种网页的风格,然后添加适当有特色的动态功能。同时要考虑到用户的显示器,浏览器等,争取使网页具有通用性!

    以上是我个人从服务器软件开发角度谈网页的实用和美观的自我总结,希望对页面开发人员有所帮助。




1.3 为用户设计

在Web开发中经常犯的一个错误是为设计者而设计站点,所考虑的是设计者的需求而不是实际用户的需求。如果设计者忽略用户的需求,进程模型就不能保障一个站点的质量。一定要记住Web设计的重要原则:

规则:设计者不是用户。

设计者所理解的并不是用户所理解的。作为一个设计者,你拥有Web站点的直接知识。你知道信息在哪里以及如何安装插入件。你有最优的屏幕分辨率及浏览器的设置等等。你必须接受以下的事实,很多用户并不像你一样理解你认真设计的站点,他们的兴趣甚至也与你不尽相同。 考虑到用户的兴趣和期望的重要性,表面上直接让用户以他们希望的方式进行设计仿佛很合适。但如果你考虑到了另一个基本原则,那就不是一个好主意:

规则:用户不是设计者。

并不是任何人是或必须是一个Web设计者。就像指望电影观众根据观看的电影去指导一部电影一样,仅因为用户浏览了众多站点而指望他们能够设计站点的想法是愚蠢的。用户经常有很多不现实的关于站点的需求和期望。用户也不会认真的单独考虑Web站点的某个部分。总之,用户不会像设计者一样对Web有综合的理解。这就是说,成功且易用的Web站点设计的关键是尽量从用户的角度去思考。以用户为中心的设计要求把用户放在第一位。但我们又能就用户谈些什么呢?是否存在典型的用户呢?是否存在一个有代表性的因特网用户,而我们应该为他设计站点?可能不会,但我们在设计站点时应该考虑一般的特性,如响应时间、记忆和其他一些认知与物理能力。对认知科学的回顾有助于我们理解用户的基本能力,这会在第3章里进一步讨论。记住,用户具有共性时也具有个性。对一个用户看起来很简单的事情对另一个用户则可能很困难。为具有共性的用户设计站点有可能 不能满足所有用户的要求。能力强的用户可能觉得站点的限制太多,而新手则会觉得它太困难。用户是一群具有某些共同能力和特征的个体。站点在专注于共性时,也应该考虑个性,正如下面的原则所指出的。

规则:为用户的共性设计,但应该考虑差异。

效益和可用性

好的Web站点对用户是有用的。有效性包括两个方面的意思:有用性和可用性。有用性指的是站点潜在的满足用户需求的功能。可用性是指用户能够通过站点的操作实现特定目标。例如,考虑一个提供在线银行服务的站点。如果它提供诸如收支平衡检查、转账、资金支付等用户期望的能力,就可以说它是有用的。然而,站点也可能完全失败,它提供的功能可能令人困惑而无法得到有效的使用。很明显,如果一个站点不能恰当地运作,或者设计得非常糟糕甚至存在错误,它就不是一个好站点。可用站点的效率会非常高,容易学习,在实现用户的目标时令人满意而不会有错误。

1.7 外观问题

尽管一个好的站点必须有好的功能和简单的导航系统,但这些特征并不能马上得到承认。站点的外观经常是最先被注意到的。尽管好的品味是不可能强迫出来的,几乎也不可能预测,但我们知道,好的Web设计与用户对站点外观的品味直接相关,第一印象有赖于在线的站点。用户不需要任何预先的知识,就可能主观地认为第二个站点(前端的)比第一个更值得浏览。站点的外观会影响用户对站点的看法。外观好的站点会主观地被认为比外观差的站点好,至少第一眼是这样。因此,有如下规则:

规则:外观会显著地影响用户开始时对站点的价值判断。

注意外观在获得用户信任方面可能也是重要的,这一点在在线交易方面非常至关重要。在对每个站点一无所知的情况下,考虑一下您会选择哪个站点进行交易。记住,信任不仅仅与站点相关,并且很大程度上受第三方认可的初始印象或者公司声誉的影响。

综合印象值

外观开始时很重要,但用户继续使用时,会逐渐减少对外观的关注。当一个用户离开某个站点时,他会有一个综合的印象—对站点访问是否成功的一般感觉。一般来说,这种感觉有可能是正面的、负面的或中性的。考虑一个用户讨厌某个站点的案例。为什么造成这种情况?用户是否发现站点很难使用?站点访问速度是否很慢?站点是否运行得很糟糕或经常出错?站点是否设计得很糟糕?以上任何一种原因都可能导致用户在离开时对站点有负面的评价。可能一开始受到外观的影响较大,最后的印象却来自内容、外观、技术以及可用性的综合。综合印象值可能很大程度上与用户在访问过程中是否达到目的相关。这样,虽然外观在第一印象中占主导性的作用,最终印象的产生却很复杂,可以综述为以下规则:

规则:站点的综合印象值受外观、内容、技术、可用性以及用户满足程度的综合影响。

尽管综合印象值不只是仅仅包括用户对站点的外观评价,但这并不会降低Web外观的重要性,颜色、背景、文本的使用、图像以及页面样式都能用来提高页面的表现力。

撇开视觉有障碍和计算机环境不支持图形浏览的用户不谈,视觉效果好的站点注定更加有趣。不要专注于站点的特定外观或那些可以下载的页面,仅仅在抽象的层次上考虑哪些更令人愉悦。
[!--infotagslink--]

相关文章

  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • Go语言通过http抓取网页的方法

    这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05
  • vue如何在用户要关闭当前网页时弹出提示的实现

    这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
  • C#抓取网页数据 解析标题描述图片等信息 去除HTML标签

    本文主要一步一步介绍利用C#抓取页面数据的过程,抓取HTML,获取标题、描述、图片等信息,并去除HTML,希望对大家有所帮助。...2020-06-25
  • 分析网页的几种加密技术

      现在专业性的网站越来越多,许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事,所以大家都想保护自己独创的...2016-09-20
  • 如何在网页中制作虚线表格

      在制作网页的时候,常常要遇到制作虚线表格的问题,下面的文章就能解决这个问题。  方法一:作一个1X2的图。   半黑半白,再利用表格作成线。这种方法虽然麻烦...2016-09-20
  • 网页页面控制注意事项

    1、检查标题。2、检查版权信息,尤其是电话号码。3、图片、文件定位问题。4、产品页面首页指向产品类别问题。5、文章页面首页指向文章类别问题。6、产品图片大小...2016-09-20
  • ASP.NET使用HttpWebRequest读取远程网页源代码

    本文分享了一个使用HttpWebRequest读取远程网页的案例,供大家参考学习。...2021-09-22
  • Illustrator设计细腻的网页纹理背景制作教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们带来的详细的设计细腻的网页纹理背景的制作教程,各位想知道具体制作步骤的,那么下面就快来跟着小编一起看看教...2016-09-14
  • 忠告:网页设计必须注意的29个问题

    当你在INTERNET这个信息的海洋中尽情遨游时,会发现许许多多内容丰富、创意新颖、设计独特的个人网页,不知道你见到这样漂亮可人的网页是否有点心动。一旦你具备了...2016-09-20
  • python 自动刷新网页的两种方法

    这篇文章主要介绍了python 自动刷新网页的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-20
  • 在网页上显示你Google Talk的在线状态

      一个英国人在自己的网站Jon Burrows上推出了一项服务:显示 Google Talk 的在线状态!   下面是先锋 JasonIT 的显示:   大家可以看见,显示有“GTAlk On-Lin...2016-09-20
  • C#网页跳转方法总结

    这篇文章主要介绍了C#网页跳转方法总结的相关资料,需要的朋友可以参考下...2020-06-25
  • asp.net采集网页图片的具体方法

    采集网页上图片的主要关键是在怎么解析出页面代码里那些img标签的src属性...2021-09-22
  • jQuery javascript获得网页的高度与宽度的实现代码

    下面小编就为大家带来一篇jQuery javascript获得网页的高度与宽度的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考...2016-04-27
  • 基于C#实现网络爬虫 C#抓取网页Html源码

    这篇文章主要为大家详细介绍了基于C#实现网络爬虫的相关资料,即C#抓取网页Html源码,感兴趣的小伙伴们可以参考一下...2020-06-25