我們的眼睛會經常誤導我們。但是如果你知道人類視覺的特殊性，你就可以做出更好的設計。字體設計師不僅使用視覺技巧來創建可讀的、平衡良好的字體，而且對交互設計人員也很有幫助。
在20世紀20年代，格式塔視覺知覺理論發展起來。它解釋了我們的眼睛如何處理不同的圖像以及我們的大腦如何解釋它們。您可能已經聽說過接近原則或共同命運規則之類的東西。本文引用格式塔理論的一些觀點，強調實際方面而不是科學研究。
1.視覺大小與實際大小
下面的兩個圖形那個更大？是400像素的正方形還是400像素的圓形？從幾何學上講，它們的寬度和高度是相等的。但請看下面的圖片。我們的眼睛會發現方形比圓形更大一些。
這是帶有參考線的版本
讓我們看一下帶有正方形和圓形的圖片。在視覺重量方面，它們與你感受到的相同嗎？
至少很難立刻說出來哪一個比另一個更大。這並不奇怪，因為我增加了圓的直徑。
我將第一個示例和第二個示例中的形狀重疊。在左邊，400像素的正方形比400像素的圓形面積大。這就是為什麼我們看到它在視覺上更大。在右邊，圓和方是平衡的。基本上，他們有一個相似的面積，而他們的寬度和高度是不同的。
我們可以用菱形或三角形來見證同樣的效果。為了在視覺上與正方形保持平衡，它們應該更寬、更高，這樣它們的面積才會相似。基於區域的方法可以與最簡單的形狀完美配合。
如何在界面中使用此功能？例如，當您創建一組圖標時，重要的是要使它們良好的平衡，以便沒有圖標看起來太大或太小。如果我們直接將圖標刻入方形區域，則更像方形的圖標看起來會更大。
我建議補償不同形狀圖標的重量，允許視覺上較小的圖標掛在圖標區域之外，並在視覺上較重的圖標和圖標區域之間留出一些空間。
現在這些圖標在視覺上是平衡。
現在很清楚為什麼圖標區域總是比圖標主體大 - 只是為了允許非方形圖標適合它並且看起來不小於方形圖標。
檢查視覺平衡的最簡單測試是模糊項目。如果您的圖標變成或多或少相似的斑點，那麼它們具有相同的視覺比重。
但有時我們使用現有的圖形，例如，用作共享按鈕的社交網站圖標。Facebook和Instagram圖標是方形的，而Twitter是一個鳥形輪廓，Pinterest以環繞的“P”代表。這就是為什麼Twitter和Pinterest圖標有點大，以便它們看起來與Facebook和Instagram圖標平衡。
視覺平衡問題的另一個例子就是文本框和一個圓形按鈕放在一起。如果按鈕直徑等於文本框高度，則按鈕看起來會比我們的眼睛小。當你放大一點點時，整個結構將變得更加平衡。
但是，如果您更改按鈕的樣式，則不需要放大。在下面的圖片中，按鈕和文本框都是80像素高，但由於黑色填充，右側的按鈕看起來並不顯得有“丟失”。
要注意的事
- 視覺重量是人眼感知物體大小和意義的方式，它並不一定等於物體的像素大小或面積。圓形，菱形，三角形和其他非方形形狀需要更高和更寬，以便與方形形狀進行視覺平衡。圖標區域應該有一些空間用於視覺平衡。這對於圖標集非常重要，它們應該看起來一致。
原文鏈接：
https://medium.muz.li/optical-effects-9fca82b4cd9a
作者：SlavaShestopalov
