Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

數學與網頁設計之間的密切關系

by
Length:LongLanguages:
This post is part of a series called Web Design Theory.
Great Design Hurts: Striving for Pixel Perfection
An Introduction to Color Theory for Web Designers

Chinese (Traditional) (中文(繁體)) translation by Fuhuan (you can also view the original English article)

數學與網頁設計之間的密切關系 妳可以在建築中找到數學比例和常數,也可以在樂器中找到它們。 我們常玩的遊戲裏也有,所以就不要為數學在網頁設計中扮演了重要角色而感到驚訝咯。 但是它是什麽呢? 我們該如何使用這些比例,常數和理論來是的我們的網頁設計更加美觀?

數學無處不在

沃爾特·迪斯尼曾經在Mathmagicland拍了壹部關於唐老鴨的電影。 在YouTube上提供的這個視頻中,他們會向兒童介紹數學及其用途。 它表明使用數學比例來定義儀器上的音符,並且可以在古代和現代建築中找到數學矩形。  此外,我們可以在壹些文藝復興時期的藝術中找到這個完全相同的矩形,例如著名的蒙拉麗莎的微笑。

Math In Web Design

簡單的小課程:妳可以使用壹些基本的數學原理來使得自己的設計更為美觀。

小故事

在古希臘,有壹群數學家稱自己是畢達哥拉斯人。 畢達哥拉斯人以五角星為標誌。  他們選擇這種形狀,因為它的數學完美:五角星的線性形狀中包含著黃金比例! 此外蒙娜麗莎的微笑裏面也隱藏著黃金矩形。

兔子養殖

在十二世紀和十三世紀,有壹位才華橫溢的意大利數學家。  他的名字是斐波那契。 他觀察到兔子的自然繁殖。  在他這個理想的世界裏,兔子不會死亡,每只兔子都竭力繁殖, 他發現這個周期裏有壹個特殊的數字序列。  這個序列後來被稱為斐波納契數字。

Math In Web Design

關於這個序列的特別之處在於,如果您按序列中的數字劃分所選數字,則每次都會(大約)獲得相同的數字。  這個數字約為1.618,更好地稱為Phi。 按順序進壹步,分割結果越接近Phi。 斐波那契還發現,這個序列不僅存在於兔子的育種中, 而且在自然界的其他物質中也存在著,例如種子在向日葵中的排列。

黃金比例

正如妳已知道的,Phi是非常常見的設計常數。 這是因為1比1.618被稱為黃金比例,或者說是黃金分割。 如果按照這個比例繪制壹個矩形,就會得到壹個黃金矩形。

The Golden Rectangle
這裏顯示的黃金矩形展示了如何將其自身無限完美分割。

黃金比例和黃金矩形用於許多設計中。 在文藝復興時期,許多藝術家按這個比例和矩形來繪制他們的作品。  在古希臘,建築師在建築物的設計中使用黃金矩形, 帕特農神廟就是個很好的例子。 即使在現代建築中,黃金矩形也有很強的存在感。

但是,這個比例為什麽這麽特別呢? 因為Phi,是個自然數學常數,我們會自動的對這個比例的東西感到滿意  因為我們很熟悉這個比例,觸發壹種韻感。 因此使用黃金比例可以保證妳設計中的元素構成平衡。

網頁設計中黃金比例的例子

在我們甚至開始考慮將這個比例應用於我們的設計之前,我們首先要看壹下使用這個比例的幾個例子。

首先是這個網站,它的設計有多個比例構成。 在下面的圖片裏妳將看到網站的界面。  我用了兩種顏色來標記不同的構成,  主要列的寬度比恰好是1.618 像素點的計算證明了這壹點。

Math In Web Design

但是這個網站不僅在總寬度上使用黃金比例,還適用於網站上壹些較小的部分。

讓我們快速瀏覽主列,然後看看內容。 如下所示,文本元素大概是此元素中藥讀取內容的1.618倍。

Math In Web Design

如下所示,文本元素大概是此元素中藥讀取內容的1.618倍。 其主列的總寬度僅為700像素。 當您將此數字除以1.618時,結果是大約435:側邊欄的寬度。

Math In Web Design

如何將這個比例應用於妳的下壹個設計中

繪畫的畫布和建築物的寬度都具有固定的寬度 ,但是我們的的顯示器的大小不同。 因此,尤其是在網站設計中,在計算黃金比例時應考慮壹個額外的變量。

但是有壹個簡單的辦法來解決這個問題,  妳根據比例計算寬度的時候,只需要計算包含元素。   在我們的第壹個和最後壹個例子中, 這是壹個網站的完整寬度, 在第二個例子中,只是較小部分的寬度:它們的主列。

無論如何,當妳確定包含元素的寬度時,妳應該將此值除以Phi,  然後獲得主要元素的寬度。  然後從元素寬度中減去主要元素的結果,這將給出較小部分的寬度。

如果妳懶得記Phi或者懶得用計算器,我建議用Phiculator,  這個小程序只需要填寫總寬就能自動計算寬度。  它能整數計算,不必擔心十進制數字計算會出問題。

三分法則

另壹個著名的數學法則是三分法則。 這個規則將幫助妳將畫面分為九個相等的部分來制作平衡的組合。 這個規則有點類似於黃金比例,因為0.618和0.67約等於三分之二。

攝影

在攝影中,經常使用三分法則來構圖拍攝,因為它是個很直觀的指導,容易拍出好的照片。 這就是為什麽妳會在單反上看到網格線的原因。  有些微單也有這個功能,在攝影的時候加入網格點。

它是如何指導工作的?

使用三分法則, 妳可以將畫布分為九個相等的矩形, 平行線和四個交點, 妳可以使用平行線和交點創造出有趣的組合。

顯然,組合的關鍵在正確定位元素,  使用三分法則的時候,妳可以做兩件事。

第壹個是用於劃分畫布的線條,  攝影中,長而直的形狀通常與這些線對齊。  在設計中,具有相同形狀的東西也可以與這些線對齊。

第二件事是,妳需要在交點上放置壹個或兩個對象,  太多會影響構圖。

這是我在攝影網站Flickr上發現的壹個很好的例子。  如下圖所示攝影師將排列的建築物與頂線對齊,而在右上角的交叉點,您會發現壹個房子,因為它的顏色最突出。  因為它本身就是壹個焦點,它與交點相壹致,增加了良好的組合和均衡的感覺。

Math In Web DesignMath In Web DesignFlickr上發現的照片

我們已經看到了三分法則適用於攝影中,但是如何將其用於網站設計,我們可以找到例子嗎?

網頁設計三份法則

網站設計中壹個很好的例子就是這個。  我準備了壹個妳將看到的圖片。  側邊欄和右邊的垂直線非常接近,  在左側,妳可以看到文章位於交點上。

Math In Web Design

妳在上面看到的兩個對齊垂直線在這個網站的布局中創造出壹種和諧的感覺。

將三分法則應用於妳的下壹個設計

三分法則究竟能適用於妳的網站的設計嗎? 另外,我們的“畫布”的寬度變化可能會帶來壹些麻煩。 當我們使用與黃金比例相同的技術時,我們會很好。

要應用這個法則,妳必須把妳的總寬分為三份,  然後畫出指導線,然後重復。

但是,第二部分可能有點麻煩, 我們畫布的高度是可變的, 將變量除以三將給我們帶來麻煩。  我喜歡用寬屏比例來計算分數的高度,或者只是使用包含元素的高度。 將包含元素的寬度除以16再乘以9, 就得到了高度,  然後除以3並繪制指導線。

當妳設置了指導線,妳可以根據這些指導線來定位妳的元素。  將妳的元素與線對齊,將壹些亮點放置在交點上。

網格系統

妳可能認為網格系統並不是數學的,但是它們是的。  妳將畫布分為不同的列和溝槽,這個劃分由黃金法則和三分法則計算。

很多人認為網格系統會限制設計師的創造力,因為得根據系統來繪圖。  我不認可這個觀點,因為網格系統實際上提高了創造力,  妳會看到很多的構成,會想辦法去解決它們,而如果沒有網格系統,妳將永遠不會考慮它們。

網格系統的工作原理是引導妳進行大小、定位、調整網站設計。  它們可以幫助妳組織規範的界面,消除混淆的版塊。  最重要的是它們便於使用。

使用網格系統的另壹個好處是規則就是用來打破的,不是嗎?  如果妳打斷妳的網格的壹部分, 這並不錯誤!   這並不錯誤! 可以為界面上的特定元素制作出特別的點,因為它與其他元素有著鮮明的對比。  這可以幫助妳實現某些目的,比如標語。

如何制作壹個好的網格

沒有任何壹個網格是適用於任何設計的,因為網格圍繞內容來制作。 我將演示如何在960像素寬的環境中構建6列網格的簡單過程。

首先,我們將我們的總畫布寬度除以6,所以我們有每列的總寬度。  這個劃分的結果是160像素,如下圖所示。

Math In Web Design

其次,我們將創建壹個圖像的壹列,我們稍後將復制。  樣壹來,以後就更容易創建完整的網格,因為我們不必為每壹列重復這壹步。

我們將決定我們的間隔的大小,我認為20像素就足夠了。  這個間隔應該被添加到列的兩邊,所以我們必須把它除以2。  這個間隔應該被添加到列的兩邊,所以我們必須把它除以2。  如下圖所示,我們在每邊添加了壹個10像素的間隔。

Math In Web Design

然後我們將再次復制這個圖像,直到再次達到960個像素,這個時候我們已經創建了壹個基本的網格系統了。

我很懶!

別擔心,哪怕妳懶,  互聯網上也有很多的免費網格系統可以使用。 我最喜歡的是960gs網格系統,它具有壹個CSS框架和PSD源文件。

Math In Web Design

總結

我希望我向妳展示了數學是可以使設計變得更加美好,我已經教給妳在下壹個設計中使用得很多技巧。  不過需要註意的是,設計中還需要考慮到很多問題,並不是僅僅使用這些技巧就能創造出良好的設計,但是它們確實可以幫助到妳進行創造。

感謝閱讀!

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.