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

　　什么是黃金比例?

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

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

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

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

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

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

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

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

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

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

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

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

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

新加坡檸檬平面設計公司在Terkaya Wealth Management的平面設計方面也依賴于Golden Spiral的布局。卡上的三個元素：鷹，文本和大鷹的位置都是合理的。

3、內容：沿著黃金螺旋的軌跡

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

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

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

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

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

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

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

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

　　5、圖形：黃金比例圓形

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

百事可樂的標志由兩個黃金比例的圓形交叉點組成。盡管較小的圓圈在重疊中不那么顯眼，但它確實為徽標中間的白色塊奠定了基礎。

Twitter的徽標設計由許多金色圓圈構成，但在使用黃金圓圈時不會使用相鄰的刻度圓圈，乍一看可能不準確，但它同樣和諧。

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

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