Godzilla. 2018-03-14
網(wǎng)站建設(shè)
關(guān)于網(wǎng)格系統(tǒng)在網(wǎng)站建設(shè)中的全面運用（一）
如果您從未嘗試過在您的設(shè)計中使用網(wǎng)格系統(tǒng)，本文很適合你讀一讀。在文中，你將學(xué)習(xí)關(guān)于網(wǎng)格系統(tǒng)基本的術(shù)語和理論，并將通過真實網(wǎng)站的案例來了解網(wǎng)格系統(tǒng)是如何在網(wǎng)站建設(shè)中網(wǎng)頁設(shè)計領(lǐng)域運用的。在本文中，摩恩網(wǎng)絡(luò)網(wǎng)站建設(shè)小編將整理涉及很多網(wǎng)格系統(tǒng)相關(guān)內(nèi)容。包括：
·什么是網(wǎng)格系統(tǒng)？
·網(wǎng)格系統(tǒng)專業(yè)術(shù)語
·三分構(gòu)圖法
·十二列單元格網(wǎng)格系統(tǒng)
·強(qiáng)調(diào)重點
·控制界限
·心智地圖
首先什么是網(wǎng)格系統(tǒng)？
網(wǎng)格系統(tǒng)可以創(chuàng)建一個網(wǎng)頁基本構(gòu)架，為您的網(wǎng)站建設(shè)設(shè)計提供一個框架。它們由不可見的分割線組成，你的設(shè)計元素可以被放置在畫面框架中。這樣做可以使元素在整個網(wǎng)格系統(tǒng)中聯(lián)系起來，并合理地支持你的創(chuàng)作。
網(wǎng)格柵格可以幫助你實現(xiàn)有效的整齊性和一致性，而不需要太多的努力。隨意地按照自己的意愿去設(shè)置網(wǎng)格系統(tǒng)效果可能并不會太好。如果正確地科學(xué)地使用網(wǎng)格，你的設(shè)計會顯得有思想，有條理，整潔，結(jié)構(gòu)合理。下圖中BBC的網(wǎng)站很好的利用網(wǎng)格系統(tǒng)進(jìn)行整齊性和一致性的界面設(shè)計。
?。˙BC網(wǎng)站運用了網(wǎng)格系統(tǒng)進(jìn)行設(shè)計）
好的對齊方式，存在于很多優(yōu)秀的設(shè)計作品中，但幾乎沒有被用戶注意到。少即是多，如果你太聰明了，你可能會分散用戶的注意力，使他們在搜索特定內(nèi)容和快速消化的主要目標(biāo)上分心。簡潔高效的界面應(yīng)該是你的設(shè)計重點，而不是炫耀你的設(shè)計技巧有多漂亮。缺乏對齊是非常顯眼的，會給人留下一種草率的印象。這很可能會導(dǎo)致用戶對你的設(shè)計缺乏信任，除非缺乏對齊的界面是出于某種創(chuàng)造性的原因。
網(wǎng)格系統(tǒng)專業(yè)術(shù)語
單元格
單元格是每個網(wǎng)格系統(tǒng)的基本構(gòu)建塊。多個單元格構(gòu)成整個網(wǎng)格系統(tǒng)。在BBC網(wǎng)站的例子中，你看到的是一個12列單元格的網(wǎng)格系統(tǒng)。圖中紫色的條紋代表一個單元格。
?。˙BC網(wǎng)站中的單元格）
單元格間隙
下圖中的窄黃色條紋代表了把每一個單元分開的單元格間隔。它是一種微小的留白，可以給網(wǎng)格系統(tǒng)一些喘息的空間。
?。˙BC網(wǎng)站中的單元格間隙）
豎行
多個單元格和單元格間隔一起構(gòu)成豎列，它是有效有條理地放置你的內(nèi)容的容器。在豎列這樣的限制下工作是可以解放的，通過豎列約束可以決定在哪里放置內(nèi)容更容易和更高效。
在下圖的例子中，您可以看到三個不同的豎列在共同作用。每一列都是針對特定形式的內(nèi)容進(jìn)行強(qiáng)調(diào)的。正如您所看到的，您有很多選擇來混合不同形式的內(nèi)容和設(shè)計元素。你還可以觀察到，這些豎列結(jié)構(gòu)構(gòu)成了一種堅固的結(jié)構(gòu)，通過排列來創(chuàng)造一致性和整齊性。對于設(shè)置幾行有約束力的豎列，并沒有付出壞的代價，難道不是嗎？
?。˙BC網(wǎng)站中的豎列）
區(qū)域
包含內(nèi)容的豎列形成了水平劃分頁面的區(qū)域。在你的頁面上爭取區(qū)域相同的高度是一個不錯的主意。在實踐中，這并不總是容易實現(xiàn)的。如果你的區(qū)域的高度和你的設(shè)計一樣高，這樣很好，如果不是，那應(yīng)該嘗試做一下。
文章標(biāo)簽：
網(wǎng)站建設(shè) 網(wǎng)格系統(tǒng)
文章評論：