上文主要講的是視覺尺寸和物理尺寸造成的視覺誤差，那本文主要談?wù)劜煌螤畹囊曈X對齊造成的視覺誤差。

不同形狀的視覺對齊

視覺對齊是視覺尺寸現(xiàn)象的一種邏輯延續(xù)，看看下面的圖形，他們看起來是相同的長度嗎？

視覺上，上面那一條是不是看起來比下面那一條長一點？然而，做一條輔助線，這兩個形狀是一樣長的。

我們做一些修改，再看一下？

允許下面超出上面形狀長度20個像素，作為補(bǔ)償尖峰之間的間隙并使兩個形狀在視覺上是相等對齊。

還有一些更復(fù)雜的不同形狀的例子。

因此，如果您正在制作一張折疊條紋和文字的海報，使其視覺對齊、利用上面知識，有意識超出形狀的其余部分，才能對齊。

那么如何對齊帶有背景的純文本段落呢？這取決于背景的深淺，如果顏色淺，可以將突出顯示的段落與文本的其余部分對齊。

由于背景顏色淺，不會造成不好的閱讀影響。

如果是深色背景的話，讓黑色背景與文本的其余部分對齊的話，使其內(nèi)部的白色文本與縮進(jìn)部分放在一起。才能視覺對齊。

與淺色背景的情況不同，黑色背景具有相當(dāng)大的視覺重量，如果目標(biāo)是插入段落不突兀，最好按下圖??所示方式對齊。

相同的原理：將與按鈕和輸入框放一起。

左邊的淺色背景輸入框框體不會與標(biāo)簽文字對齊，框內(nèi)文本才會與標(biāo)簽對齊。“發(fā)送”按鈕：右邊緣與輸入背景的右邊緣不完全對齊，為了達(dá)成視覺對齊故意地做短了一點點。

右側(cè)的深色邊框的輸入框的框體，就要與標(biāo)簽文字對齊，而框內(nèi)容無需與標(biāo)簽文字對齊。“發(fā)送”按鈕：有一個三角形邊，形狀的緣故被故意地做長了一點，達(dá)成視覺對齊。

下面文本和圖標(biāo)按鈕的對齊方式，看看下面的按鈕，文字看起來居中嗎？

下面看起來是對齊的，但實際不是，因為右邊是三角形的。這種形狀的按鈕文字必須靠左一些，視覺才對齊。

文本按鈕不僅具有水平對齊，而且還要具有垂直居中，以首位大寫字母算起，它是基于字體大寫字母高度的對齊方式，并且要注意行距調(diào)整。

基本上，大寫字母和按鈕邊緣上方和下方的空間是相等的。這很有意義，因為通常標(biāo)題大寫，英文字母有更多的上升部字母（l，t，d，b，k，h），多余降部字母（y，j，g， p）。

icon按鈕的情況稍有不同，哪一個按鈕看起來對齊得比較好？

希望你已經(jīng)注意到左邊的按鈕有問題，它是由于不同的對齊方式而對齊錯誤的。第一個選項將該圖標(biāo)默認(rèn)為為矩形來對齊，那么就是錯誤的，右邊的對齊方式是對的。因為是三角形，所以不應(yīng)該當(dāng)作正方形來看。

如果您為開發(fā)人員準(zhǔn)備文件，則需要預(yù)留一些區(qū)域，以便他們可以將圖標(biāo)置于背景上，視覺上保持一致。

“播放”按鈕也是如此。如果你直接對齊這些形狀，一個圓角矩形和一個三角形，他們會看起來很奇怪。

保證三個角到對應(yīng)邊的距離相等，并將此圓形與按鈕背景對齊。

重要的是要記?。?/strong>