上文主要講的是視覺尺寸和物理尺寸造成的視覺誤差，那本文主要談談不同形狀的視覺對齊造成的視覺誤差。
不同形狀的視覺對齊
視覺對齊是視覺尺寸現象的一種邏輯延續，看看下面的圖形，他們看起來是相同的長度嗎？
視覺上，上面那一條是不是看起來比下面那一條長一點？然而，做一條輔助線，這兩個形狀是一樣長的。
我們做一些修改，再看一下？
允許下面超出上面形狀長度20個像素，作為補償尖峰之間的間隙並使兩個形狀在視覺上是相等對齊。
還有一些更復雜的不同形狀的例子。
因此，如果您正在製作一張摺疊條紋和文字的海報，使其視覺對齊、利用上面知識，有意識超出形狀的其餘部分，才能對齊。
那麼如何對齊帶有背景的純文本段落呢？這取決於背景的深淺，如果顏色淺，可以將突出顯示的段落與文本的其餘部分對齊。
由於背景顏色淺，不會造成不好的閱讀影響。
如果是深色背景的話，讓黑色背景與文本的其餘部分對齊的話，使其內部的白色文本與縮進部分放在一起。才能視覺對齊。
與淺色背景的情況不同，黑色背景具有相當大的視覺重量，如果目標是插入段落不突兀，最好按下圖所示方式對齊。
相同的原理：將與按鈕和輸入框放一起。
左邊的淺色背景輸入框框體不會與標籤文字對齊，框內文本才會與標籤對齊。“發送”按鈕：右邊緣與輸入背景的右邊緣不完全對齊，為了達成視覺對齊故意地做短了一點點。
右側的深色邊框的輸入框的框體，就要與標籤文字對齊，而框內容無需與標籤文字對齊。“發送”按鈕：有一個三角形邊，形狀的緣故被故意地做長了一點，達成視覺對齊。
下面文本和圖標按鈕的對齊方式，看看下面的按鈕，文字看起來居中嗎？
下面看起來是對齊的，但實際不是，因為右邊是三角形的。這種形狀的按鈕文字必須靠左一些，視覺才對齊。
文本按鈕不僅具有水平對齊，而且還要具有垂直居中，以首位大寫字母算起，它是基於字體大寫字母高度的對齊方式，並且要注意行距調整。
基本上，大寫字母和按鈕邊緣上方和下方的空間是相等的。這很有意義，因為通常標題大寫，英文字母有更多的上升部字母（l，t，d，b，k，h），多餘降部字母（y，j，g， p）。
icon按鈕的情況稍有不同，哪一個按鈕看起來對齊得比較好？
希望你已經注意到左邊的按鈕有問題，它是由於不同的對齊方式而對齊錯誤的。第一個選項將該圖標默認為為矩形來對齊，那麼就是錯誤的，右邊的對齊方式是對的。因為是三角形，所以不應該當作正方形來看。
如果您為開發人員準備文件，則需要預留一些區域，以便他們可以將圖標置於背景上，視覺上保持一致。
“播放”按鈕也是如此。如果你直接對齊這些形狀，一個圓角矩形和一個三角形，他們會看起來很奇怪。
保證三個角到對應邊的距離相等，並將此圓形與按鈕背景對齊。
重要的是要記住：
- 帶有角邊緣的形狀應該拉長一些，在視覺上與矩形物體保持對齊。
- 文字按鈕製作調整行距對齊是最有效和廣泛使用的方法。
- 在按鈕上正確定位三角形圖標的有效方法之一是——保證每個角到邊的距離相等並將圓與背景對齊。
本文由 @VisualCC翻譯發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels ，基於 CC0 協議
閱讀更多 人人都是產品經理 的文章
