做网站,选零度!
 
首页 | 解决方案 | 零度软件 | 零度文库 | 零度案例 | 400电话办理 | 培训项目 | 关于零度
网页设计中“面”的视觉构成
来源:零度网络科技    点击:1218    发表时间:2008-6-25 8:53:56

  面的视觉构成:

  线的推移形成面。面是无数点和线的组合。
  面具有一定的面积和质量,占据空间的位置更多,因而相比点和线来说视觉冲击力更大更强烈。
  面的形状可以大概的分为以下几种:
  几何型的面:方,圆,三角,多边型的面在页面中经常出现。而一段文字也可以看做是一个方形的面;
  有机切面:可以用弧形相交或者相切得到;
  不规则形的面和意外因素形成的随意形面。
  面具有自己鲜明的个性和情感特征,在网页的版面设计上,不同形状的面之间的相互关系和整体的和谐需要我们去熟练把握。
  可以这么说,只有合理的安排好面的关系,才能设计出充满美感,艺术加实用的网页作品。

例一:

网页设计的视觉构成系列--面的视觉构成


http://www.ibm.com

  方形的面具有沉着,稳重,厚实,坚强的男性特征。
  IBM的网站使用了大量方形的面,充分表达了这个国际公司深厚的背景和强大实力。
  在方形面的应用上,大小有明显的区别,重点突出。位置整齐但也有微小的变化,在严肃中透露轻松。
  在视觉中心的位置,放置页面最大面积的深灰色的方形,配合线条、文字和色彩,以及页面上唯一的,亮丽的自由面(女性头部)将重点信息完整强烈的表达出来。
  这个页面可以说是商业站点中的典范之作。

网页设计的视觉构成系列--面的视觉构成


http://www.adobe.com

  同样是方形面运用的典范之作。在这个页面,面的大小和色彩对比更加强烈。
  页面中部的几个彩色块也可以看做是点,在丰富了页面的色彩,起了点睛的作用。

例二:

网页设计的视觉构成系列--面的视觉构成


http://www.apple/imac/

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

网页设计的视觉构成系列--面的视觉构成


http://www.newbeetle.co.uk/

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

例三: 

          网页设计的视觉构成系列--面的视觉构成
http://www.humongous.com

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

网页设计的视觉构成系列--面的视觉构成


http://www.nike.com/

  耐克的站点大量采用了接近圆形的几何面,加上灌蓝高手的精彩定格,使整个站点充满了跳跃和运动的感觉。
  在这个页面中,自由形(乔丹)的运动方向对视线的引导起了很大作用,他将视线牵引到页面的右上角。右上角的面所要推荐的产品,应该是这个页面的重点中的重点了。
  中间位置不同内容的几何面的运用,避免了单纯采用文字的单调感。既能够最直接地反映产品的信息,又在色彩和版面上为整个站点活跃了气氛,可谓是一举多得。

例四:

网页设计的视觉构成系列--面的视觉构成


http://www.h73.com/home.html

  不规则面和几何面在页面中交错出现。点,线,面的综合运用,合理的布白(也是面),加上色彩的对比,形式新颖,使视线保持兴奋,完美的实现了视觉传达的目的。
  页面中面的黑白灰的合理关系和安排,使页面产生了空间层次,丰富了整体效果。

例五:

网页设计的视觉构成系列--面的视觉构成


http://www.riccovero.no

  面还有正形和负形两种表现。
  正型可以解释为以白衬黑。在页面的右边,白底上的四个人物动态可以称之为正型。正型在页面中特性为一个实体,具有明确,肯定,向前的感觉。
  负形可以理解为以黑衬白。在页面的左边圆中,女性的白色衣服和皮肤即为负形,在重色的背景的衬托下,体现出虚幻,轻松,深远的感觉。

总结

  自然界的万物形态构成都离不开点、线、面。
  点、线、面是视觉构成的基本元素,是每个网页设计师必须熟练掌握的设计语言。
  点、线、面具有不同的情感特征,我们要善于采用不同的组合去体现不同的情感诉求。
  在网页的视觉构成中,点、线、面既是最基本的造型元素,又是最重要的表现手段。
  在我们确定网页主体形象的位置、动态时,点线面将是需要最先考虑的因素。只有合理的安排好点线面的互相关系,才能设计出具有最佳视觉效果的页面,充分的表达出网页最终的诉求!

[作者:零度网络科技 类别:设计理论]   

  + 上下文导读:
上一篇文章:初学忠告:网页设计的八种陋习
下一篇文章:网页设计中“线”的视觉构成
  + 文章评论:
  + 发表评论:
姓名:
Email:
内 容:
 


您可能还会对以下文章感兴趣:
·从网页设计到UI设计—重在设计理念的转变
·网站的视觉设计十八条
·网页设计中“线”的视觉构成
·网页设计中“点”的视觉构成
·网站的整体风格和创意设计
·网页设计版面怎样布局
·网站设计的原则
·关于超链接的下划线
零度文库推荐 更多...
·网站运营可能失败的7种原因
·和新手谈谈怎样才有更多流量
·影响排名的六大因素
·怎样发表文章才来流量
·中小企业如何做好信息推广工作
·新网站做宣传最好的八种方法
·关于超链接的下划线
·个人网站怎样转成商业网站?
·十点网站推广的注意事项
·上饶网站建设为什么选择零度?
上饶网站制作
联系零度
上饶市亿升广场南座908室
0793-8209673 8169953
403055110 18265371
zyp1598@msn.com
403055110@qq.com
您还可以在线咨询>>
 
付款方式 | 关于零度 | 联系零度 | 版权声明 | 友情链接 | 400电话办理 | 网站地图
版权所有:零度网络科技 法律顾问:江西饶诚律师事务所
地址:江西省上饶市信州区亿升广场南座908室 零度信箱:403055110@qq.com
业务咨询:4008-0793-08 技术支持:0793-8209673 赣ICP备09007308号