2.不同形狀的對齊
視覺對齊是視覺平衡主題的延續。看看下面的條紋。它們看起來像一樣長嗎?
測量出來像素是一樣長的，但是乍一看下面的條紋比上面的要短一些。
還是這兩個條紋的照片。能看出來有什麼變化嗎？
我對下部的條紋進行了視覺。允許尖峰超過上面條紋大概20像素的長度，補償尖峰之間的間隙，並使兩個形狀在視學上相等。
現在有一些更復雜的不同形狀條紋的例子。
所以，如果您正在製作帶有摺疊條紋和文字的海報，或者你在網上商店的產品卡上放一條明亮的“打折”條紋，注意要讓它們在視覺上保持平衡。鋒利的邊緣應該超出其他形狀一截，特別是它是一個矩形的時候。
那麼如何對齊有背景的純文本和段落呢?它取決於背景的視覺密度。如果背景是淺色的，可以將突出顯示的段落與文本的其餘部分對齊。
由於背景是淺色的，它不會中斷你的文本。
密集背景可以使用不同的方法。在圖片上，黑色的背景與其餘的文字對齊，而其中的白色文字則使用縮進。
與淺色背景的情況不同，黑色背景有很大的視覺分量，如果目標是無縫插入一個段落，那麼最好按照如下方式對齊。
相同的原理適用於按鈕和輸入字段。當然，這不是規定，只是基於人類視覺感知的推薦。
左側輸入框的淺色背景可以超越輸入標籤和用戶輸入。“發送”按鈕的右邊緣未與輸入背景的右邊緣完全對齊，因為按鈕較暗並且從視覺角度看起來較重。
在右側，輸入具有實線邊框，我將它們與標籤對齊，而用戶的輸入在框內有縮進。“發送”按鈕具有三角形邊。按鈕向右移動一點，看起來與上面的矩形輸入字段平衡。
在這裡，我們正在接近對齊的另一個方面 - 文本和圖標按鈕的對齊方式。看看下面的按鈕。文字看起來不是居中的嗎？
在右邊的按鈕上，因為右邊的邊是三角形的，所以我把單詞向左移動了一點。此外，箭頭狀按鈕的要比左邊的寬40像素，這樣看起來在視覺上看起來兩個按鈕是差不多大的。
圖標按鈕的情況與文本按鈕略有不同。讓我們在圓形按鈕背景上放置一個“發送”圖標。哪個看起來更加平衡？
希望你注意到左邊的東西是有問題的。這是因為使用對齊的方法不同。如果圖標是巨星，那麼第一個處理圖標的方式，在某種程度上，是沒有問題的，因為當您向開發人員發送SVG或PNG文件時，它是一個矩形。右側輔助線顯示了圖標的位置，其所有銳利邊緣與圓形按鈕背景的距離相等。
如果您為開發人員準備文件，則需要保留一些區域，以便他們可以將圖標在背景上以視覺方式居中。
還有一些與“播放”按鈕相同的情況出現。如果直接對齊圓角矩形和三角形它們會看起來很奇怪。
如果您想要更好地對齊三角形，請畫一個圓圈環繞它並將此圓圈與按鈕背景對齊。
注意事項
具有鋒利邊緣的形狀應該更大或更長，以便與相鄰的矩形對象保持平衡。
正確定位按鈕上三角形圖標的有效方法之一是將其包圍起來，並將圓與背景對齊。
原文鏈接：
https://medium.muz.li/optical-effects-9fca82b4cd9a
作者：SlavaShestopalov
