黃金比例適用于地板布局的所有區(qū)域，尤其是文本內容的重量。它可以幫助設計人員創(chuàng)建層次結構，并吸引用戶對特定區(qū)域的關注。看看下面的網站示例，看看設計師如何使用它！

黃金比例是一種通常在自然界中發(fā)現(xiàn)的數(shù)學比率，它結合了經典設計理論以創(chuàng)造平衡的構圖。它大致等于1.6180，也稱為“平均值”，“黃金分裂”，通常用希臘字母Ф表示。

“黃金矩形”表示矩形的寬度是其高度的1.6180倍。例如，一側分為300 px，另一側為300 *1.6180≈485px可稱為黃金矩形。

1.如果從這個黃金矩形中分割出一個矩形，它將留下另一個黃色矩形：

2，你可以繼續(xù)用較小的矩形做同樣的動作，然后繼續(xù)剪切，無限循環(huán)，你會得到這個熟悉的圖像：

3.斐波那契序列

Fibonacci序列與黃金比率相似，但并非完全正確。這是一系列數(shù)字，序列中的下一個數(shù)字是前兩個數(shù)字的總和。例如， 0,1,1,2,3,5,8,13,21,34,55,89,144,233,377 .此規(guī)則公式為xn=xn-1 + xn-2。

假設我們從一個正方形開始然后添加另一個正方形，我們得到一個我們需要的矩形：

4.保持添加的正方形的長度

然后我們添加另一個長度等于長度的總長度：

5，然后一次又一次:

6，這可以無限期地繼續(xù)，將獲得相同的黃金矩形效果，但這次是新的而不是削減。黃金比例和斐波納契數(shù)列都使我們能夠做出有吸引力的比例。

現(xiàn)在讓我們分析一些網站，我們可以在這些網站中看到它們的用法。

示例1: YStudio

7，yourlocalstudio.dk

那是什么關于網站？

“Your Local Studio”是丹麥哥本哈根設計和開發(fā)的網站工作室。他們擅長使用任何形式的視覺概念和創(chuàng)建優(yōu)化網頁的經驗。

這個網站是關于什么的？

這個網站有兩到三頁對黃金比例有用。主頁是關鍵信息的概念性解釋。但是，當您訪問工作室頁面時，您會發(fā)現(xiàn)它將一些傳統(tǒng)的Web布局與黃金部分矩形混合在一起，如下頁所示：

8.為什么有效？

想從人群中脫穎而出？正如Yourlocalstudio（yl）所做的那樣，使用黃金比率使用網站設計。該設計使用了一個漸進的，組織良好，結構良好的網格系統(tǒng)，您可能會說它看起來像一個指南。請注意越來越多的網站通過更結構化的布局吸引用戶的注意力

示例＃2: Mashable

9，mashable.com

這個網站是關于什么的？

Mashable是一個新聞網站，信息的來源，知識和資源的“連接世代”。

它如何使用黃金比例？

我使用黃金比率測試UX（用戶體驗）觸發(fā)器來演示Mashable如何使用斐波那契序列布局，靈活的內容布局，左側標題和更多新聞的鏈接，由網格分隔。

為什么有效？

黃金比例在這里非常有效，因為它允許內容驅動的網站為信息布局提供呼吸空間。類似的網站看起來像傳統(tǒng)的網格布局，但Mashable表明黃金比例非常有效，即使它是不可見的。

示例＃3: Jackson＆Kent

10. www.jandk.fr

那是什么關于網站？

Jackson＆Kent是德國網絡制作代理商網站。他們專注于數(shù)字服務，如

HTML5，CSS3，Drupal，Wordpress，PHP/MySQL，F(xiàn)lash等。

它如何利用黃金比例？

上面的屏幕截圖顯示了布局主要包括以前客戶的工作項。它還有一個關于組織本身的內容和屏幕中央的導航欄，聯(lián)系按鈕，如下所示，也使用黃金分區(qū)網格系統(tǒng)以獨特的方式組織。

什么是有效的

這里的示例鼓勵您翻譯網站并探索其水平尺寸，使其在網格視圖和不同大小的塊大小中更直觀和有趣。由于用戶可能正在觀看屏幕上（以及平板電腦上）的內容，因此在水平軸的導航上還存在頁碼。這是一種以用戶界面為整體來查看每條內容的新方式。