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