1. 設(shè)計布局排版更快，更容易
擁有一個你可以遵循的結(jié)構(gòu)會讓一切更加效率。它有助于以正確的方式調(diào)整所有元素的大小，測量它們之間的水平和垂直距離，并在不同的形狀和大小之間建立平衡。當(dāng)你擁有將所有內(nèi)容連接在一起的結(jié)構(gòu)基礎(chǔ)時，制作像素完美的設(shè)計就會容易得多。
2. 頁面整潔且統(tǒng)一
在網(wǎng)格系統(tǒng)中創(chuàng)建元素可以使整個設(shè)計具有秩序和節(jié)奏感，便于用戶閱讀。用戶喜歡和諧一致的設(shè)計，不喜歡分散且凌亂的信息碎片。即使是元素之間的統(tǒng)一間距這樣的小細節(jié)也可以使設(shè)計具有更強的凝聚力。
3. 響應(yīng)式設(shè)計
在這個時代，響應(yīng)式設(shè)計意味著任何數(shù)字創(chuàng)作(產(chǎn)品)都可以跨越多個終端設(shè)備——從小型智能手機到大屏幕電視。在所有這些情況下，設(shè)計應(yīng)該看起來像素完美緊湊、優(yōu)雅且易于理解。網(wǎng)格可以幫助你重新安排所有元素在所需的屏幕尺寸，但同時保持差不多的布局結(jié)構(gòu)。
4. 設(shè)計師和開發(fā)合作更輕松
當(dāng)你將設(shè)計稿交接給開發(fā)時，如果希望設(shè)計能被開發(fā)人員高度還原的話，那么設(shè)計稿中最好用到網(wǎng)格系統(tǒng)，開發(fā)看到設(shè)計后立即就懂得如何調(diào)整元素之間的間距和大小，以及它們?nèi)绾卧谝粋部分之后連接到另一個部分。網(wǎng)格可以幫助設(shè)計師和開發(fā)之間在沒有直接指導(dǎo)或不必要的混亂的情況下更好地達到期望的結(jié)果。
如何設(shè)置網(wǎng)格
列通常被定義為網(wǎng)格系統(tǒng)在垂直方向上的塊。它們是從頁面頂部到底部具有相同大小的垂直部分，它們的目的是規(guī)定寬度和每行元素的數(shù)量。最常用的系統(tǒng)是 PC 端的 12 列網(wǎng)格、平板電腦的 8 列網(wǎng)格和移動設(shè)備的 4 或 2 列網(wǎng)格。單個列單元的寬度通常在 60-80px 之間，這將進一步確定所需的容器寬度。
列的圖形顯示行是從頁面左側(cè)到右側(cè)的相同大小的水平單位。它們很少與列網(wǎng)格系統(tǒng)一起使用，因為元素的高度通常由它們的內(nèi)容量來定義。
水槽是列和行之間相同大小的空白空間，提供了呼吸空間并幫助定義元素之間的相等距離（水平和垂直）。它們的大小通常為 10-30 px。
水槽圖形顯示邊距（或容器邊距）是指頁面左側(cè)和右側(cè)、網(wǎng)格列之外的空白區(qū)域。它們?yōu)榘脑靥峁┝撕粑目臻g，并與屏幕尺寸一起縮小，直到下一個斷點。在 PC 端和平板電腦上，它們的大小取決于列網(wǎng)格系統(tǒng)的寬度。對于移動設(shè)備上，它們的寬度范圍在 10-20 像素之間。
側(cè)邊距的圖形顯示為什么使用 12 列網(wǎng)格系統(tǒng)?
這是最著名的網(wǎng)格系統(tǒng)，有一個有效的數(shù)學(xué)解釋。數(shù)字 12 很容易被 1、2、3、4、6 和 12 整除，這為設(shè)計多種尺寸的元素提供了很大的靈活性。
此外，開發(fā)人員通常使用 Bootstrap 網(wǎng)格，它也是基于 12 網(wǎng)格系統(tǒng)，它創(chuàng)建了我們的自適應(yīng)生態(tài)系統(tǒng)。還有更多類型的網(wǎng)格，比如 8 列網(wǎng)格，無水槽網(wǎng)格等等，但是我們將主要關(guān)注 12 列網(wǎng)格的示例和規(guī)則。
12 列網(wǎng)格中元素大小的示例規(guī)則和示例
1. 將元素放入列內(nèi)，并在元素之間留出相等的呼吸空間。不要將元素延伸到水槽中。
水平間距的注意事項2. 不要忘記水平上下間距并盡量保持一致，特別是對于重復(fù)元素。
相同的垂直間距3. 卡片或圖像等盒狀元素很容易在網(wǎng)格內(nèi)定義，但處理開放的元素有時會很棘手。因此，在某些情況下需要添加額外的內(nèi)部填充以避免它們看起來擠在一起。
內(nèi)邊距的注意事項4. 父元素中較小的元素不受網(wǎng)格規(guī)則的約束。只要父元素被成功定位，它里面的元素就可以有自己的布局。
父元素中的較小元素不遵循網(wǎng)格規(guī)則5. 對于某些頁面，也不必總是使用所有 12 列。如果沒有足夠的內(nèi)容，或者它視覺上看起來感覺更好，例如使用 10 或 8 欄(從 12 欄中)就可以了。這尤其適用于頁面有大量文字內(nèi)容，因為從頁面的一邊到另一邊全是文字內(nèi)容距離太長對于閱讀體驗來說會比較差，因為它將更難閱讀和定位。
Microtica(https://microtica.com/）網(wǎng)站就是利用的 12 網(wǎng)格系統(tǒng)其中的 8 列設(shè)計出來的頁面6. 響應(yīng)式通常的適配路徑是從大屏幕上的 12 列網(wǎng)格，到小筆記本上的 8 列網(wǎng)格，再到移動設(shè)備上的 4 列或 2 列網(wǎng)格。當(dāng)從大屏幕切換到小屏幕時，要注意水槽的大小，因為它們應(yīng)該比大屏幕上的小。如果你在更大的屏幕上設(shè)置為 30px，那么在移動端 10 或 15px 就足夠了。
響應(yīng)式柵格示例打破規(guī)則
偶爾，“跳出網(wǎng)格”被認為是正確的做法。當(dāng)你確保所有東西都在網(wǎng)格內(nèi)并且都對齊后，不要害怕讓部分元素從網(wǎng)格中跳出來，讓設(shè)計更有設(shè)計感。
打破網(wǎng)格規(guī)則的一些示例
1）頭部元素
如果頭部元素超出了網(wǎng)格的邊界，它可能會看起來更好。只是要注意不要將元素(如 logo 或菜單)放置得離頁面邊緣太近。你可以通過在兩邊設(shè)置至少 50px 的邊距來實現(xiàn)這一點。
Lexi Home(https://lexihome.io/）網(wǎng)頁示例2）特色模塊
當(dāng)其他一切元素都被適當(dāng)?shù)亟M織起來時，這些全寬部分通過打破節(jié)奏來產(chǎn)生更好的效果。這些部分中的一些內(nèi)容仍然可以遵守規(guī)則。
MapLabs3）裝飾元素
為設(shè)計增加美學(xué)價值的形狀和形式可以在頁面的任何地方放置。來自頁面外部，有時幾乎沒有碰到網(wǎng)格，或者在一些元素之間或后面。它們被放置在那里是為了讓設(shè)計更有趣，而不是被限制在網(wǎng)格線內(nèi)。
Slack’s website4）跳出網(wǎng)格系統(tǒng)的圖片
這是一個常見的例子，圖像沒有一個固定的矩形形狀，或者如果一些元素超出了圖片。這讓他們在視覺上更有吸引力，因為他們從人群中脫穎而出。這也適用于只占屏幕一半的圖像，而另一半是文字。
5）其他情況
當(dāng)你真正理解并適應(yīng)網(wǎng)格時，一個全新的視角將會打開。你將開始到處“打破規(guī)則”，而設(shè)計仍然會看起來有條理和平衡。只要努力更深入地學(xué)習(xí)網(wǎng)格系統(tǒng)，它就會告訴你什么時候應(yīng)該堅持使用它，什么時候可以讓某些部分從網(wǎng)格中突破!
總結(jié)
實際工作中，你可能需要一些時間來適應(yīng)網(wǎng)格系統(tǒng)，并遵守它的規(guī)則，同時保持創(chuàng)造性和出色的視覺設(shè)計。然而，我可以肯定地說，網(wǎng)格系統(tǒng)是迄今為止我在設(shè)計學(xué)習(xí)過程中學(xué)到的最好的東西。它給了我可以遵循的指導(dǎo)方針，但同時，它允許我在每個設(shè)計中編織自己的觀點，同時也考慮到開發(fā)者的觀點。三全其美的設(shè)計方法，非常值得學(xué)習(xí)并掌握。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。