關(guān)注細(xì)節(jié)！如何將視錯(cuò)覺(jué)運(yùn)用到UI設(shè)計(jì)界面中？

2017/12/6 9:10:43來(lái)源：互聯(lián)網(wǎng)

視覺(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é)，現(xiàn)實(shí)伸出手探尋或步行而感受到距離等，去比較大小、距離等進(jìn)行認(rèn)知。由于這個(gè)客觀存在，也更加必要我們視覺(jué)設(shè)計(jì)師運(yùn)用視覺(jué)原理與技法讓用戶更容易與機(jī)器進(jìn)行交互。由于如許的熟悉，我思考了以下這些可能性：

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

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

上圖上下并列的兩條橫線，上面的看起來(lái)比下面的長(zhǎng)。有一種觀點(diǎn)認(rèn)為這是由于橫線外側(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體系；2.回家吃飯－iOS體系；3.記賬軟件－Android體系

△ 1.日志軟件－Android體系；2、3.Uber-iOS體系

圖1截取iOS與Android體系上一些App，設(shè)計(jì)師使用特別很是規(guī)P距離線。圖2截取了各平臺(tái)App左右不留間距的線。從這兩張圖我們可以看到使用各種長(zhǎng)短線的都有，并沒(méi)有同一標(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è)網(wǎng)頁(yè)的視覺(jué)必要是遠(yuǎn)遠(yuǎn)不夠的。前端開(kāi)發(fā)害怕的是沒(méi)有邏輯規(guī)則的不同，只要定義好功能規(guī)范，即使在不同界面使用不同線長(zhǎng)短也不是大題目。

簡(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)比現(xiàn)實(shí)的大，而左側(cè)的橘黃色圓四周是大圓，因此它看起來(lái)比現(xiàn)實(shí)的要略小。

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

艾賓浩斯錯(cuò)覺(jué)在現(xiàn)實(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）的研究證明，人們的進(jìn)食量會(huì)被盤(pán)子的大小與顏色所影響，也就是說(shuō)，我們會(huì)被這些視錯(cuò)覺(jué)而影響真執(zhí)行為。

△ 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)被證明的效果能否在我們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é)注解我們的大腦把現(xiàn)實(shí)上不存在的三角形輪廓線畫(huà)了出來(lái)。我們把根本不存在的輪廓線稱為「主觀輪廓」。

上圖可以看到，在圖形的中間有一個(gè)現(xiàn)實(shí)上并不存在的白色三角形。這是由于大腦在觀察的時(shí)候自覺(jué)將線段連接起來(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)知上困難，這是由于大腦幫助我們主動(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)有任何題目，在手機(jī)上表現(xiàn)也是挺漂亮，但這個(gè)顆粒感材質(zhì)是如何與全局視覺(jué)系統(tǒng)聯(lián)系的？在細(xì)心閱讀了他們?cè)O(shè)計(jì)概念／思路中視覺(jué)打法這一段，并沒(méi)有找到答案。作為偕行，也沒(méi)能在產(chǎn)品中看出些材質(zhì)同一性的端倪來(lái)，如今看只是為了做材質(zhì)而做材質(zhì)，在團(tuán)體材質(zhì)上并沒(méi)有貫通。

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

四. 馮·貝措爾德效應(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é)就是紅色。

當(dāng)代科學(xué)注解，因?yàn)椴煌瑢?duì)象反射光的波長(zhǎng)不一樣，人類才能感受到各種各樣的色彩。而且，映入眼簾的光北視網(wǎng)膜細(xì)胞轉(zhuǎn)換成旌旗燈號(hào)，通過(guò)神經(jīng)傳達(dá)給大腦，至此才第一次有「是紅色」的感覺(jué)。但是，偶然候?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)很接近四周的顏色或者背景顏色，我們把這一征象稱之為色彩夾雜。它屬于一種色彩視錯(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è)網(wǎng)頁(yè)功能做好，我們必要記得要在視覺(jué)各細(xì)節(jié)中始終讓其貫徹。在此，我只是拋一些磚，統(tǒng)統(tǒng)都只是個(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)為，魯本斯細(xì)致到假如畫(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年。