郭云云 張宇紅 （江南大學(xué) 214122）

視錯(cuò)覺的成因及其在界面設(shè)計(jì)中的應(yīng)用

郭云云 張宇紅 （江南大學(xué) 214122）

界面設(shè)計(jì)是平面設(shè)計(jì)中的一個(gè)特殊門類，與視錯(cuò)覺有著密不可分的聯(lián)系。從以視錯(cuò)覺形成的生理原因及心理原因?yàn)橹饕獌?nèi)容的人自身因素和以具有多義性形象及具有強(qiáng)烈感官刺激物為主要內(nèi)容的外部因素作為切入點(diǎn)分析了視錯(cuò)覺的形成原因。并以光源來自上方、透視、格式塔原理、旋轉(zhuǎn)彩柱錯(cuò)覺這些常見的視錯(cuò)覺原理或現(xiàn)象為基礎(chǔ)，結(jié)合相關(guān)設(shè)計(jì)案例講解其在界面設(shè)計(jì)中的應(yīng)用，以此驗(yàn)證將視錯(cuò)覺原理或現(xiàn)象引入到界面設(shè)計(jì)中的可行性。在此基礎(chǔ)上，提出設(shè)計(jì)師可以利用視錯(cuò)覺原理或現(xiàn)象使界面設(shè)計(jì)更加具有科學(xué)性，進(jìn)而使其愈加符合人類的視覺和認(rèn)知規(guī)律。

視錯(cuò)覺；界面設(shè)計(jì)；應(yīng)用；科學(xué)性

隨著互聯(lián)網(wǎng)的飛速發(fā)展，以及多媒體信息技術(shù)、計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的日益普及，現(xiàn)在社會已進(jìn)入“電子閱讀時(shí)代”。圖形也逐漸成為一種超越語言的表達(dá)方式，人們可以直接從表面就能迅速讀懂意思，而不存在語言障礙1。但事實(shí)上，因?yàn)橐曞e(cuò)覺的存在，眼睛告訴人們的不一定是準(zhǔn)確的。眼睛會因?yàn)槟撤矫娴脑?，不自覺地“欺騙”人們。在設(shè)計(jì)學(xué)中，這種“欺騙”可被運(yùn)用而使設(shè)計(jì)作品更易于讓用戶接受。

一、視錯(cuò)覺的成因

一般而言，視錯(cuò)覺的成因分為兩個(gè)方面：人自身的因素和外部的因素。

（一）人自身的因素

正如藝術(shù)家貢布里希所說：“觀看從一開始就是有選擇的，眼睛對樣本做出什么樣的反應(yīng)，取決于許多生理與心理因素?！?

1.視錯(cuò)覺形成的生理因素

從生理方面來講，眼睛觀察物體形成圖像，后通過視覺神經(jīng)直接將圖像傳入大腦，最后大腦會對其進(jìn)行分析解讀，并做出反應(yīng)。但人類視覺系統(tǒng)不僅輸入外界信息，而且會主動(dòng)解釋信息。當(dāng)其解釋與實(shí)際不符時(shí)，就會產(chǎn)生視錯(cuò)覺。視覺恒常性是指視知覺根據(jù)視覺經(jīng)驗(yàn)糾正了視網(wǎng)膜上成像的變化，從而保持了視覺對象原有的恒常狀態(tài)3。當(dāng)外部條件發(fā)生變化時(shí)，由于視覺恒常性的原因，視覺經(jīng)驗(yàn)會維持大腦內(nèi)原有的物象狀態(tài)，從而與實(shí)際物象不符、發(fā)生矛盾，形成錯(cuò)覺。另外，盲點(diǎn)的“填充現(xiàn)象”也屬于此類。

2.視錯(cuò)覺形成的心理因素

在心理方面，現(xiàn)在也有幾種比較成熟的理論，如格式塔心理學(xué)的完形心理學(xué)、貢布里希在《藝術(shù)與錯(cuò)覺》中提出的“等等原則”以及先驗(yàn)假設(shè)等。像弗雷澤螺旋線實(shí)際上只是同心圓，但看起來卻是螺旋線。由于圖中的圓并不是由簡單的線形構(gòu)成，而是有黑白兩色交替形成；而且其他部分是由黑、白、灰交叉并由粗到細(xì)的弧線填充起來的。在人類的經(jīng)驗(yàn)中，上述兩者都是產(chǎn)生螺旋感的因素，于是就造成了對這幅圖的錯(cuò)覺。這種心理上的超前預(yù)測，就是將先前的經(jīng)驗(yàn)和印象應(yīng)用到新看到的相似事物上去，由此產(chǎn)生視錯(cuò)覺。

（二）外部的因素

一般來講，產(chǎn)生視錯(cuò)覺的外部因素包括兩個(gè)部分：多義性形象和強(qiáng)烈感官刺激物。

1.具有多義性形象

多義性形象，在一個(gè)整體中提供給觀者多層含義，在投射物像的各個(gè)含義的變形過渡中，觀者將一種理解轉(zhuǎn)換為另一種理解4。這種來自外界物象的多義性，使人們在解讀同一個(gè)物象時(shí)會有幾個(gè)合適的答案，從而使其在觀察事物時(shí)產(chǎn)生視錯(cuò)覺。

2.具有強(qiáng)烈感官刺激物

這種刺激體現(xiàn)在形體和色彩的排列、對比中5。人的眼睛在觀看這類事物時(shí)，會產(chǎn)生較明顯的動(dòng)感閃爍效果。著名的赫爾曼柵格錯(cuò)覺就是利用黑白兩色在視網(wǎng)膜上引起的強(qiáng)烈刺激，從而使人在視覺上感覺捉摸不定。外部因素作為一種外界刺激為視錯(cuò)覺的產(chǎn)生提供了客觀條件，大腦才有機(jī)會給出錯(cuò)誤的視覺信息。見圖1，計(jì)算機(jī)界面設(shè)計(jì)左側(cè)的黑按鈕之間，就出現(xiàn)了赫爾曼柵格視錯(cuò)覺現(xiàn)象，使得用戶在使用計(jì)算機(jī)的過程中容易感到視覺疲勞。

二、視錯(cuò)覺在界面設(shè)計(jì)中的應(yīng)用

外界物體反射的光線投射到視網(wǎng)膜上留下的只是二維圖像，大腦將二維圖像轉(zhuǎn)化成三維解釋，而這種解釋往往是單一的。很大原因是大腦對二維圖像的環(huán)境參數(shù)存在“先驗(yàn)假設(shè)”。這些先驗(yàn)假設(shè)是人們在長期生活中無意識積攢下來的，或是在漫長的進(jìn)化過程篩選出來的。

（一）“光照來自上方”——界面設(shè)計(jì)中按鈕設(shè)計(jì)的應(yīng)用

在人類的生存環(huán)境中始終有一個(gè)巨大的光源——太陽。因?yàn)槠涫冀K存在于人類上方，所以在進(jìn)化的過程中形成了“光源來自上方”的假說。在這個(gè)假說中，凸起的物體會使下部產(chǎn)生陰影，凹陷的物體會在上部產(chǎn)生陰影。所以在圖1和圖2中就會出現(xiàn)按鈕的下半部分出現(xiàn)陰影就意味著按鈕是凸的，上半部分出現(xiàn)陰影則代表按鈕是凹的的現(xiàn)象。世界在人們眼中只是一張二維圖片，由于引入了“光源來自上方”這個(gè)先驗(yàn)假設(shè)，從而大腦將圖片中的元素解釋成了具有凹凸感的三維圖片。

圖4中的圖標(biāo)，光源來自左上方，另在右下方有一強(qiáng)烈的反光。這些光源代替了前面所講的視覺先驗(yàn)假設(shè)“光源來自上方”的太陽光。為了虛擬圖標(biāo)中球體受到光的影響，設(shè)計(jì)者為這些球體加上高光和陰影，畫面產(chǎn)生深度，使其更加逼真。

圖2 按鈕簡圖

圖3 按鈕簡圖

圖4 iPhone App Icon

（二）透視——界面設(shè)計(jì)中區(qū)域劃分的應(yīng)用

現(xiàn)實(shí)中人們通過物體大小的變化來判斷遠(yuǎn)近，這也正是透視法能夠在二維平面上創(chuàng)造出三維視覺效果的原理。

透視逐漸被設(shè)計(jì)師運(yùn)用到界面設(shè)計(jì)中去，圖5中設(shè)計(jì)師將手機(jī)界面用五條具有透視關(guān)系的斜線分割成四部分。界面上部中央有一處光源，在其影響下，每個(gè)塊面中所填充的顏色也會隨之改變。線條透視關(guān)系的變化加上由深到淺、由淺到深的顏色變化，所呈現(xiàn)給人們的就是具有深度的立體空間感——一間房子的內(nèi)部空間。人們會按照平常見到的房間的模樣，也就是利用了上文所講的先驗(yàn)假設(shè)，將每個(gè)面進(jìn)行分配：①面會當(dāng)做房間的地面，②③④面當(dāng)做立面。這一界面就成功地分成了四部分，形成了一個(gè)內(nèi)部空間，每個(gè)部分都是不同功能的載體。每個(gè)部分中的圖標(biāo)或是文字等元素也會隨其所在部分的透視發(fā)生變化。

圖5 手機(jī)界面設(shè)計(jì)

（三）格式塔中的接近性原理——界面設(shè)計(jì)中的元素歸類

從認(rèn)知心理學(xué)角度來說，視錯(cuò)覺是格式塔原理的一種表現(xiàn)形態(tài)。

格式塔原理中的接近性原理說的是物體之間的相對距離會影響我們感知它們是否以及如何組織在一起6。當(dāng)視覺元素距離很近時(shí)，可以用“貼近”一詞來形容這種狀態(tài)，此時(shí)也可以看做是歸類。將這一原理運(yùn)用到界面的設(shè)計(jì)中，則是相關(guān)產(chǎn)品我們可以使用類似的視覺展現(xiàn)，減少用戶界面上的視覺凌亂感和代碼數(shù)量7。

根據(jù)接近性原理，可以通過拉近某些對象的距離，同時(shí)拉遠(yuǎn)與其他對象的距離，使它們成為視覺上的一組，從而省略線框，見圖7。在進(jìn)行界面元素排布時(shí)，文字與文字、圖片與圖片、按鈕與按鈕之間近遠(yuǎn)關(guān)系的運(yùn)用，也使得界面的整體劃分更加規(guī)范和易識別，從而形成若干個(gè)相關(guān)的視覺元素集合。但是相反地，如果元素?cái)[放的位置不合理，比如，元素之間的距離太遠(yuǎn)，人們就會很難感知到它們是相關(guān)的，因此帶來的用戶體驗(yàn)比較糟糕。

圖6 格式塔原理接近性

圖7 界面中的接近性原理

（四）旋轉(zhuǎn)彩柱錯(cuò)覺——界面設(shè)計(jì)中的進(jìn)度條

理發(fā)店門前會放一個(gè)360°在橫向上轉(zhuǎn)動(dòng)的轉(zhuǎn)筒，但我們看到的卻是在縱向上的移動(dòng)。

同理，如圖8矩形框中的黑白條塊其在動(dòng)時(shí)顯示的是黑白條塊的下移，垂直的邊框使得垂直運(yùn)動(dòng)主導(dǎo)了視覺方向。而在圖9中，透過圓形看到的黑白條塊則是往右下方移動(dòng)，因?yàn)閳A形在縱向和橫向上沒有區(qū)別，所以眼睛反饋的信息是向右下方，而不是水平或是垂直方向。在界面設(shè)計(jì)中的進(jìn)度條就是采用了這一原理，如圖10所示。進(jìn)度條中矩形水平方向上的長度要遠(yuǎn)遠(yuǎn)大于其在垂直方向上的長度，水平運(yùn)動(dòng)主導(dǎo)了我們的視覺，所以感受到的是進(jìn)度向右滾動(dòng)，而不是向上。

如圖11，應(yīng)用茄子快傳中，設(shè)計(jì)師為了表達(dá)應(yīng)用一直在不停的運(yùn)作這一概念，從常見的進(jìn)度條中獲取靈感，在原有深藍(lán)色圓的基礎(chǔ)上添加了淺藍(lán)色圓的設(shè)計(jì)。其中深藍(lán)色圓是表達(dá)當(dāng)前傳輸?shù)恼w進(jìn)度，而淺藍(lán)色圓是以一個(gè)既快而又舒適的速度一直不停地?cái)U(kuò)大縮小，以此來表達(dá)傳輸一直在進(jìn)行。

圖8 矩形中的黑白色塊

圖9 圓形中的黑白色塊

圖10 進(jìn)度條

三、結(jié)語

目前仍有界面設(shè)計(jì)人員認(rèn)為界面設(shè)計(jì)的藝術(shù)性占絕對地位，對界面設(shè)計(jì)是否有科學(xué)依據(jù) 持否認(rèn)態(tài)度；仍從直覺出發(fā)進(jìn)行設(shè)計(jì)，離科學(xué)合理的界面設(shè)計(jì)還有一定的距離。要想設(shè)計(jì)出符合人的視覺和認(rèn)知習(xí)慣的界面，就要在設(shè)計(jì)時(shí)遵循人類的視覺和認(rèn)知規(guī)律。將視錯(cuò)覺原理引用到界面設(shè)計(jì)中來，目的是希望界面設(shè)計(jì)能向著理性的方向發(fā)展。如何用視錯(cuò)覺原理來指導(dǎo)界面設(shè)計(jì)并將其正確地應(yīng)用到設(shè)計(jì)中來，是值得我們繼續(xù)投入精力去研究和探討的。

注釋：

1.劉洋.論視錯(cuò)覺圖形在產(chǎn)品設(shè)計(jì)中的應(yīng)用[J].包裝工程，2012.2：114-117.

2.黃繼紅.視錯(cuò)覺在平面設(shè)計(jì)中的運(yùn)用研究[D].蘇州：蘇州大學(xué)，2009.

3.吳文婷.二維視覺，奇幻空間—錯(cuò)覺圖形語言在平面廣告中的作用[D].南京：南京林業(yè)大學(xué)，2011.

4.劉雁.視錯(cuò)覺在現(xiàn)代藝術(shù)設(shè)計(jì)中的應(yīng)用[J].理論學(xué)刊，2005.4：126-127.

5.周東梅.視錯(cuò)覺在環(huán)境空間設(shè)計(jì)中的研究與應(yīng)用[D].上海：東華大學(xué)，2006.

6.R obert J.Sternberg.認(rèn)知心理學(xué)[M].楊炳鈞，陳燕，鄒枝玲.中國輕工業(yè)出版社，2006.

7.Jeff Johnson.認(rèn)知與設(shè)計(jì)[M].張一寧.人民郵電出版社，2011.