郭云云 張宇紅 （江南大學 214122）

視錯覺的成因及其在界面設計中的應用

郭云云 張宇紅 （江南大學 214122）

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

視錯覺；界面設計；應用；科學性

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

一、視錯覺的成因

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

（一）人自身的因素

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

1.視錯覺形成的生理因素

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

2.視錯覺形成的心理因素

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

（二）外部的因素

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

1.具有多義性形象

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

2.具有強烈感官刺激物

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

二、視錯覺在界面設計中的應用

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

（一）“光照來自上方”——界面設計中按鈕設計的應用

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

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

圖2 按鈕簡圖

圖3 按鈕簡圖

圖4 iPhone App Icon

（二）透視——界面設計中區(qū)域劃分的應用

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

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

圖5 手機界面設計

（三）格式塔中的接近性原理——界面設計中的元素歸類

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

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

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

圖6 格式塔原理接近性

圖7 界面中的接近性原理

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

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

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

如圖11，應用茄子快傳中，設計師為了表達應用一直在不停的運作這一概念，從常見的進度條中獲取靈感，在原有深藍色圓的基礎上添加了淺藍色圓的設計。其中深藍色圓是表達當前傳輸?shù)恼w進度，而淺藍色圓是以一個既快而又舒適的速度一直不停地擴大縮小，以此來表達傳輸一直在進行。

圖8 矩形中的黑白色塊

圖9 圓形中的黑白色塊

圖10 進度條

三、結(jié)語

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

注釋：

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

2.黃繼紅.視錯覺在平面設計中的運用研究[D].蘇州：蘇州大學，2009.

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

4.劉雁.視錯覺在現(xiàn)代藝術(shù)設計中的應用[J].理論學刊，2005.4：126-127.

5.周東梅.視錯覺在環(huán)境空間設計中的研究與應用[D].上海：東華大學，2006.

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

7.Jeff Johnson.認知與設計[M].張一寧.人民郵電出版社，2011.