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