2022-7-1 純純
我們的眼睛很奇怪常常誤導(dǎo)我們，但是如果理解了人類視覺的特殊性，就能創(chuàng)造出更好的設(shè)計。格式塔理論解釋了我們的眼睛和大腦如何處理不同的圖像，而設(shè)計師常常需要在實際工作中使用這些理論。
400px寬度的正方形，與400px直徑的圓形，哪個更大？
幾何學(xué)來說，它們的寬度和高度是相等的。
但是看下面的圖，我們的眼睛立刻感覺到正方形大于圓形。
帶參考輔助線的版本如下：
讓我們再看一組正方形和圓形。你覺得他們的視覺重量相同嗎？
好像差不多～？這是因為我增大了圓形的直徑。
把這兩個例子里的正方形和圓形重疊起來，我們可以發(fā)現(xiàn)：
左邊400px的正方形比400px的圓形有更大的面積。這就是為什么我們覺得它顯得更大～
右邊圓形和正方形是平衡的，因為它們的面積相似，雖然實際尺寸的寬度高度不同～
在菱形和三角形上也有同樣的效果。
為了在視覺上與正方形保持平衡，它們的實際尺寸應(yīng)該增大，以保證面積相似。
保證「面積相似」的方法，對于處理簡單的形狀特別有用。
在實際的UI界面設(shè)計中如何應(yīng)用這個理論呢？
舉個例子，當(dāng)設(shè)計一組圖標(biāo)時，我們需要保證它們都看起來很平衡，不會有某個圖標(biāo)看起來過大或過小。
如果我們直接把每個icon的實際尺寸拉成一樣，那越接近正方形的icon看起來就會越大。
對于視覺上看上去比較小的icon，可以適當(dāng)放大到參考線框之外。
對于視覺上看上去比較大的icon，可以適當(dāng)縮小留白。
用這樣的方式來保證不同形狀的icon達到整體的平衡感。
一些視覺平衡的實際案例～
現(xiàn)在知道為什么icon的切圖框總是比實際形狀大了吧，
就是為了預(yù)留出空間，讓那些奇形怪狀的icon，看上去不比正方形icon要小。
驗證視覺平衡是否ok最簡單的方式就是模糊大法。
如果模糊后你的icon變成差不多的糊糊，他們的視覺重量就差不多了。
看個案例：
在放社媒圖標(biāo)時，臉書和IG的圖標(biāo)是方形的，而Twitter是一只小鳥的輪廓。
所以Twitter的圖標(biāo)就要大一些，這一看起來整體會比較平衡。
另一個案例：
一個圓形按鈕和方形文本框放在一起。
如果圓形按鈕的直徑等于文本框的高度，那么按鈕視覺上看起來會顯得更小一些。
當(dāng)你把它放大一點，整體會顯得更平衡。
但是如果改變按鈕的樣式，就不需要放大了。
在下圖中，按鈕和文本框都是80px高，但因為填充了黑色，看起來就不顯得那么小了。
視覺平衡是人眼感知物體大小的方式，不一定等于實際的像素大小。
圓、菱形、三角形和其他非正方形需要加高加寬，才能與正方形在視覺上保持平衡。
設(shè)計時需要預(yù)留一些多余的空間用于視覺平衡，對于一組icon來說看起來平衡一致很重要。
藍(lán)藍(lán)設(shè)計的小編 http://bouu.cn