視覺原理在當(dāng)下紅火的機(jī)械視覺中是必不可少的，那在我們?nèi)粘９ぷ鞯腢I產(chǎn)品設(shè)計中又有什么可能性的呢？今天，我從“視錯覺”這個角度，探索下如何運用在UI上。

第一篇：視錯覺歷史

古希臘哲學(xué)家亞里士多德的《靈魂論》里闡述了人類五感：視覺、觸覺、味覺、嗅覺和聽覺。我們視覺設(shè)計師暫時無法在長方形盒子（泛指各種電子設(shè)備）內(nèi)設(shè)計味覺、嗅覺和聽覺，而對于觸覺，說到底，我們始終在與這個長方形盒子接觸，并無法通過對設(shè)計內(nèi)物體的真實觸摸而得到感覺，實際伸出手探尋或步行而感受到距離等，去比較大小、距離等進(jìn)行認(rèn)知。因為這個客觀存在，也更加需要我們視覺設(shè)計師運用視覺原理與技法讓用戶更容易與機(jī)器進(jìn)行交互。因著這樣的認(rèn)識， 我思考了以下這些可能性：

1. 蓬佐錯覺-Line

蓬佐錯覺是有關(guān)長短的視錯覺。自從意大利心理學(xué)家馬里奧.蓬佐(Mario Ponzo,1882~1960)發(fā)表了相關(guān)論文后，這一視錯覺便被稱為蓬佐錯覺，但在這之前，它就早已被人們所熟知。

上圖上下并列的兩條橫線，上面的看起來比下面的長。有一種觀點認(rèn)為這是因為橫線外側(cè)的斜線使大腦覺得有縱深感，認(rèn)為上面的線更遠(yuǎn)一些。長度相同的線段，位于遠(yuǎn)處的應(yīng)該更長一些，因此上面的橫線會讓人覺得比下面的短。

這一視錯覺在UI運用上，第一個讓我想到的就是Input、Cell或段落間的分割線。各App的長短不同，大多數(shù)App都按照iOS或Android Guideline，在各控件左右留P的距離。也有一些不走尋常路的App。

圖1（1.攝影圖片分享app－iOS系統(tǒng)；2.回家吃飯－iOS系統(tǒng)；3.記賬軟件－Android系統(tǒng)）

?圖2（1.日志軟件－Android系統(tǒng)；2、3.Uber-iOS系統(tǒng)）

圖1截取iOS與Android系統(tǒng)上一些App，設(shè)計師使用非常規(guī)P距離線。圖2截取了各平臺App左右不留間距的線。從這兩張圖我們可以看到使用各種長短線的都有，并沒有統(tǒng)一標(biāo)準(zhǔn)，最主要是你想要表達(dá)什么？在這里蓬佐錯覺是否能幫助到你的UI表達(dá)。

手機(jī)屏幕的邊界就如蓬佐錯覺中外側(cè)斜線，分割線與邊界的距離就能讓人對間隔中左右信息產(chǎn)生或長或短的感受，易讀性也成為考量的一點。在App設(shè)計中，全局規(guī)范考慮是非常重要的，滿足了單個頁面的視覺需要是遠(yuǎn)遠(yuǎn)不夠的，前端開發(fā)害怕的是沒有邏輯規(guī)則的不同，只要定義好功能規(guī)范，即使在不同界面使用不同線長短也不是大問題。

簡言之，在定義Line長短時，我們可以更多思考為什么要留邊距，留多少合適，為什么確定這樣的長短，是否有邏輯可循，考慮過全局性了嗎，是否與品牌相合，是否能傳達(dá)出視覺故事等等。

2. 艾賓浩斯錯覺-Space

赫爾曼*艾賓浩斯（Hermann Ebbinghaus）是著名的研究人類記憶的心理學(xué)家，出生于德國，任職波蘭布雷斯勞大學(xué)教授。他主要研究人類如何進(jìn)行持續(xù)性記憶的（題外話：艾賓浩斯記憶曲線非常有名）。上圖是他發(fā)現(xiàn)的視錯覺圖。位于中間的兩個橘黃色的圓大小相同，但是看起來右側(cè)的明顯偏大。右側(cè)橘黃色圓的四周是小圓，所以看起來比實際的大，而左側(cè)的橘黃色圓周圍是大圓，因此它看起來比實際的要略小。

Representations of the (A) Ebbinghaus-Titchener size-contrast illusion and (B) Delboeuf illusion.

艾賓浩斯錯覺在實際應(yīng)用中非常廣泛，利用我們身邊的東西，進(jìn)行排列組合，就可以確認(rèn)發(fā)現(xiàn)視錯覺。艾賓浩斯錯覺加上德勃夫錯覺（Joseph Delboeuf illusion）和萬辛克（Dr.Brian Wansink）、薛爾特·梵·依特森博士（Dr.Koert van Ittersum）的研究證實，人們的進(jìn)食量會被盤子的大小與顏色所影響，也就是說，我們會被這些視錯覺而影響真實行為。

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.?備注3

在食物與餐具的關(guān)系中，已經(jīng)被證實的結(jié)果能否在我們UI界面中運用呢？

上圖是根據(jù)Google color tool搭配出的兩組配色，左右圖中空間格局完全相同，但運用不同深淺，色相會給人有左邊空間更狹窄，而右邊更寬闊的感受。

左右圖中的原點大小其實是完全一致，但在左圖中感覺較小，而右圖較大。艾賓浩斯錯覺與德勃夫錯覺能在界面空間上起到明顯作用，我們可以遵循這個理論工具為我們的設(shè)計服務(wù)，更好的表達(dá)功能重點，在空間中體現(xiàn)結(jié)構(gòu)關(guān)系。

3.卡尼莎三角–Iconography & Texture

蓋塔諾*卡尼莎（Gaetano Kanizsa,1913~1993）是意大利心理學(xué)家。他在意大利的里雅斯特建立了“心理學(xué)研究所”，為意大利心理學(xué)研究做出了巨大貢獻(xiàn)。

在卡尼莎發(fā)現(xiàn)的視錯覺中，最有名的是發(fā)表于1955年大家所熟知的下面的“卡尼莎三角”。這個視錯覺表明我們的大腦把實際上不存在的三角形輪廓線畫了出來。我們把根本不存在的輪廓線稱為“主觀輪廓”。

上圖可以看到，在圖形的中心有一個實際上并不存在的白色三角形。這是因為大腦在觀察的時候自發(fā)將線段連接起來形成了完整的圖形，而且這個視錯覺在各種類似圖形上都成立。

卡尼莎不僅作為心理學(xué)家取得了巨大的成就，他也是一位活躍的畫家。在她的繪畫中也不乏利用視覺錯創(chuàng)作的作品。

?Gaetano Kanizsa,[Omenone] 1977- olio su tela.?cm50x70

Gaetano Kanizsa,[Uovo] 1975- olio su tela. cm50x70

卡尼莎錯覺其實可以在UI的Graphic中運用，當(dāng)然，每個設(shè)計師都要評估這個工具是否與公司品牌與視覺語言相和。

在市面上暫未看到完全運用卡尼莎錯覺的icon作品，但我們時常看到未鏈接完成的icon設(shè)計，但這些未鏈接完全的icon并不會造成我們認(rèn)知上困難，這是因為大腦幫助我們自動補(bǔ)全。

而說到材質(zhì)，我們不得不提到Google推出Material Design（之后簡稱為MD）后，MD在Graphic明暗交界處使用了顆粒狀來表達(dá)材質(zhì)，這是MD紙質(zhì)表達(dá)的延續(xù)。

在Graphic中，大家也慢慢開始沿用MD的材質(zhì)表達(dá)，之前某廠App升級也在Graphic的材質(zhì)上做了更加大顆粒全圖片材質(zhì)表達(dá).

從圖形、顏色、材質(zhì)本身來說沒有任何問題，在手機(jī)上顯示也是挺漂亮，但這個顆粒感材質(zhì)是如何與全局視覺體系聯(lián)系的？在仔細(xì)閱讀了他們設(shè)計概念／思路中“視覺打法”這一段，并沒有找到答案。作為同行，也沒能在產(chǎn)品中看出些材質(zhì)統(tǒng)一性的端倪來，現(xiàn)在看只是為了做材質(zhì)而做材質(zhì)，在整體材質(zhì)上并沒有貫通。

提出卡尼莎錯覺可以嘗試運用在icon或graphic設(shè)計中，可以更開闊思維，多做嘗試，小小圖片也有大大世界。

4. 馮*貝措爾德效應(yīng)–Color

在太陽照射的光波中，可見光是非常狹小的，我們只能看到區(qū)間在400-700nm的波長

在了解色彩視錯覺前，我們需要知道什么是色彩。在學(xué)習(xí)什么是色彩時，有一個理論讓我非常詫異——色彩是大腦的感覺。感覺？什么！我看到的花花世界都是感覺？

接著，我來轉(zhuǎn)述一下為什么說色彩是大腦的感覺。“光照射到蘋果上，而蘋果表面只反射特定波長的光，其他光會被吸收，所反射的特定波長的紅光被人收入眼簾，那么感覺就是紅色。

現(xiàn)代科學(xué)表明，由于不同對象反射光的波長不一樣，人類才能感受到各種各樣的色彩。而且，映入眼簾的光北視網(wǎng)膜細(xì)胞轉(zhuǎn)換成信號，通過神經(jīng)傳達(dá)給大腦，至此才第一次有“是紅色”的感覺。但是，有時候?qū)ο嗤ㄩL的光也會有不同的色彩感覺，那就是視錯覺?！?/p>

也就是說，在日常生活中，如衣服上看到的色彩，并非色彩本身，而是吸收波長后再反射的色彩，染料本身的顏色未必是最終我們看到的顏色，其中的原理如同上面那個蘋果的光學(xué)反應(yīng)。

上圖看到 1.那里有一條明顯的豎著的亮線，2.那里有一條明顯的豎著的暗線。但是將線與其他部分相比較，并非更亮或更暗一點。從1.到2.只是慢慢變暗。這種視錯覺被稱為馬赫帶，是大腦為了清除區(qū)分明暗分界線而產(chǎn)生的。

了解了我們大腦是如何認(rèn)知色彩后，我們再來看一下什么是色彩同化？

上圖中左右兩邊顏色完全一致，但中間顏色被周遭顏色影響。

當(dāng)一種顏色被另一種顏色包圍，或者另一種顏色作為背景的時候，那么這種顏色就會看起來很接近周圍的顏色或者背景顏色，我們把這一現(xiàn)象稱之為色彩同化。它屬于一種色彩視錯覺，又被稱作馮*貝措爾德（Wilhelm von Bezold，德國氣象學(xué)家，1837-1907）效應(yīng)。

通常我們定義App色彩調(diào)性有幾種常用類型：無色彩、單一主色、主次色彩搭配。色彩視錯覺的色彩搭配讓我想到了MD的色彩Guild-line，在不同色彩環(huán)境中無論哪種類型，都能通過周圍色彩來影響主色，并讓周圍色幫助你表達(dá)App的情感。

所有的理論工具都是服務(wù)與你想要表達(dá)的中心思想，無論這個思想是為了推品牌，還是只想把單個頁面功能做好，我們需要記得要在視覺各細(xì)節(jié)中始終讓其貫徹。在此，我只是拋一些磚，一切都只是個開始，希望能幫助到大家在各自的產(chǎn)品上有更多的嘗試?；ヂ?lián)網(wǎng)視覺設(shè)計才剛剛開始，需要我們一起努力！

最后附上彩蛋，讓我們一同看看在未意識到有視錯覺這一概念的公元前，人們創(chuàng)造出的藝術(shù)作品。

在意大利首都羅馬的人民廣場（Piazza del Popolo）上有兩座建于17世紀(jì)的雙子教堂。右側(cè)的教堂面積大于左側(cè)的，但右側(cè)的教堂屋頂扁為橢圓形，因此看起來保持了平衡。

生于16世紀(jì)佛蘭德地區(qū)（現(xiàn)跨越比利時、荷蘭、法國的一個區(qū)域）的畫家彼得*保羅*魯本斯（Peter Paul Rubens）的《耶穌下十字架》。右側(cè)穿黑色衣服的人物所登的梯子，在人物的上方和下方錯開了（下圖）。有一種觀點認(rèn)為，魯本斯注意到如果畫成直線的話就會出現(xiàn)波跟多夫錯覺（大家自己去查吧～），梯子會看起來上下錯開，因此才特意將梯子上下錯開畫。這個觀點由加拿大溫尼伯大學(xué)的陶珀（D.R.Topper）發(fā)表于1984年。

紅色線是下面的梯子向上的豎直延伸。原本應(yīng)該按照這個線畫出來的，但實際上梯子畫在藍(lán)色線位置。

• 注1：1990年代，整個網(wǎng)絡(luò)向公眾開放。1991年8月，蒂姆·伯納斯-李在瑞士歐洲核子研究組織創(chuàng)建了HTML、HTTP和最初幾個網(wǎng)頁之后兩年，他開始宣揚(yáng)其萬維網(wǎng)項目。在1993年，Mosaic網(wǎng)頁瀏覽器被發(fā)布了，在1994年晚期，公共利益在前學(xué)術(shù)和技術(shù)的互聯(lián)網(wǎng)上穩(wěn)步增長。1996年，“Internet”（互聯(lián)網(wǎng)）一詞被廣泛的流傳，不過是指幾乎整個的萬維網(wǎng)。文中的21年是從1996年互聯(lián)網(wǎng)這次名詞被廣泛傳播開始算的。
• 注2：最為大家所熟悉的心理學(xué)初期的視錯覺“弗雷澤錯覺”。1908年由詹姆斯*弗雷澤發(fā)表?？雌饋硎且粋€向中心旋轉(zhuǎn)的漩渦，但實際上只是大小不同的圓排列在一起，沿著線并不能走到中心點。
• 注3:圖片選自論文Plating manifesto(II):The art and science of plating

作者：Kana

本文由@點融黑幫（ID：DianrongMafia）原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議