視覺(jué)原理在當(dāng)下紅火的機(jī)械視覺(jué)中是必不可少的，那么在我們?nèi)粘９ぷ鞯腢I產(chǎn)品設(shè)計(jì)中又有什么可能性的呢知染？今天肋僧，我從「視錯(cuò)覺(jué)」這個(gè)角度，探索下如何運(yùn)用在UI上控淡。
視錯(cuò)覺(jué)歷史
古希臘哲學(xué)家亞里士多德的《靈魂論》里闡述了人類五感：視覺(jué)嫌吠、觸覺(jué)、味覺(jué)掺炭、嗅覺(jué)和聽(tīng)覺(jué)辫诅。我們視覺(jué)設(shè)計(jì)師暫時(shí)無(wú)法在長(zhǎng)方形盒子（泛指各種電子設(shè)備）內(nèi)設(shè)計(jì)味覺(jué)、嗅覺(jué)和聽(tīng)覺(jué)涧狮，而對(duì)于觸覺(jué)炕矮，說(shuō)到底么夫，我們始終在與這個(gè)長(zhǎng)方形盒子接觸，但是無(wú)法通過(guò)對(duì)設(shè)計(jì)內(nèi)物體的真實(shí)觸摸而得到感覺(jué)肤视，實(shí)際伸出手探尋或步行而感受到距離等档痪，去比較大小、距離等進(jìn)行認(rèn)知邢滑。因?yàn)檫@個(gè)客觀存在护蝶，也更加需要我們視覺(jué)設(shè)計(jì)師運(yùn)用視覺(jué)原理與技法讓用戶更容易與機(jī)器進(jìn)行交互。因?yàn)檫@樣的認(rèn)識(shí)缔逛， 我思考了以下這些可能性：
一. 蓬佐錯(cuò)覺(jué)-Line
蓬佐錯(cuò)覺(jué)是有關(guān)長(zhǎng)短的視錯(cuò)覺(jué)数冬。自從意大利心理學(xué)家馬里奧·蓬佐(Mario Ponzo,1882~1960)發(fā)表了相關(guān)論文后，這一視錯(cuò)覺(jué)便被稱為蓬佐錯(cuò)覺(jué)操灿，但在這之前锯仪，它就早已被人們所熟知。
上圖上下并列的兩條橫線趾盐，上面的看起來(lái)比下面的長(zhǎng)庶喜。有一種觀點(diǎn)認(rèn)為這是因?yàn)闄M線外側(cè)的斜線使大腦覺(jué)得有縱深感，認(rèn)為上面的線更遠(yuǎn)一些救鲤。長(zhǎng)度相同的線段久窟，位于遠(yuǎn)處的應(yīng)該更長(zhǎng)一些，因此上面的橫線會(huì)讓人覺(jué)得比下面的短本缠。
這一視錯(cuò)覺(jué)在UI運(yùn)用上斥扛，第一個(gè)讓我想到的就是Input、Cell或段落間的分割線丹锹。各App的長(zhǎng)短不同稀颁，大多數(shù)App都按照iOS或Android Guideline，在各控件左右留P的距離楣黍。也有一些不走尋常路的App匾灶。
△ 1.攝影圖片分享App－iOS系統(tǒng)；2.回家吃飯－iOS系統(tǒng)租漂；3.記賬軟件－Android系統(tǒng)
△ 1.日志軟件－Android系統(tǒng)阶女；2、3.Uber-iOS系統(tǒng)
圖1截取iOS與Android系統(tǒng)上一些App哩治，設(shè)計(jì)師使用非常規(guī)P距離線秃踩。圖2截取了各平臺(tái)App左右不留間距的線。從這兩張圖我們可以看到使用各種長(zhǎng)短線的都有业筏，并沒(méi)有統(tǒng)一標(biāo)準(zhǔn)憔杨，最主要是你想要表達(dá)什么？在這里蓬佐錯(cuò)覺(jué)是否能幫助到你的UI表達(dá)驾孔。
手機(jī)屏幕的邊界就如蓬佐錯(cuò)覺(jué)中外側(cè)斜線芍秆，分割線與邊界的距離就能讓人對(duì)間隔中左右信息產(chǎn)生或長(zhǎng)或短的感受惯疙，易讀性也成為考量的一點(diǎn)。在App設(shè)計(jì)中妖啥，全局規(guī)范考慮是非常重要的霉颠，滿足了單個(gè)頁(yè)面的視覺(jué)需要是遠(yuǎn)遠(yuǎn)不夠的。前端開(kāi)發(fā)害怕的是沒(méi)有邏輯規(guī)則的不同荆虱，只要定義好功能規(guī)范蒿偎，即使在不同界面使用不同線長(zhǎng)短也不是大問(wèn)題。
簡(jiǎn)言之怀读，在定義Line長(zhǎng)短時(shí)诉位，我們可以更多思考為什么要留邊距、留多少合適菜枷、為什么確定這樣的長(zhǎng)短苍糠、是否有邏輯可循、考慮過(guò)全局性了嗎啤誊、是否與品牌相合岳瞭、是否能傳達(dá)出視覺(jué)故事等等。
二. 艾賓浩斯錯(cuò)覺(jué)-Space
赫爾曼·艾賓浩斯（Hermann Ebbinghaus）是著名的研究人類記憶的心理學(xué)家蚊锹，出生于德國(guó)瞳筏，任職波蘭布雷斯勞大學(xué)教授。他主要研究人類如何進(jìn)行持續(xù)性記憶的（題外話：艾賓浩斯記憶曲線非常有名）牡昆。上圖是他發(fā)現(xiàn)的視錯(cuò)覺(jué)圖姚炕。位于中間的兩個(gè)橘黃色的圓大小相同，但是看起來(lái)右側(cè)的明顯偏大丢烘。右側(cè)橘黃色圓的四周是小圓柱宦，所以看起來(lái)比實(shí)際的大，而左側(cè)的橘黃色圓周圍是大圓铅协，因此它看起來(lái)比實(shí)際的要略小捷沸。
△ Representations of the (A) Ebbinghaus-Titchener size-contrast illusion and (B) Delboeuf illusion.
艾賓浩斯錯(cuò)覺(jué)在實(shí)際應(yīng)用中非常廣泛摊沉，利用我們身邊的東西狐史，進(jìn)行排列組合，就可以確認(rèn)發(fā)現(xiàn)視錯(cuò)覺(jué)骏全。艾賓浩斯錯(cuò)覺(jué)加上德勃夫錯(cuò)覺(jué)（Joseph Delboeuf illusion）和萬(wàn)辛克（Dr.Brian Wansink）姜贡、薛爾特·梵·依特森博士（Dr.Koert van Ittersum）的研究證實(shí)熄捍，人們的進(jìn)食量會(huì)被盤(pán)子的大小與顏色所影響，也就是說(shuō)，我們會(huì)被這些視錯(cuò)覺(jué)而影響真實(shí)行為袱耽。
△ Desserts served on different coloured plates at the Institut Paul Bocuse Research Centre in the study by Piqueras-Fiszman
△ The strawberry-flavoured mousse served from square, round and triangular plates in the study by Piqueras-Fiszman
△ The balanced and unbalanced plate arrangements utilized by Zellner et al. 64. In the coloured presentations, the lines of tahini were green and the dots were red.
在食物與餐具的關(guān)系中蔬崩，已經(jīng)被證實(shí)的結(jié)果能否在我們UI界面中運(yùn)用呢？
上圖是根據(jù)Google color tool搭配出的兩組配色，左右圖中空間格局完全相同，但運(yùn)用不同深淺薪伏，色相會(huì)給人有左邊空間更狹窄借浊，而右邊更寬闊的感受存捺。
左右圖中的原點(diǎn)大小其實(shí)是完全一致，但在左圖中感覺(jué)較小凹嘲，而右圖較大。艾賓浩斯錯(cuò)覺(jué)與德勃夫錯(cuò)覺(jué)能在界面空間上起到明顯作用，我們可以遵循這個(gè)理論工具為我們的設(shè)計(jì)服務(wù)，更好的表達(dá)功能重點(diǎn)，在空間中體現(xiàn)結(jié)構(gòu)關(guān)系。
三.卡尼莎三角–Iconography & Texture
蓋塔諾·卡尼莎（Gaetano Kanizsa,1913~1993）是意大利心理學(xué)家。他在意大利的里雅斯特建立了「心理學(xué)研究所」，為意大利心理學(xué)研究做出了巨大貢獻(xiàn)。
在卡尼莎發(fā)現(xiàn)的視錯(cuò)覺(jué)中，最有名的是發(fā)表于1955年大家所熟知的下面的「卡尼莎三角」。這個(gè)視錯(cuò)覺(jué)表明我們的大腦把實(shí)際上不存在的三角形輪廓線畫(huà)了出來(lái)畸陡。我們把根本不存在的輪廓線稱為「主觀輪廓」曹动。
上圖可以看到斋日，在圖形的中心有一個(gè)實(shí)際上并不存在的白色三角形。這是因?yàn)榇竽X在觀察的時(shí)候自發(fā)將線段連接起來(lái)形成了完整的圖形墓陈，而且這個(gè)視錯(cuò)覺(jué)在各種類似圖形上都成立恶守。
卡尼莎不僅作為心理學(xué)家取得了巨大的成就，他也是一位活躍的畫(huà)家贡必。在她的繪畫(huà)中也不乏利用視覺(jué)錯(cuò)創(chuàng)作的作品兔港。
△ Gaetano Kanizsa,[Omenone] 1977- olio su tela. cm50x70
△ Gaetano Kanizsa,[Uovo] 1975- olio su tela. cm50x70
卡尼莎錯(cuò)覺(jué)其實(shí)可以在UI的Graphic中運(yùn)用，當(dāng)然仔拟，每個(gè)設(shè)計(jì)師都要評(píng)估這個(gè)工具是否與公司品牌與視覺(jué)語(yǔ)言相和衫樊。
在市面上暫未看到完全運(yùn)用卡尼莎錯(cuò)覺(jué)的icon作品，但我們時(shí)忱ǎ看到未連接完成的icon設(shè)計(jì)科侈，但這些未連接完全的icon并不會(huì)造成我們認(rèn)知上困難，這是因?yàn)榇竽X幫助我們自動(dòng)補(bǔ)全炒事。
而說(shuō)到材質(zhì)臀栈，我們不得不提到Google推出Material Design（之后簡(jiǎn)稱為MD）后，MD在Graphic明暗交界處使用了顆粒狀來(lái)表達(dá)材質(zhì)挠乳，這是MD紙質(zhì)表達(dá)的延續(xù)挂脑。
在Graphic中，大家也慢慢開(kāi)始沿用MD的材質(zhì)表達(dá)欲侮，之前某廠App升級(jí)也在Graphic的材質(zhì)上做了更加大顆粒全圖片材質(zhì)表達(dá)崭闲。
從圖形、顏色威蕉、材質(zhì)本身來(lái)說(shuō)沒(méi)有任何問(wèn)題刁俭，在手機(jī)上顯示也是挺漂亮，但這個(gè)顆粒感材質(zhì)是如何與全局視覺(jué)體系聯(lián)系的韧涨？在仔細(xì)閱讀了他們?cè)O(shè)計(jì)概念／思路中視覺(jué)打法這一段牍戚，并沒(méi)有找到答案。作為同行虑粥，也沒(méi)能在產(chǎn)品中看出些材質(zhì)統(tǒng)一性的端倪來(lái)如孝，現(xiàn)在看只是為了做材質(zhì)而做材質(zhì)，在整體材質(zhì)上并沒(méi)有貫通娩贷。
提出卡尼莎錯(cuò)覺(jué)可以嘗試運(yùn)用在icon或graphic設(shè)計(jì)中第晰，可以更開(kāi)闊思維，多做嘗試，小小圖片也有大大世界茁瘦。
四. 馮·貝措爾德效應(yīng)–Color
在太陽(yáng)照射的光波中品抽，可見(jiàn)光是非常狹小的，我們只能看到區(qū)間在400-700nm的波長(zhǎng)甜熔。
在了解色彩視錯(cuò)覺(jué)前圆恤，我們需要知道什么是色彩。在學(xué)習(xí)什么是色彩時(shí)腔稀，有一個(gè)理論讓我非常詫異——色彩是大腦的感覺(jué)盆昙。感覺(jué)？什么焊虏！我看到的花花世界都是感覺(jué)淡喜？
接著，我來(lái)轉(zhuǎn)述一下為什么說(shuō)色彩是大腦的感覺(jué)炕淮。光照射到蘋(píng)果上拆火，而蘋(píng)果表面只反射特定波長(zhǎng)的光，其他光會(huì)被吸收涂圆，所反射的特定波長(zhǎng)的紅光被人收入眼簾们镜，那么感覺(jué)就是紅色。
現(xiàn)代科學(xué)表明润歉，由于不同對(duì)象反射光的波長(zhǎng)不一樣模狭，人類才能感受到各種各樣的色彩。而且踩衩，映入眼簾的光北視網(wǎng)膜細(xì)胞轉(zhuǎn)換成信號(hào)嚼鹉，通過(guò)神經(jīng)傳達(dá)給大腦，至此才第一次有「是紅色」的感覺(jué)驱富。但是锚赤，有時(shí)候?qū)ο嗤ㄩL(zhǎng)的光也會(huì)有不同的色彩感覺(jué)，那就是視錯(cuò)覺(jué)褐鸥。
也就是說(shuō)线脚，在日常生活中，如衣服上看到的色彩叫榕，并非色彩本身浑侥，而是吸收波長(zhǎng)后再反射的色彩，染料本身的顏色未必是最終我們看到的顏色晰绎，其中的原理如同上面那個(gè)蘋(píng)果的光學(xué)反應(yīng)寓落。
上圖看到1.那里有一條明顯的豎著的亮線，2.那里有一條明顯的豎著的暗線荞下。但是將線與其他部分相比較伶选，并非更亮或更暗一點(diǎn)史飞。從1.到2.只是慢慢變暗。這種視錯(cuò)覺(jué)被稱為馬赫帶考蕾，是大腦為了清除區(qū)分明暗分界線而產(chǎn)生的祸憋。
了解了我們大腦是如何認(rèn)知色彩后会宪，我們?cè)賮?lái)看一下什么是色彩同化肖卧？
上圖中左右兩邊顏色完全一致，但中間顏色被周遭顏色影響掸鹅。
當(dāng)一種顏色被另一種顏色包圍塞帐，或者另一種顏色作為背景的時(shí)候，那么這種顏色就會(huì)看起來(lái)很接近周圍的顏色或者背景顏色巍沙，我們把這一現(xiàn)象稱之為色彩同化葵姥。它屬于一種色彩視錯(cuò)覺(jué)，又被稱作馮·貝措爾德（Wilhelm von Bezold句携，德國(guó)氣象學(xué)家榔幸，1837-1907）效應(yīng)。
通常我們定義App色彩調(diào)性有幾種常用類型：無(wú)色彩矮嫉、單一主色削咆、主次色彩搭配。色彩視錯(cuò)覺(jué)的色彩搭配讓我想到了MD的色彩Guild-line蠢笋，在不同色彩環(huán)境中無(wú)論哪種類型拨齐，都能通過(guò)周圍色彩來(lái)影響主色，并讓周圍色幫助你表達(dá)App的情感昨寞。
所有的理論工具都是服務(wù)與你想要表達(dá)的中心思想瞻惋，無(wú)論這個(gè)思想是為了推品牌，還是只想把單個(gè)頁(yè)面功能做好援岩，我們需要記得要在視覺(jué)各細(xì)節(jié)中始終讓其貫徹歼狼。在此，我只是拋一些磚享怀，一切都只是個(gè)開(kāi)始羽峰，希望能幫助到大家在各自的產(chǎn)品上有更多的嘗試“简冢互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)才剛剛開(kāi)始限寞，需要我們一起努力！
最后附上彩蛋仰坦，讓我們一同看看在未意識(shí)到有視錯(cuò)覺(jué)這一概念的公元前履植，人們創(chuàng)造出的藝術(shù)作品。
在意大利首都羅馬的人民廣場(chǎng)（Piazza del Popolo）上有兩座建于17世紀(jì)的雙子教堂悄晃。右側(cè)的教堂面積大于左側(cè)的玫霎，但右側(cè)的教堂屋頂扁為橢圓形凿滤，因此看起來(lái)保持了平衡。
生于16世紀(jì)佛蘭德地區(qū)（現(xiàn)跨越比利時(shí)庶近、荷蘭翁脆、法國(guó)的一個(gè)區(qū)域）的畫(huà)家彼得·保羅·魯本斯（Peter Paul Rubens）的《耶穌下十字架》。右側(cè)穿黑色衣服的人物所登的梯子鼻种，在人物的上方和下方錯(cuò)開(kāi)了（如圖）反番。有一種觀點(diǎn)認(rèn)為，魯本斯注意到如果畫(huà)成直線的話就會(huì)出現(xiàn)波跟多夫錯(cuò)覺(jué)（大家自己去查吧～）叉钥，梯子會(huì)看起來(lái)上下錯(cuò)開(kāi)罢缸，因此才特意將梯子上下錯(cuò)開(kāi)畫(huà)。這個(gè)觀點(diǎn)由加拿大溫尼伯大學(xué)的陶珀（D.R.Topper）發(fā)表于1984年投队。
紅色線是下面的梯子向上的豎直延伸枫疆。原本應(yīng)該按照這個(gè)線畫(huà)出來(lái)的，但實(shí)際上梯子畫(huà)在藍(lán)色線位置敷鸦。
作者：點(diǎn)融DDC
