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

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

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

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

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

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

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

一、視錯覺的成因

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

（一）人自身的因素

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

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

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

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

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

（二）外部的因素

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

1.具有多義性形象

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

2.具有強烈感官刺激物

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

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

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

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

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

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

圖2 按鈕簡圖

圖3 按鈕簡圖

圖4 iPhone App Icon

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

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

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

圖5 手機界面設計

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

從認知心理學角度來說，視錯覺是格式塔原理的一種表現形態。

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

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

圖6 格式塔原理接近性

圖7 界面中的接近性原理

（四）旋轉彩柱錯覺——界面設計中的進度條

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

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

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

圖8 矩形中的黑白色塊

圖9 圓形中的黑白色塊

圖10 進度條

三、結語

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

注釋：

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

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

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

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

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

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

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