详细页
Tel / 4008-0793-08
网页设计中“点”的视觉构成
来源：零度网络科技 发布时间: 2008-06-25 8:48:54
点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本设计语言。网页设计实际上就是如何经营好三者的关系，因为不管是任何视觉形象或者版式构成，归结到底，都可以归纳为点、线和面。
一个按钮，一个文字是一个点。
几个按钮或者几个文字的排列形成线。
线的移动或者数行文字或者一块空白可以理解为面。
点、线、面相互依存，相互作用；可以组合成各种各样的视觉形象，千变万化的视觉空间。
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技术，红点在页面上欢快的运动，同时进行颜色的渐变；绿色的点加上点缀其中的深色小点，丰富了色彩和层次。整个网页的流动着欢快和轻松。
在页面下部，设计师并列运用高低颜色不同的点，若隐若现，突出了页面以点造型的设计语言。
注意在两个页面中都出现了三个斜向排列的带有渐变色的点。它为页面增加了动势和前后的空间层次，实属不容忽视的精彩之处！
您可能还会对以下文章感兴趣：
· 从网页设计到UI设计—重在设计理念的转变
· 网站的视觉设计十八条
· 网页设计中“面”的视觉构成
· 网页设计中“线”的视觉构成
· 网站的整体风格和创意设计
· 网页设计版面怎样布局
· 网站设计的原则
· 关于超链接的下划线
一个按钮，一个文字是一个点。
几个按钮或者几个文字的排列形成线。
线的移动或者数行文字或者一块空白可以理解为面。
点、线、面相互依存，相互作用；可以组合成各种各样的视觉形象，千变万化的视觉空间。
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技术，红点在页面上欢快的运动，同时进行颜色的渐变；绿色的点加上点缀其中的深色小点，丰富了色彩和层次。整个网页的流动着欢快和轻松。
在页面下部，设计师并列运用高低颜色不同的点，若隐若现，突出了页面以点造型的设计语言。
注意在两个页面中都出现了三个斜向排列的带有渐变色的点。它为页面增加了动势和前后的空间层次，实属不容忽视的精彩之处！
您可能还会对以下文章感兴趣：
· 从网页设计到UI设计—重在设计理念的转变
· 网站的视觉设计十八条
· 网页设计中“面”的视觉构成
· 网页设计中“线”的视觉构成
· 网站的整体风格和创意设计
· 网页设计版面怎样布局
· 网站设计的原则
· 关于超链接的下划线