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

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

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

黃金比例

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

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

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

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

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

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

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

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

斐波那契數列

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

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

斐波那契數列指的是一組數列，每一個(gè)數來(lái)自前面兩個(gè)數的和。

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發(fā)現，存在了750年。他的昵稱(chēng)是”斐波那契”，因此得名。

根據斐波那契數列畫(huà)出來(lái)的曲線(xiàn)呈環(huán)狀螺旋。這種形狀在自然界中無(wú)處不在。

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

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

三分法構圖

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

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

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

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

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

而且三分法構圖也能實(shí)現一種平衡感。而且是不對稱(chēng)的平衡感。因為眼睛一般會(huì )沿著(zhù)九宮格格線(xiàn)的交點(diǎn)移動(dòng)，并沒(méi)有中心參考點(diǎn)。

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

坤德里幾何

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

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

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

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

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

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

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

網(wǎng)格

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

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

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

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

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

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

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

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

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

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

Grid Calculator (格線(xiàn)計算器)

結論

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

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