UI設(shè)計(jì)師教你使用視覺錯(cuò)覺

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

視錯(cuò)覺歷史

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

一. 蓬佐錯(cuò)覺-Line

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

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

這一視錯(cuò)覺在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)短線的都有，并沒有統(tǒng)一標(biāo)準(zhǔn)，最主要是你想要表達(dá)什么？在這里蓬佐錯(cuò)覺是否能幫助到你的UI表達(dá)。

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

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

二. 艾賓浩斯錯(cuò)覺-Space

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

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

艾賓浩斯錯(cuò)覺在實(shí)際應(yīng)用中非常廣泛，利用我們身邊的東西，進(jìn)行排列組合，就可以確認(rèn)發(fā)現(xiàn)視錯(cuò)覺。艾賓浩斯錯(cuò)覺加上德勃夫錯(cuò)覺（Joseph Delboeuf illusion）和萬辛克（Dr.Brian Wansink）、薛爾特·梵·依特森博士（Dr.Koert van Ittersum）的研究證實(shí)，人們的進(jìn)食量會(huì)被盤子的大小與顏色所影響，也就是說，我們會(huì)被這些視錯(cuò)覺而影響真實(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í)是完全一致，但在左圖中感覺較小，而右圖較大。艾賓浩斯錯(cuò)覺與德勃夫錯(cuò)覺能在界面空間上起到明顯作用，我們可以遵循這個(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ò)覺中，最有名的是發(fā)表于1955年大家所熟知的下面的「卡尼莎三角」。這個(gè)視錯(cuò)覺表明我們的大腦把實(shí)際上不存在的三角形輪廓線畫了出來。我們把根本不存在的輪廓線稱為「主觀輪廓」。

上圖可以看到，在圖形的中心有一個(gè)實(shí)際上并不存在的白色三角形。這是因?yàn)榇竽X在觀察的時(shí)候自發(fā)將線段連接起來形成了完整的圖形，而且這個(gè)視錯(cuò)覺在各種類似圖形上都成立。

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

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

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

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

在市面上暫未看到完全運(yùn)用卡尼莎錯(cuò)覺的icon作品，但我們時(shí)常看到未連接完成的icon設(shè)計(jì)，但這些未連接完全的icon并不會(huì)造成我們認(rèn)知上困難，這是因?yàn)榇竽X幫助我們自動(dòng)補(bǔ)全。

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

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

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

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

四. 馮·貝措爾德效應(yīng)–Color

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

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

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

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

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

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

了解了我們大腦是如何認(rèn)知色彩后，我們?cè)賮砜匆幌率裁词巧释?/span>

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

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

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

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

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

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

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

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

相關(guān)文章推薦--《UI設(shè)計(jì)師可以用這6個(gè)實(shí)用技巧來配色》