人的視覺(jué)規(guī)律在現(xiàn)代設(shè)計(jì)中的體現(xiàn)

趙志永

摘?要： 本文以視覺(jué)心理學(xué)作為理論基礎(chǔ)，將手機(jī)界面視覺(jué)設(shè)計(jì)作為研究對(duì)象，對(duì)手機(jī)界面上的圖形元素以及它們之間的組織關(guān)系進(jìn)行了研究，其中主要是對(duì)簡(jiǎn)化關(guān)系、圖底關(guān)系，層次關(guān)系等方面進(jìn)行分析。

關(guān)鍵詞： 視覺(jué)心理學(xué);手機(jī)界面

【中圖分類號(hào)】TB472?【文獻(xiàn)標(biāo)識(shí)碼】A?【DOI】10.12215/j.issn.1674-3733.2020.27.034

根據(jù)格式塔心理學(xué)，人們的視覺(jué)認(rèn)知過(guò)程具有一定的規(guī)律，視野中離散的刺激可以由于它們彼此之間的某種關(guān)系而被組織在一起，形成一個(gè)整體的感覺(jué)。視覺(jué)上的整體感是界面設(shè)計(jì)趨于成熟的重要特征。從格式塔心理學(xué)所整體論的角度解釋，一款界面的整體感是由單個(gè)視覺(jué)元素按照一定的規(guī)律組織體現(xiàn)出來(lái)的，用戶根據(jù)自己的視覺(jué)經(jīng)驗(yàn)對(duì)界面進(jìn)行判斷，從而降低視覺(jué)壓力，增強(qiáng)視覺(jué)認(rèn)知，從而使操作過(guò)程直觀易懂、高效愉悅。我們的視知覺(jué)是如何將他們組織判斷最終形成一個(gè)視覺(jué)整體的呢？下面將對(duì)這一問(wèn)題做一些分析探討。

1?手機(jī)圖標(biāo)中的簡(jiǎn)化關(guān)系

簡(jiǎn)化關(guān)系屬于視知覺(jué)組織規(guī)律，偏重對(duì)物體的整體感知，它使某些部分之間的關(guān)系看上去比另外部分之間的關(guān)系更加緊密，它主要的簡(jiǎn)化方式就是完形法則，格式塔心理學(xué)中的組織完形法則有一百多種，這里主要涉及到封閉律、相似律、接近律。

1.1?閉合律

閉合可以實(shí)現(xiàn)統(tǒng)一整體，這不難理解。但是不閉合有時(shí)候也會(huì)實(shí)現(xiàn)統(tǒng)一的整體，更確切的說(shuō)，這種現(xiàn)象是一種不完全的關(guān)閉。這些圖形與設(shè)計(jì)給人以簡(jiǎn)單，輕松、自由的感覺(jué)。所以，完全的閉合是沒(méi)有必要的。如圖一和圖二的圖標(biāo)設(shè)計(jì)中，雖然整個(gè)圖標(biāo)輪廓不是閉合的，但給人的感覺(jué)還是閉合的一個(gè)整體。圖三是鳳凰新聞手機(jī)端的最新版本的導(dǎo)航圖標(biāo)，也應(yīng)用同樣的原理。

1.2?相似律

人們通常把那些明顯具有共同特性（如形狀、運(yùn)動(dòng)、方向、顏色等）的事物組合在一起。這種方法在導(dǎo)航和強(qiáng)調(diào)信息部分屬性的設(shè)計(jì)上有著廣泛地應(yīng)用。如圖4，它是蘋果ios8新推出的一個(gè)健身APP，底端的四個(gè)圖標(biāo)在默認(rèn)都是灰色的，但被選擇之后其中一個(gè)就會(huì)變成紅色，那么其他三個(gè)由于相同的顏色就會(huì)被視為一個(gè)整體。

1.3?接近率

接近強(qiáng)調(diào)位置，實(shí)現(xiàn)統(tǒng)一的整體。設(shè)計(jì)中類似的現(xiàn)象還有很多，可以說(shuō)接近是實(shí)現(xiàn)整體的最簡(jiǎn)單常用的法則。如圖5、圖6中的圖標(biāo)，由于線條的接近，圖標(biāo)的整體性也就體現(xiàn)了出來(lái)。

2?手機(jī)界面中的圖底關(guān)系

“圖-底”論是視覺(jué)心理中最基本的一條理論，它認(rèn)為我們知覺(jué)到的客觀世界分為兩部分，即“圖形”和“背景”，圖形是知覺(jué)的中心，具有明顯的外輪廓，背景則是作為圖形的陪襯。一般說(shuō)來(lái)，圖案與背景的區(qū)別度越大，圖形就越突出成為我們的知覺(jué)對(duì)象。在手機(jī)界面的設(shè)計(jì)中，區(qū)分圖底是第一任務(wù)。因?yàn)槭謾C(jī)呈現(xiàn)的是一個(gè)二維空間，這就增大了圖像認(rèn)知的難度，再加上手機(jī)屏幕上內(nèi)容越來(lái)越豐富，突出圖形就顯得很有必要。一般我們采用凹凸、閉合曲線、來(lái)實(shí)現(xiàn)圖和底的分離。

2.1?凹凸

人們一般會(huì)將凹進(jìn)或者平整的事物看做背景，而將凸起的事物看做圖形。在iOS7之前的手機(jī)界面偏愛擬物化設(shè)計(jì)（如圖7），這種設(shè)計(jì)通過(guò)對(duì)現(xiàn)實(shí)中的客觀對(duì)象進(jìn)行一定程度的抽象和簡(jiǎn)化，以降低學(xué)習(xí)和認(rèn)知成本，同時(shí)它也有效區(qū)分了圖底關(guān)系。即使是在扁平化盛行的今天，很多界面依然用投影的方式表示一種凸出形態(tài)以區(qū)分圖底，如圖8。

2.2?閉合輪廓線

一般來(lái)說(shuō)，有封閉輪廓線的形，容易被看做是圖（形象）;反之，容易被看成是底（背景）。當(dāng)事物的輪廓線越大，輪廓線內(nèi)部的點(diǎn)距離輪廓線越遠(yuǎn)時(shí)，這一點(diǎn)受到輪廓線的影響越小，越容易與背景融合;反之，事物圈定的面積越小，其內(nèi)部越容易與背景分離。在手機(jī)界面設(shè)計(jì)中越來(lái)越重視線的使用，以達(dá)到簡(jiǎn)潔的目的。比如iOS7以后的版本按鍵等要素都使用各種“線”來(lái)實(shí)現(xiàn)（如圖9），這就增加了用戶認(rèn)知風(fēng)險(xiǎn)。這時(shí)就要盡量使用閉合曲線以與背景分離。ios8中的撥號(hào)鍵使用了閉合圓形來(lái)達(dá)到分離背景的目的。如圖10。

3?手機(jī)界面的層次關(guān)系

視覺(jué)對(duì)象由于形狀、明暗、色彩的不同，所呈現(xiàn)的層次關(guān)系也不一樣。人的視覺(jué)活動(dòng)會(huì)對(duì)觀察對(duì)象進(jìn)行積極的加工，以使得視覺(jué)層次盡量減少到最低限度。在手機(jī)界面中，有時(shí)我們也需要通過(guò)不同的層次深度來(lái)表達(dá)不同的內(nèi)容。但電子屏幕是完全平面化的，它無(wú)法呈現(xiàn)不同深度的信息內(nèi)容。我們可以通過(guò)虛化模糊背景或者使用card設(shè)計(jì)的方法來(lái)實(shí)現(xiàn)。蘋果iOS應(yīng)用毛玻璃效果把背景模糊成一個(gè)層次，以凸出顯示所要表達(dá)的另一層，如圖11所示。而Google 今年推出的Material Design的解決方式就是把現(xiàn)實(shí)世界中紙張的特性挪到電子屏幕里，把信息內(nèi)容呈現(xiàn)在這個(gè)虛擬的紙上，紙（信息內(nèi)容）跟紙之間有上下層級(jí)關(guān)系，用投影模擬紙張的空間感，投影會(huì)隨著紙張的空間關(guān)系而改變大小，如圖 12。

4?結(jié)語(yǔ)

在現(xiàn)實(shí)使用的手機(jī)界面中，各種視覺(jué)規(guī)律并不是獨(dú)立存在的，通常都是共同發(fā)揮作用。在進(jìn)行界面設(shè)計(jì)時(shí)，應(yīng)遵守格式塔的基本原理，順應(yīng)人的視覺(jué)規(guī)律，使界面更好用、更易用。在完成設(shè)計(jì)之后，可以拿格式塔原則對(duì)各個(gè)設(shè)計(jì)細(xì)節(jié)進(jìn)行檢驗(yàn)和驗(yàn)證，避免為了視覺(jué)效果或特立獨(dú)行而違背人的視覺(jué)規(guī)律。同時(shí)，在設(shè)計(jì)的過(guò)程中，要靈活運(yùn)用視覺(jué)規(guī)律，在符合基本規(guī)律的基礎(chǔ)上做出適度的、合理的創(chuàng)新，不僅讓用戶覺(jué)得產(chǎn)品好用，還要不時(shí)送給用戶驚喜，使用戶愿意留在界面中繼續(xù)探索。