視覺平衡設計原理

2022-7-1 純純

我們的眼睛很奇怪常常誤導我們，但是如果理解了人類視覺的特殊性，就能創造出更好的設計。格式塔理論解釋了我們的眼睛和大腦如何處理不同的圖像，而設計師常常需要在實際工作中使用這些理論。

1. 實際大小 VS 視覺大小

400px寬度的正方形，與400px直徑的圓形，哪個更大？

幾何學來說，它們的寬度和高度是相等的。

但是看下面的圖，我們的眼睛立刻感覺到正方形大于圓形。

帶參考輔助線的版本如下：

讓我們再看一組正方形和圓形。你覺得他們的視覺重量相同嗎？

好像差不多～？這是因為我增大了圓形的直徑。

把這兩個例子里的正方形和圓形重疊起來，我們可以發現：

左邊400px的正方形比400px的圓形有更大的面積。這就是為什么我們覺得它顯得更大～

右邊圓形和正方形是平衡的，因為它們的面積相似，雖然實際尺寸的寬度高度不同～

在菱形和三角形上也有同樣的效果。

為了在視覺上與正方形保持平衡，它們的實際尺寸應該增大，以保證面積相似。

保證「面積相似」的方法，對于處理簡單的形狀特別有用。

在實際的UI界面設計中如何應用這個理論呢？

舉個例子，當設計一組圖標時，我們需要保證它們都看起來很平衡，不會有某個圖標看起來過大或過小。

如果我們直接把每個icon的實際尺寸拉成一樣，那越接近正方形的icon看起來就會越大。

對于視覺上看上去比較小的icon，可以適當放大到參考線框之外。

對于視覺上看上去比較大的icon，可以適當縮小留白。

用這樣的方式來保證不同形狀的icon達到整體的平衡感。

一些視覺平衡的實際案例～

現在知道為什么icon的切圖框總是比實際形狀大了吧，

就是為了預留出空間，讓那些奇形怪狀的icon，看上去不比正方形icon要小。

驗證視覺平衡是否ok最簡單的方式就是模糊大法。

如果模糊后你的icon變成差不多的糊糊，他們的視覺重量就差不多了。

看個案例：

在放社媒圖標時，臉書和IG的圖標是方形的，而Twitter是一只小鳥的輪廓。

所以Twitter的圖標就要大一些，這一看起來整體會比較平衡。

另一個案例：

一個圓形按鈕和方形文本框放在一起。

如果圓形按鈕的直徑等于文本框的高度，那么按鈕視覺上看起來會顯得更小一些。

當你把它放大一點，整體會顯得更平衡。

但是如果改變按鈕的樣式，就不需要放大了。

在下圖中，按鈕和文本框都是80px高，但因為填充了黑色，看起來就不顯得那么小了。