我們的眼睛是奇怪的器官缴罗，經(jīng)常向我們?nèi)鲋e。眼睛通過光的反射接收信息祭埂，然后經(jīng)過一次腦補(bǔ)最終形成我們所謂看見的圖像面氓。腦補(bǔ)這個過程會因為各種原因的影響導(dǎo)致我們對于看見的事物的理解產(chǎn)生偏差。因此當(dāng)你知道人類視覺感受的特性時蛆橡，你就可以通過人類視覺慣性做出“正確”的設(shè)計舌界。
1.視覺尺寸和物理尺寸
哪個更大：400像素的正方形 or 400像素的圓圈？在幾何上泰演，它們的寬度和高度是相等的呻拌。但看看下面的圖片。我們的眼睛立即發(fā)現(xiàn)這個方塊比這個圓圈大睦焕。因此藐握，物體的物理尺寸是一樣的，但視覺尺寸卻有可能不一樣的垃喊。
圓的直徑增加了 50px：讓我們再看一個正方形和一個圓形的圖片猾普。改變圓形尺寸，調(diào)整尺寸的后的兩個圖形看起來才是一樣大的缔御。至少也不會像圖一一樣抬闷，讓人第一眼就認(rèn)為正方形比較大。
為什么發(fā)生這種情況？我重疊了第一個示例（400像素正方形和圓形）和第二個示例（400像素正方形和450像素圓形）的形狀笤成。如下圖所示评架，正方形超過“a”區(qū)域的圓圈，而圓圈超過“b”區(qū)域的正方形炕泳。左：正方形多出的四個面積巨大的 a 區(qū)域就是造成這種視覺誤差的原因纵诞。右：正方形無法將整個圓形包裹在內(nèi)了，圓形超出的四個 b 區(qū)域又與 正方形多出來的 a 區(qū)域在視覺上互相抵消培遵，所以 450px 的圓形與 400px 的正方形在視覺尺寸上更接近浙芙，也就是視覺上的“一樣大”。
菱形或三角形也是相同的效果籽腕，所有的圖形都能夠造成這樣的偏差嗡呼。要與視覺尺寸平衡，它們應(yīng)該更寬皇耗，更高南窗，以便它們的區(qū)域相似。比較區(qū)域的方法適用于具有足夠簡單的形狀郎楼。
這個現(xiàn)象對于界面設(shè)計會造成哪一些問題呢万伤？例如，當(dāng)繪制一套 icon 的時候呜袁，重要的是要使它們?nèi)勘３志獾新颍员銢]有圖標(biāo)突出顯示或顯得太小。如果我們直接將圖標(biāo)寫入方形區(qū)域阶界，則更像方形的圖標(biāo)看起來會更大虹钮。
我建議通過允許視覺上較小的圖標(biāo)懸掛在圖標(biāo)區(qū)域之外并在視覺上較重的圖標(biāo)與圖標(biāo)區(qū)域之間留出一些空間來補(bǔ)償不同形狀圖標(biāo)的重量。也就是：視覺重量小的元素要放大荐操，視覺重量大的元素要縮小芜抒。
舉個例子：這些真實的icon是視覺尺寸平衡的珍策。
模糊測試
檢查視覺平衡的最簡單的方法是模糊測試托启。如果您的圖標(biāo)變成相似大小的斑點，則它們大致具有相同的視覺尺寸攘宙。
但有時我們會使用已有的圖形屯耸，例如社交網(wǎng)絡(luò)標(biāo)志。Facebook和Instagram的圖標(biāo)是正方形的蹭劈，而Twitter則由一個鳥類剪影和Pinterest環(huán)繞的“P”表示疗绣。這就是為什么Twitter和Pinterest圖標(biāo)更大一些，以便它們與Facebook和Instagram圖標(biāo)保持平衡铺韧。
視覺平衡問題的另一個例子是：表單配按鈕多矮。如果按鈕直徑等于文本框高度，那么按鈕對我們的眼睛看起來會更小，但是如果稍微放大一點塔逃，整個構(gòu)造就會更加平衡讯壶、視覺尺寸才能相等。
但是湾盗，如果更改按鈕的顏色伏蚊，則不需要放大。在下面的圖片中格粪，按鈕和文本框高80像素躏吊，但由于強(qiáng)烈的黑色填充，讓它看起來的視覺重量更重帐萎，這也能達(dá)成視覺尺寸相等比伏。
重要的是要記住
1. 視覺尺寸是人眼對物體尺寸和重要性的感知程度，并不一定等于其像素尺寸疆导。
2. 圓形凳怨，菱形，三角形和其他非正方形形狀需要更大是鬼、更重才能與方形形狀進(jìn)行視覺平衡肤舞。
3. 圖標(biāo)區(qū)域應(yīng)該留有一定的安全區(qū)域。這對于一組圖標(biāo)來說非常重要均蜜，留給設(shè)計師的操作空間解決視覺尺寸對等問題李剖。
