神圣的比例和网页设计

智能甄选 2018-01-04 16:31:38

学习识别和使用黄金矩形在网页设计项目中创造和谐。

神圣的比例是一个可以追溯到古代的数学概念,几乎在所有类型的设计中,从建筑到艺术到网站都被用作原则。虽然公式和形状的确切来源尚不清楚,但可以通过历史找到其使用的例子 - 埃及人在大金字塔的设计中使用了这种形状,而希腊人将其用于帕台农神庙(注意下面的形状)。

平面设计师一直将这个概念用于报刊杂志的设计已经有一百多年的历史,许多网站的基础都是从神圣的比例开始的。但是,这是一个“魔术”的公式,是否在今天的网页设计工具箱中占有一席之地呢?

鉴定

神圣的比例通过几个名字都是指同一个矩形的形状。黄金长方形,黄金比例,平均比例和披全部是指被认为是最令人愉快和谐的眼睛的形状。

黄金长方形由一个比例为1.618的形状定义; 这有时被称为幻数。虽然数学方程是相当精确的,但是这个理论在设计中的使用却不是这样。许多人选择整数数字到两位小数和整数,使创建公式更复杂。

但是金色的长方形不仅仅是一个整体的美学。形状可以在导航栏,照片的形状和页面上的部分分组中找到。由于形状非常普遍,很多设计师在工作中都无法形成金黄色的矩形。

也许最有名的金色长方形的例子之一就是达·芬奇的“维特鲁威人”的绘画,最初是以“魔术比例”出版的。这种形状的部分,特别是螺旋形,也可以在自然界找到; 这个形状是由鹦鹉螺的壳来例证的。

创建

要为您的网站获取此形状,请测量可用内容区域的宽度,并将其除以1.618。由此产生的数字将是您的内容区域的宽度,剩余的将是您用于网站边栏的空间。

使用一点点数学,您可以为您的网站创建一个简单的黄金比例大纲。从您的内容区域开始。(我们将使用1,024像素,大多数笔记本电脑和平板显示器的宽度。)

1,024 px / 1.618 = 632.88 px(我们将舍入为633 px)这个数字是633像素,将是主要内容区域的宽度。

1,024 px - 633 px = 391 px这个数字是391像素,是边栏的宽度。

完美的黄金矩形保持原来的方形的长宽比,并增加额外的。所以这个公式中的最佳高度也是1,024像素。

你也可以使用在线计算器来计算这个等式。黄金比例计算器是一个很好的工具,它允许你输入一个宽度,并得到一个即时计算,将宽度分成一个黄金矩形,比如我们上面使用的1,024个像素。此外,它使用该数字作为黄金矩形的较大部分的宽度,并提供小部分的宽度和整体形状。

用途

Twitter于2011年底发起重新设计,使用黄金矩形作为其网站轮廓。Feed和侧栏组合镜像黄金矩形。该网站的创意总监道格·鲍曼(Doug Bowman)在Flickr的一篇文章中说:“我们并没有把这些比例放在一个偶然的位置。这当然只适用于最窄版的UI。如果您的浏览器窗口更宽,则您的详细信息窗格将展开,以提供更大的实用性,从而消除这些比例。但最窄的宽度显示了我们开始的比例。“

它的编号使用黄金比例的想法来配对图像和文字。黄金矩形的想法不仅可以用于整个场地的设计,它也可以用来在网站大纲内分组项目。

MmDesign在其网站上使用黄金矩形的原则为主导图像。不仅形象惊人,而且具有完美的谐波形状。黄金长方形不仅适用于网站设计,还可用于在整个网站中创建平衡的部分。

优点和缺点

使用黄金矩形不能确保您的网站设计工作。还有许多其他因素促成了成功的设计。然而,这个公式可以帮助你创造和谐和平衡,并为如何制定设计理念提供基础。许多设计精美的网站并不使用这个原则,但是您可能会在网站结构中找到黄金矩形的示例。照片,文本块和侧边栏也可以展示这个“完美”的形状。

在想要创造自然平衡与和谐感觉的项目中使用黄金矩形。使用形状创造的结构自然是令人愉快的,模仿一些最有名的图像的时代,甚至自然。在不知情的情况下,您网站的访问者会对您创建的外观感到满意。

但并不是所有的设计师都同意这个概念。试图围绕数学公式设计可能是复杂的,耗时的,并不能保证有一个好的网站布局。

分析

使用神圣比例的理论不适合每个人。规划网站大纲时,我认为使用这个理论可能会耗费大量的时间。此外,由于每个网页的深度,几乎不可能保持真正的比例,然后卡住,试图在页面设计中滚动上方或者堆叠多个黄金矩形上方的黄金矩形。(两个选项都不是非常有效的。)

在设计黄金矩形时,尽量不要太注意数字(尽管有些数学纯粹主义者会不同意)。去基本的形状和想法,但不要强迫你的设计。玩变化以及。创建一个金色的矩形,忘记使用完美的高度。(这可以用于为您网站的全部深度创建边栏。)在整个网站或彩色框架中使用黄金矩形来显示图像的形状。

当用于网站的部分而不是整体时,金色的矩形在网页设计中效果最好。该形状将帮助您创建精美排列的图像组或镜像大小的文本块。它也可以用来配对照片,而不会过度对称。(大小一张照片,然后使用1.618比例调整大小,并排配对。)

查看Irving&Co页面上多个图像的分组。登录页面包含六个图像。该组使用黄金矩形的轮廓,但照片裁剪,放在一起有趣的方式。这个形状在数学上并不完美,但却带来了一种平衡与和谐的感觉,与公式的原则并行不悖。当使用金色矩形时,计划您的设计以反映形状,但不适合完美,预先形状的框。看看数字,并考虑整体效果。

我喜欢采用金三角原理的页面的古典感觉。当你登陆一个新的网站时,没有什么好的感觉。运用这个理论,你可以用一个经过时间考验的理论来创造这种感觉和平衡感。但是与任何设计概念一样,请适度使用黄金矩形。太多完美的形状堆叠在一起,最终会看起来平坦,重复和不速之客。

0 阅读:17
智能甄选

智能甄选

技术交流、资源共享,是程序员的网上乐园。