好的網(wǎng)站設計沒(méi)有計劃是不行的發(fā)布者：本站     時(shí)間：2020-04-10 11:04:52

好的網(wǎng)站設計沒(méi)有計劃是不行的。
在你設計任何一個(gè)網(wǎng)頁(yè)之前有一些東西你是應該盡快做出決定的。其中最主要一個(gè)東西應該是頁(yè)面的寬度，我個(gè)人是比較喜歡960px作為寬度，即使用戶(hù)使用的是1024＊768的分辨率，網(wǎng)頁(yè)也不會(huì )出現橫向移動(dòng) － 當然你可以使用任何寬度。
第一步已經(jīng)完成了，我們進(jìn)入第二步。
接下來(lái)我們要把這個(gè)960px的寬度縱向劃分為12或者16個(gè)區域，請看下方圖示。今天我會(huì )選擇12縱向區域，所以每一個(gè)縱向區域應該是60px寬，而且每一個(gè)縱向區域的左邊和右邊都有一個(gè)10px的空間，用數學(xué)的語(yǔ)言來(lái)表達就是： 12*60+24*10=960px， 總和等于我們的頁(yè)面寬度－960px。
也許有人說(shuō)這第一和第二步我幾乎天天用，還要你教－不要著(zhù)急，好戲在后面 － 一般設計師做完這兩步就要開(kāi)始設計了，而對真正的高手而言這只是開(kāi)始。
第三步就是我們要確定橫向區域. 請看下方圖示。 橫向區域的高度通常會(huì )比我們字體尺寸略大一點(diǎn)，為什么呢？因為如果我的字體是14px，橫向區域也是14px，那你的字與字的行距會(huì )變得很小，讓人沒(méi)法正常的閱讀。字的行距對于平面設計和網(wǎng)頁(yè)設計有著(zhù)不同的意思－由于篇幅有限會(huì )在將來(lái)的文章中繼續探討這個(gè)話(huà)題。如果你懂前端 （html & css)， 你可以把橫向區域當作的css中的line-height屬性。經(jīng)過(guò)反復思考，我們這里會(huì )用18px作為我們橫向區域的高度.
小小的總結一下，我們已經(jīng)有了頁(yè)面寬度，縱向區域，也有了橫向區域。
第四步是需要我們來(lái)確認這個(gè)設計中的"域"。通過(guò)對"域"的實(shí)現會(huì )使我們的網(wǎng)頁(yè)布局更合理更美觀(guān)， 比如通過(guò)"域"我們可以大概計算出如何擺放一些頁(yè)面中的重要元素。（切記，"域"是起輔助作用，而不是唯一標準）。
平面設計師，雜志設計師，圖書(shū)設計師在設計之前一般都會(huì )把A4，A3等的頁(yè)面從上到下劃分為幾個(gè)區域（也就是我們所說(shuō)的"域"），這樣在設計的時(shí)候設計師可以很好的控制頁(yè)面中每一部分元素的平衡（視覺(jué)，內容和布局平衡），從而使這個(gè)設計達到不錯的效果； 但是在網(wǎng)頁(yè)中這些理論就非常的不實(shí)用，比如設計雜志的話(huà)都是用的A4紙大小，那么寬度和高度都是確定的，而在網(wǎng)頁(yè)設計中，高度是不定的，那應該怎么辦？?。。?！

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

數學(xué)的魅力在這個(gè)時(shí)候再次給予我們無(wú)窮的力量?。?黃金分割線(xiàn)。要是你和我一樣，在上數學(xué)課的時(shí)候老是做小動(dòng)作，千萬(wàn)不要被這個(gè)名字給嚇到！
通過(guò)第一步，我們已經(jīng)確認了我們的頁(yè)面寬度是960px, 所以我們可以通過(guò)黃金分割的原理來(lái)確定我們的"域"的高度。誰(shuí)知道黃金分割的系數是多少？！ － 答案是1.618。 于是我們可以把我們的頁(yè)面寬度（960px)除以 黃金分割的系數1.618來(lái)得到"域"的高度 － 960／1.618=593px。

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

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

大家可以用以上的理論做出一套適合自己項目的頁(yè)面寬度，縱向區域， 橫向區域，"域"，通過(guò)他們的輔助把你的設計水平提升到一個(gè)新的層次！切記－ 規則是死的，人是活的，怎樣遵守規則的同時(shí)破壞規則是決定你是否能成功的關(guān)鍵。簡(jiǎn)約的東西通常是通過(guò)復雜的過(guò)程得到的。