網(wǎng)頁設(shè)計中的數(shù)學(xué)原理應(yīng)用

本文格式為Word版，下載可任意編輯——網(wǎng)頁設(shè)計中的數(shù)學(xué)原理應(yīng)用好的設(shè)計沒有周詳?shù)幕I劃是不成能實現(xiàn)的，而數(shù)學(xué)在這個籌劃中有著舉足輕重的作用。

有人可能會說我早就知道了，譬如算什么margin或是padding的，算高度什么的，這個理應(yīng)就是你所說的在設(shè)計中運(yùn)用的數(shù)學(xué)吧?其實不然。理應(yīng)說我的數(shù)學(xué)有更高一層的意義臉皮對比厚。

我覺得我在這里和大家講幾千個字，還不如給大家一個真實的例子。讓大家看看我在做設(shè)計前的一些“打定工作”。

最近我正在設(shè)計一個教會網(wǎng)站，我一邊設(shè)計一邊把一些截圖發(fā)到網(wǎng)上獲取一同行們的觀法和反應(yīng)，但是大家并沒有看到這些設(shè)計背后隱匿的”玄機(jī)”。

廢話不多說了，現(xiàn)在進(jìn)入正題!

一、確定頁面寬度

在你設(shè)計任何一個網(wǎng)頁之前有一些東西你是理應(yīng)盡快做出抉擇的。其中最主要一個東西理應(yīng)是頁面的寬度，我個人是對比熱愛960px作為寬度，即使用戶使用的是1024*768的辨識率，網(wǎng)頁也不會展現(xiàn)橫向移動-當(dāng)然你可以使用任何寬度。

第一步已經(jīng)完成了，我們進(jìn)入其次步。

二、劃分區(qū)域

接下來我們要把這個960px的寬度縱向劃分為12或者16個區(qū)域，請看下方圖示。今天我會選擇12縱向區(qū)域，所以每一個縱向區(qū)域理應(yīng)是60px寬，而且每一個縱向區(qū)域的左邊和右邊都有一個10px的空間，用數(shù)學(xué)的語言來表達(dá)就是：12*60+24*10=960px，總和等于我們的頁面寬度-960px。

可能有人說這第一和其次步我?guī)缀趺咳沼?，還要你教-不要慌張，好戲在后面-一般設(shè)計師做完這兩步就要開頭設(shè)計了，而對真正的高手而言這只是開頭。

三、確定橫向區(qū)域，請看下方圖示

橫向區(qū)域的高度通常會比我們字體尺寸略大一點，為什么呢?由于假設(shè)我的字體是14px，橫向區(qū)域也是14px，那你的字與字的行距會變得很小，讓人沒法正常的閱讀。字的行距對于平面設(shè)計和網(wǎng)頁設(shè)計有著不同的意思-由于篇幅有限會在將來的文章中持續(xù)探討這個話題。假設(shè)你懂前端htmlcss，你可以把橫向區(qū)域當(dāng)作的css中的line-height屬性。經(jīng)過反復(fù)斟酌，我們這里會用18px作為我們橫向區(qū)域的高度.

小小的總結(jié)一下，我們已經(jīng)有了頁面寬度，縱向區(qū)域，也有了橫向區(qū)域。

四、確認(rèn)這個設(shè)計中的”域”

通過對”域”的實現(xiàn)會使我們的網(wǎng)頁布局更合理更美觀，譬如通過”域”我們可以約莫計算出如何擺放一些頁面中的重要元素。切記，”域”是起輔佐作用，而不是唯一標(biāo)準(zhǔn)。

平面設(shè)計師，雜志設(shè)計師，圖書設(shè)計師在設(shè)計之前一般都會把A4，A3等的頁面從上到下劃分為幾個區(qū)域也就是我們所說的”域”，這樣在設(shè)計的時候設(shè)計師可以很好的操縱頁面中每一片面元素的平衡視覺，內(nèi)容和布局平衡，從而使這個設(shè)計達(dá)成不錯的效果;但是在網(wǎng)頁中這些理論就分外的不實用，譬如設(shè)計雜志的話都是用的A4紙大小，那么寬度和高度都是確定的，而在網(wǎng)頁設(shè)計中，高度是不定的，那理應(yīng)怎么辦?!!!!

數(shù)學(xué)的魅力在這個時候再次賦予我們無窮的氣力!————黃金分割線。要是你和我一樣，在上數(shù)學(xué)課的時候老是做小動作，千萬不要被這個名字給嚇到。

通過第一步，我們已經(jīng)確認(rèn)了我們的頁面寬度是960px,所以我們可以通過黃金分割的原理來確定我們的”域”的高度。誰知道黃金分割的系數(shù)是多少?!-答案是1.618。于是我們可以把我們的頁面寬度960px除以黃金分割的系數(shù)1.618來得到”域”的高度-960/1.618=593px。

通過運(yùn)算我們知道了”域”的高度,假設(shè)你把593px除以我們的橫向區(qū)域的高度18px–查看第三步，593/18=32.94444444，也就是說每一個”域”的里面有接近33個橫向區(qū)域。

但是現(xiàn)在擺在我們眼前還有一個問題，假設(shè)把593px最為我們設(shè)計中”域”的高度，那么你會察覺我們的頁面可能一般也只能放下一到兩個域，鮮明這對我們的布局不能起到很好的指引作用-要知道不少頁面的高度小于593px，那要這個域還有什么用?!

五、通過家喻戶曉的”三分法”來進(jìn)一步提升我們的”域”的大小

我們只要把現(xiàn)在”域”的高度593px除以3-593/3=197.6666667，約等于198px，ohyes!!!!!，然后我們只要把198-18=180px,這個就是我們”域”的高度了。為