Godzilla. 2018-03-14 網(wǎng)站建設(shè)

關(guān)于網(wǎng)格系統(tǒng)在網(wǎng)站建設(shè)中的全面運(yùn)用（一）

　　如果您從未嘗試過(guò)在您的設(shè)計(jì)中使用網(wǎng)格系統(tǒng)，本文很適合你讀一讀。在文中，你將學(xué)習(xí)關(guān)于網(wǎng)格系統(tǒng)基本的術(shù)語(yǔ)和理論，并將通過(guò)真實(shí)網(wǎng)站的案例來(lái)了解網(wǎng)格系統(tǒng)是如何在網(wǎng)站建設(shè)中網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域運(yùn)用的。在本文中，摩恩網(wǎng)絡(luò)網(wǎng)站建設(shè)小編將整理涉及很多網(wǎng)格系統(tǒng)相關(guān)內(nèi)容。包括：

　　·什么是網(wǎng)格系統(tǒng)？

　　·網(wǎng)格系統(tǒng)專業(yè)術(shù)語(yǔ)

　　·三分構(gòu)圖法

　　·十二列單元格網(wǎng)格系統(tǒng)

　　·強(qiáng)調(diào)重點(diǎn)

　　·控制界限

　　·心智地圖

　　首先什么是網(wǎng)格系統(tǒng)？

　　網(wǎng)格系統(tǒng)可以創(chuàng)建一個(gè)網(wǎng)頁(yè)基本構(gòu)架，為您的網(wǎng)站建設(shè)設(shè)計(jì)提供一個(gè)框架。它們由不可見(jiàn)的分割線組成，你的設(shè)計(jì)元素可以被放置在畫面框架中。這樣做可以使元素在整個(gè)網(wǎng)格系統(tǒng)中聯(lián)系起來(lái)，并合理地支持你的創(chuàng)作。

　　網(wǎng)格柵格可以幫助你實(shí)現(xiàn)有效的整齊性和一致性，而不需要太多的努力。隨意地按照自己的意愿去設(shè)置網(wǎng)格系統(tǒng)效果可能并不會(huì)太好。如果正確地科學(xué)地使用網(wǎng)格，你的設(shè)計(jì)會(huì)顯得有思想，有條理，整潔，結(jié)構(gòu)合理。下圖中BBC的網(wǎng)站很好的利用網(wǎng)格系統(tǒng)進(jìn)行整齊性和一致性的界面設(shè)計(jì)。

　?。˙BC網(wǎng)站運(yùn)用了網(wǎng)格系統(tǒng)進(jìn)行設(shè)計(jì)）

　　好的對(duì)齊方式，存在于很多優(yōu)秀的設(shè)計(jì)作品中，但幾乎沒(méi)有被用戶注意到。少即是多，如果你太聰明了，你可能會(huì)分散用戶的注意力，使他們?cè)谒阉魈囟▋?nèi)容和快速消化的主要目標(biāo)上分心。簡(jiǎn)潔高效的界面應(yīng)該是你的設(shè)計(jì)重點(diǎn)，而不是炫耀你的設(shè)計(jì)技巧有多漂亮。缺乏對(duì)齊是非常顯眼的，會(huì)給人留下一種草率的印象。這很可能會(huì)導(dǎo)致用戶對(duì)你的設(shè)計(jì)缺乏信任，除非缺乏對(duì)齊的界面是出于某種創(chuàng)造性的原因。

　　網(wǎng)格系統(tǒng)專業(yè)術(shù)語(yǔ)

　　單元格

　　單元格是每個(gè)網(wǎng)格系統(tǒng)的基本構(gòu)建塊。多個(gè)單元格構(gòu)成整個(gè)網(wǎng)格系統(tǒng)。在BBC網(wǎng)站的例子中，你看到的是一個(gè)12列單元格的網(wǎng)格系統(tǒng)。圖中紫色的條紋代表一個(gè)單元格。

　　（BBC網(wǎng)站中的單元格）

　　單元格間隙

　　下圖中的窄黃色條紋代表了把每一個(gè)單元分開(kāi)的單元格間隔。它是一種微小的留白，可以給網(wǎng)格系統(tǒng)一些喘息的空間。

　?。˙BC網(wǎng)站中的單元格間隙）

　　豎行

　　多個(gè)單元格和單元格間隔一起構(gòu)成豎列，它是有效有條理地放置你的內(nèi)容的容器。在豎列這樣的限制下工作是可以解放的，通過(guò)豎列約束可以決定在哪里放置內(nèi)容更容易和更高效。

　　在下圖的例子中，您可以看到三個(gè)不同的豎列在共同作用。每一列都是針對(duì)特定形式的內(nèi)容進(jìn)行強(qiáng)調(diào)的。正如您所看到的，您有很多選擇來(lái)混合不同形式的內(nèi)容和設(shè)計(jì)元素。你還可以觀察到，這些豎列結(jié)構(gòu)構(gòu)成了一種堅(jiān)固的結(jié)構(gòu)，通過(guò)排列來(lái)創(chuàng)造一致性和整齊性。對(duì)于設(shè)置幾行有約束力的豎列，并沒(méi)有付出壞的代價(jià)，難道不是嗎？

　?。˙BC網(wǎng)站中的豎列）

　　區(qū)域

　　包含內(nèi)容的豎列形成了水平劃分頁(yè)面的區(qū)域。在你的頁(yè)面上爭(zhēng)取區(qū)域相同的高度是一個(gè)不錯(cuò)的主意。在實(shí)踐中，這并不總是容易實(shí)現(xiàn)的。如果你的區(qū)域的高度和你的設(shè)計(jì)一樣高，這樣很好，如果不是，那應(yīng)該嘗試做一下。

下一篇：P2P網(wǎng)貸行業(yè)的發(fā)展前景究竟會(huì)如何？ 上一篇：淺析在線教育平臺(tái)真正受歡迎的原因