網頁設計中的數學運用

 

　　這篇文章並不是教大家怎樣做設計，而是教大家通過一些“工具”把你的設計變的更合理，更平衡;同時也要記住，規則是死的，人是活的，怎樣遵守規則的同時破壞規則是決定你是否能成功的關鍵。

　     好的設計沒有周詳的計劃是不可能實現的，而數學在這個計劃中有著舉足輕重的作用。

　　有人可能會說我早就知道了，比如算什麼margin或是padding的，算高度什麼的，這個應該就是你所說的在設計中運用的數學吧?其實不然。應該說我的數學有更高一層的意義(臉皮比較厚)。

　　我覺得我在這裡和大家講幾千個字，還不如給大家一個真實的例子。讓大家看看我在做設計前的一些“准備工作”。

　　最近我正在設計一個教會網站，我一邊設計一邊把一些截圖發到網上獲取一同行們的意見和反饋，但是大家並沒有看到這些設計背後蘊藏的”玄機”。

　　廢話不多說了，現在進入正題!

　　一、確定頁面寬度

　　在你設計任何一個網頁之前有一些東西你是應該盡快做出決定的。其中最主要一個東西應該是頁面的寬度，我個人是比較喜歡960px作為寬度，即使用戶使用的是1024*768的分辨率，網頁也不會出現橫向移動 - 當然你可以使用任何寬度。

　　第一步已經完成了，我們進入第二步。

　　二、劃分區域

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

　　也許有人說這第一和第二步我幾乎天天用，還要你教-不要著急，好戲在後面 - 一般設計師做完這兩步就要開始設計了，而對真正的高手而言這只是開始。

　　三、確定橫向區域，請看下方圖示

　　橫向區域的高度通常會比我們字體尺寸略大一點，為什麼呢?因為如果我的字體是14px，橫向區域也是14px，那你的字與字的行距會變得很小，讓人沒法正常的閱讀。字的行距對於平面設計和網頁設計有著不同的意思-由於篇幅有限會在將來的文章中繼續探討這個話題。如果你懂前端 (html & css)， 你可以把橫向區域當作的css中的line-height屬性。經過反復思考，我們這裡會用18px作為我們橫向區域的高度.

　　小小的總結一下，我們已經有了頁面寬度，縱向區域，也有了橫向區域。

　　四、確認這個設計中的”域”

　　通過對”域”的實現會使我們的網頁布局更合理更美觀， 比如通過”域”我們可以大概計算出如何擺放一些頁面中的重要元素。(切記，”域”是起輔助作用，而不是唯一標准)。

　　平面設計師，雜志設計師，圖書設計師在設計之前一般都會把A4，A3等的頁面從上到下劃分為幾個區域(也就是我們所說的”域”)，這樣在設計的時候設計師可以很好的控制頁面中每一部分元素的平衡(視覺，內容和布局平衡)，從而使這個設計達到不錯的效果; 但是在網頁中這些理論就非常的不實用，比如設計雜志的話都是用的A4紙大小，那麼寬度和高度都是確定的，而在網頁設計中，高度是不定的，那應該怎麼辦?!!!!

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

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

　　通過運算我們知道了”域”的高度,如果你把593px除以我們的橫向區域的高度(18px – 查看第三步)， 593/18=32.94444444，也就是說每一個”域”的裡面有接近33個橫向區域。

　　但是現在擺在我們眼前還有一個問題，如果把593px最為我們設計中”域”的高度，那麼你會發現我們的頁面也許一般也只能放下一到兩個域，顯然這對我們的布局不能起到很好的指引作用-要知道不少頁面的高度小於593px，那要這個域還有什麼用?!

　　五、通過家喻戶曉的”三分法”來進一步改進我們的”域”的大小

　　我們只要把現在”域”的高度(593px)除以 3 - 593/3=197.6666667， 約等於 198px， oh yes!!!!!，然後我們只要把 198-18=180px, 這個就是我們”域”的高度了。為什麼要在最後減去18px，那是因為我們會給每個”域”之間加一個空白空間，就像在我們的每個縱向區域的左邊和右邊都有一個10px的空間一樣，而且同時18px也是我們的橫向區域高度，請看下方示意圖。

　　通過以上的5步我可以很負責的告訴你————你可以開始做視覺上的設計了。大家可以用以上的理論做出一套適合自己項目的頁面寬度，縱向區域， 橫向區域，”域”，通過他們的輔助把你的設計水平提升到一個新的層次!切記———— 規則是死的，人是活的，怎樣遵守規則的同時破壞規則是決定你是否能成功的關鍵。簡約的東西通常是通過復雜的過程得到的。