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

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

“黃金矩形”表示矩形的寬度是其高度的1.6180倍。例如，一側(cè)分為300 px，另一側(cè)為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。

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

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

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

5，然后一次又一次:

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

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

示例1: YStudio

7，yourlocalstudio.dk

那是什么關(guān)于網(wǎng)站？

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

這個網(wǎng)站是關(guān)于什么的？

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

8.為什么有效？

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

示例＃2: Mashable

9，mashable.com

這個網(wǎng)站是關(guān)于什么的？

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

它如何使用黃金比例？

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

為什么有效？

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

示例＃3: Jackson＆Kent

10. www.jandk.fr

那是什么關(guān)于網(wǎng)站？

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

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

它如何利用黃金比例？

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

什么是有效的

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