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