網(wǎng)格系統(tǒng)在網(wǎng)頁設(shè)計當中的具體用途是什么？有何利弊？

時間：2024-02-17 10:50:01 | 來源：網(wǎng)站運營

時間：2024-02-17 10:50:01 來源：網(wǎng)站運營

網(wǎng)格系統(tǒng)在網(wǎng)頁設(shè)計當中的具體用途是什么？有何利弊？：先講一下網(wǎng)格系統(tǒng)的意義，然后在后面針對題主的幾點問題回答。


網(wǎng)格系統(tǒng)即為 Grid System 的譯名。至于「網(wǎng)頁柵格化」這個說法，之前沒有看到過。不過應(yīng)該也是指網(wǎng)格系統(tǒng)。

網(wǎng)格系統(tǒng)，以及其背后的模數(shù)思想在設(shè)計史上由來已久，在建筑、平面設(shè)計等領(lǐng)域均可見不同的表現(xiàn)形式。而具體到網(wǎng)頁設(shè)計上，常用的 Column + Gutter (包含內(nèi)容的寬欄+較窄的間距空間) 源自上世紀 50 年代成熟的瑞士風格平面設(shè)計（或稱國際風格，International Typographic Style）。

網(wǎng)格系統(tǒng)對于平面設(shè)計和網(wǎng)頁設(shè)計的意義，在于提供了一個對版面（頁面）進行理性規(guī)劃的方法。無論是 Column + Gutter 式的網(wǎng)格（下圖左側(cè)。灰色部分為 column）還是均分網(wǎng)格（下圖右側(cè)），都為設(shè)計師提供了一個參考工具，用于理性地安排頁面中的元素，而非單憑感覺擺放。


至于 Column + Gutter 式的網(wǎng)格和均分網(wǎng)格的不同，我認為在于前者帶有的 gutter 為元素之間的間距提供了一個直接的參照。而后者要按照網(wǎng)格形成間距，則需要將單元格設(shè)定得較小，這樣可能會導致頁面空間劃分得過于細碎。網(wǎng)頁設(shè)計和平面設(shè)計中多見前者，可能是因為前者可以更為整體地排布元素。當然，這也并非絕對。


針對題主在問題補充中的幾點：


1. 模版中的輔助線是根據(jù)網(wǎng)格系統(tǒng)繪制的。具體的尺寸，根據(jù)網(wǎng)格總寬度、設(shè)計欄數(shù)、gutter 寬度等確定?？捎镁W(wǎng)格系統(tǒng)生成工具，根據(jù)設(shè)計的需求生成。輔助線的使用，就是為了按照網(wǎng)格系統(tǒng)對齊，確定元素的尺寸。

至于「眼花」的擔憂，并不必要。輔助線僅用于對齊和確定尺寸，之后便可隱藏，進行詳細繪制，需要時再顯示便可。

而具體使用上，可以一個元素占據(jù)一欄，或多欄；但我認為有一個原則是元素不應(yīng)當跨過 gutter, 然后到邊界（如下圖），否則頁面便不整齊劃一。而實際上，現(xiàn)有的網(wǎng)頁用網(wǎng)格系統(tǒng)框架也不提供這樣的做法


2. 網(wǎng)格系統(tǒng)的意思和用途在上文已敘述。


有利之處，在于能夠理性、整潔地安排版面元素。同時，960 Grid System 等網(wǎng)格系統(tǒng)框架也使網(wǎng)頁設(shè)計更為快速。


而不利之處，可能就在于應(yīng)用網(wǎng)格系統(tǒng)的頁面，在布局上靈活性可能稍嫌不足。但我覺得，劃分 12 欄的網(wǎng)格系統(tǒng)其實也已具有較大的靈活性了。


3. 960 Grid System 是使用得最多的網(wǎng)格系統(tǒng)框架。將網(wǎng)格總寬定為 960 px 是出于對當時主流屏幕分辨率（寬度 1024px）和布局靈活性的兼顧。而對于文本閱讀，寬度亦不宜過大，否則會造成閱讀上的困難。所以，未來寬度更大的網(wǎng)頁系統(tǒng)，字號亦需相應(yīng)提高，將每行字符數(shù)控制在合適范圍。


另外，現(xiàn)在亦有基于百分比而不是像素的網(wǎng)格系統(tǒng)框架 (如，Unsemantic CSS Framework)，可適配不同屏幕寬度。