网页设计中“点、线、面”的视觉构成
 

此主题相关图片如下：
线的视觉构成 
  点的延伸形成线。 
  线在页面中的作用在于表示方向、位置、长短、宽度、形状、质量和情绪。 
  线是分割页面的主要元素之一，是决定页面现象的基本要素。 
  总的来说，线分为直线和曲线两种。这是线的总体形状。同时线还具有本体形状，两端的形状。 
  线的总体形状有垂直、水平、倾斜、几何曲线，自由线这几种可能。 
  线是具有情感的。比如水平线给人开阔，安宁，平静的感觉；斜线具有动力，不安，速度和现代意识；垂直线具有庄严，挺拔，力量，向上的感觉；曲线给人柔软流畅的女性特征；自由曲线是最好的情感抒发手段。页面设计是什么 
  线的放射，粗细，渐变可以体现三维空间的感觉。 
  将不同的线运用到页面设计中，会获得不同的效果。知道什么时候应该运用什么样的线条，可以充分的表达你所要体现的东西。 
  总之，线条是网页设计师必须熟练运用的最得力的表现工具。我们应该对他有一定的了解。下面我们用一些精彩实例来做具体的分析说明。
在这个页面中，水平线的重复排列形成一种强烈的形式感和视觉冲击力，能够在第一眼就产生兴趣，达到了吸引访问者注意力的目的。 
  自由曲线的运用，打破了水平线组成的庄严和单调，给网页增加了丰富、流畅、活泼的气氛。 
  水平线和自由曲线的组合运用，形成新颖的形式和不同情感的对比，从而将视觉中心有力的衬托出来。 
  值得提出的是，页面中点（按钮）的运用，使页面的形象更加活泼，丰满。

此主题相关图片如下：

线还具有两端形状。线的两端形状可以任意形的，它决定了线的本体形状。 
  在这个页面中，设计师运用了具有书法味道的线条，粗糙的边缘形成特殊的肌理，表现了强烈的个性特征和艺术效果。 
  边缘圆滑的曲线条（字母）在粗糙背景的衬托下，显得很特殊并引人注目。在这里，字母也可以看做是构成页面的线条的一种。 
  底纹采用了不规则，方向不一的虚线条，在丰富肌理的同时，和粗线、曲线（字母）形成对比，产生了纵深空间的感觉。 
  曲线（字母）的大小对比也可以丰富空间层次。 
  近实远虚的绘画原理，在这里得到了最充分地体现

此主题相关图片如下：
将曲线（字母）随意的重叠，变形，占踞了页面左上角的很的一部分空间。配合梦幻般的背景，体现了设计师虚无迷茫，杂乱无章的思绪。 
  自由曲线是表现情感的最佳造型手段。

此主题相关图片如下：
线条除了体现情感外，还能够利用粗细、虚实（例二谈过），渐变，放射产生深度空间和广度空间。 
  上面的页面中，围绕同心的放射圆，在粗细和虚实上形成深度空间。设计师巧妙的将3D造型的LOGO放在圆心上，非常引人注目。 
  页面左边，长短不一的线段在视觉中形成虚实的变化，强调了页面空间的构成。

此主题相关图片如下：
________________________________________
★★★【网页设计版】版主 @ WindStudio.Net (Forum)
2003-5-1 20:30:06
　zhoufei988
　
　
　头衔：飞侠
　等级：版主
　威望：1
　积分：80
　金钱：298
　文章：4341
　经验：4847
　注册：2002-7-19
第3楼
 
离心放射的线条，具有力量和挺拔的感觉。类似于太阳的光芒，使版面的视线更加开阔。 
  他同时具有吸引浏览者视线的作用，和同心放射有异曲同工之妙。

此主题相关图片如下：
线条还具有分割版面的作用。 
  在上页中，水平线将页面分割成上下两部分。 
  在页面上部，曲线的勾勒配合彩渐变，创造出不同的形体（产品），并通过右上角的线（产品轮廓）联系起来，并将视线引导到网站的LOGO上面。 
  在页面下部，线条分割造成大小方向不一的，带有圆角的形，作为网站的功能按钮区。通过柔软并稍微向右上倾斜的波浪线连成一个整体。同样将视线引导到LOGO附近。

此主题相关图片如下：

在这个页面中，优美的曲线将页面清晰的分割为功能和内容两个区域。 
  同时，富有变化的，柔软流畅的曲线，配合时尚的彩，将这个女性用品网站淋漓尽致的表达出来。

此主题相关图片如下：
这是上面的系列站点，在这里，向上，挺拔的直线分割了整个页面。直线和中灰彩的运用，突出了网站的男性定位。

此主题相关图片如下：
________________________________________
★★★【网页设计版】版主 @ WindStudio.Net (Forum)
2003-5-1 20:32:03
　zhoufei988
　
　
　头衔：飞侠
　等级：版主
　威望：1
　积分：80
　金钱：298
　文章：4341
　经验：4847
　注册：2002-7-19
第4楼
 
面的视觉构成 
线的推移形成面。面是无数点和线的组合。 
  面具有一定的面积和质量，占据空间的位置更多，因而相比点和线来说视觉冲击力更大更强烈。 
  面的形状可以大概的分为以下几种： 
  几何型的面：方，圆，三角，多边型的面在页面中经常出现。而一段文字也可以看做是一个方形的面； 
  有机切面：可以用弧形相交或者相切得到； 
  不规则形的面和意外因素形成的随意形面。 
  面具有自己鲜明的个性和情感特征，在网页的版面设计上，不同形状的面之间的相互关系和整体的和谐需要我们去熟练把握。 
  可以这么说，只有合理的安排好面的关系，才能设计出充满美感，艺术加实用的网页作品。 下面我们举几个实例来具体说明： 
方形的面具有沉着，稳重，厚实，坚强的男性特征。 
  IBM的网站使用了大量方形的面，充分表达了这个国际公司深厚的背景和强大实力。 
  在方形面的应用上，大小有明显的区别，重点突出。位置整齐但也有微小的变化，在严肃中透露轻松。 
  在视觉中心的位置，放置页面最大面积的深灰的方形，配合线条、文字和彩，以及页面上唯一的，亮丽的自由面（女性头部）将重点信息完整强烈的表达出来。 
  这个页面可以说是商业站点中的典范之作。

此主题相关图片如下：
同样是方形面运用的典范之作。在这个页面，面的大小和彩对比更加强烈。 
  页面中部的几个彩块也可以看做是点，在丰富了页面的彩，起了点睛的作用。

此主题相关图片如下：

在这个页面中，有机的接近流线形的面（苹果电脑）占据了页面的大部分位置，造成强烈的视觉冲击。 
  带圆狐的稍微向右上方倾斜的有机三角形，充满了时尚和流行的味道，在由多个透明按钮组成的水平的面上，大方又带有动感，轻盈又不失稳重。

此主题相关图片如下：
圆形的面和自由形的面组成了一个极不稳定的倒三角构图。加上网页中动态的高速向外冲的卡通飞车高手，制造了一个紧张的环境，让观众在担心之后，自然记住了这个特殊的视觉效果。 
  倒三角形可以给人们活泼，新颖的感觉。 
  倒三角面的不稳定性，可以制造危险的气氛。

此主题相关图片如下：
圆形的面给人以充实、圆满、活泼的感觉，比较适合表现儿童或者女性特征。 
  这个页面充满了天真和童趣，紧张之余，我们都希望能够去这放松放松。 
  同时这个页面还采用了很多的动态元素，符合儿童好动的心理。

此主题相关图片如下：
________________________________________
★★★【网页设计版】版主 @ WindStudio.Net (Forum)
2003-5-1 20:36:06
　zhoufei988
　
　
　头衔：飞侠
　等级：版主
　威望：1
　积分：80
　金钱：298
　文章：4341
　经验：4847
　注册：2002-7-19
第5楼
 
耐克的站点大量采用了接近圆形的几何面，加上灌蓝高手的精彩定格，使整个站点充满了跳跃和运动的感觉。 
  在这个页面中，自由形（乔丹）的运动方向对视线的引导起了很大作用，他将视线牵引到页面的右上角。右上角的面所要推荐的产品，应该是这个页面的重点中的重点了。 
  中间位置不同内容的几何面的运用，避免了单纯采用文字的单调感。既能够最直接地反映产品的信息，又在彩和版面上为整个站点活跃了气氛，可谓是一举多得。

此主题相关图片如下：
面还有正形和负形两种表现。 
  正型可以解释为以白衬黑。在页面的右边，白底上的四个人物动态可以称之为正型。正型在页面中特性为一个实体，具有明确，肯定，向前的感觉。 
  负形可以理解为以黑衬白。在页面的左边圆中，女性的白衣服和皮肤即为负形，在重的背景的衬托下，体现出虚幻，轻松，深远的感觉。 
总结 
  自然界的万物形态构成都离不开点、线、面。 
  点、线、面是视觉构成的基本元素，是每个网页设计师必须熟练掌握的设计语言。 
  点、线、面具有不同的情感特征，我们要善于采用不同的组合去体现不同的情感诉求。 
  在网页的视觉构成中，点、线、面既是最基本的造型元素，又是最重要的表现手段。 
  在我们确定网页主体形象的位置、动态时，点线面将是需要最先考虑的因素。只有合理的安排好点线面的互相关系，才能设计出具有最佳视觉效果的页面，充分的表达出网页最终的诉求！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。