趙志永

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

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

【中圖分類號】TB472?【文獻標識碼】A?【DOI】10.12215/j.issn.1674-3733.2020.27.034

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

1?手機圖標中的簡化關(guān)系

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

1.1?閉合律

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

1.2?相似律

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

1.3?接近率

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

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

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

2.1?凹凸

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

2.2?閉合輪廓線

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

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

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

4?結(jié)語

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