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

這篇文章不是教大家怎么去做設(shè)計(jì)，而是教給大家一些工具，把你的設(shè)計(jì)做的更加合理和平衡，不過(guò)，也要記住，規(guī)則是死的，人是活的，是不是需要遵守規(guī)則都要考慮是不是適合，這個(gè)才是最關(guān)鍵的地方。

通常筆者們會(huì)說(shuō)，一個(gè)好的設(shè)計(jì)，如果沒(méi)有詳盡的計(jì)劃，幾乎是不可能的實(shí)現(xiàn)的，而數(shù)學(xué)就在這個(gè)計(jì)劃中起到了巨大的作用，也許會(huì)有人會(huì)說(shuō)自己早就知道這些了，像什么高度什么的，其實(shí)不是這樣的，成都網(wǎng)站建設(shè)今天要說(shuō)的數(shù)學(xué)有著更高一層的意義。成都網(wǎng)站建設(shè)在做設(shè)計(jì)前的時(shí)候一定會(huì)做一些準(zhǔn)備，就拿筆者最近一個(gè)項(xiàng)目來(lái)說(shuō)，筆者會(huì)一遍設(shè)計(jì)，一邊把截圖發(fā)到網(wǎng)上獲取同行們的一些反饋和意見(jiàn)，但是大家并沒(méi)有看到筆者這么做的背后玄機(jī)。

下面就和成都網(wǎng)站建設(shè)一起去看看數(shù)學(xué)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用吧。

一、確定頁(yè)面的寬度

筆者認(rèn)為，在你設(shè)計(jì)任何一個(gè)網(wǎng)頁(yè)之前，都有一些東西需要你盡快做出決定的，其中最重要的就是頁(yè)面的寬度，筆者比較喜歡960px作為網(wǎng)站的寬度，即是使用1024*768的分辨率，這樣網(wǎng)頁(yè)也不會(huì)出現(xiàn)橫向移動(dòng)(當(dāng)然，你也可以使用任何寬度，根據(jù)你的實(shí)際要求決定)

第二、劃分區(qū)域

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

也許有人說(shuō)這一和第二步筆者幾乎天天用，還要你教-不要著急，好戲在后面 - 一般設(shè)計(jì)師做完這兩步就要開(kāi)始設(shè)計(jì)了，而對(duì)真正的高手而言這只是開(kāi)始。

第三、確定橫向區(qū)域

橫向區(qū)域的高度通常會(huì)比筆者們字體尺寸略大一點(diǎn)，為什么呢?因?yàn)槿绻P者的字體是14px，橫向區(qū)域也是14px，那你的字與字的行距會(huì)變得很小，讓人沒(méi)法正常的閱讀。字的行距對(duì)于平面設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)有著不同的意思-由于篇幅有限會(huì)在將來(lái)的文章中繼續(xù)探討這個(gè)話題。如果你懂前端 (html & css)， 你可以把橫向區(qū)域當(dāng)作的css中的line-height屬性。經(jīng)過(guò)反復(fù)思考，筆者們這里會(huì)用18px作為筆者們橫向區(qū)域的高度.

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

第四、確認(rèn)這個(gè)設(shè)計(jì)中的域

通過(guò)對(duì)域的實(shí)現(xiàn)會(huì)使筆者們的網(wǎng)頁(yè)布局更合理更美觀， 比如通過(guò)域筆者們可以大概計(jì)算出如何擺放一些頁(yè)面中的重要元素。(切記，域是起輔助作用，而不是唯一標(biāo)準(zhǔn))。

平面設(shè)計(jì)師，雜志設(shè)計(jì)師，圖書(shū)設(shè)計(jì)師在設(shè)計(jì)之前一般都會(huì)把A4，A3等的頁(yè)面從上到下劃分為幾個(gè)區(qū)域(也就是筆者們所說(shuō)的域)，這樣在設(shè)計(jì)的時(shí)候設(shè)計(jì)師可以很好的控制頁(yè)面中每一部分元素的平衡(視覺(jué)，內(nèi)容和布局平衡)，從而使這個(gè)設(shè)計(jì)達(dá)到不錯(cuò)的效果; 但是在網(wǎng)頁(yè)中這些理論就非常的不實(shí)用，比如設(shè)計(jì)雜志的話都是用的A4紙大小，那么寬度和高度都是確定的，而在網(wǎng)頁(yè)設(shè)計(jì)中，高度是不定的，那應(yīng)該怎么辦?

數(shù)學(xué)的魅力在這個(gè)時(shí)候再次給予筆者們無(wú)窮的力量!那就是黃金分割線。要是你和筆者一樣，在上數(shù)學(xué)課的時(shí)候老是做小動(dòng)作，千萬(wàn)不要被這個(gè)名字給嚇到。

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

通過(guò)運(yùn)算知道了域的高度,如果你把593px除以筆者們的橫向區(qū)域的高度(18px – 查看第三步)， 593/18=32.94444444，也就是說(shuō)每一個(gè)域的里面有接近33個(gè)橫向區(qū)域。

但是現(xiàn)在擺在眼前還有一個(gè)問(wèn)題，如果把593px最為筆者們?cè)O(shè)計(jì)中域的高度，那么你會(huì)發(fā)現(xiàn)筆者們的頁(yè)面也許一般也只能放下一到兩個(gè)域，顯然這對(duì)筆者們的布局不能起到很好的指引作用-要知道不少頁(yè)面的高度小于593px，那要這個(gè)域還有什么用?

第五、通過(guò)三分法來(lái)進(jìn)一步改進(jìn)域的大小。

只要把現(xiàn)在域的高度，也就是593px除以 3 - 593/3=197.6666667，約等于 198px， 然后只要把 198-18=180px, 這個(gè)就是域的高度了。為什么要在最后減去18px，那是因?yàn)闀?huì)給每個(gè)域之間加一個(gè)空白空間，就像在每個(gè)縱向區(qū)域的左邊和右邊都有一個(gè)10px的空間一樣，而且同時(shí)18px也是橫向區(qū)域高度，請(qǐng)看下方示意圖。

通過(guò)以上的五個(gè)步驟，筆者可以非常負(fù)責(zé)任的告訴你，你可以開(kāi)始做視覺(jué)上的設(shè)計(jì)了，大家也可以用以上的理論做出一套適合自己項(xiàng)目的頁(yè)面寬度，縱向區(qū)域、橫向區(qū)域、域等，通過(guò)這些輔助，可以把你的設(shè)計(jì)水平提高到一個(gè)的新的高度，但是，切記一點(diǎn)的就是，人是活的，是否遵循這個(gè)規(guī)則要根據(jù)的你的情況來(lái)決定。當(dāng)然，任何簡(jiǎn)約的東西都是通過(guò)復(fù)雜的過(guò)程的得到的。

本文標(biāo)題：網(wǎng)頁(yè)設(shè)計(jì)中的數(shù)學(xué)應(yīng)用
文章源于：http://www.bm7419.com/news/67440.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、ChatGPT、建站公司、標(biāo)簽優(yōu)化、關(guān)鍵詞優(yōu)化、商城網(wǎng)站

廣告

聲明：本網(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)