其他频道 PS工具大全 在线PS 在线ico制作 字体转换器 书法字典
当前位置:首页 > 教程 > 设计相关 >

在网页设计中应用数学

作者:北纬二十五度 来源:译言网 更新时间:2010-03-26 返回首页:PS酒吧
“数学是美妙的。”对于在数字和公式面前畏缩的人来说,这听起来也许是荒谬的。但是,从最小的贝壳到最大的漩涡星系,自然界和我们这个宇宙中大部分美丽的东西都呈现出数学特性。 其实,古代最伟大的哲学家之一亚里斯多德曾说过:“数学格外地展现了秩序、对称和极限,而这些是美的极致形式”。
由于其美丽的天性, 数学一直以来都是艺术和建筑设计的一部分。但它至今还没有在网站设计中发挥作用。其原因可能是因为我们大多认为数学是创造性的对立面。相反,其实数学可成为创作创意设计的工具。也就是说,你不必在每个设计中都依赖于数学。关键在于应将数学看作朋友,而非敌人。为了说明这个观点,我们创建了几个展这个时候本文中所讨论数学原理的网页设计。我们还赠送了几个PSD格式的文件,以便于在以后的设计中你可直接使用他们。
文中特载的布局都是为本文的目的而专门创建的。在设计过程中,我们确保本文展示的所有设计都遵循了数学的本质本性,也就是展现秩序、对称和极限。同时我们也遵循网络设计运算法则——有独立的主题、样式和元素。为了保持轻易明了,我们尝试坚持极简主义的设计,同时也推荐单页布局。显然,文中的示例都应充当轻易设计的基础,而非作为已经完成的设计直接使用。
黄金分割比率与黄金矩形
黄金分割比率也称为神圣分割比例,它是一数学无理常数,其值约为1.618033987。如果整体与较大部分之比等于较大部分与较小部分之比,那么这个数量就称为黄金分割比率。




在今天的文章中,我们将留意如何在网页设计中使用黄金矩形。黄金矩形是一其边长之比为黄金分割率之比1:(一比phi),即1:1.618的矩形。
黄金矩形的作图是非常容易和轻易的。步骤1,创建一轻易的正方形。然后从正方形一条边的中点向对角画一条线,以这条线为半径画一条弧来定义矩形的高。最后,完成黄金矩形剩下的部分就得到了一完整的黄金矩形。


一种构造黄金矩形的技法。正方形以红色标注轮廓。由此得到的尺寸是1:Phi的比率,也就是黄金分割比率。
作为一例子,考虑使用下方极简派的设计。这个设计当中有6个黄金矩形,每一行有3个矩形。矩形的尺寸为299 × 185像素。因此,这些矩形的边长大约遵循了黄金分割比率,即299/185 = 1.616。注意黄金矩形周围的空白空间要留出多大才能创造出平静而又轻易的氛围,导航选项可表示出并为这种氛围的目的服务。尽管布局仅只使用了少量颜色并且所有信息块的定位都非常相似,但导航的选项是显而易见的。


但是,在保持设计一致性的同时,可能很难再添加一新的黄金矩形块了。也许这里唯一合理的设计方案是在需要的时候使用剩下的水平空间将其他的块添加到第三行,或多或少这也是特色突出的设计。你可点击下图观看图像的放大版本。


可能的应用
黄金矩形的设计非常适宜于展现照片库、作品集和以产品为导向的网站。黄金矩形还可安排与其他合理的数学技法一起生成漂亮的设计。你可能特别想使用它们为侧边栏相片或广告的显示分块。当然,黄金矩形单纯的集合并非专业、好看的设计。它还需要与网格、对齐、近似值和强调一起密切合作以达到设计的主要目的。例如,一有趣的基于黄金矩形的设计解决方案将是以CSS / jQuery流体网格设计为重要部分,但是本文的介绍不涵盖这项技术。
下载该版面设计的PSD格式文件
我们准备了遵照黄金分割比率和黄金矩形原则设计的PSD格式版面设计示例。 请随意以任何方式使用它,同时如果你希望传播相关信息的话请将本文的链接发给你的同事。
斐波那契设计
意如其名,斐波那契设计基于斐波那契数字序列。根据定义,斐波那契的前两项数字为0和1,之后的每个数字是前两项数字之和。 一些源资料省略了最初的0,取而代之的是以两个1为数列的起始。因此斐波那契数列的头两项数字是给定的,而之后的每个数字是前两项数字之和。 斐波那契序列的项数越高,其相邻两项的比值就越接近黄金分割比率。斐波那契序列是这样的:
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...
在音乐中,斐波那契数有时被用于调音,而在视觉艺术中,斐波那契数用于确定内容及形态构成要素的长度和尺寸。约根施米德胡贝的博文:基于斐波那契的设计论。但是,如果你对他创建的设计运行审查的话,可能会发现它有些死板僵硬,并且有些难于阅读和导航。事实上,对数学的使用需要具有一定的创造性,而非盲目的遵循规则——数学为我们提供了一可应用的指南,但是,更多的是关于在实施网站时引用数学,而非在我们的设计中应用数学。


近似的和真实的的黄金螺旋线。绿色螺旋线由内部每一正方形和四分之一圆相切线构成,而红色的螺旋线是黄金螺旋线,它是对数螺旋线的一种特殊类型。重叠部分呈黄色。正方形的边长被下一更小的正方形分割,这就是黄金分割率。
这种设计背后的主要思想在决定内容区域或侧边栏尺寸时使用斐波那契原理。黄金分割率和斐波那契原理都让设计师有有据可依,是页面容器与页面容器内块的公比。
一般来说,使用斐波那契序列非常容易就可开发出页面布局。可先选择一特定的基准宽度——例如90px。然后,在确定容器大小的时候,用基准宽度乘以来自斐波那契序列的数字。根据计算得到的结果,需要将它们用于页面区。让我们来看一例子。下图是基于斐波那契网页设计的极简派博客版式。


可看到,该网页被分为三列。每一列对应一斐波那契数。在这个设计中,我们使用的基准宽度是90像素。然后,将这个基准宽度乘以一斐波那契数以得到某一特定列的宽度。例如,第一列的宽度为180像素(90 × 2);第二列的宽度为270像素(90 × 3);而第三列的宽度为720像素(90 × 8)。字体的大小也对应于一斐波那契数。该博客的标题字号为55px;文章标题字号为34px;而内容的字号为21px。


基于斐波那契序列页面布局设计的缺点在于:如果你得到的是一特定固定的尺寸宽度(例如1000px),那么就很难使用这种技法了。在这种情况下黄金分割率更容易使用,因为你只需要轻易的用1000px乘以0.618就可得到618px,这就是内容区块的理想宽度。但是,如果你尝试通过斐波那契本身来实现相同的效果,步骤1需要在1000范围内计算出序列。
根据斐波那契序列计算器计算的结果,序列应当为...,610,987,1597...事实上,987很合适,而你可开始选择使用在序列当中之前的数字作为更小的区块宽度。但是,如果页面布局的固定宽度是的更小或更大的话,那么应该使用一些使结果推断更完美的近似值。这个问题在一定程度上也可能出这个时候流设计或弹性设计中,但是那种设计有更大的设计自由度。

顶:0 踩:0 作业:Go! 问答:?

“在网页设计中应用数学”的相关教程和素材: 网页设计

网页设计 相关Ps教程
在网页设计中应用数学 的精彩推荐
本周热点教程
Photoshop教程栏目列表