进入旧版 | 服务项目 | 成功案例 | 联系方式 | 过客留言 | 友情链接
   
设为首页
加入收藏
联系我们
网站首页 | 新闻资讯 | 操作系统 | 办公软件 | 网络软件 | 工具软件 | 媒体动画 | 网页制作 | 网站开发 | 程序开发 | 平面设计
Photoshop视频教程 | Word入门 | Flash入门 | JScript | VBScript | ASP | PHP | ADO | 网页特效 | 3DS MAX6.0命令 | 系统进程
您当前的位置:GOODSGY电脑学习网 -> 网页制作 -> 其它 -> 文章内容  
网页设计中“线”的视觉构成

  线的视觉构成

  点的延伸形成线。

  线在页面中的作用在于表示方向、位置、长短、宽度、形状、质量和情绪。

  线是分割页面的主要元素之一,是决定页面现象的基本要素。

  总的来说,线分为直线和曲线两种。这是线的总体形状。同时线还具有本体形状,两端的形状。

  线的总体形状有垂直、水平、倾斜、几何曲线,自由线这几种可能。

  线是具有情感的。比如水平线给人开阔,安宁,平静的感觉;斜线具有动力,不安,速度和现代意识;垂直线具有庄严,挺拔,力量,向上的感觉;曲线给人柔软流畅的女性特征;自由曲线是最好的情感抒发手段。

  线的放射,粗细,渐变可以体现三维空间的感觉。

  将不同的线运用到页面设计中,会获得不同的效果。知道什么时候应该运用什么样的线条,可以充分的表达你所要体现的东西。

  总之,线条是网页设计师必须熟练运用的最得力的表现工具。我们应该对他有一定的了解。下面我们用一些精彩实例来做具体的分析说明。















www.goodsgy.com

例一:
www.goodsgy.com

  在这个页面中,水平线的重复排列形成一种强烈的形式感和视觉冲击力,能够在第一眼就产生兴趣,达到了吸引访问者注意力的目的。

  自由曲线的运用,打破了水平线组成的庄严和单调,给网页增加了丰富、流畅、活泼的气氛。

  水平线和自由曲线的组合运用,形成新颖的形式和不同情感的对比,从而将视觉中心有力的衬托出来。

  值得提出的是,页面中点(按钮)的运用,使页面的形象更加活泼,丰满。




















www.goodsgy.com

例二:
www.goodsgy.com

  线还具有两端形状。线的两端形状可以任意形的,它决定了线的本体形状。

  在这个页面中,设计师运用了具有书法味道的线条,粗糙的边缘形成特殊的肌理,表现了强烈的个性特征和艺术效果。

  边缘圆滑的曲线条(字母)在粗糙背景的衬托下,显得很特殊并引人注目。在这里,字母也可以看做是构成页面的线条的一种。

  底纹采用了不规则,方向不一的虚线条,在丰富肌理的同时,和粗线、曲线(字母)形成对比,产生了纵深空间的感觉。

  曲线(字母)的大小对比也可以丰富空间层次。

  近实远虚的绘画原理,在这里得到了最充分地体现。 www.goodsgy.com

www.goodsgy.com

  将曲线(字母)随意的重叠,变形,占踞了页面左上角的很的一部分空间。配合梦幻般的背景,体现了设计师虚无迷茫,杂乱无章的思绪。

  自由曲线是表现情感的最佳造型手段。



















www.goodsgy.com

例三:
www.goodsgy.com

  线条除了体现情感外,还能够利用粗细、虚实(例二谈过),渐变,放射产生深度空间和广度空间。

  上面的页面中,围绕同心的放射圆,在粗细和虚实上形成深度空间。设计师巧妙的将3D造型的LOGO放在圆心上,非常引人注目。

  页面左边,长短不一的线段在视觉中形成虚实的变化,强调了页面空间的构成。www.goodsgy.com

www.goodsgy.com

  离心放射的线条,具有力量和挺拔的感觉。类似于太阳的光芒,使版面的视线更加开阔。

  他同时具有吸引浏览者视线的作用,和同心放射有异曲同工之妙。



















www.goodsgy.com

例四:
www.goodsgy.com

  线条还具有分割版面的作用。
  在上页中,水平线将页面分割成上下两部分。

  在页面上部,曲线的勾勒配合色彩渐变,创造出不同的形体(产品),并通过右上角的线(产品轮廓)联系起来,并将视线引导到网站的LOGO上面。

  在页面下部,线条分割造成大小方向不一的,带有圆角的形,作为网站的功能按钮区。通过柔软并稍微向右上倾斜的波浪线连成一个整体。同样将视线引导到LOGO附近。www.goodsgy.com

www.goodsgy.com

  在这个页面中,优美的曲线将页面清晰的分割为功能和内容两个区域。

  同时,富有变化的,柔软流畅的曲线,配合时尚的色彩,将这个女性用品网站淋漓尽致的表达出来。 www.goodsgy.com

www.goodsgy.com

  这是上面的系列站点,在这里,向上,挺拔的直线分割了整个页面。直线和中灰色彩的运用,突出了网站的男性定位。 www.goodsgy.com


在百度中搜索:网页设计中“线”的视觉构成
在Google中搜索:网页设计中“线”的视觉构成
在Yahoo中搜索:网页设计中“线”的视觉构成

收藏到网摘:新浪VIVI 365key 我摘 POCO网摘 博采中心 YouNote 和讯网摘 天天收藏
[] [返回上一页] [打 印] [收 藏]

 相关文章    最新文章
· 过来人谈如何快速成为一名网页设计师
· DIV+CSS建立标准WEB网页的好处
· 网页排版中10种致命的语义错误
· 详细解读标准网页中的Meta标签
· 网页设计:关于CSS框架网页的设计
· CSS设计网页时的一些常用规范
· CSS教程:网页中Span和Div的区别
· 网页设计者优化网页应该从三个方面下手
· [图文] 网页标准制作:使用ul多行多列布局..
· 网页设计中CSS关联调用的4种方式
 
· Google搜索引擎:迈向云计算的未来
· 一个合格网页设计师的标准是什么?
· 建立自己的博客的过程中学习到的知识
· 网站策划:网站栏目和页面的策划
· 初学:关于域名和空间的一些认识
· 什么是静态网页和动态网页?
· 设计网页前端界面必备的技能
· 如何调用Flash才符合Web网页标准?
· 网页色彩的搭配
· 文章内容SEO优化基本原则

∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论…]
站内搜索

精彩图文
  网站导航  
操作系统 办公软件 网络软件
Vista Windows2003 WindowsXP Windows2000/NT Windows9X/ME Linux 其他 Word Excel Powerpoint Outlook 金山系列 其他 网页浏览 上传下载 联络聊天 邮件工具 服务器软件 网络辅助
工具软件 媒体动画 网页制作
系统工具 媒体工具 压缩工具 图文处理 文件管理 其他 3DMAX Authorware Director Maya 视频处理 其他 Flash Dreamweaver FireWorks FrontPage LiveMotion Golive HTML/CSS 其它
网站开发 平面设计 程序设计
ASP JSP PHP CGI JavaScript VBScript XML/SOAP Web服务器 Photoshop PhotoImpact CorelDraw Illustrator Freehand 设计欣赏 其他 VB VC .NET C/C++ DELPHI JAVA

冀ICP备05019428号
Copyright © 2004-2008 电脑学习网 Inc.All rights reserved.
TEL:13832340607
QQ:39873155
E_Mail:goodsgy(#)hotmail.com   (把(#)替换成@)
MSN:goodsgy(#)hotmail.com   (把(#)替换成@)