讓這些數(shù)學(xué)理論來為你網(wǎng)頁設(shè)計撐腰發(fā)布者：本站     時間：2021-12-23 11:12:59

古老的數(shù)學(xué)原理已經(jīng)存在了成百上千年，但是依然能夠幫助我們提高設(shè)計水平，你相信嗎?這些數(shù)學(xué)原理經(jīng)得起時間的檢驗，能夠在構(gòu)圖上給予我們指導(dǎo)，幫助我們構(gòu)建更加和諧的視覺效果。

你可能在設(shè)計中曾經(jīng)用到過數(shù)學(xué)原理，也可能沒有。無論如何，數(shù)學(xué)規(guī)律適用于各種設(shè)計，從印刷設(shè)計再到網(wǎng)頁設(shè)計。因此理解這些數(shù)學(xué)的原理，就能讓你的設(shè)計更加的好看、更高瞻遠(yuǎn)矚。

黃金比例

讓這些數(shù)學(xué)<a href=/theory/ target=_blank class=infotextkey>理論</a>來為你網(wǎng)頁設(shè)計撐腰,PS教程,

讓這些數(shù)學(xué)理論來為你網(wǎng)頁設(shè)計撐腰,PS教程,

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

當(dāng)然不僅僅局限與建筑，我們可以從達(dá)芬奇的《維特魯威人》中看到黃金比例，也能在無數(shù)的網(wǎng)頁設(shè)計中看到黃金比例。

讓這些數(shù)學(xué)理論來為你網(wǎng)頁設(shè)計撐腰,PS教程,

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

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

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

斐波那契數(shù)列

讓這些數(shù)學(xué)理論來為你網(wǎng)頁設(shè)計撐腰,PS教程,

讓這些數(shù)學(xué)理論來為你網(wǎng)頁設(shè)計撐腰,PS教程,

斐波那契數(shù)列指的是一組數(shù)列，每一個數(shù)來自前面兩個數(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ù)列畫出來的曲線呈環(huán)狀螺旋。這種形狀在自然界中無處不在。

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

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

三分法構(gòu)圖

讓這些數(shù)學(xué)理論來為你網(wǎng)頁設(shè)計撐腰,PS教程,

讓這些數(shù)學(xué)理論來為你網(wǎng)頁設(shè)計撐腰,PS教程,

無法避免的原理，在數(shù)字出版和印刷業(yè)中廣泛應(yīng)用。

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

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

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

請看優(yōu)設(shè)網(wǎng)翻譯的這篇文章：想做好設(shè)計?先來了解神奇的魔力數(shù)字”3″

坤德里幾何

讓這些數(shù)學(xué)理論來為你網(wǎng)頁設(shè)計撐腰,PS教程,

讓這些數(shù)學(xué)理論來為你網(wǎng)頁設(shè)計撐腰,PS教程,

自于印度占星術(shù)，也叫作”坤德里”?；旧希さ吕锸且粋€只需要三個步驟就可以得到的簡單圖形。畫一個正方形，然后畫兩條對角線。連接正方形每條邊的中點就可以得到坤德里圖。你將會注意到圖上的四個直角菱形。它們是網(wǎng)頁設(shè)計的基礎(chǔ)。

讓這些數(shù)學(xué)理論來為你網(wǎng)頁設(shè)計撐腰,PS教程,

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

讓這些數(shù)學(xué)理論來為你網(wǎng)頁設(shè)計撐腰,PS教程,

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

網(wǎng)格

讓這些數(shù)學(xué)理論來為你網(wǎng)頁設(shè)計撐腰,PS教程,

讓這些數(shù)學(xué)理論來為你網(wǎng)頁設(shè)計撐腰,PS教程,

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

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

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

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

Golden Ratio Calculator (黃金比例計算器)

Phi Calculator (黃金分割數(shù)值計算器)

Golden Ratio Typography Calculator (黃金比例字體設(shè)計計算器)

Fibonacci Sequence Calculator (斐波那契數(shù)列計算器)

Grid Calculator (格線計算器)

結(jié)論

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

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