網頁(yè)設計該如何利用(yòng)黃金比例-深圳網站設計說說如何實踐

黃金比例應用(yòng)在平面布局各個領域中(zhōng)，特别是能(néng)夠平衡文(wén)本内容的權重。 它可(kě)以幫助設計者創建層次結構以及吸引用(yòng)戶對特定區(qū)域的關注。 看看下面網站的例子，看看設計師們是如何利用(yòng)它的！

黃金比例是一個數學(xué)比率，通常在自然界中(zhōng)都能(néng)發現它的，并結合古典設計理(lǐ)論建立平衡的構圖。 它大約等于1.6180，也被稱為(wèi)“中(zhōng)庸之道”、“黃金分(fēn)割”， 通常用(yòng)希臘字母Ф表示這個值。

“黃金矩形”是指一個長(cháng)方形的寬度是它高度的1.6180倍。 例如,一個劃分(fēn)為(wèi)300 px的一側， 則另一側為(wèi)300 * 1.6180≈485 px可(kě)以稱之為(wèi)黃金矩形。

1、如果你從這個黃金矩形切分(fēn)一個的矩形，留給你的會是另一個黃金矩形：

2、你可(kě)以更小(xiǎo)的矩形繼續做同樣的動作(zuò)，然後再繼續切分(fēn)下去，無限循環，你會得到這個熟悉的圖像：

3、斐波那契序列

斐波那契序列類似于黃金比例，但并非完全如此。 這是一個系列的數字，序列中(zhōng)的下一個數字是前兩個的總和。 例如: 0，1，1，2，3，5，8，13，21，34，55，89，144，233，377…這個規則公(gōng)式是xn = xn-1 + xn-2.

假設我們先從一個正方形開始，然後添加另一個，會得到一個我們所需的矩形：

4、保持所增加正方形延伸出的長(cháng)長(cháng)度

然後我們再添加另一個等于長(cháng)的長(cháng)度總數的矩形：

5、然後一次又(yòu)一次的:

6、這可(kě)以無限期延續下去，會得出同樣的黃金矩形效果，但這次是新(xīn)建而不是切分(fēn)。 黃金比例和斐波那契序列都能(néng)讓我們做出吸引人的比例。

現在讓我們來分(fēn)析一些網站，在這些網站中(zhōng)我們可(kě)以看到他(tā)們的用(yòng)法。

例1:YStudio

7、yourlocalstudio.dk

這是個關于什麽的網站呢(ne)?

“Your Local Studio”是一個基于設計和開發的網站，工(gōng)作(zuò)室在丹麥哥(gē)本哈根,。 他(tā)們擅長(cháng)使用(yòng)任何形式的視覺概念并用(yòng)來創作(zuò)的經驗，用(yòng)來優化網頁(yè)。

這個網站是關于什麽的?

這個網站有(yǒu)兩三個頁(yè)面有(yǒu)用(yòng)到黃金比例。主頁(yè)是關鍵信息的一個概念性诠述。然而，當您訪問工(gōng)作(zuò)室頁(yè)面時，會發現它融合了一點傳統的web布局與黃金分(fēn)割矩形，如以下頁(yè)面：

8、它為(wèi)什麽是有(yǒu)效的？

想在人群中(zhōng)脫穎而出? 如Yourlocalstudio(yl)所做的，通過利用(yòng)黃金比例來進行網站設計。 該設計表面上采用(yòng)了漸進式的組織分(fēn)明、結構清晰的網格系統，你可(kě)能(néng)會說，這些一切都看起來像引導。。。留意了越來越多(duō)的網站都是以結構更動态的布局來吸引用(yòng)戶注意力

例# 2:Mashable

9、mashable.com

這個網站是關于什麽的?

Mashable是一個新(xīn)聞網站，獲取信息的來源地，“連接的一代”的知識和資源。

它如何利用(yòng)黃金比例的？

我使用(yòng)了黃金比例的測試UX(用(yòng)戶體(tǐ)驗)觸發器來演示Mashable如何使用(yòng)斐波那契序列的布局，内容布局靈活，左邊的标題和鏈接到更多(duō)的新(xīn)聞，由格架分(fēn)隔。。

它為(wèi)什麽有(yǒu)效？

黃金比例在這裏是很(hěn)有(yǒu)效的，因為(wèi)它允許一個内容驅動的網站給予信息排版喘息的空間。而類似的網站使用(yòng)傳統的網格布局看起來内容密密麻麻的，但Mashable表明黃金比例非常有(yǒu)效的，即使是無形的。

示例# 3: Jackson & Kent

10、www.jandk.fr

這是個關于什麽的網站?

Jackson & Kent是一個來自法國(guó)web生産(chǎn)代理(lǐ)網站。 他(tā)們專門從事數字服務(wù)如

HTML5,CSS3,Drupal,Wordpress,PHP / MySQL,Flash等。

它是如何利用(yòng)黃金比例的？

上面的截圖展示了如何布局主要是包括了以往客戶的工(gōng)作(zuò)項目， 它還有(yǒu)一塊内容是有(yǒu)關機構本身以及一個導航欄在屏幕的中(zhōng)心， 聯系人按鈕，如下圖所示，也使用(yòng)黃金分(fēn)割網格系統并以獨特的方式進行組織布局。

什麽它是有(yǒu)效的

這裏的例子鼓勵你平移網站和探讨其内水平容，在網格視圖裏和不同尺寸的塊形狀使内容更直觀有(yǒu)趣。因為(wèi)用(yòng)戶很(hěn)可(kě)能(néng)是觀看在屏幕上的内容（以及平闆上），在橫軸的導航上也有(yǒu)分(fēn)頁(yè)号碼。這是查看每段内容的一種新(xīn)穎的方法，而且以用(yòng)戶界面作(zuò)為(wèi)一個整體(tǐ)。