首页 > 知识•资讯 > 网页设计的构图技巧! > 正文

网页设计的构图技巧!

2010/9/23 0:00:00 · 稿源:传诚信

    以下简单的介绍了网页设计中的一个步骤:构图,罗列了一些比较常用而又有效果的方法,除此之外,应该还有很多,希望大家补充,但我相信无论构图也好,色彩搭配也好,亦或是节奏旋律等等。它们总是围绕着一个共同点去进行,那就是使页面在信息顺利传达的前提下变的美观而生动,有了这一大准则,我想设计页面的时候需要的不是一大堆技法和技巧,而是一颗永不停止探索美和创造美的心。

几何图形的力量。 

几何图形在页面中往往能起到大梁的作用,也是网页内容最为常用的承载面板。这些图形合理的搭配和有效的穿插,能使页面除了信息传达外,更具层次感和观赏性。 

经典网页设计构图技巧实例
    此网站圆角矩形巧妙的结合信息模块穿插在一起,除了营造了网站的主体富有节奏的形状之外,更加强了页面的层次感,不会显得页面枯燥和单调。
经典网页设计构图技巧实例
  圆形和椭圆形的结合搭载了轮播广告和重要信息,使得整个页面既有亮点又不失简洁。
经典网页设计构图技巧实例

    同样是圆角矩形的穿插结合, 色彩填充的图形交集既能展示重要信息又勾勒出整个网站的风格形态。
经典网页设计构图技巧实例

竖着的大圆角矩形和线条勾勒出整个完整的画面,各种信息镶嵌于各个形状只中,既不显得乱又使其相得益彰。 

更多类似的例子: 

【二】钢筋上的铆钉—破格而出的素材 

素材应用的好,往往能起到画龙点睛的作用,而素材起点缀页面和表达主题之外,还能作为构图中的一种主要元素存在,这些素材通常破格而出作为连接页面的纽带,使页面结构更加的稳固,故称其为“铆钉”。 
经典网页设计构图技巧实例

    素材看似随机的摆放,其实是有意的将素材摆放于左上和右下两个对角点,视觉上俗称的暗线,左下角信息内容的图片和右上角的登录窗口组成了另外一条对角暗线, 两者并组成了X结构,而四个素材起到到了固定和压轴的作用,稳固而又美观。
    飞跃的人越于页面之上,护目镜挂于导航栏之上。这两个素材的使用使整个页面既贴切于主题又生动,而在构图上人连接穿插了1、2两个板块,而护目镜所在的2板块链接了3、4板块,视觉上的感官延续让页面脉络清晰不脱节,切富有节奏感。
经典网页设计构图技巧实例

页面非常简单,除了图形构筑的基础形,就是几朵起到“铆钉”作用的花儿,花朵破框而出,使得素材有机的融于框内又搭于整个页面之上 ,让人有种花是由圆洞内长到页面之上的错觉,简单而富有层次。


这个页面的素材和主体框架的结合很巧妙,破框而出的喷溅牛奶和静态的巧克力、杯子的动静结合于页面头部,使得整个页面主次清晰而又连贯。 

更多类似的例子: 

【三】打造斜塔之美—斜的视觉张力 

比萨斜塔之斜是地质沙化下沉还是设计师故意为之,至今还是有人在争论,抛开争议,斜塔的美似乎让许多人都想来到它身边一睹这位倾斜美人之容,凑巧的是,在浩瀚的宇宙中最美丽的星球,也就是地球,也斜着身子对着太阳转着。话题扯的比较远,斜线,或者说是斜着的物体,似乎天生有一种张力。在网页设计中亦是如此,而在这里所表现的为视觉的张力,是种视觉心里上的延伸力而非物理上的。当页面过于平均,画面平平毫无亮点时,打破平均打破通体的平均尤为重要,打破平均的方式有很多,而斜线似乎是网页设计中惯用的一招,屡试不爽。 

斜线的张力让整个页面富有动感和延伸性,即可为页面起到修饰的作用,又能做为信息的承载模块,两者有机的融合并不让人觉得倾斜的标题不好识别或者有碍阅读,反之更能让整个页面富有形式感和表现力。

经典网页设计构图技巧实例

    斜线的运用加上素材和圆形的穿插结合,让整个页面具有动感,同时视线又随着斜线的走向带入至素材和标题之上 ,具有张力的同时又让这些线起到一个很好到视觉导向作用
    以斜线为暗线排版而成的信息组件和右边斜线切割而成的图片形成形态上的互补,又形成节奏上虚实和疏密的对比,使得整个画面既有斜线带来的张力和动感之外,又不乏整体的稳固和均衡。 

更多类似的例子: 
经典网页设计构图技巧实例
    

选择我们,优质服务,不容错过

1. 优秀的网络资源,稳定的网站和速度保证

 (配送双线独立ip空间,国际A级BGP机房,99.5% 的主机在线时间)

2. 7年北京网站建设经验,优秀的技术和设计水平,更放心

3. 全程省心服务,不必担心自己不懂网络,更省心。

-----------------------------------------------------------------------------------------------------
我们的与众不同之处:

      免费网络营销顾问:我们为您提供免费的网络营销顾问服务,您需要了解关于如何开展网络营销,电子商务网站设计等的事宜,欢迎随时联系我们。

      seo友好的网站管理系统:除了优质的网站空间,网站管理系统,和网站设计外,我们的网站管理系统更是seo友好的,包括:自定义栏目名,Google Sitemap自动生成,静态页面生成等等,让您的网站。

      免费网络营销培训:如何更好的投放网络广告,如何提高网络广告的投资回报,如何发帖子,
      如何优化网站,我们有丰富的经验开放给您!祝君成功!

联系我们:010-62199213   62122723-808   贾先生
传诚信北京
网站建设网站:
www.ccxcn.com 点击查看经典网站案例
北京网站建设
2010年网站建设套餐及优惠!

  • 相关推荐
  • 大家在看
客户服务
咨询热线

010-62199213

24小时咨询热线

139-1050-5354