Ui設(shè)計(jì)中眼睛比軟件靠譜嗎

　　大家好，今天AAA教育郭老師將為大家分享一篇視覺差相關(guān)的經(jīng)驗(yàn)。視覺本身就是一件偏感性的學(xué)科，它不應(yīng)該完全依賴數(shù)值，更應(yīng)該在意人的感受，去解決視覺差的問題。所以，我們平時(shí)做設(shè)計(jì)的時(shí)候要明確一點(diǎn)：軟件參數(shù)只是輔助，更多的需要提高自己眼睛的敏銳度。審美，審美，當(dāng)然是靠眼睛來審了。

 

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

　　視覺重量導(dǎo)致的比例不一致問題
 

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

 

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

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

 

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

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

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

 

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

 

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

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

 

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

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

 

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

　　如何調(diào)整?
 

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

 

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

 

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

 

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

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

 

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

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

　　我們軟件的自動(dòng)化工具能幫助我們節(jié)省時(shí)間，但工具是用代碼寫出來的，因此在處理一些視覺問題時(shí)非常的機(jī)械。而你的眼睛是個(gè)好工具，要好好的利用它。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。