當前位置: 首頁 > 設計資訊 > 設計教程 > 正文

讓這些數(shù)學理論來為你網(wǎng)頁設計撐腰

2018-01-16 1564 0
screenshot 古老的數(shù)學原理已經(jīng)存在了成百上千年,但是依然能夠幫助我們提高設計水平,你相信嗎?這些數(shù)學原理經(jīng)得起時間的檢驗,能夠在構(gòu)圖上給予我們指導,幫助我們構(gòu)建更加和諧的視覺效果。
你可能在設計中曾經(jīng)用到過數(shù)學原理,也可能沒有。無論如何,數(shù)學規(guī)律適用于各種設計,從印刷設計再到網(wǎng)頁設計。因此理解這些數(shù)學的原理,就能讓你的設計更加的好看、更高瞻遠矚。 黃金比例
screenshot screenshot
黃金比例,也可以說是黃金矩形或者黃金分割,最理想的比例是1.618。這種原理的起源上不知曉,但是黃金比例無處不在——從撒哈拉沙漠中的的金字塔再到巍峨的帕特農(nóng)神殿。
當然不僅僅局限與建筑,我們可以從達芬奇的《維特魯威人》中看到黃金比例,也能在無數(shù)的網(wǎng)頁設計中看到黃金比例。 而在印刷和網(wǎng)頁設計中,黃金比例使用的不是那么嚴謹,比例稍微有點變動,但是依然接近1.618.但是依然屬于黃金比例的大致范圍。(網(wǎng)頁設計中的布局,有時設計師會取整數(shù),這樣設計起來能更方便一點) 黃金比例的用途廣泛——在設計單個元素時,可以用黃金比例的思想來設計該元素的輪廓;也可以在多進行個元素組合時,采用黃金比例。 那使用黃金比例的效果又是什么呢?好吧,它能夠模擬出自然的感覺,讓瀏覽者感覺到平衡與和諧。 斐波那契數(shù)列
screenshot screenshot
斐波那契數(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ù)列,1170像素寬度的布局中,三欄像素寬度分別是180,270,720 三分法構(gòu)圖
screenshot
 
screenshot 無法避免的原理,在數(shù)字出版和印刷業(yè)中廣泛應用。
在任何圖像、尺寸中利用橫向3條、縱向3條的假想格線,來實現(xiàn)規(guī)范構(gòu)圖。實際上這九宮格中的每一格尺寸相同。這條原理能夠幫助設計師在設計中構(gòu)建視覺焦點。
單一圖像上,可以幫助構(gòu)圖。多個圖像布局中,可以幫助有序組織。根據(jù)此原理(上圖),眼睛一般會首先注意左上的位置,然后左下,然后右上,然后右下。(這就是為何很多設計中Logo和聯(lián)系信息放在了左上) 而且三分法構(gòu)圖也能實現(xiàn)一種平衡感。而且是不對稱的平衡感。因為眼睛一般會沿著九宮格格線的交點移動,并沒有中心參考點。
請看優(yōu)設網(wǎng)翻譯的這篇文章:想做好設計?先來了解神奇的魔力數(shù)字”3″ 坤德里幾何
screenshot screenshot
自于印度占星術(shù),也叫作”坤德里”?;旧?,坤德里是一個只需要三個步驟就可以得到的簡單圖形。畫一個正方形,然后畫兩條對角線。連接正方形每條邊的中點就可以得到坤德里圖。你將會注意到圖上的四個直角菱形。它們是網(wǎng)頁設計的基礎。
下面的設計就是根據(jù)坤德里幾何頁面布局得來的。你會發(fā)現(xiàn)設計中的氣卦(梵文,人體的七個能量中心,又稱七輪)同樣也具有數(shù)學特性。
————Smashing Magazine《在網(wǎng)頁設計中應用數(shù)學》(感謝北緯二十五度的精彩翻譯,另強烈推薦此文,可以說是本文的升級版) 網(wǎng)格
screenshot screenshot
這在網(wǎng)頁設計中最為常見,不是嗎?可以用來進行行、列的布局,合理的組織元素,讓頁面看起來有序。 網(wǎng)頁設計中的分欄范圍一般是三欄,最多可以分十六欄.、 數(shù)學原理是有趣的設計工具 從數(shù)學的角度考慮設計,非常有趣,但是不要太死板,非要一板一眼的遵循數(shù)學規(guī)律。這提供了幾個工具,能夠幫助你計算尺寸和比例。 Golden Ratio Calculator (黃金比例計算器)
Phi Calculator (黃金分割數(shù)值計算器)
Golden Ratio Typography Calculator (黃金比例字體設計計算器)
Fibonacci Sequence Calculator (斐波那契數(shù)列計算器)
Grid Calculator (格線計算器) 結(jié)論 數(shù)學原理能幫大忙!能夠給網(wǎng)頁設計帶來一種組織感、平衡感。這些原理大多和數(shù)字打交道,而背后來自對自然的觀察,因此它們營造的視覺效果非常和諧。
但是也不要太苛刻,嚴格的按照數(shù)學原理來設計。知曉、掌握便好,可以作為你”武器庫”中的一件奇兵,同時也能進一步拓展你的思維。


5
評論區(qū)(0)
正在加載評論...