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

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

 

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

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

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

 

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

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

 

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

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

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

 

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

 

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

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

 

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

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

 

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

　　如何調(diào)整?
 

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

 

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

 

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

 

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

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

 

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

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

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