格式塔心理學視知覺理論在UI扁平化設計中的應用

蘇 毅

(泉州工藝美術職業學院設計藝術系，福建 泉州 362500)

.

一 UI設計的歷史與現狀

(一) UI設計的擬物化進程

設計又稱應用美術，它與日常生活的實際需要緊密相關，風格取向隨時代特點和社會需求而更新換代。數字終端設備作為信息傳遞的最后一站，承載了大量信息流，是大眾生活中不可或缺的一部分。因此，隨著近年來數字終端設備的普及，一個獨立的設計門類——UI設計應運而生。UI是英文User Interface(用戶界面)的縮寫，指的是數字終端顯示屏上最終呈現給用戶觀看的界面。用戶界面的設計關乎用戶對終端的使用體驗，可以說，它是信息傳送的最終呈現方式。人和機械的運行規律存在本質上的不同，人眼具有與視知覺系統相關的特殊認知規律，數字信息則遵循二進制的編碼模式。在這兩者中獲得平衡，研究信息傳輸中的人機交互，是UI設計中的考慮重點。終端界面的呈現形式必須既合乎人類的視覺習慣，又順應大眾的審美需求，并具有一些功能上的特殊要求——數字終端設備要求沉浸式體驗，因此需要一種美觀易讀又不過多分散用戶注意力的設計樣式。

回顧UI設計短暫的歷史，可以發現UI的流行風格經歷了扁平化—擬物化—扁平化的循環。早期UI囿于系統和硬件的局限，只能使用結構簡單的扁平化效果，顯現出冰冷機械的視覺特征。微軟的MS-DOS是早期UI的標志性案例(見圖1)。DOS系統是以功能為中心的命令行式界面的代表，此系統由用戶鍵入指令進行操作，終端顯示器分辨率低，顏色單調，界面僅能顯示用戶輸入及系統回復的行狀指令，不存在可以進行設計的空間，更毋論友好的人機交互效果。由于這種操作方式需要用戶事先掌握復雜的程序語言，在普及上存在一定困難，因而計算機廠商對系統進行了新一輪的研發。早期UI設計史顯示出“以功能為中心”到“以用戶為中心”這一理念上的革命性變化，廠商越來越重視用戶的使用體驗，將良好的人機交互效果作為產品設計的重要部分。

圖1 微軟的MS-DOS

以影響深遠的Windows XP系統(見圖2)為例，窗口的造型在前作的基礎上被渲染得更加真實，出現了自然的高光和陰影等三維視覺的特征，虛擬和現實的差異被擬物化的設計風格所拉近，用戶觀看XP界面的時候，就如同觀看一個真實的窗口。與此同時，蘋果的MACOSX也在設計中加入了擬物化元素。任務欄模擬光潔細膩的透明玻璃式樣，圖標極具真實感，為用戶提供了一個高度仿真的視覺環境。此后十年，UI設計由兩大廠商領頭，在擬物化的軌道上不斷完善，每一次版本升級都對前作UI進行了細節上的優化，精細、仿真、追求身臨其境的交互效果是這個階段UI設計的大方向。

圖2 Windows XP系統界面

(二)UI設計的再次扁平化轉向

UI設計在擬物化道路上精益求精地堅持了十余年，突然迎來了一次顛覆性的逆轉——扁平化風格的再現。2006年，微軟推出了著名的Zune播放器，開始使用類似扁平化的界面設計風格。在接下來的微軟Windows 8 和Windows Phone推出的metro風格UI系統中，扁平化風格令用戶為之驚艷。在手機UI設計領域也是如此，Windows首先推出了Windows Phone 7這一以扁平化風格為主導的手機系統。在此之后，堅持擬物化UI多年的蘋果也在IOS 7中開始拋棄前幾代IOS精細仿真的擬物化風格，取消了陰影、漸變、高光等擬物化細節，代之以扁平化的視覺設計(見圖3)。與曾經盛行的擬物化設計相比，扁平化設計風格完全反其道而行之，極盡簡約之能事，以大色塊和簡明結構概括圖標功能，醒目易讀的視覺效果讓用戶習慣了擬物化UI的雙眼和大腦突然得到解放。在以Windows、蘋果為代表的大廠商實踐下，扁平化風格目前是在UI領域最受歡迎的設計樣式。

圖3 蘋果手機的UI圖標設計

二 扁平化風格的流行原因

扁平化設計又被譯作“最小化設計”“最誠實的設計”，如同其字面意義所言，指的是放棄一切浮雕、斜角、漸變、羽化等能造成立體感、三維感的裝飾，消除景深，放棄模擬材質，僅提取二維平面化的圖像，以平面的色塊和線條組織圖形結構的設計方式。它繼承了瑞士國際主義設計風格，應用數學網格對畫面進行分割達成其醒目理性的視覺效果，具有簡明、直接、友好的特征。而扁平化設計風格的流行，主要有以下三個因素。

(一)認知因素

從發展速度上，扁平化設計相對于擬物化設計更能適應現在及未來信息爆炸的趨勢。時至今日，信息技術引領現代社會進入了一個信息高速流通的“快”時代，數字終端設備形態層出不窮，功能也愈發強大。據近年統計，互聯網中的信息量每年以成倍的速度增長。以2013年為例，2013 年中國產生的數據總量超過0.8 ZB(相當于8億TB)，2 倍于2012 年，相當于2009 年全球的數據總量。預計到2020 年，中國產生的數據總量將是2013年的10倍，超過8.5 ZB[1]。在這樣的現狀下，用戶通過終端接受海量數據時勢必要經過大量篩選。為了在最大限度上簡化篩選過程，在軟件功能方面，近年來系統和第三方軟件本身的模塊設置更加精確，在傳輸過程中設置信息篩選的關卡以準確定位目標信息；在視覺設計方面，則要求可讀性強，以避免過多裝飾細節和材質貼圖的界面圖標形狀對用戶注意力的干擾。從認知心理的角度分析，越是復雜的形象，信息讀取需要的時間越長。因此扁平化設計有利于快速閱讀，能夠適應越來越龐大的信息世界。

(二)技術因素

從扁平到擬物再到扁平，UI設計的流行經歷了一個輪回。第一次扁平化是由于設備技術水平的限制，而第二次則是設計師有意識篩選的結果。擬物化設計的進化伴隨著顯示終端和系統的進步，每一次提升都攜帶著用戶對數碼產品技術的拜物情結。似乎越是精致逼真的界面顯示效果就越能彰顯硬件的高技術水平。但近幾年來，顯示終端的制造技術已經達到了清晰細膩的高水平，系統的提升也只體現在越來越快的運算速度和加大碼的存儲功能上，技術本質上的提高進入新的平臺期，各家廠商轉而致力于在界面設計和操作細節等軟性領域上提升用戶體驗。擬物化設計進行了數十年的改進與實踐，極盡逼真效果的同時也造成了一定程度的視覺疲勞。廠商將與前作擬物化風格截然不同的扁平化風格UI設計作為新版本系統的重要噱頭推出，能夠刺激市場，調動消費者的新鮮感和關注度。

(三)視知覺因素

視知覺屬于知覺范疇。知覺不同于感覺(如視、聽、嗅、味、觸等我們通稱的五感)。感覺是事物個別特征的顯現，而知覺是人對于事物完整形象的把握。視覺心理學家格列高里曾提出：“對物體的視覺包含了許多信息來源。這些信息來源超出了當我們注視一個物體時眼睛所接受的信息。它通常包括由過去經驗所產生的對物體的知識。這種經驗不限于視覺，可能還包括其他感覺，例如觸覺、味覺、嗅覺，或者還有溫度覺或痛覺。”[2]P56就視知覺經驗來說，扁平化設計相較擬物化設計更具優勢。關于人類經驗與圖式的關系，魯道夫·阿恩海姆曾談到：“眼前所得到的經驗,從來都不是憑空出現的,它是從一個人畢生所獲取的無數經驗當中發展出來的最新經驗。因此,新的經驗圖式,總是與過去所知覺到的各種形狀的記憶痕跡相聯系。”[3]P23人們在觀看UI圖標時，也在進行視知覺的活動。界面上的圖形對人的視覺作出提示，引發用戶從個人經驗中提取出意義，繼而作出知覺反應。

擬物化設計存在指代意義狹窄的缺陷，它將意義指定為某個具體的物，這種圖式的呈現方式，有時無法令觀者提取出記憶中的經驗圖式與其相契合，具有一定的局限性。如“錄音機”選項指代為“磁帶”，而磁帶在21世紀初漸漸淡出了人們的生活，對于沒見過磁帶的00后來說，這個意義的指代就讓他們不知所云。而扁平化設計將意義簡化為一般大眾認知中的指示圖形或文字，意義覆蓋更廣，符合大多數人的認知經驗，使用戶順利調動經驗，與界面良好交互。

三 格式塔心理學的視知覺理論

(一)格式塔心理學簡述

格式塔心理學是西方心理學主要流派之一，又稱完型心理學。“格式塔”是德文中“GELSTALT”的音譯，意為“整體”，是一種組織或結構，中文又譯為“完形”。 格式塔心理學認為，人在視知覺過程中，存在一種自然而然追求事物結構完整性的傾向。當客觀事物出現在眼前時，人在心理上會出現一個與之相對應的格式塔，當這個格式塔與客觀事物不相符時，格式塔出現“缺陷”，此時人的內心就會開始產生一種“補完”的活動，彌補事物的客觀缺陷至形成良好的“完形”。格式塔的產生與物本身無關，是人主觀心理世界由知覺經驗進行積累而建構出來的。

格式塔心理學具有很強的普適性。最早提出“格式塔”一詞的艾倫菲爾斯在他的論文《論格式塔特質》中，用格式塔理論對音樂曲調進行分析。他認為音樂曲調并非是由音符與音符連接而成的組合，而是一個內在有機的整體，具有格式塔的特質。整體雖然由部分組成，但不等于部分的相加，而是先于部分，部分不能決定整體。這個理論觀點是格式塔心理學的基礎理論之一，在此之后衛特海默、苛勒和考夫卡繼承了格式塔理論并將之發展為一個心理學流派，以探討人類知覺過程為起點，應用于研究人類學習、記憶、視覺及藝術學等領域。

格式塔心理學對于視知覺的研究真正始于衛特海默的學生魯道夫·阿恩海姆。他將格式塔心理學理論引入視覺藝術研究中，以解釋藝術的理論與實踐問題，使格式塔心理學發展為格式塔心理美學。時至今日，格式塔心理美學在藝術和設計領域還具有重要的理論指導作用。

(二)格式塔心理學視知覺理論在扁平化設計中的應用法則

1.形狀

扁平化設計風格繼承了“少即是多”的現代主義設計傳統，以簡約的造型為主要視覺特征。不過，扁平化設計并非為了拍扁而拍扁。如果單純地將物象平面化再加以簡化，就存在可讀性上的問題和過于機械的弊端。設計師在提煉物象的扁平化形象時，應注意形狀提煉的方法。格式塔心理學視知覺理論認為，人類認識物象時最先關注的是它粗略結構的完形特征，而不是它的某種特殊刺激式樣。“這一刺激物的大體輪廓，在大腦里喚起一種屬于一般感覺范疇的特定圖式，就像科學陳述中，總是用一系列概念組成的網絡，去代替真實的形象一樣。”[4]P53而在面對復雜和零散的形狀時，人的眼睛傾向于把任何一個刺激式樣看成現有條件下最簡單的形狀。格式塔心理學的研究者曾做過實驗，向受試者展示復雜圖形，讓受試者進過短暫的記憶并復述出來。結果他們在記憶過程中，自然而然地對圖形進行了簡化歸納，即進行“整平化”或“尖銳化”(見圖4)。這是兩種對圖形的自然歸納傾向，整平化消除差異，使構圖統一，使不適應的細節消失；尖銳化增強差異，強化特征，消除圖形的模糊性。這兩種歸納傾向都符合人類大腦的認知過程。阿恩海姆認為，當一個刺激式樣投射到作為“力場”的大腦視覺區域時，力場分布被打亂，一經打亂后，場力又會極力恢復平衡。刺激式樣的刺激很清晰時，對象不容易被改造，此時特征加強，呈現“尖銳化”趨勢；刺激式樣力量微弱時，特征被抹平，大腦自動將其規則化，呈現“整平化”趨勢。

圖4 圖形歸納方法

在扁平化設計中選取的圖式形狀以簡單、易認為基本準則。設計師一般從概念出發，提取大眾認知中符合此概念的典型元素作為視覺圖像。但在提取過程中，典型圖形的外觀常常是具有清晰特征的刺激式樣。由于UI一般需要同時顯示大量信息，若干不規則形狀同時出現在同一平面上時，會導致視覺產生尖銳化的認知傾向，令畫面觀感雜亂，因此，在設計圖標和模塊的時候，設計師需要注意圖形特征和形狀的平衡。比如，設計師常常使用規則、對稱的外延形狀和具有典型特征的內部形狀進行組合式設計(見圖5)，或是將對象的外延整平化為對稱圖形(見圖6)，易于辨認，也有利于視覺觀感上的舒適。

圖5 外部規整化圖標設計示例

圖6 整平化圖標設計示例

2.色彩

色彩本身攜帶著信息。雖然作為信息傳遞的工具，形狀比色彩有效得多，但色彩傳遞給觀眾的直觀感受是形狀無法替代的。阿恩海姆認為，對色彩反應的直接特征，是觀察者的被動性和經驗的直接性，而對形狀的知覺則來自觀察者積極的控制。UI設計雖然是一門依附于數字終端制造技術的設計門類，但時至今日，以用戶為中心成為了UI設計師的核心理念。因此，UI設計中的色彩選擇應與UI受眾相關聯。為不同用戶群設計，UI色彩的選擇也不同。諾基亞Windows Phone追求年輕、現代、時尚的工業設計風格，外殼使用明亮的純色，因此搭配了高飽和度的UI配色，令人快速被吸引注意力，十分醒目。一些網站、APP等需要制造特定氛圍的UI場合，常使用符合自身定位的配色方案，如飽和度低，色彩搭配和諧的復古色，給人一種柔和舒適的視覺觀感，適用于生活類、時尚類UI；色彩統一的單一系配色，采用某種主色系搭配黑、白等無彩色，期間點綴2—3種其他色系顏色，形成簡約、嚴謹、冷靜的效果，適合商務類、工具類UI。

3.運動

UI設計不同于平面設計的其中一大特點，在于它不僅承載了信息，并需要將信息按一定結構進行劃分。扁平化設計中的信息規劃，借鑒了現代企業管理中的扁平化管理制度，破除了自上而下的傳統管理結構，采用橫向緊湊的組織結構，達到快捷靈活的操作體驗效果。傳統UI設計的頁面設置上，一般采用層級化劃分方式，這種劃分方式呈樹狀，條理清晰、分類準確，但存在操作繁瑣和操作流程時間長的弊病。扁平化UI設計的頁面設置采用平鋪化的信息劃分方式，縮短信息訪問路徑，將信息平鋪顯示，通過按鈕設置直接指向信息，減少了用戶操作時逐層深入的繁瑣步驟。扁平化UI設計的頁面布局策略最重要的一點是保證用戶的視覺思維沿二維平面延伸，保證用戶視覺查詢的連貫性。在扁平化UI設計中，按鈕之間的邏輯聯系已不再緊密，平鋪在界面上的按鈕將信息展示在同一平面上，用戶在頂層界面即可對不同子模塊進行控制。平鋪式的頁面布局受使用面積的局限，因此在扁平化UI設計中，常常將當前頁面的四邊設置為可卷展的，拓展了使用區域的同時保證了用戶思維的連貫性。為了使用戶能夠最快注意到重點信息，設計師一般會將需要向用戶強調的內容放置在頂部主要位置，將延伸內容放置在卷展欄中。

格式塔心理學的視知覺理論認為，即使是不動的圖形，內部也存在張力和拉力。“我們在不動的式樣中感受到的‘運動’，就是大腦對知覺刺激進行組織時激起的生理活動的心理對應物。”[5]P87圓形的軸線多，拉力互相持平，看上去最為靜止；方形力量向軸線發散，由于其造型對稱，因此也較為穩定；不規則式樣的軸線尖銳，看上去動感強烈。人的視覺中默認的圖形運動方向與它的主軸方向一致或垂直。根據格式塔心理學中對“伽馬運動”的研究，當直線或長方形的空間定向與運動方向一致時，它在通過視域時的運動速度比它們的空間定向與運動方向垂直時快得多。因此，對于頁面的拉升卷展運動方向來說，沿方形主軸上下左右運動是最能提高用戶瀏覽速度，保證思維連續性的運動方式。

扁平化設計基于強烈的功能性取向，其設計美學風格往往傾向于以簡單直接、簡潔親和、簡約悠長為表征的極簡主義。在一定程度上，可以說這是立足功能專注用戶體驗的商業原則之下的對于視知覺格式塔傾向的再選擇、再平衡。格式塔心理學視閾下的審美主體視線主要呈現為以下五種集中組織原則：完形原則、簡潔原則、視錯覺原理、圖底關系原理、異質同構原理。扁平化設計理念生長于商業指向中，其拋棄不必要的修飾，力圖減少用戶的認知障礙，最大程度地呈現信息的本質屬性等訴求使得設計師們往往更關注于格式塔心理學中的完形組織原則與簡潔組織原則，對于視錯覺原理、圖底關系原理、異質同構原理等則較少涉足運用。這個選擇性的潛隱側重趨向使得視線的選擇與創造在扁平化運動規律與格式塔心理學運動規律中存在若干異同。就其相同處而言，扁平化設計的極簡主義傾向于促使審美主體以更適意的視線將知覺經驗改造為一個富有秩序、圓融無礙的優格式塔。就其偏異處而言，則是對于平衡與簡化的向往，不自覺地壓抑了承載設計品形式美感的“有意味的形式”的多維性生長。如果說，從擬物化向扁平化轉型是出于視覺疲勞的考量，那么當前扁平化設計的發展形態則有著某種程度上的審美疲勞的隱憂。視線在扁平化設計中潛隱是受到美的規馴而非領略美的自由。之所以如此，很關鍵一點就在于扁平化設計是對于視知覺格式塔傾向的某種閹割。其所指使得信息傳遞更高效，卻也使得文化功能性弱化；其能指使得指示更明確，卻也使得情感體驗性更匱乏。

結語

從格式塔心理學觀照扁平化設計，它是理論到實踐的科學應用，充分契合了未來數字技術以人為本的制造理念。扁平化設計作為當代UI設計的主流，在未來若干年會擁有廣闊的發展前景。通過上述闡述和分析，可以看到扁平化設計是順應人類心理和視知覺的設計方法，在形式和內容上具有極大的合理性。同時，格式塔心理學對扁平化設計的指導，一則有利于設計方法本身的改進，以致力于高效科學地進行實踐生產；同時，設計者們對其潛在的設計局限也應該有一定的認知與克服。