讓這些數學理論來為你網頁設計撐腰。

古老的數學原理已經存在了成百上千年，但是依然能夠幫助我們提高設計水平，你相信嗎？這些數學原理經得起時間的檢驗，能夠在構圖上給予我們指導，幫助我們構建更加和諧的視覺效果。

你可能在設計中曾經用到過數學原理，也可能沒有。無論如何，數學規律適用于各種設計，從印刷設計再到網頁設計。因此理解這些數學的原理，就能讓你的設計更加的好看、更高瞻遠矚。

黃金比例

黃金比例，也可以說是黃金矩形或者黃金分割，最理想的比例是1.618。這種原理的起源上不知曉，但是黃金比例無處不在——從撒哈拉沙漠中的的金字塔再到巍峨的帕特農神殿。

當然不僅僅局限與建筑，我們可以從達芬奇的《維特魯威人》中看到黃金比例，也能在無數的網頁設計中看到黃金比例。

而在印刷和網頁設計中，黃金比例使用的不是那么嚴謹，比例稍微有點變動，但是依然接近1.618.但是依然屬于黃金比例的大致范圍。（網頁設計中的布局，有時設計師會取整數，這樣設計起來能更方便一點）

黃金比例的用途廣泛——在設計單個元素時，可以用黃金比例的思想來設計該元素的輪廓；也可以在多進行個元素組合時，采用黃金比例。

那使用黃金比例的效果又是什么呢？好吧，它能夠模擬出自然的感覺，讓瀏覽者感覺到平衡與和諧。

斐波那契數列

斐波那契數列指的是一組數列，每一個數來自前面兩個數的和。

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, 17711, 28657, 46368, 75025, 121393, 196418, 317811 …

斐波那契數列由 Leonardo Pisano Bogollo發現，存在了750年。他的昵稱是”斐波那契”，因此得名。

根據斐波那契數列畫出來的曲線呈環狀螺旋。這種形狀在自然界中無處不在。

該原理和黃金比例緊密相連，因為你會發現，用后一項除以前一項，比例會越來越接近1.618:1

這條原理幫助了設計師選擇圖片的長寬度和尺寸大小。在布局上給予設計師指導。例如在三欄式布局中中應用斐波那契數列，1170像素寬度的布局中，三欄像素寬度分別是180,270,720

三分法構圖

無法避免的原理，在數字出版和印刷業中廣泛應用。

在任何圖像、尺寸中利用橫向3條、縱向3條的假想格線，來實現規范構圖。實際上這九宮格中的每一格尺寸相同。這條原理能夠幫助設計師在設計中構建視覺焦點。

單一圖像上，可以幫助構圖。多個圖像布局中，可以幫助有序組織。根據此原理（上圖），眼睛一般會首先注意左上的位置，然后左下，然后右上，然后右下。（這就是為何很多設計中Logo和聯系信息放在了左上）

而且三分法構圖也能實現一種平衡感。而且是不對稱的平衡感。因為眼睛一般會沿著九宮格格線的交點移動，并沒有中心參考點。

請看優設網翻譯的這篇文章：想做好設計？先來了解神奇的魔力數字”3″

坤德里幾何

自于印度占星術，也叫作”坤德里”。基本上，坤德里是一個只需要三個步驟就可以得到的簡單圖形。畫一個正方形，然后畫兩條對角線。連接正方形每條邊的中點就可以得到坤德里圖。你將會注意到圖上的四個直角菱形。它們是網頁設計的基礎。

下面的設計就是根據坤德里幾何頁面布局得來的。你會發現設計中的氣卦(梵文，人體的七個能量中心，又稱七輪)同樣也具有數學特性。

Smashing Magazine《在網頁設計中應用數學》（感謝北緯二十五度的精彩翻譯，另強烈推薦此文，可以說是本文的升級版）

網格

這在網頁設計中最為常見，不是嗎？可以用來進行行、列的布局，合理的組織元素，讓頁面看起來有序。

網頁設計中的分欄范圍一般是三欄，最多可以分十六欄.、

數學原理是有趣的設計工具

結論

數學原理能幫大忙！能夠給網頁設計帶來一種組織感、平衡感。這些原理大多和數字打交道，而背后來自對自然的觀察，因此它們營造的視覺效果非常和諧。

但是也不要太苛刻，嚴格的按照數學原理來設計。知曉、掌握便好，可以作為你”武器庫”中的一件奇兵，同時也能進一步拓展你的思維。

Golden Ratio Calculator（黃金比例計算器）

Phi Calculator（黃金分割數值計算器）

Golden Ratio Typography Calculator（黃金比例字體設計計算器）

Fibonacci Sequence Calculator（斐波那契數列計算器）

Grid Calculator（格線計算器）

圖像來源: GeometerArtist, theilr, Hitchster 以及 brklynn.

原文地址：http://designshack.net/articles/intentional-or-not-mathematical-theory-in-design/

更多信息請查看IT技術專欄