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

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

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

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

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

3.斐波那契序列

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

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

4.保持添加的正方形的長(zhǎng)度

然后我們添加另一個(gè)長(zhǎng)度等于長(zhǎng)度的總長(zhǎng)度：

5，然后一次又一次:

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

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

示例1: YStudio

7，yourlocalstudio.dk

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

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

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

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

8.為什么有效？

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

示例＃2: Mashable

9，mashable.com

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

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

它如何使用黃金比例？

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

為什么有效？

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

示例＃3: Jackson＆Kent

10. www.jandk.fr

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

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

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

它如何利用黃金比例？

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

什么是有效的

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