网页设计

美学设计—黄金分割与九宫格

  构图一词是英语COMPOSITION的译音,为造型艺术的术语。在《辞海》中,谈到“构图”为艺术家为了表现作品的主题思想和美感效果,在一定的空间,安排和处理人、物的关系和位置,把个别或局部的形象组成艺术的整体。在中国传统绘画中称为“章法”或“布局”。

首先说构图里的分布和造型,这里不得不提到2个名词:九宫格和趣味中心

  经典的黄金分割,松鼠的前面留出空地,若有所思的生态跃然纸上,令人忍俊不禁

  说九宫格前先说著名的黄金分割

  自从古希腊人发现黄金分割以来这种比例就被认为是美学的最佳比例而得到广泛的应用。

  其实黄金分割是造型艺术中的一种分割法则。亦称黄金分割率,简称黄金率。它的分割方法为,将某直线段分为两部分,使一部分的平方等于另一部分与全体之积, 或使一部分对全体之比等于另一部分对这一部分之比。即:在直线段AB上以点C分割,使(AC)2=CB×AB,或使AC∶AB=CB∶AC。

  抽象主义摄影大师兰克运用的黄金分割

  实践证明,它的比值约为1.618∶1或1∶0.618,被称为黄金比。黄金比最早是由古代希腊人发现的,直到19世纪被欧洲人认为是最美、最谐调的 比例。黄金比广泛用于造型艺术中,具有美学价值,尤其在工艺美术和工业设计的长和宽的比例(如书籍开本)设计中容易引起美感,故称为黄金分割。20世纪 中,法国建筑师Le科布西埃发现黄金比具有数列的性质。他将其与人体尺寸相结合,提出黄金基准尺方案,并视之为现代建筑美的尺度。法国还产生了冠名为黄金 分割画派的立体主义画家集团,专注于形体的比例。

  在实际运用中,黄金比多只采用近似值。最简单的方法是按照数列2、3、5、8、13、21……得出2:3、3∶ 5、5∶8、8∶13、13∶21等比值作为近似值。这种分割方法亦用于优选法。

  再说说九宫格,九宫格的源头可是我们中国人发明的一种构图模式,但巧的是它与黄金分割有着惊人的理论联系!大家们把画面的上下左右用黄金分割来做出4条线,我们惊奇的发现这就是我国古人所说的九宫格!

  看,整个主体分布在2和黄金分割线上

  人们发现在九宫格的4条线交汇的4个点是人们的视觉最敏感的地方,在国外的摄影理论里把这4个点称为“趣味中心”。顾名思义,被反复证明的是当被摄主体处于或发布在这4个点附近最容易得到“眼球”

  下面是摘自另一篇文章<设计和谐画面 浅谈黄金分割与摄影构图>关于黄金分割的算法

原理1

  如图A:“黄金分割”公式可以从一个正方形来推导,将正方形底边分成二等分,取中点X,以X为圆心,线段XY为半径作圆,其与底边直线的交点为Z点, 这样将正方形延伸为一个比率为5:8的矩形,(Y’点即为“黄金分割点”), A:C = B:A = 5:8。幸运的是,35MM胶片幅面的比率正好非常接近这种5:8的比率(24:36 = 5:7.5)

原理2

  如图B:通过上述推导我们得到了一个被认为很完美的矩形,连接该矩形左上角和右下角作对角线,然后从右上角向Y’点(黄金分割点,见图A)作一线段交 于对角线,这样就把矩形分成了三个不同的部分。现在,在理论上已经完成了黄金分割,下一步就可以将你所要拍摄的景物大致按照这三个区域去安排,也可以将示 意图翻转180度或旋转90度来进行对照。

很久以前的工作记录

给一个鲜花网站设计的首页效果图

这是我曾经为一个鲜花网站设计的首页效果图,颜色摒弃普通的绿色,而使用了更能代表植物的绿。


点击可以查看清晰大图

下面是配色表。

鲜花网站-配色表

很久以前的工作记录

曾经给一个大学生网站做的首页效果图

首先声明,这个作品是三年前(06年)完成的,我承认那个时候自己的设计水平很菜,呵呵,放到博客上来只是为了见证自己的成长。各位看官就手下留情不要说多丑多丑了,哈哈,现在我回头看看这些作品觉得的确不怎么样,但这才能证明自己在提高、自己在成长啊…呵呵…还有,大家不要拿自己现在的水平和我几年前的水平比啦,没什么可比性的^_^我相信现在的我比十岁时的周星驰更幽默…….

这个项目是在网上竞标,共有64个竞标稿件,我的稿件最终被选为两个备选稿件其中之一,但客户要求两个备选稿件竞标者要再做一个论坛页面从而决出胜负, 哎,遗憾的是,最近实在太忙了,手头上好几个项目,我要把主要精力放在一个二手车网站整站网页制作项目上,所以实在没时间再做这个了,即使中了也无法保证 项目质量,所以只好放弃,哎,心里不甘心啊!没办法,这就是竞争,价值不在钱而在锻炼^_^

说实话,这个客户是我见过的最挑剔的-_-! 我的稿件修改了N次,但到最后却被迫放弃,这也是我觉得遗憾的最重要的原因,呵呵

下面这个是最终稿件,基于Web2.0模式设计,也是我推荐给客户的理念。

网站界面设计-效果图

下面是修改之前的几次稿件,Logo也有变化:

初稿:
学生-logo-设计

网站效果图

第一次修改稿:

网页效果图

第二次修改稿:

大学生-网页设计

然后就是最上面的那个最终稿件了