您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

進(jìn)階學(xué)習(xí)!視覺(jué)設(shè)計(jì)中的11個(gè)經(jīng)典的視錯(cuò)覺(jué)征象

Lisa :寫(xiě)這篇文章目的,是幫助大家理解這些讓人抓狂的結(jié)果背后潛藏的原理。你可能尚未意識(shí)到,從事界面,logo 或插畫(huà)設(shè)計(jì)時(shí)采用的許多技巧,其實(shí)源于「視錯(cuò)覺(jué)」。

閑話(huà)少敘,這里是常見(jiàn)的11個(gè)視錯(cuò)覺(jué)案例。

1. 三角形分割錯(cuò)覺(jué)

選一點(diǎn),任選一點(diǎn),來(lái)不來(lái)?

△ 基于質(zhì)心對(duì)齊的三角形

圖標(biāo)可能是有誤導(dǎo)性的,分外是由復(fù)雜幾何體或怪異外形構(gòu)成的。一套圖標(biāo)里,并非每個(gè)都對(duì)稱(chēng),像素級(jí)完善或者保持固定寬高比。有的圖標(biāo)必要手動(dòng)調(diào)整,尤其是,魔性的播放按鈕。

將一個(gè)三角形置于圓角/直角矩形邊框中,可能會(huì)使它看起來(lái)居中位置舛錯(cuò)。造成這個(gè)征象的緣故原由被稱(chēng)為「三角形分割錯(cuò)覺(jué)」。三角形質(zhì)心是基于最小外接矩形的。所以,假如你打算把一個(gè)點(diǎn)放到等邊三角形高度一半的位置,你會(huì)發(fā)現(xiàn)它看起來(lái)要超過(guò)一半。

△ 哪個(gè)才是數(shù)學(xué)意義上的居中呢?

這個(gè)魔性的錯(cuò)覺(jué)基于兩個(gè)理論:

  • 固定縮放比例舛錯(cuò)

這個(gè)錯(cuò)覺(jué)暗含了透視關(guān)系,增長(zhǎng)了遠(yuǎn)距離物體 (比如三角形) 的可觀(guān)測(cè)大小,就如同在平面透視中看一條道路,頂點(diǎn)在無(wú)窮遠(yuǎn),而底邊就像道路最近的部分。

  • 重心/中間

假如一名觀(guān)察者被要求找出中點(diǎn),他最終會(huì)找出質(zhì)心來(lái),由于質(zhì)心上下區(qū)域相稱(chēng)。等邊三角形的質(zhì)心在它的中點(diǎn)下方,有證據(jù)注解觀(guān)察者會(huì)在這兩者之間妥協(xié)抉擇。

為了使矩形中的三角形視覺(jué)居中,你可能必要通過(guò)計(jì)算等邊三角形腰的中點(diǎn)與對(duì)角頂點(diǎn)連線(xiàn)的交點(diǎn),來(lái)找出三角形的質(zhì)點(diǎn)。以下是公式:

△ 計(jì)算三角形質(zhì)點(diǎn)的公式

質(zhì)點(diǎn)可以被定位在每條邊 1/3 處和對(duì)邊頂點(diǎn)的連線(xiàn)。這個(gè)體例也適用于許多其他外形。

2. 垂直水平錯(cuò)覺(jué)

這是矩形嗎?照舊長(zhǎng)方形?不,是一個(gè)正方形?

△ 垂直水平錯(cuò)覺(jué)

正方形是構(gòu)成任何設(shè)計(jì)體系的基石。你在 Google, Facebook, Pinterest和Dribbble 都能夠看到它們的身影。

在 Sketch 里按住 Shift 鍵畫(huà)出一個(gè)正方形,偶然你想看一眼以確認(rèn)每條邊都是相稱(chēng)的。假如充足細(xì)心,那垂直邊看起來(lái)好像比水平邊要長(zhǎng)一些,更像一個(gè)長(zhǎng)方形。但現(xiàn)實(shí)上,它確實(shí)是 1:1 的正方形。這就是所謂的「垂直水平錯(cuò)覺(jué)」。

△ Facebook 圖片新聞是 1:1 正方形。

讓人著迷的是,不同的文化與性別對(duì)這個(gè)視錯(cuò)覺(jué)的感知,是不一樣的。城里人比鄉(xiāng)間人更容易察覺(jué)到這個(gè)題目(譯者:什么鬼……)。這是由于鄉(xiāng)間人更風(fēng)俗于居住在圓形的房間里。

3. 馬赫帶效應(yīng)

一個(gè)「并不存在」的陰影投射到物體外觀(guān),會(huì)不會(huì)是錯(cuò)覺(jué)?

△ 馬赫帶

把同色的漸變毗鄰擺放是一個(gè)常見(jiàn)的扁平化設(shè)計(jì)手法。細(xì)心看,你可能細(xì)致到一個(gè)「并不存在」的陰影出如今兩個(gè)對(duì)比色塊相接的邊緣。這個(gè)視錯(cuò)覺(jué)被稱(chēng)作「馬赫帶」。圖像并未加入陰影,只是我們的眼睛產(chǎn)生了錯(cuò)覺(jué)而已。

△ 每行的邊緣都出現(xiàn)了陰影

從技術(shù)層面詮釋這個(gè)征象成因即是生物學(xué)上的「?jìng)?cè)克制」,普通的說(shuō)就是暗的一側(cè)顯得更暗,亮的一側(cè)顯得更亮。

雖然馬赫帶效應(yīng)在視覺(jué)設(shè)計(jì)中十分渺小,不過(guò)論及它的影響,即便是牙醫(yī)都對(duì)其感到頭疼。X射線(xiàn)照射到牙齒上生成灰度圖像,用來(lái)解析 (牙齒) 非常轉(zhuǎn)變的強(qiáng)度。假如不細(xì)心辨別,馬赫帶效應(yīng)可能會(huì)產(chǎn)生假陽(yáng)性診斷效果。

4. 赫林錯(cuò)覺(jué)

看起來(lái)像活的!

△ 赫林錯(cuò)覺(jué)

你有未遇見(jiàn)過(guò)這種 logo:包含許多細(xì)線(xiàn)條或者布滿(mǎn)小點(diǎn)的背景圖,當(dāng)你上下滾動(dòng)網(wǎng)頁(yè)時(shí)它看起來(lái)像是在移動(dòng)或者像脈搏一樣跳動(dòng)?又或者說(shuō)在某視頻中出現(xiàn)的電視,電視屏幕里包含的諸多波浪線(xiàn)?若如此,是因?yàn)椤改柤y」的干涉征象——兩種柵格紋理相互覆蓋,移動(dòng)時(shí)產(chǎn)生的視錯(cuò)覺(jué)。

案例中的兩個(gè)柵格紋理分別是圖像和持續(xù)刷新的表現(xiàn)器,從而產(chǎn)生了錯(cuò)覺(jué)。

△ 上下滾動(dòng),即可看到震顫結(jié)果。

還蠻酷的。雖然摩爾自己并非指代視錯(cuò)覺(jué),而是干涉圖案。此處 Sonos 標(biāo)志樣例使用了包括摩爾圖案,赫林錯(cuò)覺(jué)和動(dòng)視錯(cuò)覺(jué)的手法組合。這種感官技術(shù)在歐普藝術(shù) (又稱(chēng)視幻藝術(shù)) 中特別很是流行。

5. 赫曼柵格

出現(xiàn),抑或不現(xiàn),這是個(gè)題目。

△ 赫曼柵格

赫曼柵格特別很是受迎接,你可以在許多高對(duì)比度背景的柵格布局中發(fā)現(xiàn)它的身影。直接盯著任意方塊,在四周方塊的交叉口會(huì)產(chǎn)生幽靈般的斑點(diǎn)。但當(dāng)你嘗試轉(zhuǎn)向那個(gè)斑點(diǎn)時(shí),它就會(huì)神奇的消散掉。

△ 當(dāng)你盯著交叉口時(shí),灰點(diǎn)會(huì)出現(xiàn)

產(chǎn)生這個(gè)結(jié)果的緣故原由,和前邊一樣——「?jìng)?cè)克制」。簡(jiǎn)單來(lái)說(shuō),即是愉快狀況的神經(jīng)元可以減弱四周神經(jīng)元方向上的視訊號(hào)。

6. 同時(shí)對(duì)比錯(cuò)覺(jué)

兩個(gè)分開(kāi)的方塊亮度雷同嗎?

△ 同時(shí)對(duì)比錯(cuò)覺(jué)

把兩個(gè)同色的物體分別放在不同對(duì)比度的背景色上,會(huì)使兩個(gè)物體呈現(xiàn)出不同的顏色。這種征象被稱(chēng)為「同時(shí)對(duì)比錯(cuò)覺(jué)」。在視覺(jué)設(shè)計(jì)世界中,這種征象號(hào)稱(chēng)「對(duì)比之王」,而且這個(gè)結(jié)果對(duì)于不同人可能看起來(lái)不同。

△ 筆墨色彩完全雷同, 但是看起來(lái)卻并非如此

這種征象成因沒(méi)有科學(xué)定論,但有許多相干探索?!?jìng)?cè)克制」同赫曼柵格與馬赫帶一樣也被認(rèn)為是此征象成因之一。

7. 芒克白錯(cuò)覺(jué)

是眼睛忽悠了我嗎?

△ 芒克白錯(cuò)覺(jué)

這個(gè)錯(cuò)覺(jué)相稱(chēng)渺小,卻迷人無(wú)比??瓷蠄D,左側(cè)的紫色塊看起來(lái)比右邊的明度要高一些。但是合并之后,兩側(cè)的色塊其實(shí)明度是完全同等的。

芒克白錯(cuò)覺(jué)的成因嘛,你猜猜看?

恩,照舊「?jìng)?cè)克制」。

8. 水彩錯(cuò)覺(jué)

誑騙性上色……

△ 水彩錯(cuò)覺(jué)

有幾次,當(dāng)我給一個(gè)外形加上色彩邊框時(shí),不禁新鮮:“我什么時(shí)候把背景色也給改了?”。假如細(xì)心看,可能細(xì)致到白色區(qū)域產(chǎn)生了與邊框雷同但是淡得多的投影。但,你其實(shí)知道那些淡色投影區(qū)域現(xiàn)實(shí)上是白色的!

這個(gè)征象被稱(chēng)作「水彩錯(cuò)覺(jué)」,色彩的擴(kuò)散結(jié)果取決于輪廓線(xiàn)亮度與對(duì)比度的組合。

△ 按鈕內(nèi)的白色區(qū)域看起來(lái)像是被邊框染了些許顏色

我承認(rèn)被這個(gè)錯(cuò)覺(jué)誤導(dǎo)過(guò)不少回,以至于我調(diào)出了拾色器來(lái)檢查它。

9. 加斯特羅圖形

Size 真的很緊張嗎?

△ 加斯特羅圖形

插畫(huà)或 Logo 設(shè)計(jì)中,會(huì)碰到標(biāo)志或字體需切割成不同外形的情況。上圖的錯(cuò)覺(jué)會(huì)在設(shè)計(jì)對(duì)象是弧形時(shí)發(fā)生。此二元素看著大小不同,但細(xì)心檢查一下就會(huì)發(fā)現(xiàn),它們完全一樣。

在一幅插畫(huà)或 Logo上,不論是個(gè)標(biāo)志或字體必要切割成不同的外形。這個(gè)錯(cuò)覺(jué)在工尷尬刁難象是弧形時(shí)就會(huì)發(fā)生。此二元素看起來(lái)大小不同,但是細(xì)心檢查一下就會(huì)發(fā)現(xiàn),它們完全一樣。

△ 這幅插畫(huà)在創(chuàng)作過(guò)程中,一些本應(yīng)雷同的圓弧卻看起來(lái)比其他的要小

其實(shí)這便是周知的「加斯特羅圖形」,也沒(méi)有確定的科學(xué)詮釋?zhuān)瑸槭裁次覀兛吹礁鞑糠执笮〔煌?。一個(gè)可能的緣由是,我們大腦被大小半徑的差異疑惑了。換句話(huà)說(shuō),短邊襯托使長(zhǎng)邊顯得更長(zhǎng),而長(zhǎng)邊襯托使短邊顯得更短。

10. 康士維錯(cuò)覺(jué)

桀黠的斜面。

△ 康士維錯(cuò)覺(jué)

「康士維錯(cuò)覺(jué)」用了漸變的同時(shí),也加入了中間線(xiàn)來(lái)創(chuàng)造一個(gè)圖像,使其一邊比另一邊要暗。但事實(shí)是,兩邊是一樣的。當(dāng)你把每個(gè)部分平行排放時(shí),就會(huì)發(fā)現(xiàn)兩邊現(xiàn)實(shí)上完全雷同。

△ 每個(gè)菱形都有同樣的漸變,但是它們團(tuán)體看起來(lái)越來(lái)越暗 (從上而下)。

這個(gè)視錯(cuò)覺(jué)與之前提過(guò)的兩個(gè)有相似之處,但有兩個(gè)緊張的不同:

  • 在馬赫帶效應(yīng)的示例中,結(jié)果只在接近色塊邊緣處才出現(xiàn)。但是康士維錯(cuò)覺(jué)影響到整個(gè)區(qū)域。

  • 在康士維錯(cuò)覺(jué)中,較亮部分的邊緣顯得更亮,較暗部分顯得更暗。這統(tǒng)一般的「對(duì)比結(jié)果」是相反的。

11. 米勒-萊爾錯(cuò)覺(jué)

筆墨亦瘋狂!

△ 對(duì)于「視覺(jué)補(bǔ)正」最直觀(guān)的感知

字體設(shè)計(jì)師都知道,創(chuàng)造一個(gè)字體更多依靠直覺(jué),而非邏輯思考。排字時(shí)若遵循數(shù)學(xué)意義的正確,基于它的公制高度,會(huì)使得整個(gè)單詞視覺(jué)上顯得不成比例。關(guān)于「字體力學(xué)」的一個(gè)樣例中,引入了一個(gè)叫「視覺(jué)補(bǔ)正」的概念。簡(jiǎn)而言之,所謂補(bǔ)正即重新調(diào)整單獨(dú)字體大小,以求得視覺(jué)結(jié)果上的平衡感。

△ 沒(méi)有視覺(jué)補(bǔ)正的話(huà),Linkedin 中的字母「e」和 Amazon 中的字母「z」就無(wú)法視覺(jué)平衡

看看上邊這些聞名的 Logo,一些字母并未乖乖待在基線(xiàn)和X高度里。字體設(shè)計(jì)師不得不手動(dòng)調(diào)整每個(gè)字母以便達(dá)到最佳視覺(jué)結(jié)果。

我們何以必要在字體設(shè)計(jì)中運(yùn)用補(bǔ)正?

由于米勒-萊爾錯(cuò)覺(jué)。這個(gè)視覺(jué)征象注解將一個(gè)V型記號(hào)放到線(xiàn)段兩端可能造成其顯得比現(xiàn)實(shí)更短或更長(zhǎng),(長(zhǎng)短) 取決于V型記號(hào)的朝向。這個(gè)經(jīng)典的錯(cuò)覺(jué)證實(shí)了人類(lèi)感知錯(cuò)誤。

△ 米勒-萊爾錯(cuò)覺(jué)

迎接關(guān)注微信公眾號(hào):非科班設(shè)計(jì)

    原文地址:zhihu
     
     

    [教程作者:互聯(lián)網(wǎng)]
    免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
    本文地址:http://pkvc.cn/tutorial/di3822.html
    已然成熟的卡片式設(shè)計(jì),遵循著怎樣的設(shè)計(jì)規(guī)則?
    這3個(gè)UI設(shè)計(jì)細(xì)節(jié),可以讓你感受到和高手的差距
    圖趣網(wǎng)微信
    建議反饋
    ×