## ##

        視覺設計中的11種魔性視錯覺

        2018-02-28 09:42:25 閱讀 254395 本文來源:非科班設計
        分享至:

        干產品設計這幾年,在視覺工作中我碰上過許多令人驚奇的效果,讓人不得不各種 

        寫這篇文章目的,是幫助大家理解這些讓人抓狂的效果背后潛藏的原理。你可能尚未意識到,從事界面,logo 或插畫設計時采用的很多技巧,其實源于「視錯覺」。

        閑話少敘,這里是常見的11個視錯覺案例。



        1. 三角形分割錯覺

        選一點,任選一點,來不來?

        20180227135731524.gif

        基于質心對齊的三角形。


        圖標可能是有誤導性的喲,特別是由復雜幾何體或怪異形狀構成的那種。一套圖標里,并非每個都對稱,像素級完美或者保持固定寬高比。有的圖標需要手動調整,尤其是,魔性的播放按鈕!

        將一個三角形置于 圓角/直角 矩形邊框中,可能會使它看起來居中位置不對。造成這個現象的原因被稱為「三角形分割錯覺」。三角形質心是基于最小外接矩形的。所以,如果你打算把一個點放到等邊三角形高度一半的位置,你會發現它看起來要超過一半。

        20180227135854107.jpg

        哪個才是數學意義上的居中呢?


        這個魔性的錯覺基于兩個理論:

        固定縮放比例不對

        這個錯覺暗含了透視關系,增加了遠距離物體 (比如三角形) 的可觀測大小,就如同在平面透視中看一條道路,頂點在無限遠,而底邊就像道路最近的部分。

        重心/中心

        如果一名觀察者被要求找出中點,他最終會找出質心來,因為質心上下區域相等。等邊三角形的質心在它的中點下方,有證據表明觀察者會在這兩者之間妥協抉擇。

        為了使矩形中的三角形視覺居中,你可能需要通過計算等邊三角形腰的中點與對角頂點連線的交點,來找出三角形的質點。以下是公式:

        20180227140029537.png



        計算三角形質點的公式


        開玩笑的,這不是一篇關于幾何公式的文章 (但公式本身是正確的)。

        質點可以被定位在每條邊 1/3 處和對邊頂點的連線。這個方式也適用于很多其他形狀。


        2. 垂直水平錯覺

        這是矩形嗎?還是長方形?不,是一個正方形?

        20180227140319086.gif

        垂直水平錯覺。


        正方形是構成任何設計系統的基石。你在 Google, Facebook, Pinterest和Dribbble 都能夠看到它們的身影。

        在 sketch 里按住 shift 鍵畫出一個正方形,有時你想看一眼以確認每條邊都是相等的。如果足夠仔細,那垂直邊看起來似乎比水平邊要長一些,更像一個長方形。但實際上,它確實是 1:1 的正方形。這就是所謂的「垂直水平錯覺」。

        20180227140318202.jpg


        Facebook 圖片消息是 1:1 正方形。


        讓人著迷的是—不同的文化與性別對這個視錯覺的感知,是不一樣的。城里人比鄉下人更容易察覺到這個問題(譯者:什么鬼……)。這是因為鄉下人更習慣于居住在圓形的房間里。


        3. 馬赫帶效應

        一個「并不存在」的陰影投射到物體表面,會不會是錯覺?

        20180227140318588.gif

        馬赫帶。


        把同色的漸變毗鄰擺放是一個常見的扁平化設計手法。仔細看,你可能注意到一個「并不存在」的陰影出現在兩個對比色塊相接的邊緣。這個視錯覺被稱作「馬赫帶」。圖像并未加入陰影,只是我們的眼睛產生了錯覺而已。

        20180227140318318.jpg

        每行的邊緣都出現了陰影。


        從技術層面解釋這個現象成因即是生物學上的「側抑制」,通俗的說就是暗的一側顯得更暗,亮的一側顯得更亮。

        雖然馬赫帶效應在視覺設計中十分細微,不過論及它的影響,即便是牙醫都對其感到頭疼。X射線照射到牙齒上生成灰度圖像,用來解析 (牙齒) 異常變化的強度。如果不仔細辨別,馬赫帶效應可能會產生假陽性診斷結果。


        4. 赫林錯覺

        看起來像活的!

        20180227140319277.gif


        赫林錯覺。


        你有未遇見過這種 logo:包含很多細線條或者布滿小點的背景圖,當你上下滾動頁面時它看起來像是在移動或者像脈搏一樣跳動?又或者說在某視頻中出現的電視,電視屏幕里包含的諸多波浪線?若如此,是由于「摩爾紋」的干涉現象—兩種柵格紋理相互覆蓋,移動時產生的視錯覺。

        案例中的兩個柵格紋理分別是圖像和持續刷新的顯示器,從而產生了錯覺。

        20180227140318721.jpg


        上下滾動,即可看到震顫效果。


        還蠻酷的。雖然摩爾本身并非指代視錯覺,而是干涉圖案。此處 Sonos 標志樣例使用了包括摩爾圖案,赫林錯覺和動視錯覺的手法組合。這種感官技術在歐普藝術 (又稱視幻藝術) 中非常流行。


        5. 赫曼柵格

        出現,抑或不現,這是個問題。

        20180227140318899.gif

        赫曼柵格。


        赫曼柵格非常受歡迎,你可以在很多高對比度背景的柵格布局中發現它的身影。直接盯著任意方塊,在周圍方塊的交叉口會產生幽靈般的斑點。但當你嘗試轉向那個斑點時,它就會神奇的消失掉  。

        20180227140318975.jpg

        當你盯著交叉口時,灰點會出現。


        產生這個效果的原因呢—和前邊一樣—「側抑制」。簡單來說,即是興奮狀態的神經元可以削弱周圍神經元方向上的視訊號。


        6. 同時對比錯覺

        兩個分開的方塊亮度相同嗎?

        20180227140319297.gif

        同時對比錯覺


        把兩個同色的物體分別放在不同對比度的背景色上,會使兩個物體呈現出不同的顏色。這種現象被稱為「同時對比錯覺」。在視覺設計世界中,這種現象號稱「對比之王」,而且這個效果對于不同人可能看起來不同。

        20180227140319187.jpg

        文字色彩完全相同, 但是看起來卻并非如此。


        這種現象成因沒有科學定論,但有很多相關探索。「側抑制」—同赫曼柵格與馬赫帶一樣—也被認為是此現象成因之一。


        7. 芒克白錯覺

        是眼睛忽悠了我嗎?

        20180227140319616.gif

        芒克白錯覺。


        這個錯覺相當細微,卻迷人無比。看上圖,左側的紫色塊看起來比右邊的明度要高一些。但是合并之后,兩側的色塊其實明度是完全一致的  。

        20180227140319389.jpg

        芒克白錯覺的成因嘛,你猜猜看?

        恩,還是「側抑制」。


        8. 水彩錯覺

        欺騙性上色……

        20180227140319725.gif

        水彩錯覺。


        有幾次,當我給一個形狀加上色彩邊框時,不禁奇怪:“我什么時候把背景色也給改了?”。如果仔細看,可能注意到白色區域產生了與邊框相同但是淡得多的投影。但,你其實知道那些淡色投影區域實際上是白色的!

        這個現象被稱作「水彩錯覺」,色彩的擴散效果取決于輪廓線亮度與對比度的組合。

        20180227140319510.jpg

        按鈕內的白色區域看起來像是被邊框染了些許顏色。


        我承認被這個錯覺誤導過不少回—以至于我調出了拾色器來檢查它。


        9. 加斯特羅圖形

        Size 真的很重要嗎?

        20180227142344370.gif

        加斯特羅圖形


        插畫或 logo 設計中,會遇到標志或字體需切割成不同形狀的情況。上圖的錯覺會在設計對象是弧形時發生。此二元素看著大小不同,但仔細檢查一下就會發現,它們完全一樣!

        工作在一幅插畫或 logo 上,不論是個標志或字體需要切割成不同的形狀。這個錯覺在工作對象是弧形時就會發生。此二元素看起來大小不同,但是仔細檢查一下就會發現,它們完全一樣!是不是有點脫線?

        20180227142445621.jpg

        這幅插畫在創作過程中,一些本應相同的圓弧卻看起來比其他的要小。


        怎么可能?其實這便是周知的「加斯特羅圖形」,也沒有確定的科學解釋,為什么我們看到各部分大小不同。一個可能的緣由是,我們大腦被大小半徑的差異迷惑了。換句話說,短邊襯托使長邊顯得更長,而長邊襯托使短邊顯得更短。


        10. 康士維錯覺

        狡猾的斜面。

        20180227142605171.gif

        康士維錯覺


        「康士維錯覺」用了漸變的同時,也加入了中心線來創造一個圖像,使其一邊比另一邊要暗。但事實是,兩邊是一樣的!當你把每個部分平行排放時,就會發現兩邊實際上完全相同。

        20180227142711214.jpg

        每個菱形都有同樣的漸變,但是它們整體看起來越來越暗 (從上而下)。


        這個視錯覺與之前提過的兩個有相似之處,但有兩個重要的不同:

        在馬赫帶效應的示例中,效果只在接近色塊邊緣處才出現。但是康士維錯覺影響到整個區域。

        在康士維錯覺中,較亮部分的邊緣顯得更亮,較暗部分顯得更暗。這同一般的「對比效果」是相反的。


        11. 米勒-萊爾錯覺

        文字亦瘋狂!

        20180227142816127.gif

        對于「視覺補正」最直觀的感知。


        字體設計師都知道,創造一個字體更多依賴直覺,而非邏輯思考。排字時若遵循數學意義的精確,基于它的公制高度,會使得整個單詞視覺上顯得不成比例。關于「字體力學」的一個樣例中,引入了一個叫「視覺補正」的概念。簡而言之,所謂補正即重新調整單獨字體大小,以求得視覺效果上的平衡感。

        20180227142927242.jpg

        沒有視覺補正的話,Linkedin 中的字母 “e” 和 Amazon 中的字母 “z” 就無法視覺平衡。

        看看上邊這些著名的 logo,一些字母并未乖乖待在基線和X高度里。字體設計師不得不手動調整每個字母以便達到最佳視覺效果。


        我們何以需要在字體設計中運用補正?

        因為米勒-萊爾錯覺。這個視覺現象表明將一個V型記號放到線段兩端可能造成其顯得比實際更短或更長,(長短) 取決于V型記號的朝向。這個經典的錯覺證明了人類感知錯誤。

        20180227144230597.jpg

        米勒-萊爾錯覺。




        作者:Balraj Chana   翻譯:主物質界面

        譯自: https://blog.prototypr.io/11-optical-illusions-found-in-visual-design-295e7ae211b9





        責任編輯:大同

        認可我的創作,就鼓勵一下吧

        0人打賞
        分享至:

        聯系客服

        故障反饋