想做好設(shè)計(jì)細(xì)節(jié)，有時(shí)候你的眼睛要比軟件靠譜

大家好，我是彩云。本期將為大家分享一篇視覺(jué)差相關(guān)的經(jīng)驗(yàn)。曾今還是設(shè)計(jì)小白的我，剛從開(kāi)發(fā)轉(zhuǎn)行過(guò)來(lái)，會(huì)處于對(duì)代碼邏輯的慣性思維，比較依賴軟件數(shù)值，而且還錯(cuò)誤的認(rèn)為依靠軟件這么做就一定不會(huì)錯(cuò)。

但其實(shí)，視覺(jué)本身就是一件偏感性的學(xué)科，它不應(yīng)該完全依賴數(shù)值，更應(yīng)該在意人的感受，去解決視覺(jué)差的問(wèn)題。所以，我們平時(shí)做設(shè)計(jì)的時(shí)候要明確一點(diǎn)：軟件參數(shù)只是輔助，更多的需要提高自己眼睛的敏銳度。審美，審美，當(dāng)然是靠眼睛來(lái)審了。

以下是譯文：

6年前作為自由平面設(shè)計(jì)師進(jìn)入設(shè)計(jì)領(lǐng)域，大約一年后過(guò)渡到產(chǎn)品設(shè)計(jì)師。在我的整個(gè)職業(yè)生涯中，我遇到過(guò)N次這樣的情況：軟件自動(dòng)排好的設(shè)計(jì)效果跟預(yù)期效果不一致，即使在數(shù)值上是完全正確的。

讓我們一起來(lái)看一些案例吧：

視覺(jué)重量導(dǎo)致的比例不一致問(wèn)題

我曾經(jīng)在給客戶做一個(gè)方案時(shí)，最初的方向是做一個(gè)256px*200px的卡片，其中包含客戶的Logo。

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

我用sketch把第一個(gè)卡片轉(zhuǎn)成了symbol，然后通過(guò)替換其中的圖片使來(lái)復(fù)用組件。按理說(shuō)，圖片的大小肯定是沒(méi)問(wèn)題的，但我的眼睛卻并不接受這樣的可復(fù)用模塊，做出的效果看起來(lái)并不一致。所以需要對(duì)每一個(gè)圖片進(jìn)行單獨(dú)的微調(diào)，使其能夠在視覺(jué)體量上保持一致。

（彩云注：所謂的視覺(jué)體量在我看來(lái)就是指視覺(jué)面積，如果面積差的比較多，你就會(huì)覺(jué)得這堆圖形有大有小。比如下圖中的第三個(gè)圖形，高度是一樣的，但是寬度太小，所以看起來(lái)顯得特別小，這個(gè)時(shí)候就需要把它適當(dāng)?shù)牡缺壤咭恍@樣視覺(jué)面積就比較接近其他圖形，看起來(lái)就顯得比較一致了。）

不一樣的圖形外邊框和視覺(jué)外邊框

下面的例子中，我的眼睛告訴我，這個(gè)成功頁(yè)面的左右兩邊的元素沒(méi)有垂直居中，但Figma告訴我已經(jīng)居中了。

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

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

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

同一個(gè)字體也可能有視覺(jué)比重問(wèn)題

下面的例子是一個(gè)室內(nèi)設(shè)計(jì)logo。整個(gè)標(biāo)志都是 Helvetica Neue，64pt，字距自動(dòng)，基線居中。

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

1. 如何調(diào)整？

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

接下來(lái)，我們需要根據(jù)眼睛的觀察來(lái)調(diào)整「I+」和「+T」之間的間距問(wèn)題。默認(rèn)狀態(tài)下「+」離左邊的太遠(yuǎn)了。「I」有一個(gè)直的垂直筆畫和「T」有一個(gè)橫杠。我們需要做的是忽略大部分橫條，因?yàn)橄鄬?duì)于垂直的筆畫，橫條所占的視覺(jué)比重很小。

為了使得調(diào)整后的差別更加明顯，我將修改前和修改后的logo并排放置，我相信，你應(yīng)該能看出哪個(gè)會(huì)更好一些了。

文字的比例關(guān)系也需要靠眼睛來(lái)決策比例

當(dāng)我開(kāi)始做項(xiàng)目時(shí)，我一般會(huì)先去type-scale.com（http://type-scale.com/）這樣的網(wǎng)站找一些基本字體比例。但對(duì)于大多數(shù)縮放，通常都會(huì)在字體大小中以雜亂的小數(shù)結(jié)尾。（彩云注：作者這里的方法是通過(guò)一個(gè)網(wǎng)站，先用一個(gè)好的比例算出可以使用的字體大小，然后在從中選字號(hào)，這個(gè)方法還挺特別的。）

你需要做的是用這種類型的比例設(shè)計(jì)一個(gè)核心頁(yè)面，然后用你的眼睛手動(dòng)調(diào)整，決定取上還是取下整數(shù)。這完全是主觀的，取決于做的頁(yè)面類型。比如首頁(yè)通常就會(huì)比內(nèi)頁(yè)有更多的字號(hào)對(duì)比。

注意：用小數(shù)表示字體也沒(méi)什么大問(wèn)題，這里主要是想表達(dá)要用眼睛去做取舍，以達(dá)到視覺(jué)平衡。

我們軟件的自動(dòng)化工具能幫助我們節(jié)省時(shí)間，但工具是用代碼寫出來(lái)的，因此在處理一些視覺(jué)問(wèn)題時(shí)非常的機(jī)械。而你的眼睛是個(gè)好工具，要好好的利用它。

更多視覺(jué)錯(cuò)現(xiàn)象：

歡迎關(guān)注譯者的微信公眾號(hào)：「彩云譯設(shè)計(jì)」