網(wǎng)頁設(shè)計字體和圖片等用戶界面組件的間距、大小和尺寸都是影響整個版面美觀的重要因素，這些也是設(shè)計中經(jīng)常被忽視的核心元素之一，適當(dāng)?shù)目臻g組織有助于實現(xiàn)屏幕、頁面甚至產(chǎn)品之間的一致性。它還創(chuàng)造了視覺節(jié)奏，限制了決策，并有助于實現(xiàn)更好的可讀性和可掃描性。

它是網(wǎng)頁設(shè)計設(shè)計系統(tǒng)的強制性部分，因為它有助于創(chuàng)造視覺節(jié)奏，創(chuàng)造一致的產(chǎn)品，并減少設(shè)計師每天做出的決定?？臻g系統(tǒng)通常由四個基本要素組成:基本單元、空間比例、網(wǎng)格，有時還包括布局。我們可以假設(shè)這很可能是網(wǎng)站上的授權(quán)表單。第一種布局在間距上有些不一致，沒有明確的垂直節(jié)奏。然而，當(dāng)我們看第二個布局時，一切似乎更清楚了。是因為所有的元素都調(diào)整到8pt的空間體系，所以垂直節(jié)奏變得可預(yù)測，清晰。當(dāng)一個設(shè)計沒有一個立即可識別的空間模式時，用戶可能會發(fā)現(xiàn)它不一致和不可靠。

網(wǎng)格提供了元素布局的結(jié)構(gòu)，而空間系統(tǒng)定義了使用間距和大小的規(guī)則。早期的印刷設(shè)計師使用網(wǎng)格將文本塊和圖像組織成令人愉悅的視覺層次，以獲得更好的可讀性和可掃描性。同樣的基本原則也適用于網(wǎng)頁和界面設(shè)計。列網(wǎng)格是網(wǎng)頁和界面設(shè)計中最流行的網(wǎng)格。它有助于將內(nèi)容組織成間距均勻的垂直列，并在它們之間設(shè)置間距。模塊化網(wǎng)格通過向列網(wǎng)格添加行來擴展列網(wǎng)格。它幫助我們將內(nèi)容組織成矩陣結(jié)構(gòu)，因此對于電子商務(wù)、畫廊或卡片布局非常有幫助。

基線網(wǎng)格是由等距水平線組成的密集網(wǎng)格。正如我之前提到的，它來自平面設(shè)計，所有的文本都沿著基線垂直流動，創(chuàng)造出相似的節(jié)奏。為了對齊此網(wǎng)格上的所有元素，所有間距和尺寸都必須是線間距值的倍數(shù)。為了做到這一點，我們需要創(chuàng)建一個清晰的空間系統(tǒng)。讓我們從一個基本單元開始。


當(dāng)我們選擇了一個基本單位并定義了一個空間尺度時，我們可能會有一個問題:如何正確地使用它？讓我們弄清楚。眾所周知，空間比例適用于邊距、填充和尺寸。對于寬度或高度，我們只是從空間尺度設(shè)置一個值。如果我們不能預(yù)測組件的內(nèi)容，只設(shè)置高度或?qū)挾仁强梢缘?，所以它將擁抱?nèi)容并動態(tài)拉伸。但是有了邊距和填充，事情就變得更復(fù)雜了?？聪聢D。如您所見，有三種類型的間距:內(nèi)部間距、垂直間距和水平間距(或稱行內(nèi)間距)。