做網站工資高嗎" />

埃及金字塔、蒙娜麗莎、Twitter、百事可樂，這些事物有什么共同點?答案很簡單，看似風馬牛不相及的它們在設計時都遵循了黃金比例的原則。這也正是我們今天要探究的主題：黃金比例。由于黃金比例具備獨特的美學價值，在多個領域有著廣泛地應用：數學、物理、建筑、美術甚至是音樂。除此以外，黃金比例的栗子在日常生活和大自然中也比比皆是：舞臺報幕員不是站在舞臺的正中央，而是一側;從一棵嫩枝的頂端向下看，它的葉子是按照黃金比例排列著的。不過，很少有人將黃金比例和網站建設結合在一起，其實在網頁設計之中使用黃金比例可以帶來無與倫比的比例性、協調性和藝術性，給網站賦予獨特的美感。今天小飛就帶大家了解一下什么是黃金比例，在網站可以怎樣應用黃金比例以及一些優秀的范例，希望能給大家一些啟發和靈感。

什么是黃金比例?

通常我們會用線段分割來解釋這個概念：把一條線段分割為兩部分，較短部分與較長部分長度之比等于較長部分與整體長度之比，其比值是一個無理數，取其前三位數字的近似值是0.618。由于這樣的比例常常能帶來設計的和諧與美感，因此人們稱它為"黃金"比例(或黃金分割、中外比等)。下圖中的公式可以給大家作一個參考：

黃金比例的運用已經有幾千年的歷史了，從埃及金字塔到雅典的帕特農神廟，從米開朗琪羅的西斯廷教堂到達芬奇的蒙娜麗莎，從Twitter的Logo設計到百事的Logo設計，甚至人臉都遵循這個數字比例。事實上，我們似乎先天就更容易為擁有黃金比例的物體和圖片所吸引。這種反應幾乎是下意識的，我們的大腦甚至會對眼睛看到的事物進行微調以接近黃金比例，加深自身對事物的記憶和印象。

黃金比例還可以應用在圖形之中。隨便拿出一個正方形，將它的一邊放大1.618倍，這樣一個黃金比例的矩形就出現了。當你將原來的正方形和新的矩形重疊時，你能更加清晰直觀的看清黃金比例的存在。

如果你繼續以這樣的方式向圖片右側的矩形中填充正方形，那么你填充的正方形會越來越小。當你沿每個正方形的對角線從大到小依次畫出拱形時，你會繪制出一條螺旋狀的曲線(如下圖所示)，這條曲線通常被稱為黃金螺旋，或斐波那契螺旋線。有趣的是，自然界中存在許多斐波那契螺旋線的圖案：蕨類植物的莖、鮮花、貝殼，甚至颶風。這也就是為什么我們常會覺得這些事物在視覺上有著無法言語的吸引力。

我們還可以更進一步，在每個正方形中內切一個圓形，這些圓形是遵循0.618的黃金比例的，是比例的圓形。

在網頁設計中如何使用黃金比例?

在上面的段落中我們對于黃金比例和黃金螺旋已有了一定的認識，獲得了遵循黃金比例的矩形、圓形，那么接下來我們就看看在網站中如何使用提升設計美感。由于黃金比例的呈現形式多樣，我們可以將它用到布局、間距、內容、圖像和圖形等多個元素之中。

1、布局：將網頁尺寸設置為黃金比例

在布局中使用黃金比例很有效，關鍵點就在于控制比例和尺寸，把握好0.618的黃金比例。舉個例子，如果你使用960px的寬度布局時，將它乘以0.618就可以得到594px，這就是網頁布局的高度。在此基礎之上，你可以將整個布局劃分為一欄正方形，一欄矩形，更加直觀的呈現黃金分割，讓網站更富魅力。

這種兩欄式布局在網頁設計上很實用，不少網站都選擇這種設計方法。就連大家熟知的國家地理雜志也是這樣，整個頁面看上去整潔、易讀、各項元素組織有序、層次分明，用戶在瀏覽時也會更加順暢。

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

間距和留白一樣，是設計中十分關鍵的元素。合理的間距有利于突出網站核心內容，讓網站布局更加協調，而不恰當的間距則會影響用戶體驗，影響網站的品牌形象。與此同時，在網站中做好合理間距常常需要花費很多時間。那么怎樣才能快捷、高效的安排網頁間距呢?使用黃金螺旋就是一種很好的選擇，借助圖形合理放置每項元素，讓網站間距按精心計算過的比例排版，而不單單是直覺。另外，如果你正在同時處理多個元素，你也可以將黃金螺旋分層，讓網頁的比例設計更加協調。

Moodley 設計工作室就是一個栗子，它為布雷根茨藝術節設計了海報、節目單以及Logo等品牌標識。節目單的整體設計采用了攝影圖片拼貼的方式，有大量的留白，而其中各種元素的設計比例、位置和留白就是借助黃金螺旋來布置的。

新加坡的Lemon Graphic設計公司在給Terkaya財富管理公司進行視覺形象設計時同樣也借助了黃金螺旋的布局方式。卡片上的三個元素：小鷹、文本和大鷹的位置擺放都是有合理的依據的。

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

除了借助黃金螺旋安排網站的間距以外，我們還可以運用它來決定網頁內容的位置。根據黃金螺旋的定理來看，人眼總是會不自覺的注意螺旋處的中心，因此我們應該重視螺旋的中心地帶，將用戶可能感興趣或最重要的內容放在此處，讓訪客在獲取信息上更加容易。另外，比較重要的信息要放在螺旋線的內部，這樣比較醒目。下面是有關的三個栗子：

以國家地理雜志的網頁為例。如果你仔細觀察它的首頁，你就會發現它的內容就是按照黃金螺旋的軌跡來安排的。由于人們可能會下意識注意這個軌跡的中心，因此國家地理雜志在這放置了它的logo，再次突出強調品牌形象。網站中的其他重要元素也為螺旋線所囊括。

下面Tim Roussilhe設計師的網站也是一樣。雖然網站的內容很多，信息量很大，但網站的整個布局顯得十分緊密、信息組織很有條理，元素多而不亂。左上角的內容就是跟隨黃金螺旋的軌跡來設計的，訪客在登入的一瞬間會先看到"Bonjour My Name is Tim"的文字，然后是詳細的文本，菜單按鈕，再到左上角的Logo。在用戶注意到充分的留白之前他們已經瀏覽完了所有必要的信息，這正是設計的目的所在。

Helms 工作室 為Fullsteam Brewery進行品牌設計時，也同樣借助黃金螺旋安排網站內容。各種不同的元素被放在不同的區塊中，訪客可以沿著中心人物、印章、ABV字符、產商所在地的軌跡去瀏覽。這樣的瀏覽體驗很自然、方便。

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

圖片的構成也是很重要的，無論圖片是服務于信息傳遞或美感呈現的目的。在圖片中使用黃金比例和三分法可以使用線條和交點構建視覺中心，讓它們更吸人眼球，更能突出重要的信息。在圖片中使用黃金比例是指將圖片分成3個不相等的區塊，3個區塊的比例應該是1:0.618:1，也就是說第一列和第三列的寬度為1，而第二列的寬度為0.618，水平區域也是同理。這樣一來，我們可以通過這些線條或交點合理安排圖片的位置和大小，看看怎樣更能吸引用戶注意力，增添趣味和活力。除了黃金比例以外，我們還可以利用三分法對圖片進行切割。三分法從某種意義上來說算是黃金分割的一種變體，在使用上更加簡單。它是將圖片三等分，比例為1:1:1，這樣的圖片是完全平衡和均勻的。這樣我們可以將重要的元素圍繞中心的矩形排列開來。

Complex雜志的封面是女星Solange Knowles的特寫照，它就使用了黃金比例來合理安排圖片中正空間和負空間，人物的鼻子和眼睛正好落在線條的交點處，是吸引訪客注意的理想位置。

Jason Mildren 為pilot 雜志設計封面時，采用三分法來構建視覺重心，圖中模特的眼、拇指和手臂軸心都處在視覺重心上，人物位置靠右下，留白靠左上，在布局上既突出重點，又做到了和諧統一。

5、圖形：黃金比例圓形

就像黃金比例可以用來創建比例協調矩形(前面幾點都有提及)，它還能夠用在圓形上，一個好的圓形應該遵循0.618的比例。下面就以百事和Twitter的Logo來仔細分析一下黃金比例的圓形在網頁設計中的應用吧!

百事的Logo是由兩個黃金比例的圓形相交組成的。雖然小一點的圓形在重疊之中沒有那么顯眼，但它確實為Logo中間的白色塊狀打下了基礎。

Twitter的Logo設計則是借助若干黃金比例的圓形來構建的，只不過它在使用黃金比例的圓形的時候，并沒有使用相鄰比例的圓形來構建，乍一看可能不夠精確，但卻同樣和諧。

其實，黃金比例大的魅力就在于既能使網站中的各項元素獨立存在，又能以協調、一致的方式讓他們串聯起來。這種位置的調整可能是微妙的，但它卻是好的設計和優秀設計的分水嶺。另外，網站之中可以使用黃金比例的地方可能遠不止這些，更多的使用方法需要我們在不斷的實踐過程中探索總結。快在你的網站中使用黃金比例和黃金螺旋吧!快來起飛頁自助建站平臺（http://www.qifeiye.com/?t_wd=a5）做一個響應式網站吧!

<scriptdocument.writeln('

名稱欄目：干貨分享: 幾何設計學原理の黃金分割在網頁設計中的應
文章源于：http://m.newbst.com/news45/184545.html

成都網站建設公司_創新互聯，為您提供域名注冊、移動網站建設、網站改版、網站設計、動態網站、軟件開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯