成都網(wǎng)站建設(shè)_數(shù)學(xué)與網(wǎng)頁設(shè)計之間的密切關(guān)系

數(shù)學(xué)無處不在，即使你不喜歡它。 你可以在建筑中找到數(shù)學(xué)比例和常數(shù)，也可以在樂器中找到它們。 我們常玩的游戲里也有，所以就不要為數(shù)學(xué)在網(wǎng)頁設(shè)計中扮演了重要角色而感到驚訝咯。 但是它是什么呢？ 我們該如何使用這些比例，常數(shù)和理論來是的我們的網(wǎng)頁設(shè)計更加美觀？

數(shù)學(xué)無處不在

沃爾特·迪斯尼曾經(jīng)在Mathmagicland拍了一部關(guān)于唐老鴨的電影。 在YouTube上提供的這個視頻中，他們會向兒童介紹數(shù)學(xué)及其用途。 它表明使用數(shù)學(xué)比例來定義儀器上的音符，并且可以在古代和現(xiàn)代建筑中找到數(shù)學(xué)矩形。 此外，我們可以在一些文藝復(fù)興時期的藝術(shù)中找到這個完全相同的矩形，例如著名的蒙拉麗莎的微笑。

簡單的小課程：你可以使用一些基本的數(shù)學(xué)原理來使得自己的設(shè)計更為美觀。

小故事

在古希臘，有一群數(shù)學(xué)家稱自己是畢達哥拉斯人。 畢達哥拉斯人以五角星為標(biāo)志。 他們選擇這種形狀，因為它的數(shù)學(xué)好：五角星的線性形狀中包含著黃金比例！ 此外蒙娜麗莎的微笑里面也隱藏著黃金矩形。

兔子養(yǎng)殖

在十二世紀(jì)和十三世紀(jì)，有一位才華橫溢的意大利數(shù)學(xué)家。 他的名字是斐波那契。他觀察到兔子的自然繁殖。 在他這個理想的世界里，兔子不會死亡，每只兔子都竭力繁殖， 他發(fā)現(xiàn)這個周期里有一個特殊的數(shù)字序列。 這個序列后來被稱為斐波納契數(shù)字。

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

黃金比例

正如你已知道的，Phi是非常常見的設(shè)計常數(shù)。 這是因為1比1.618被稱為黃金比例，或者說是黃金分割。如果按照這個比例繪制一個矩形，就會得到一個黃金矩形。

這里顯示的黃金矩形展示了如何將其自身無限好分割。

黃金比例和黃金矩形用于許多設(shè)計中，在文藝復(fù)興時期，許多藝術(shù)家按這個比例和矩形來繪制他們的作品。 在古希臘，建筑師在建筑物的設(shè)計中使用黃金矩形， 帕特農(nóng)神廟就是個很好的例子。 即使在現(xiàn)代建筑中，黃金矩形也有很強的存在感。

但是，這個比例為什么這么特別呢？ 因為Phi，是個自然數(shù)學(xué)常數(shù)，我們會自動的對這個比例的東西感到滿意 因為我們很熟悉這個比例，觸發(fā)一種韻感。 因此使用黃金比例可以保證你設(shè)計中的元素構(gòu)成平衡。

網(wǎng)頁設(shè)計中黃金比例的例子

在我們甚至開始考慮將這個比例應(yīng)用于我們的設(shè)計之前，我們首先要看一下使用這個比例的幾個例子。

首先是這個網(wǎng)站，它的設(shè)計有多個比例構(gòu)成。 在下面的圖片里你將看到網(wǎng)站的界面。 我用了兩種顏色來標(biāo)記不同的構(gòu)成， 主要列的寬度比恰好是1.618， 像素點的計算證明了這一點。

但是這個網(wǎng)站不僅在總寬度上使用黃金比例，還適用于網(wǎng)站上一些較小的部分。

讓我們快速瀏覽主列，然后看看內(nèi)容。 如下所示，文本元素大概是此元素中藥讀取內(nèi)容的1.618倍。

另一個很好的例子是著名的Smashing Magazine博客。 其主列的總寬度僅為700像素。 當(dāng)您將此數(shù)字除以1.618時，結(jié)果是大約435：側(cè)邊欄的寬度。

如何將這個比例應(yīng)用于你的下一個設(shè)計中

繪畫的畫布和建筑物的寬度都具有固定的寬度 ，但是我們的的顯示器的大小不同。因此，尤其是在網(wǎng)站設(shè)計中，在計算黃金比例時應(yīng)考慮一個額外的變量。

但是有一個簡單的辦法來解決這個問題， 你根據(jù)比例計算寬度的時候，只需要計算包含元素。 在我們的第一個和最后一個例子中， 這是一個網(wǎng)站的完整寬度，在第二個例子中，只是較小部分的寬度：它們的主列。

無論如何，當(dāng)你確定包含元素的寬度時，你應(yīng)該將此值除以Phi， 然后獲得主要元素的寬度。 然后從元素寬度中減去主要元素的結(jié)果，這將給出較小部分的寬度。

如果你懶得記Phi或者懶得用計算器，我建議用Phiculator， 這個小程序只需要填寫總寬就能自動計算寬度。 它能整數(shù)計算，不必?fù)?dān)心十進制數(shù)字計算會出問題。

三分法則

另一個著名的數(shù)學(xué)法則是三分法則。 這個規(guī)則將幫助你將畫面分為九個相等的部分來制作平衡的組合。 這個規(guī)則有點類似于黃金比例，因為0.618和0.67約等于三分之二。

攝影

在攝影中，經(jīng)常使用三分法則來構(gòu)圖拍攝，因為它是個很直觀的指導(dǎo)，容易拍出好的照片。 這就是為什么你會在單反上看到網(wǎng)格線的原因。 有些微單也有這個功能，在攝影的時候加入網(wǎng)格點。

它是如何指導(dǎo)工作的？

使用三分法則， 你可以將畫布分為九個相等的矩形，平行線和四個交點， 你可以使用平行線和交點創(chuàng)造出有趣的組合。

顯然，組合的關(guān)鍵在正確定位元素， 使用三分法則的時候，你可以做兩件事。

第一個是用于劃分畫布的線條， 攝影中，長而直的形狀通常與這些線對齊。 在設(shè)計中，具有相同形狀的東西也可以與這些線對齊。

第二件事是，你需要在交點上放置一個或兩個對象， 太多會影響構(gòu)圖。

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

Flickr上發(fā)現(xiàn)的照片

我們已經(jīng)看到了三分法則適用于攝影中，但是如何將其用于網(wǎng)站設(shè)計，我們可以找到例子嗎？

網(wǎng)頁設(shè)計三份法則

網(wǎng)站設(shè)計中一個很好的例子就是這個。 我準(zhǔn)備了一個你將看到的圖片。 側(cè)邊欄和右邊的垂直線非常接近， 在左側(cè)，你可以看到文章位于交點上。

你在上面看到的兩個對齊垂直線在這個網(wǎng)站的布局中創(chuàng)造出一種和諧的感覺。

將三分法則應(yīng)用于你的下一個設(shè)計

三分法則究竟能適用于你的網(wǎng)站的設(shè)計嗎？ 另外，我們的“畫布”的寬度變化可能會帶來一些麻煩。 當(dāng)我們使用與黃金比例相同的技術(shù)時，我們會很好。

要應(yīng)用這個法則，你必須把你的總寬分為三份， 然后畫出指導(dǎo)線，然后重復(fù)。

但是，第二部分可能有點麻煩，我們畫布的高度是可變的， 將變量除以三將給我們帶來麻煩。 我喜歡用寬屏比例來計算分?jǐn)?shù)的高度，或者只是使用包含元素的高度。 將包含元素的寬度除以16再乘以9，就得到了高度， 然后除以3并繪制指導(dǎo)線。

當(dāng)你設(shè)置了指導(dǎo)線，你可以根據(jù)這些指導(dǎo)線來定位你的元素。 將你的元素與線對齊，將一些亮點放置在交點上。

網(wǎng)格系統(tǒng)

你可能認(rèn)為網(wǎng)格系統(tǒng)并不是數(shù)學(xué)的，但是它們是的。 你將畫布分為不同的列和溝槽，這個劃分由黃金法則和三分法則計算。

很多人認(rèn)為網(wǎng)格系統(tǒng)會限制設(shè)計師的創(chuàng)造力，因為得根據(jù)系統(tǒng)來繪圖。 我不認(rèn)可這個觀點，因為網(wǎng)格系統(tǒng)實際上提高了創(chuàng)造力， 你會看到很多的構(gòu)成，會想辦法去解決它們，而如果沒有網(wǎng)格系統(tǒng)，你將永遠不會考慮它們。

網(wǎng)格系統(tǒng)的工作原理是引導(dǎo)你進行大小、定位、調(diào)整網(wǎng)站設(shè)計。 它們可以幫助你組織規(guī)范的界面，消除混淆的版塊。 最重要的是它們便于使用。

使用網(wǎng)格系統(tǒng)的另一個好處是規(guī)則就是用來打破的，不是嗎？ 如果你打斷你的網(wǎng)格的一部分， 這并不錯誤！ 可以為界面上的特定元素制作出特別的點，因為它與其他元素有著鮮明的對比。 這可以幫助你實現(xiàn)某些目的，比如標(biāo)語。

如何制作一個好的網(wǎng)格

沒有任何一個網(wǎng)格是適用于任何設(shè)計的，因為網(wǎng)格圍繞內(nèi)容來制作。 我將演示如何在960像素寬的環(huán)境中構(gòu)建6列網(wǎng)格的簡單過程。

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

其次，我們將創(chuàng)建一個圖像的一列，我們稍后將復(fù)制。 樣一來，以后就更容易創(chuàng)建完整的網(wǎng)格，因為我們不必為每一列重復(fù)這一步。

我們將決定我們的間隔的大小，我認(rèn)為20像素就足夠了。 這個間隔應(yīng)該被添加到列的兩邊，所以我們必須把它除以2。 這個間隔應(yīng)該被添加到列的兩邊，所以我們必須把它除以2。 如下圖所示，我們在每邊添加了一個10像素的間隔。

然后我們將再次復(fù)制這個圖像，直到再次達到960個像素，這個時候我們已經(jīng)創(chuàng)建了一個基本的網(wǎng)格系統(tǒng)了。

我很懶！

別擔(dān)心，哪怕你懶， 互聯(lián)網(wǎng)上也有很多的免費網(wǎng)格系統(tǒng)可以使用。 我最喜歡的是960gs網(wǎng)格系統(tǒng)，它具有一個CSS框架和PSD源文件。

總結(jié)

我希望我向你展示了數(shù)學(xué)是可以使設(shè)計變得更加美好，我已經(jīng)教給你在下一個設(shè)計中使用得很多技巧。 不過需要注意的是，設(shè)計中還需要考慮到很多問題，并不是僅僅使用這些技巧就能創(chuàng)造出良好的設(shè)計，但是它們確實可以幫助到你進行創(chuàng)造。

創(chuàng)新互聯(lián)專業(yè)從事成都網(wǎng)站建設(shè)，成都網(wǎng)站設(shè)計，成都網(wǎng)站制作

網(wǎng)站題目：成都網(wǎng)站建設(shè)_數(shù)學(xué)與網(wǎng)頁設(shè)計之間的密切關(guān)系
網(wǎng)頁鏈接：http://muchs.cn/news19/223669.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站建設(shè)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)