數(shù)學(xué)無(wú)處不在，即使你不喜歡它。 你可以在建筑中找到數(shù)學(xué)比例和常數(shù)，也可以在樂(lè)器中找到它們。 我們常玩的游戲里也有，所以就不要為數(shù)學(xué)在網(wǎng)頁(yè)設(shè)計(jì)中扮演了重要角色而感到驚訝咯。 但是它是什么呢？ 我們?cè)撊绾问褂眠@些比例，常數(shù)和理論來(lái)是的我們的網(wǎng)頁(yè)設(shè)計(jì)更加美觀？

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

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

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

小故事

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

兔子養(yǎng)殖

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

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

黃金比例

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

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

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

但是，這個(gè)比例為什么這么特別呢？ 因?yàn)镻hi，是個(gè)自然數(shù)學(xué)常數(shù)，我們會(huì)自動(dòng)的對(duì)這個(gè)比例的東西感到滿意 因?yàn)槲覀兒苁煜み@個(gè)比例，觸發(fā)一種韻感。 因此使用黃金比例可以保證你設(shè)計(jì)中的元素構(gòu)成平衡。

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

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

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

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

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

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

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

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

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

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

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

三分法則

另一個(gè)著名的數(shù)學(xué)法則是三分法則。 這個(gè)規(guī)則將幫助你將畫(huà)面分為九個(gè)相等的部分來(lái)制作平衡的組合。 這個(gè)規(guī)則有點(diǎn)類似于黃金比例，因?yàn)?.618和0.67約等于三分之二。

攝影

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

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

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

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

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

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

這是我在攝影網(wǎng)站Flickr上發(fā)現(xiàn)的一個(gè)很好的例子。 如下圖所示攝影師將排列的建筑物與頂線對(duì)齊，而在右上角的交叉點(diǎn)，您會(huì)發(fā)現(xiàn)一個(gè)房子，因?yàn)樗念伾钔怀觥?因?yàn)樗旧砭褪且粋€(gè)焦點(diǎn)，它與交點(diǎn)相一致，增加了良好的組合和均衡的感覺(jué)。

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

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

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

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

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

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

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

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

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

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

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

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

很多人認(rèn)為網(wǎng)格系統(tǒng)會(huì)限制設(shè)計(jì)師的創(chuàng)造力，因?yàn)榈酶鶕?jù)系統(tǒng)來(lái)繪圖。 我不認(rèn)可這個(gè)觀點(diǎn)，因?yàn)榫W(wǎng)格系統(tǒng)實(shí)際上提高了創(chuàng)造力， 你會(huì)看到很多的構(gòu)成，會(huì)想辦法去解決它們，而如果沒(méi)有網(wǎng)格系統(tǒng)，你將永遠(yuǎn)不會(huì)考慮它們。

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

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

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

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

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

其次，我們將創(chuàng)建一個(gè)圖像的一列，我們稍后將復(fù)制。 樣一來(lái)，以后就更容易創(chuàng)建完整的網(wǎng)格，因?yàn)槲覀儾槐貫槊恳涣兄貜?fù)這一步。

我們將決定我們的間隔的大小，我認(rèn)為20像素就足夠了。 這個(gè)間隔應(yīng)該被添加到列的兩邊，所以我們必須把它除以2。 這個(gè)間隔應(yīng)該被添加到列的兩邊，所以我們必須把它除以2。 如下圖所示，我們?cè)诿窟吿砑恿艘粋€(gè)10像素的間隔。

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

我很懶！

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

總結(jié)

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

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

分享標(biāo)題：成都網(wǎng)站建設(shè)_數(shù)學(xué)與網(wǎng)頁(yè)設(shè)計(jì)之間的密切關(guān)系
網(wǎng)頁(yè)鏈接：http://jinyejixie.com/news/223669.html

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

廣告

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