蘇 毅

(泉州工藝美術(shù)職業(yè)學(xué)院設(shè)計藝術(shù)系，福建 泉州 362500)

.

一 UI設(shè)計的歷史與現(xiàn)狀

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

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

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

圖1 微軟的MS-DOS

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

圖2 Windows XP系統(tǒng)界面

(二)UI設(shè)計的再次扁平化轉(zhuǎn)向

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

圖3 蘋果手機的UI圖標(biāo)設(shè)計

二 扁平化風(fēng)格的流行原因

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

(一)認(rèn)知因素

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

(二)技術(shù)因素

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

(三)視知覺因素

視知覺屬于知覺范疇。知覺不同于感覺(如視、聽、嗅、味、觸等我們通稱的五感)。感覺是事物個別特征的顯現(xiàn)，而知覺是人對于事物完整形象的把握。視覺心理學(xué)家格列高里曾提出：“對物體的視覺包含了許多信息來源。這些信息來源超出了當(dāng)我們注視一個物體時眼睛所接受的信息。它通常包括由過去經(jīng)驗所產(chǎn)生的對物體的知識。這種經(jīng)驗不限于視覺，可能還包括其他感覺，例如觸覺、味覺、嗅覺，或者還有溫度覺或痛覺?！盵2]P56就視知覺經(jīng)驗來說，扁平化設(shè)計相較擬物化設(shè)計更具優(yōu)勢。關(guān)于人類經(jīng)驗與圖式的關(guān)系，魯?shù)婪颉ぐ⒍骱Ｄ吩劦剑骸把矍八玫降慕?jīng)驗,從來都不是憑空出現(xiàn)的,它是從一個人畢生所獲取的無數(shù)經(jīng)驗當(dāng)中發(fā)展出來的最新經(jīng)驗。因此,新的經(jīng)驗圖式,總是與過去所知覺到的各種形狀的記憶痕跡相聯(lián)系?！盵3]P23人們在觀看UI圖標(biāo)時，也在進行視知覺的活動。界面上的圖形對人的視覺作出提示，引發(fā)用戶從個人經(jīng)驗中提取出意義，繼而作出知覺反應(yīng)。

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

三 格式塔心理學(xué)的視知覺理論

(一)格式塔心理學(xué)簡述

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

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

格式塔心理學(xué)對于視知覺的研究真正始于衛(wèi)特海默的學(xué)生魯?shù)婪颉ぐ⒍骱Ｄ?。他將格式塔心理學(xué)理論引入視覺藝術(shù)研究中，以解釋藝術(shù)的理論與實踐問題，使格式塔心理學(xué)發(fā)展為格式塔心理美學(xué)。時至今日，格式塔心理美學(xué)在藝術(shù)和設(shè)計領(lǐng)域還具有重要的理論指導(dǎo)作用。

(二)格式塔心理學(xué)視知覺理論在扁平化設(shè)計中的應(yīng)用法則

1.形狀

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

圖4 圖形歸納方法

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

圖5 外部規(guī)整化圖標(biāo)設(shè)計示例

圖6 整平化圖標(biāo)設(shè)計示例

2.色彩

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

3.運動

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

格式塔心理學(xué)的視知覺理論認(rèn)為，即使是不動的圖形，內(nèi)部也存在張力和拉力?！拔覀冊诓粍拥氖綐又懈惺艿降摹\動’，就是大腦對知覺刺激進行組織時激起的生理活動的心理對應(yīng)物?！盵5]P87圓形的軸線多，拉力互相持平，看上去最為靜止；方形力量向軸線發(fā)散，由于其造型對稱，因此也較為穩(wěn)定；不規(guī)則式樣的軸線尖銳，看上去動感強烈。人的視覺中默認(rèn)的圖形運動方向與它的主軸方向一致或垂直。根據(jù)格式塔心理學(xué)中對“伽馬運動”的研究，當(dāng)直線或長方形的空間定向與運動方向一致時，它在通過視域時的運動速度比它們的空間定向與運動方向垂直時快得多。因此，對于頁面的拉升卷展運動方向來說，沿方形主軸上下左右運動是最能提高用戶瀏覽速度，保證思維連續(xù)性的運動方式。

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

結(jié)語

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