网页设计中点线面的视觉构成.docx
《网页设计中点线面的视觉构成.docx》由会员分享,可在线阅读,更多相关《网页设计中点线面的视觉构成.docx(18页珍藏版)》请在冰豆网上搜索。
网页设计中点线面的视觉构成
网页设计中“点、线、面”的视觉构成
此主题相关图片如下:
线的视觉构成
点的延伸形成线。
线在页面中的作用在于表示方向、位置、长短、宽度、形状、质量和情绪。
线是分割页面的主要元素之一,是决定页面现象的基本要素。
总的来说,线分为直线和曲线两种。
这是线的总体形状。
同时线还具有本体形状,两端的形状。
线的总体形状有垂直、水平、倾斜、几何曲线,自由线这几种可能。
线是具有情感的。
比如水平线给人开阔,安宁,平静的感觉;斜线具有动力,不安,速度和现代意识;垂直线具有庄严,挺拔,力量,向上的感觉;曲线给人柔软流畅的女性特征;自由曲线是最好的情感抒发手段。
线的放射,粗细,渐变可以体现三维空间的感觉。
将不同的线运用到页面设计中,会获得不同的效果。
知道什么时候应该运用什么样的线条,可以充分的表达你所要体现的东西。
总之,线条是网页设计师必须熟练运用的最得力的表现工具。
我们应该对他有一定的了解。
下面我们用一些精彩实例来做具体的分析说明。
在这个页面中,水平线的重复排列形成一种强烈的形式感和视觉冲击力,能够在第一眼就产生兴趣,达到了吸引访问者注意力的目的。
自由曲线的运用,打破了水平线组成的庄严和单调,给网页增加了丰富、流畅、活泼的气氛。
水平线和自由曲线的组合运用,形成新颖的形式和不同情感的对比,从而将视觉中心有力的衬托出来。
值得提出的是,页面中点(按钮)的运用,使页面的形象更加活泼,丰满。
此主题相关图片如下:
线还具有两端形状。
线的两端形状可以任意形的,它决定了线的本体形状。
在这个页面中,设计师运用了具有书法味道的线条,粗糙的边缘形成特殊的肌理,表现了强烈的个性特征和艺术效果。
边缘圆滑的曲线条(字母)在粗糙背景的衬托下,显得很特殊并引人注目。
在这里,字母也可以看做是构成页面的线条的一种。
底纹采用了不规则,方向不一的虚线条,在丰富肌理的同时,和粗线、曲线(字母)形成对比,产生了纵深空间的感觉。
曲线(字母)的大小对比也可以丰富空间层次。
近实远虚的绘画原理,在这里得到了最充分地体现
此主题相关图片如下:
将曲线(字母)随意的重叠,变形,占踞了页面左上角的很的一部分空间。
配合梦幻般的背景,体现了设计师虚无迷茫,杂乱无章的思绪。
自由曲线是表现情感的最佳造型手段。
此主题相关图片如下:
线条除了体现情感外,还能够利用粗细、虚实(例二谈过),渐变,放射产生深度空间和广度空间。
上面的页面中,围绕同心的放射圆,在粗细和虚实上形成深度空间。
设计师巧妙的将3D造型的LOGO放在圆心上,非常引人注目。
页面左边,长短不一的线段在视觉中形成虚实的变化,强调了页面空间的构成。
此主题相关图片如下:
________________________________________
★★★【网页设计版】版主 @ WindStudio.Net (Forum)
2003-5-120:
30:
06
zhoufei988
头衔:
飞侠
等级:
版主
威望:
1
积分:
80
金钱:
298
文章:
4341
经验:
4847
注册:
2002-7-19
第3楼
离心放射的线条,具有力量和挺拔的感觉。
类似于太阳的光芒,使版面的视线更加开阔。
他同时具有吸引浏览者视线的作用,和同心放射有异曲同工之妙。
此主题相关图片如下:
线条还具有分割版面的作用。
在上页中,水平线将页面分割成上下两部分。
在页面上部,曲线的勾勒配合色彩渐变,创造出不同的形体(产品),并通过右上角的线(产品轮廓)联系起来,并将视线引导到网站的LOGO上面。
在页面下部,线条分割造成大小方向不一的,带有圆角的形,作为网站的功能按钮区。
通过柔软并稍微向右上倾斜的波浪线连成一个整体。
同样将视线引导到LOGO附近。
此主题相关图片如下:
在这个页面中,优美的曲线将页面清晰的分割为功能和内容两个区域。
同时,富有变化的,柔软流畅的曲线,配合时尚的色彩,将这个女性用品网站淋漓尽致的表达出来。
此主题相关图片如下:
这是上面的系列站点,在这里,向上,挺拔的直线分割了整个页面。
直线和中灰色彩的运用,突出了网站的男性定位。
此主题相关图片如下:
________________________________________
★★★【网页设计版】版主 @ WindStudio.Net (Forum)
2003-5-120:
32:
03
zhoufei988
头衔:
飞侠
等级:
版主
威望:
1
积分:
80
金钱:
298
文章:
4341
经验:
4847
注册:
2002-7-19
第4楼
面的视觉构成
线的推移形成面。
面是无数点和线的组合。
面具有一定的面积和质量,占据空间的位置更多,因而相比点和线来说视觉冲击力更大更强烈。
面的形状可以大概的分为以下几种:
几何型的面:
方,圆,三角,多边型的面在页面中经常出现。
而一段文字也可以看做是一个方形的面;
有机切面:
可以用弧形相交或者相切得到;
不规则形的面和意外因素形成的随意形面。
面具有自己鲜明的个性和情感特征,在网页的版面设计上,不同形状的面之间的相互关系和整体的和谐需要我们去熟练把握。
可以这么说,只有合理的安排好面的关系,才能设计出充满美感,艺术加实用的网页作品。
下面我们举几个实例来具体说明:
方形的面具有沉着,稳重,厚实,坚强的男性特征。
IBM的网站使用了大量方形的面,充分表达了这个国际公司深厚的背景和强大实力。
在方形面的应用上,大小有明显的区别,重点突出。
位置整齐但也有微小的变化,在严肃中透露轻松。
在视觉中心的位置,放置页面最大面积的深灰色的方形,配合线条、文字和色彩,以及页面上唯一的,亮丽的自由面(女性头部)将重点信息完整强烈的表达出来。
这个页面可以说是商业站点中的典范之作。
此主题相关图片如下:
同样是方形面运用的典范之作。
在这个页面,面的大小和色彩对比更加强烈。
页面中部的几个彩色块也可以看做是点,在丰富了页面的色彩,起了点睛的作用。
此主题相关图片如下:
在这个页面中,有机的接近流线形的面(苹果电脑)占据了页面的大部分位置,造成强烈的视觉冲击。
带圆狐的稍微向右上方倾斜的有机三角形,充满了时尚和流行的味道,在由多个透明按钮组成的水平的面上,大方又带有动感,轻盈又不失稳重。
此主题相关图片如下:
圆形的面和自由形的面组成了一个极不稳定的倒三角构图。
加上网页中动态的高速向外冲的卡通飞车高手,制造了一个紧张的环境,让观众在担心之后,自然记住了这个特殊的视觉效果。
倒三角形可以给人们活泼,新颖的感觉。
倒三角面的不稳定性,可以制造危险的气氛。
此主题相关图片如下:
圆形的面给人以充实、圆满、活泼的感觉,比较适合表现儿童或者女性特征。
这个页面充满了天真和童趣,紧张之余,我们都希望能够去这放松放松。
同时这个页面还采用了很多的动态元素,符合儿童好动的心理。
此主题相关图片如下:
________________________________________
★★★【网页设计版】版主 @ WindStudio.Net (Forum)
2003-5-120:
36:
06
zhoufei988
头衔:
飞侠
等级:
版主
威望:
1
积分:
80
金钱:
298
文章:
4341
经验:
4847
注册:
2002-7-19
第5楼
耐克的站点大量采用了接近圆形的几何面,加上灌蓝高手的精彩定格,使整个站点充满了跳跃和运动的感觉。
在这个页面中,自由形(乔丹)的运动方向对视线的引导起了很大作用,他将视线牵引到页面的右上角。
右上角的面所要推荐的产品,应该是这个页面的重点中的重点了。
中间位置不同内容的几何面的运用,避免了单纯采用文字的单调感。
既能够最直接地反映产品的信息,又在色彩和版面上为整个站点活跃了气氛,可谓是一举多得。
此主题相关图片如下:
面还有正形和负形两种表现。
正型可以解释为以白衬黑。
在页面的右边,白底上的四个人物动态可以称之为正型。
正型在页面中特性为一个实体,具有明确,肯定,向前的感觉。
负形可以理解为以黑衬白。
在页面的左边圆中,女性的白色衣服和皮肤即为负形,在重色的背景的衬托下,体现出虚幻,轻松,深远的感觉。
总结
自然界的万物形态构成都离不开点、线、面。
点、线、面是视觉构成的基本元素,是每个网页设计师必须熟练掌握的设计语言。
点、线、面具有不同的情感特征,我们要善于采用不同的组合去体现不同的情感诉求。
在网页的视觉构成中,点、线、面既是最基本的造型元素,又是最重要的表现手段。
在我们确定网页主体形象的位置、动态时,点线面将是需要最先考虑的因素。
只有合理的安排好点线面的互相关系,才能设计出具有最佳视觉效果的页面,充分的表达出网页最终的诉求!