埃及金字塔，蒙娜麗莎，推特，百事可樂(lè)，這些東西有什么共同之處？答案很簡(jiǎn)單。它們似乎彼此不相容。它們旨在遵循黃金比例原則。這也是我們今天要探討的主題：黃金比例。由于黃金比例具有獨(dú)特的美學(xué)價(jià)值，因此被廣泛應(yīng)用于許多領(lǐng)域：數(shù)學(xué)，物理，建筑，藝術(shù)乃至音樂(lè)。此外，金栗子的比例在日常生活和自然中無(wú)處不在：舞臺(tái)記者不是站在舞臺(tái)中間，而是站在一邊;從樹(shù)枝的頂部往下看，它的葉子按照黃金比例排列。然而，很少有人將黃金比例與網(wǎng)站建設(shè)結(jié)合起來(lái)。事實(shí)上，在網(wǎng)頁(yè)設(shè)計(jì)中使用黃金比例可以帶來(lái)無(wú)與倫比的比例，協(xié)調(diào)和藝術(shù)性，給網(wǎng)站帶來(lái)獨(dú)特的審美。今天，小飛將帶您了解什么是黃金比例，如何在網(wǎng)站上應(yīng)用黃金比例和一些優(yōu)秀的例子，我希望能給你一些靈感和靈感。

　　什么是黃金比例?

通常我們將使用線段來(lái)解釋這個(gè)概念：將線段分成兩部分，較短部分與較長(zhǎng)部分長(zhǎng)度的比率等于較長(zhǎng)部分與總長(zhǎng)度的比率，比率為無(wú)理數(shù)，取前三位數(shù)的近似值為0.618。由于這樣的比例通常會(huì)給設(shè)計(jì)帶來(lái)和諧和美感，因此被稱為“黃金”比例（或黃金分割，中國(guó)與外國(guó)比例等）。下圖中的公式可以為您提供參考：

黃金比例的使用已經(jīng)存在了數(shù)千年，從埃及金字塔到雅典的帕臺(tái)農(nóng)神廟，從米開(kāi)朗基羅的西斯廷教堂到芬奇的蒙娜麗莎，從推特的標(biāo)志設(shè)計(jì)到百事可樂(lè)的標(biāo)志設(shè)計(jì)，甚至是面對(duì)這個(gè)數(shù)字比例。事實(shí)上，似乎我們更有可能被黃金比例的物體和圖片所吸引。這種反應(yīng)幾乎是潛意識(shí)的。我們的大腦甚至可以微調(diào)眼睛所看到的接近黃金比例，加深其記憶和對(duì)事物的印象。

黃金比例也可以應(yīng)用于圖形。只需取出一個(gè)正方形并將其一側(cè)放大1.618倍，就會(huì)出現(xiàn)黃金比例矩形。當(dāng)您將原始正方形與新矩形重疊時(shí)，您可以更清晰直觀地看到黃金比例。

如果您繼續(xù)以這種方式填充圖像右側(cè)的方塊，則填充的方塊將變得越來(lái)越小。當(dāng)你沿著每個(gè)正方形的對(duì)角線從大到小繪制拱形時(shí)，你將繪制一條螺旋曲線（如下圖所示），通常稱為金螺旋，或斐波那契即螺旋。有趣的是，自然界中有許多斐波那契螺旋形圖案：蕨類(lèi)植物，花朵，貝殼，甚至颶風(fēng)。這就是為什么我們經(jīng)常覺(jué)得這些東西在視覺(jué)上無(wú)法形容。

我們可以更進(jìn)一步，在每個(gè)方塊中切出一個(gè)圓圈，其中黃金比例為0.618，是最好的圓形。

　在網(wǎng)頁(yè)設(shè)計(jì)中如何使用黃金比例?

在上面的段落中，我們對(duì)黃金比例和黃金螺旋有了一定的了解，我們得到了一個(gè)跟隨黃金比例的矩形和圓形。然后我們將看看如何在網(wǎng)站中使用設(shè)計(jì)美學(xué)。由于黃金比例以各種形式呈現(xiàn)，我們可以在多個(gè)元素中使用它，例如布局，間距，內(nèi)容，圖像和圖形。

1、布局：將網(wǎng)頁(yè)尺寸設(shè)置為黃金比例

在布局中使用黃金比例是非常有效的，關(guān)鍵是控制比例和大小，并掌握0.618的黃金比例。例如，如果使用960px寬度布局，則將其乘以0.618以獲得594px，這是頁(yè)面布局的高度。在此基礎(chǔ)上，您可以將整個(gè)布局劃分為一列正方形，一列矩形，以及更直觀的黃金部分表示，使網(wǎng)站更具吸引力。

這種雙列布局在網(wǎng)頁(yè)設(shè)計(jì)中非常實(shí)用，許多網(wǎng)站選擇這種設(shè)計(jì)方法。即使是著名的國(guó)家地理雜志也是這樣的。整個(gè)頁(yè)面看起來(lái)整潔可讀，元素組織和層次化，用戶瀏覽時(shí)會(huì)更流暢。

　2、間距：使用黃金螺旋布局

間距與白色空間相同，是設(shè)計(jì)中非常重要的元素。合理的間距有助于突出網(wǎng)站的核心內(nèi)容，使網(wǎng)站的布局更加協(xié)調(diào)。不適當(dāng)?shù)拈g距會(huì)影響用戶體驗(yàn)并影響網(wǎng)站的品牌形象。同時(shí)，在網(wǎng)站上制作合理的間距通常需要花費(fèi)很多時(shí)間。那么我們?nèi)绾慰焖儆行У匕才啪W(wǎng)頁(yè)間距呢？使用Golden Spiral是一個(gè)不錯(cuò)的選擇。使用圖形合理地放置每個(gè)元素，并根據(jù)精心計(jì)算的比例格式化網(wǎng)站間距，而不僅僅是直覺(jué)。此外，如果您同時(shí)處理多個(gè)元素，還可以對(duì)金色螺旋進(jìn)行分層，以使頁(yè)面的比例設(shè)計(jì)更加協(xié)調(diào)。

Moodley Design Studio是一款栗子，為布雷根茨音樂(lè)節(jié)設(shè)計(jì)了海報(bào)，節(jié)目和標(biāo)識(shí)。程序表的整體設(shè)計(jì)采用攝影拼貼的方法，具有大量的空白空間，各種元素的設(shè)計(jì)比例，位置和空白由金色螺旋排列。

新加坡檸檬平面設(shè)計(jì)公司在Terkaya Wealth Management的平面設(shè)計(jì)方面也依賴于Golden Spiral的布局?？ㄉ系娜齻€(gè)元素：鷹，文本和大鷹的位置都是合理的。

3、內(nèi)容：沿著黃金螺旋的軌跡

除了使用金色螺旋來(lái)排列網(wǎng)站的間距外，我們還可以使用它來(lái)確定網(wǎng)頁(yè)內(nèi)容的位置。根據(jù)金色螺旋的定理，人眼總是在不知不覺(jué)中注意螺旋的中心，所以我們應(yīng)該注意螺旋的中心，把用戶可能感興趣或最重要的內(nèi)容，以及讓訪客得到它。信息更容易。另外，更重要的信息應(yīng)放在螺旋內(nèi)，這更加顯著。以下是涉及的三種栗子：

以國(guó)家地理雜志網(wǎng)站為例。如果仔細(xì)查看其主頁(yè)，您會(huì)發(fā)現(xiàn)其內(nèi)容是根據(jù)金色螺旋的軌跡排列的。由于人們可能下意識(shí)地關(guān)注這條軌跡的中心，國(guó)家地理雜志將其標(biāo)志放在這里，再次突出了品牌形象。該網(wǎng)站的其他重要元素也包括在螺旋中。

以下Tim Roussilhe設(shè)計(jì)師的網(wǎng)站也是如此。雖然網(wǎng)站的內(nèi)容非常龐大，信息量很大，但網(wǎng)站的整體布局非常緊密，信息組織非常有條理，元素眾多而且不混亂。左上角的內(nèi)容旨在遵循金色螺旋的軌跡。訪客將在登錄時(shí)首先看到“Bonjour My Name is Tim”的文字，然后是左上角的詳細(xì)文本，菜單按鈕和徽標(biāo)。在用戶注意到完整的空白之前，他們已經(jīng)瀏覽了所有必要的信息，這就是設(shè)計(jì)的目的。

Helms Studio在為Fullsteam Brewery設(shè)計(jì)品牌時(shí)，它還使用金色螺旋來(lái)安排網(wǎng)站的內(nèi)容。各種不同的元素放置在不同的塊中，訪問(wèn)者可以瀏覽中心字符，密封，ABV字符以及制造商位置的位置。這種瀏覽體驗(yàn)自然而方便。

4、圖片：黃金比例和三分法

無(wú)論圖片是用于信息傳遞還是美學(xué)呈現(xiàn)，圖片的構(gòu)圖也很重要。使用圖片中的黃金比例和三點(diǎn)法，使用線條和交叉點(diǎn)創(chuàng)建視覺(jué)中心，使它們更引人注目，更重要。在圖片中使用黃金比率是指將圖片分成三個(gè)不相等的塊。三個(gè)塊的比例應(yīng)為1: 0.618: 1，即第一列和第三列的寬度為1，第一列的寬度為0.618，水平面積也相同。通過(guò)這種方式，我們可以通過(guò)這些線或交叉點(diǎn)排列圖片的位置和大小，看看如何吸引更多的關(guān)注，增添樂(lè)趣和活力。除了黃金比例，我們還可以使用三點(diǎn)法來(lái)切割圖片。從某種意義上說(shuō)，三分法是黃金部分的一種變體，使用起來(lái)更簡(jiǎn)單。它是將圖像分成三個(gè)相等的部分，比例為1: 1: 1，這樣的圖像是完全平衡和均勻的。這樣我們就可以圍繞中心矩形排列重要元素。

“復(fù)雜”雜志的封面是女演員索朗格·諾爾斯的特寫(xiě)鏡頭。它使用黃金比例合理地排列圖片中的正負(fù)空間。角色的鼻子和眼睛落在線的交叉處，這是吸引游客注意的理想場(chǎng)所。

當(dāng)Jason Mildren為Pilot雜志設(shè)計(jì)封面時(shí)，他使用三點(diǎn)法構(gòu)建了視覺(jué)重心。模型的眼睛，拇指和手臂軸位于視覺(jué)重心上。字符位置位于布局的右下角，左側(cè)。它不僅突出了關(guān)鍵點(diǎn)，而且實(shí)現(xiàn)了和諧統(tǒng)一。

　　5、圖形：黃金比例圓形

正如黃金比例可用于創(chuàng)建比例協(xié)調(diào)矩形（在前面的點(diǎn)中提到），它也可以用在圓上，完美的圓應(yīng)該遵循0.618的比例。讓我們仔細(xì)看看百事可樂(lè)和Twitter徽標(biāo)在網(wǎng)頁(yè)設(shè)計(jì)中黃金比例圈的應(yīng)用！

百事可樂(lè)的標(biāo)志由兩個(gè)黃金比例的圓形交叉點(diǎn)組成。盡管較小的圓圈在重疊中不那么顯眼，但它確實(shí)為徽標(biāo)中間的白色塊奠定了基礎(chǔ)。

Twitter的徽標(biāo)設(shè)計(jì)由許多金色圓圈構(gòu)成，但在使用黃金圓圈時(shí)不會(huì)使用相鄰的刻度圓圈，乍一看可能不準(zhǔn)確，但它同樣和諧。

事實(shí)上，黃金比例的最大吸引力在于它可以使網(wǎng)站的元素獨(dú)立并以協(xié)調(diào)一致的方式連接它們。這種位置調(diào)整可能很微妙，但它是良好設(shè)計(jì)和良好設(shè)計(jì)的分水嶺。此外，黃金比例可以在網(wǎng)站上使用的地方可能遠(yuǎn)遠(yuǎn)超過(guò)這個(gè)。更多的使用方法要求我們?cè)诔掷m(xù)的實(shí)踐過(guò)程中進(jìn)行探索和總結(jié)。使用您網(wǎng)站上的黃金比例和黃金螺旋！來(lái)到起飛頁(yè)面自助平臺(tái)（http://www.qifeiye.com/?t_wd=a5）成為一個(gè)快速響應(yīng)的網(wǎng)站！

« 在網(wǎng)上賺錢(qián)到底哪里難？ | 小米MIX 3發(fā)布了！今晚6點(diǎn)開(kāi)始預(yù)售 »