古老的數(shù)學(xué)原理已經(jīng)存在了成百上千年，但是依然能夠幫助我們提高設(shè)計(jì)水平，你相信嗎？這些數(shù)學(xué)原理經(jīng)得起時(shí)間的檢驗(yàn)，能夠在構(gòu)圖上給予我們指導(dǎo)，幫助我們構(gòu)建更加和諧的視覺(jué)效果。
你可能在設(shè)計(jì)中曾經(jīng)用到過(guò)數(shù)學(xué)原理，也可能沒(méi)有。無(wú)論如何，數(shù)學(xué)規(guī)律適用于各種設(shè)計(jì)，從印刷設(shè)計(jì)再到網(wǎng)頁(yè)設(shè)計(jì)。因此理解這些數(shù)學(xué)的原理，就能讓你的設(shè)計(jì)更加的好看、更高瞻遠(yuǎn)矚。

黃金比例

黃金比例，也可以說(shuō)是黃金矩形或者黃金分割，最理想的比例是1.618。這種原理的起源上不知曉，但是黃金比例無(wú)處不在——從撒哈拉沙漠中的的金字塔再到巍峨的帕特農(nóng)神殿。
當(dāng)然不僅僅局限與建筑，我們可以從達(dá)芬奇的《維特魯威人》中看到黃金比例，也能在無(wú)數(shù)的網(wǎng)頁(yè)設(shè)計(jì)中看到黃金比例。

而在印刷和網(wǎng)頁(yè)設(shè)計(jì)中，黃金比例使用的不是那么嚴(yán)謹(jǐn)，比例稍微有點(diǎn)變動(dòng)，但是依然接近1.618.但是依然屬于黃金比例的大致范圍。（網(wǎng)頁(yè)設(shè)計(jì)中的布局，有時(shí)設(shè)計(jì)師會(huì)取整數(shù)，這樣設(shè)計(jì)起來(lái)能更方便一點(diǎn)）

黃金比例的用途廣泛——在設(shè)計(jì)單個(gè)元素時(shí)，可以用黃金比例的思想來(lái)設(shè)計(jì)該元素的輪廓；也可以在多進(jìn)行個(gè)元素組合時(shí)，采用黃金比例。

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

斐波那契數(shù)列

斐波那契數(shù)列指的是一組數(shù)列，每一個(gè)數(shù)來(lái)自前面兩個(gè)數(shù)的和。
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 …

斐波那契數(shù)列由 Leonardo Pisano Bogollo發(fā)現(xiàn)，存在了750年。他的昵稱是"斐波那契"，因此得名。
根據(jù)斐波那契數(shù)列畫出來(lái)的曲線呈環(huán)狀螺旋。這種形狀在自然界中無(wú)處不在。

該原理和黃金比例緊密相連，因?yàn)槟銜?huì)發(fā)現(xiàn)，用后一項(xiàng)除以前一項(xiàng)，比例會(huì)越來(lái)越接近1.618:1

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

三分法構(gòu)圖

無(wú)法避免的原理，在數(shù)字出版和印刷業(yè)中廣泛應(yīng)用。
在任何圖像、尺寸中利用橫向3條、縱向3條的假想格線，來(lái)實(shí)現(xiàn)規(guī)范構(gòu)圖。實(shí)際上這九宮格中的每一格尺寸相同。這條原理能夠幫助設(shè)計(jì)師在設(shè)計(jì)中構(gòu)建視覺(jué)焦點(diǎn)。
單一圖像上，可以幫助構(gòu)圖。多個(gè)圖像布局中，可以幫助有序組織。根據(jù)此原理（上圖），眼睛一般會(huì)首先注意左上的位置，然后左下，然后右上，然后右下。（這就是為何很多設(shè)計(jì)中Logo和聯(lián)系信息放在了左上）

而且三分法構(gòu)圖也能實(shí)現(xiàn)一種平衡感。而且是不對(duì)稱的平衡感。因?yàn)檠劬σ话銜?huì)沿著九宮格格線的交點(diǎn)移動(dòng)，并沒(méi)有中心參考點(diǎn)。
請(qǐng)看優(yōu)設(shè)網(wǎng)翻譯的這篇文章：想做好設(shè)計(jì)？先來(lái)了解神奇的魔力數(shù)字"3"

坤德里幾何

自于印度占星術(shù)，也叫作"坤德里"。基本上，坤德里是一個(gè)只需要三個(gè)步驟就可以得到的簡(jiǎn)單圖形。畫一個(gè)正方形，然后畫兩條對(duì)角線。連接正方形每條邊的中點(diǎn)就可以得到坤德里圖。你將會(huì)注意到圖上的四個(gè)直角菱形。它們是網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)。

下面的設(shè)計(jì)就是根據(jù)坤德里幾何頁(yè)面布局得來(lái)的。你會(huì)發(fā)現(xiàn)設(shè)計(jì)中的氣卦(梵文，人體的七個(gè)能量中心，又稱七輪)同樣也具有數(shù)學(xué)特性。

————Smashing Magazine《在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用數(shù)學(xué)》（感謝北緯二十五度的精彩翻譯，另強(qiáng)烈推薦此文，可以說(shuō)是本文的升級(jí)版）

網(wǎng)格

這在網(wǎng)頁(yè)設(shè)計(jì)中最為常見(jiàn)，不是嗎？可以用來(lái)進(jìn)行行、列的布局，合理的組織元素，讓頁(yè)面看起來(lái)有序。

網(wǎng)頁(yè)設(shè)計(jì)中的分欄范圍一般是三欄，最多可以分十六欄.、

數(shù)學(xué)原理是有趣的設(shè)計(jì)工具

從數(shù)學(xué)的角度考慮設(shè)計(jì)，非常有趣，但是不要太死板，非要一板一眼的遵循數(shù)學(xué)規(guī)律。這提供了幾個(gè)工具，能夠幫助你計(jì)算尺寸和比例。

Golden Ratio Calculator （黃金比例計(jì)算器）
Phi Calculator （黃金分割數(shù)值計(jì)算器）
Golden Ratio Typography Calculator （黃金比例字體設(shè)計(jì)計(jì)算器）
Fibonacci Sequence Calculator （斐波那契數(shù)列計(jì)算器）
Grid Calculator （格線計(jì)算器）

結(jié)論

數(shù)學(xué)原理能幫大忙！能夠給網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)一種組織感、平衡感。這些原理大多和數(shù)字打交道，而背后來(lái)自對(duì)自然的觀察，因此它們營(yíng)造的視覺(jué)效果非常和諧。
但是也不要太苛刻，嚴(yán)格的按照數(shù)學(xué)原理來(lái)設(shè)計(jì)。知曉、掌握便好，可以作為你"武器庫(kù)"中的一件奇兵，同時(shí)也能進(jìn)一步拓展你的思維。

圖像來(lái)源: GeometerArtist, theilr, Hitchster 以及 brklynn.

 
原文地址：http://designshack.net/articles/intentional-or-not-mathematical-theory-in-design/
優(yōu)設(shè)網(wǎng)翻譯：@MartinRGB
轉(zhuǎn)摘請(qǐng)注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位小編。

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)講座：每月邀請(qǐng)國(guó)內(nèi)互聯(lián)網(wǎng)公司設(shè)計(jì)前輩及行業(yè)總監(jiān)在群內(nèi)及YY語(yǔ)音（YY頻道：156982）分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計(jì)微博：擁有粉絲量56萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：