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