視覺(jué)欺騙，講講四個(gè)欺騙設(shè)計(jì)師視覺(jué)的例子(4)

在Photoshop中，即使看起來(lái)非�？茖W(xué)的對(duì)齊、同樣的形狀大小和色值，也可能與我們現(xiàn)實(shí)中感受到的完全不一樣。優(yōu)秀的設(shè)計(jì)師應(yīng)該感受到這些細(xì)微的差別，并且懂得去糾正它們，以今天這四個(gè)方面為例，以前沒(méi)注意到的同學(xué)趕緊來(lái)漲個(gè)姿勢(shì)！

以前我在做設(shè)計(jì)的時(shí)候，我靠Photoshop和Css告訴我對(duì)錯(cuò)：如果Photoshop顯示兩個(gè)圖形對(duì)齊了，那么他們就是對(duì)齊了；如果兩個(gè)不同形狀的圖形大小是一樣的，那么他倆就是一樣大的；如果兩個(gè)顏色有同樣的色值，那么他們看起來(lái)就是一樣的顏色。

這個(gè)方法看起來(lái)很理性，但是其實(shí)是錯(cuò)誤的工作方法。

軟件是很理性的，但是軟件不能把人類感知也加進(jìn)影響計(jì)算的因素中——這就是說(shuō)，軟件并不能理解在上下文情境中的物體和物體之間的關(guān)系，在整體視覺(jué)語(yǔ)言的環(huán)境下和人類如何感知物體。

人類非理性的思維會(huì)判斷物體看起來(lái)是否視覺(jué)上正確，因?yàn)槲覀兛梢钥吹胶屠斫馍舷挛沫h(huán)境，而這正是計(jì)算機(jī)無(wú)法做到的。了解這些細(xì)微的差異，并且知道如何調(diào)整他們的設(shè)計(jì)師才是好的設(shè)計(jì)師。很少人會(huì)注意到，大部分人會(huì)忽略。

下面讓我們來(lái)看幾個(gè)例子。

計(jì)算機(jī)沒(méi)有計(jì)算視覺(jué)權(quán)重的精確方式，他只能依賴某些確定的信息，比如長(zhǎng)寬，x/y軸坐標(biāo)。作為設(shè)計(jì)師，我們需要通過(guò)一些被稱之為光學(xué)調(diào)整的東西來(lái)彌補(bǔ)這一點(diǎn)。

播放按鈕的三角形是對(duì)其圓的中心嗎？并不是。繪制一個(gè)輔助的長(zhǎng)方形可以看出來(lái)，三角形的中心并不在圓形的中心。

左邊的按鈕是中心對(duì)齊的，但是看起來(lái)卻不在中間。

顏色的光學(xué)調(diào)整更細(xì)微。再一次重申，這是關(guān)于視覺(jué)權(quán)重和顏色何如展現(xiàn)。

實(shí)心的圖標(biāo)和文字用了相同的顏色填充，但是他們其中的一個(gè)顏色會(huì)看起來(lái)會(huì)淡一點(diǎn)。

左邊的圖標(biāo)和文字使用了相同的色值，右邊的組合用了不同的色值。

你可以發(fā)現(xiàn)圖標(biāo)的顏色細(xì)微的比文字要重，為了調(diào)整它，可以讓圖標(biāo)顏色變淺一些，或者讓文本變暗一些。

我建議在使用設(shè)計(jì)軟件的時(shí)候，使用HSB色值代替RGB色值。好處就是可以調(diào)整顏色的明暗。

面積是我們大腦感知物體的大�。òㄎ淖郑�。如果我們用圓形和正方形來(lái)思考這個(gè)問(wèn)題，一個(gè)120px長(zhǎng)的正方形比一個(gè)120px半徑的圓面積要大，如果要使他倆看起來(lái)一樣大，圓的半徑要稍微大一些才行。

左邊的形狀都是120 x 120 px，遠(yuǎn)看起來(lái)小一些。右邊的圓是126 x 126px，面積和正方形差不多了，看起來(lái)差不多大。

這也是一個(gè)很細(xì)微的調(diào)整，但是這很有利于整體的設(shè)計(jì)。這是對(duì)元素非常輕微的調(diào)整，上下調(diào)整1像素，可能感覺(jué)就對(duì)了。

注意Didot字體的上部下部的曲線是怎么變化的，在字高之上，落到基線之下。在這7個(gè)字母上都有體現(xiàn)。

在字體設(shè)計(jì)上亦是如此。帶有彎曲彎曲字母的上升或下降是在大寫(xiě)字高、基線等之上。如果你用garamond字體寫(xiě)了一行字，然后畫(huà)一條基線，一條字高線，你可以看見(jiàn)彎曲的筆畫(huà)時(shí)垂直于這些縣的。如果沒(méi)有超過(guò)，單個(gè)字符會(huì)顯得比旁邊的字母要小。

最后，有一個(gè)視覺(jué)調(diào)整是必要的：如何排放大寫(xiě)文字和普通的大小寫(xiě)文字。大寫(xiě)文字比普通的文字要突出的多，需要調(diào)整來(lái)達(dá)到視覺(jué)平衡。

上面的大寫(xiě)文字似乎比旁邊的普通文字要大，下面的大寫(xiě)文字調(diào)整了2像素，讓他們看起來(lái)一樣大。

除非目的是讓大寫(xiě)的文字更佳突出，大寫(xiě)文字應(yīng)該始終減少幾個(gè)像素，例如16px減少到14px，或者12像素減少到11像素。

當(dāng)在做大型項(xiàng)目的時(shí)候，每一個(gè)細(xì)節(jié)的設(shè)計(jì)會(huì)疊加起來(lái)影響整體的設(shè)計(jì)。好的設(shè)計(jì)需要我們對(duì)細(xì)節(jié)的關(guān)心。

一旦他們稱為工作流程的一部分，文字大小減少2像素，或者輕移三角心10個(gè)像素讓他去到合適的位置，就是這種細(xì)微的調(diào)整會(huì)讓設(shè)計(jì)看起來(lái)更完美。

電腦或者人工智能無(wú)法完全理解設(shè)計(jì)的上下文情境，所以他們不能做出準(zhǔn)確的調(diào)整而設(shè)計(jì)師卻可以。直到有計(jì)算機(jī)能對(duì)設(shè)計(jì)情境中分離出來(lái)的獨(dú)立的組成部分做出合理的判斷，我們都不能只是依賴計(jì)算機(jī)給予我們?cè)O(shè)計(jì)的解決方案。我們不能依賴計(jì)算機(jī)告訴我們所有的想法，我們可以依賴我們的眼睛和我們的直覺(jué)。設(shè)計(jì)師在日常工作中磨練自己的直覺(jué)，所以我們信任我們的直覺(jué)，即使計(jì)算機(jī)告訴我們相反的答案。