中华网校

系列网站: 中华网校 | www.网校.com | 3D模型 | 中华网校教育

电脑网校 | 业界新闻 | 职业网校 | 网校宝典 | 软件下载 | 网校论坛 | 网校联盟

电脑入门 | 网页设计 | 网络编程 | 图形图象 | 三维空间 | 多媒体 | 程序语言 | 操作系统 | 系统专题 | 办公应用 | 软件宝典 | 硬件天下 | 

 

您的位置:首页 >> 网页设计 >> 网页设计技巧 >> 设计技巧 >> 新闻正文

网页点、线、面的基本功能和表现  

作者:  时间:2002-10-14  来自:  责任编辑:  阅读次数:

点、线、面是构成视觉空间的基本元素,是表现视觉形象的基本设计语言。网页设计实际上就是如何经营好三者的关系,因为不管是任何视觉形象或者版式构成,归结到底,都可以归纳为点、线和面。
  一个按钮,一个文字是一个点。
  几个按钮或者几个文字的排列形成线。
  线的移动或者数行文字或者一块空白可以理解为面。
  点、线、面相互依存,相互作用;可以组合成各种各样的视觉形象,千变万化的视觉空间。

1. 点的视觉构成

  在网页中,一个单独而细小的形象可以称之为点。点是相比较而言的,比如一个汉字是由很多笔划组成的,但是在整个页面中,他可以称为一个点。点也可以是一个网页中相对微小单纯的视觉形象,如一个按钮(BUTTON),一个LOGO等等。
  需要说明的是,并不是只有圆的形才叫一个点,方形,三角,自由形都可以作为视觉上的点,点是相对线和面而存在的视觉元素。
  点是构成网页的最基本单位,在网页设计中,经常需要我们主观的加些点,如在新闻的标题后加个NEW,在每小行文字的前面加个方或者圆的点。
  点在页面中起到活泼生动的作用,使用得当,甚至可以是画龙点睛的。
  一个网页往往需要有数量不等,形状各异的点来构成。点的形状、方向、大小、位置、聚集,发散,能够给人带来不同的心理感受。

下面我们就具体的页面,谈谈点的运用和表现。

例一:
按此在新窗口浏览图片
http://www.spearedpeanut.com
  在这个页面中,只有唯一的一个点,四周是大量的空白。他马上成为吸引视线,引发兴趣的视觉中心。而这个视觉中心就应该是你想表达的主题,效果是最直接明确的。
  在你实际浏览这个页面的时候,这个处于三维空间点(花生)旁边环绕着一段电脑联线。三维技术的运用,更突出了这个视觉中心,让你迫不及待的点击进入下一级页面。
按此在新窗口浏览图片

http://www.spearedpeanut.com/guts/index_fla3.html
  这是同一网站二级页面中的一个,我们可以将每一组形看做是一个点,如NEWS可以称做点,右下角还有四个点。所有的点互相呼应,组成不稳定的三角构图。在这个页面中,重复出现了用三维动态技术表现,最吸引视线的首页的点(花生)。
  同一视觉形象(点)的不断重复出现,能够增加浏览者的印象。
例二:
按此在新窗口浏览图片

http://www.terra.com/mtv/
  在这个页面的下部,点的水平排列,形成平稳,安详的线的感觉。
  三种形状相似的点随着点击产生的颜色变化,同时在页面中心位置出现不同的产品图片,给大家一种跳跃,动荡,欢快的感受。
  在页面中四处飘荡的点(TOP10的图标)和由左至右移动的文字(也是由点组成),加强了页面的活跃气氛。
  在同一个空间里面体现了两种不同情绪的动态的对比,这也是网页相对传统平面媒体的极大优势。
  做为呼应,设计师特意在页面的中上部,采用了很多较小的点做底纹,起到了丰富页面层次的作用。
  页面上下两段横向的色条,强调了水平线的稳定情绪,将页面统一起来。
按此在新窗口浏览图片
  在这个二级页面中,右边垂直排列的圆点(由1到10),起到了引导视线和强调次序的作用。
  点的等距垂直排列,在视觉上形成虚拟的竖线。加上段落文字的共同边距,在视觉上形成竖线,起到分割页面的作用。
例三:
按此在新窗口浏览图片

http://web.one.net.au/~pipshea/
  在这个页面中,点的大小,位置,颜色,聚散的不同变化和组合,产生了轻松,活泼,流动,抒情,愉快的气氛。
  通过优美的弧线的引导,人们的视线最终将集中在"wasabi:sneaker"这几个由点组成的文字上。自然,这也是设计师所要突出诉求的主题之一。
按此在新窗口浏览图片

http://web.one.net.au/~pipshea/frameset.htm
  在二级页面中,设计师采用了流行的FLASH技术,红点在页面上欢快的运动,同时进行颜色的渐变;绿色的点加上点缀其中的深色小点,丰富了色彩和层次。整个网页的流动着欢快和轻松。
  在页面下部,设计师并列运用高低颜色不同的点,若隐若现,突出了页面以点造型的设计语言。
  注

   网页点、线、面的基本功能和表现   共有2页  1  2 页

相关文章 最新文章 推荐文章
亚马逊网站导航栏的变迁史
开一家漂亮小网店:C2C网店首页布局赏析
全面解析韩国商业网站的设计
给你的网站请一个“小秘书”
网页设计初学者指南
网页布局理念
制作主页的独门功夫五十招
2003年度十大WEB设计误区

  中华网校依法保护知识产权,如果我们的文章有涉及或侵犯您的有关权益,请即时与我们 联系, 注明网址及文章,我们会即时处理或删除,感谢您的合作!中华网校email
  中华网校由广州市中六电脑城智锐计算机专业培训学院及中华网校技术中心提供网络支持未经本站许可任何个人网站、书刊报社一律不得私自复制,转载本站内容!

关于中华网校 | 广告服务 | 版权声明 | 投稿指南 | 网站合作 | 友情链接 | 网站地图

 

版权所有 中华网校 & 智锐网校 1999-2004 COPYRIGHT (C) 1999-2004 www.ZhiRui.com ALL RIGHTS RESERVED

 
/**/