大家好，我是彩云。本期將為大家分享一篇視覺差相關的經驗。曾今還是設計小白的我，剛從開發轉行過來，會處于對代碼邏輯的慣性思維，比較依賴軟件數值，而且還錯誤的認為依靠軟件這么做就一定不會錯。

但其實，視覺本身就是一件偏感性的學科，它不應該完全依賴數值，更應該在意人的感受，去解決視覺差的問題。所以，我們平時做設計的時候要明確一點：軟件參數只是輔助，更多的需要提高自己眼睛的敏銳度。審美，審美，當然是靠眼睛來審了。

以下是譯文：

6年前作為自由平面設計師進入設計領域，大約一年后過渡到產品設計師。在我的整個職業生涯中，我遇到過N次這樣的情況：軟件自動排好的設計效果跟預期效果不一致，即使在數值上是完全正確的。

讓我們一起來看一些案例吧：

視覺重量導致的比例不一致問題

我曾經在給客戶做一個方案時，最初的方向是做一個256px*200px的卡片，其中包含客戶的Logo。

△ 雖然在軟件中顯示他們的高度都是24px，但我的眼睛卻并不這么認為。

我用sketch把第一個卡片轉成了symbol，然后通過替換其中的圖片使來復用組件。按理說，圖片的大小肯定是沒問題的，但我的眼睛卻并不接受這樣的可復用模塊，做出的效果看起來并不一致。所以需要對每一個圖片進行單獨的微調，使其能夠在視覺體量上保持一致。

（彩云注：所謂的視覺體量在我看來就是指視覺面積，如果面積差的比較多，你就會覺得這堆圖形有大有小。比如下圖中的第三個圖形，高度是一樣的，但是寬度太小，所以看起來顯得特別小，這個時候就需要把它適當的等比拉高一些，這樣視覺面積就比較接近其他圖形，看起來就顯得比較一致了。）

不一樣的圖形外邊框和視覺外邊框

下面的例子中，我的眼睛告訴我，這個成功頁面的左右兩邊的元素沒有垂直居中，但Figma告訴我已經居中了。

這里的問題是，電腦看圖的方式與人類不同。我們看到的是物體的質量，在這個例子中是足球，但計算機看到的是一個叫做邊界框的東西（一個不可見的盒子，包含了圖片中的所有可能的像素。），比如下面這張圖中，藍色就是邊界框。

由于電腦可以識別人眼看不到的微小像素，因此數學等式和光學等式并不相等。工程幾何在視覺這一層面沒有做的很好，所以我們需要靠眼睛來補償失真的那部分。

如何做到這一點呢？方法是：先找到物體的視覺重心，就是它的大部分存在的地方，然后我們忽略掉其他一些很小的邊緣，這樣我們就可以得到視覺邊框。最后再根據視覺邊框重新進行對齊。這就是利用眼睛重新進行對齊后的樣式，看起來會平衡很多。

同一個字體也可能有視覺比重問題

下面的例子是一個室內設計logo。整個標志都是 Helvetica Neue，64pt，字距自動，基線居中。

但我的眼睛告訴我，「I+」會比「+T」之間的空間要大，而且「+」也沒有上下居中。

1. 如何調整？

首先基于基線。我會把這些字母全部重新打散成單個字符，然后垂直居中。

接下來，我們需要根據眼睛的觀察來調整「I+」和「+T」之間的間距問題。默認狀態下「+」離左邊的太遠了。「I」有一個直的垂直筆畫和「T」有一個橫杠。我們需要做的是忽略大部分橫條，因為相對于垂直的筆畫，橫條所占的視覺比重很小。

為了使得調整后的差別更加明顯，我將修改前和修改后的logo并排放置，我相信，你應該能看出哪個會更好一些了。

文字的比例關系也需要靠眼睛來決策比例

當我開始做項目時，我一般會先去type-scale.com（http://type-scale.com/）這樣的網站找一些基本字體比例。但對于大多數縮放，通常都會在字體大小中以雜亂的小數結尾。（彩云注：作者這里的方法是通過一個網站，先用一個好的比例算出可以使用的字體大小，然后在從中選字號，這個方法還挺特別的。）

你需要做的是用這種類型的比例設計一個核心頁面，然后用你的眼睛手動調整，決定取上還是取下整數。這完全是主觀的，取決于做的頁面類型。比如首頁通常就會比內頁有更多的字號對比。

注意：用小數表示字體也沒什么大問題，這里主要是想表達要用眼睛去做取舍，以達到視覺平衡。

我們軟件的自動化工具能幫助我們節省時間，但工具是用代碼寫出來的，因此在處理一些視覺問題時非常的機械。而你的眼睛是個好工具，要好好的利用它。

更多視覺錯現象：

歡迎關注譯者的微信公眾號：「彩云譯設計」