界面設(shè)計(jì)的擬物化和扁平化的風(fēng)格探討

馮敏

摘要：自交互設(shè)計(jì)初始至現(xiàn)在，經(jīng)歷了擬物化和扁平化兩種較為對(duì)立的風(fēng)格。為了了解這兩種風(fēng)格特點(diǎn)及用戶感受，文章從手機(jī)圖形用戶界面入手，簡(jiǎn)單介紹了擬物化和扁平化的特征，同時(shí)用功能分析法比較了兩種設(shè)計(jì)風(fēng)格的優(yōu)劣，探討出擬物化具有藝術(shù)性、映射性、情感性的優(yōu)勢(shì)和空間性、時(shí)間性、干擾性的劣勢(shì)，以及扁平化擁有簡(jiǎn)易性、功能性的優(yōu)點(diǎn)和大部分設(shè)計(jì)千篇一律的缺點(diǎn)，得到了擬物化偏向情感化而扁平化注重功能性的結(jié)論。

關(guān)鍵詞：擬物化 扁平化 風(fēng)格 交互設(shè)計(jì) 圖形用戶界面

中圖分類號(hào)：JO24 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069（2019）03-0069-03

一、手機(jī)圖形用戶界面

圖形用戶界面（Graphic User Interfac）的概念最早由施樂公司在上世紀(jì)70年代提出，主要用于方便用戶操作計(jì)算機(jī)系統(tǒng)。最早的計(jì)算機(jī)操作模式是由用戶向計(jì)算機(jī)輸入代碼指令，再由計(jì)算機(jī)運(yùn)作完成。但是這種操作模式的學(xué)習(xí)成本過高，不是所有用戶都能理解和記住各種代碼指令及專業(yè)知識(shí)，因此對(duì)于普通用戶來說，操作計(jì)算機(jī)比較困難。而圖形用戶界面的出現(xiàn)則解開了這一困境。圖形用戶界面運(yùn)用了菜單、按鈕、圖標(biāo)等各類元素來幫助使用者理解當(dāng)前對(duì)計(jì)算機(jī)發(fā)出的指令合義，用戶再通過下達(dá)圖標(biāo)命令使計(jì)算機(jī)在后端運(yùn)行指令。在這種情況下，圖形用戶界面的圖標(biāo)往往會(huì)模擬現(xiàn)實(shí)世界的物體和邏輯來幫助用戶理解和使用。而新技術(shù)的發(fā)明使圖形用戶界面不再僅僅局限于計(jì)算機(jī)，智能手機(jī)也開始應(yīng)用圖形用戶界面。隨著智能手機(jī)在生活中的全方面滲透，圖形用戶界面的設(shè)計(jì)也變得越來越重要。對(duì)于手機(jī)和用戶來說，圖形用戶界面是人類語言和計(jì)算機(jī)語言之間的翻譯，是二者相互溝通的橋梁，是一個(gè)提供了一種更加簡(jiǎn)便的人機(jī)交互方式的載體。

在很多情況下，手機(jī)圖形用戶界面的設(shè)計(jì)需要能做到對(duì)用戶的操作進(jìn)行暗示和引導(dǎo)，最好還能同時(shí)引起用戶對(duì)交互操作的興趣，而最簡(jiǎn)單的方式莫過于在視覺上的設(shè)計(jì)。由此，手機(jī)圖形用戶界面也有了越來越明顯的設(shè)計(jì)風(fēng)格。

二、擬物化

擬物化（Skeuomorph）這個(gè)詞最早來源于希臘語sk6uos，它將很多不必要的裝飾元素應(yīng)用于對(duì)象。它的主要特征就是模擬真實(shí)的裝飾效果，包括陰影、高光、透視、漸變、物體材料和質(zhì)感如木頭紋理，皮革紋路的表現(xiàn)等。

（一）擬物化的優(yōu)勢(shì)

在手機(jī)圖形用戶界面，擬物化的興起源于2007年喬布斯發(fā)布的第一代Phone手機(jī)，直至后來的IOS 6系統(tǒng)，擬物化風(fēng)格的應(yīng)用達(dá)到了巔峰。從打開iPhone手機(jī)的第一刻開始，擬物化圖標(biāo)就在不斷展現(xiàn)它的風(fēng)采：開機(jī)載入頁面上蘋果公司的logo包括了凸起造型和陰影元素;載入完成后，屏幕下方右劃按鈕槽不僅有文字提示“滑動(dòng)來解鎖”，還具有動(dòng)態(tài)反光效果（如圖1）。

解鎖進(jìn)入桌面后，每一個(gè)圖標(biāo)都是上半部分反光發(fā)白，下半部分顏色更深，而底部邊緣略帶隱隱反光效果，形成一種圖標(biāo)中部高起，兩邊圓滑向下的半圓造型。而圖標(biāo)內(nèi)容則更體現(xiàn)立體視覺效果：備忘錄圖標(biāo)里的紙張圖案上有上一張被撕出的毛邊投射下的陰影;報(bào)刊雜志圖標(biāo)則是原木色的書柜，隔板上還有木頭獨(dú)有的紋理;而設(shè)置圖標(biāo)則由銀色的齒輪構(gòu)成，帶著冷酷的金屬反光（如圖2）。各種顏色、材質(zhì)、陰影、透視在每個(gè)圖標(biāo)里得到了細(xì)膩的體現(xiàn)。喬布斯為了極力推廣智能手機(jī)，采用了與現(xiàn)實(shí)物體如此相仿的擬物化設(shè)計(jì)風(fēng)格，正是因?yàn)閿M物化設(shè)計(jì)有以下優(yōu)勢(shì)：

1.映射性：智能手機(jī)剛剛興起，用戶還不能很好地操作新的機(jī)器和交互。擬物化圖標(biāo)極大地模仿了現(xiàn)實(shí)生活中的物體，就算是第一次接觸智能手機(jī)的用戶也能通過被模仿的現(xiàn)實(shí)物體的用途猜出擬物化圖標(biāo)的作用和交互后的效果。擬物化圖標(biāo)良好的隱喻作用能將現(xiàn)實(shí)世界物體的功能映射到和智能手機(jī)的圖標(biāo)交互中，大大降低了用戶在操作上的困難和陌生，減少了他們對(duì)于新鮮事物的不適和排斥感。比較典型的類似于各類面對(duì)兒童的填色游戲、拼圖游戲等，擬物化的圖案讓使用經(jīng)驗(yàn)不甚豐富的兒童也能輕易理解各圖標(biāo)用途并使用。

蘋果公司的人機(jī)界面指南《iOS Human Interface Guidelines》里也提到：“當(dāng)應(yīng)用中的可視化對(duì)象和操作按照現(xiàn)實(shí)世界中的對(duì)象與操作模仿，用戶就能快速領(lǐng)會(huì)如何使用它。”

2.藝術(shù)性：擬物化圖標(biāo)包括了很多裝飾性元素，具有極強(qiáng)的裝飾效果。它模擬現(xiàn)實(shí)物體添加了陰影、高光、透視、材質(zhì)等，在平面上展現(xiàn)了一定的三維效果，但又不是一味地照搬現(xiàn)實(shí)，在設(shè)計(jì)上進(jìn)行了些許的藝術(shù)加工，為的是更加突出該圖標(biāo)的功能性。這種略帶個(gè)性的模仿也給用戶帶來了親切的視覺享受，形成了一種藝術(shù)效果。

3.情感性：對(duì)于現(xiàn)實(shí)的模仿能夠極大地調(diào)動(dòng)用戶的情緒。由于視覺上的真實(shí)性極高，圖標(biāo)也就不僅僅只是一種功能的符號(hào)。對(duì)于真實(shí)的模仿不光勾起用戶的回憶或聯(lián)想，也流露出設(shè)計(jì)師的設(shè)計(jì)情感，這種情感通過細(xì)致的描繪傳遞給用戶，用戶也能感受到設(shè)計(jì)師在模仿真實(shí)時(shí)的個(gè)人情緒。

（二）擬物化的劣勢(shì)

盡管擬物化有諸多好處，但萬事終有兩面性，擬物化也有難以掩蓋的弊端：

1.空間性：并不是所有圖標(biāo)都可以有現(xiàn)實(shí)物體作為模仿對(duì)象。時(shí)鐘、日歷、計(jì)算機(jī)可以有實(shí)體模仿，但是如瀏覽器這種本就源于虛擬世界中的功能就難以找到模仿對(duì)象。例如蘋果手機(jī)的Safari瀏覽器圖標(biāo)（如圖3）被設(shè)計(jì)成了指南針的造型，用戶第一次使用，很可能將這個(gè)圖標(biāo)的功能理解為指南針，這確實(shí)會(huì)引起用戶的誤解和疑惑，形成一定的交互困難。

2.時(shí)間性：模仿對(duì)象的選取終究是設(shè)計(jì)時(shí)期的代表物體。隨著時(shí)間的推移，當(dāng)時(shí)的功能代表物體并不意味著過了一段時(shí)間之后依然是功能代表。由于科技總是隨著時(shí)間而變化，生活產(chǎn)品的外形也是在不斷變化的。以前黑膠唱片機(jī)可能是音樂的代表物體，一段時(shí)間后隨身聽已經(jīng)變成了人們的新寵，而現(xiàn)在音樂播放已經(jīng)包含在手機(jī)強(qiáng)大的功能里7o每個(gè)時(shí)期相同功能的代表物品不同，而成長于不同時(shí)期的用戶對(duì)于功能的代表物品的印象也是完全不同的。對(duì)于極大模仿真實(shí)物體的擬物化風(fēng)格來說需要耗費(fèi)更多的精力在模仿對(duì)象的挑選和設(shè)計(jì)上。

3.干擾性：當(dāng)下用戶對(duì)智能手機(jī)的操作大都游刃有余，通過手機(jī)為載體而傳達(dá)的信息也越來越多。天氣、時(shí)鐘、日期、照片、音樂、地圖、娛樂、運(yùn)動(dòng)、學(xué)習(xí)、購物……手機(jī)早已不僅僅只為通訊而存在，更多的功能和可能讓用戶幾乎都通過手機(jī)來接受和傳遞信息。太多的手機(jī)應(yīng)用和太快的生活節(jié)奏讓用戶產(chǎn)生焦慮感，他們已無暇平靜地欣賞各個(gè)設(shè)計(jì)精美、立體繁復(fù)的圖標(biāo)和背景，此時(shí)用戶的關(guān)注點(diǎn)在于功能性以及效率性。如果不能一眼找到自己關(guān)注和需要的信息，說明過多的裝飾已經(jīng)對(duì)信息接收造成了干擾，長此以往，不僅造成審美疲勞，還降低了用戶的生活效率，增加用戶的信息焦慮。

三、扁平化

扁平化設(shè)計(jì)其實(shí)在IOS7之前就已經(jīng)出現(xiàn)了。Windows Phone（如圖4）和安卓4.0系統(tǒng)分別在2010年和2011年運(yùn)用了扁平化風(fēng)格，但當(dāng)時(shí)圖形用戶界面的設(shè)計(jì)仍舊處于擬物化盛行階段，因此扁平化設(shè)計(jì)并沒有受到多少關(guān)注。直到2013年IOS7帶領(lǐng)著完全不同以往的新設(shè)計(jì)風(fēng)格來襲，扁平化設(shè)計(jì)才受到了眾人的矚目。

扁平化的特征就是運(yùn)用簡(jiǎn)單的幾何形體、線條、鮮明的色彩構(gòu)成與擬物化完全不同的二維平面，它完全摒棄了陰影、透視、高光、紋理、質(zhì)感等任何三維元素，將圖案和信息完完全全的展平在用戶面前。扁平化的造型具有高度凝煉性，看似簡(jiǎn)單實(shí)際在設(shè)計(jì)上并不容易。它需要設(shè)計(jì)師能夠抓住物體的本質(zhì)，再用簡(jiǎn)單的線條和具有沖擊力的色彩表達(dá)概括成一個(gè)圖案符號(hào)。

（一）扁平化的優(yōu)勢(shì)

相對(duì)于擬物化，扁平化展現(xiàn)了完全不同的優(yōu)勢(shì)。它站在擬物化的基礎(chǔ)上，通過用戶在擬物化引導(dǎo)下對(duì)手機(jī)界面已有的功能印象，對(duì)擬物化的界面進(jìn)行了概括重構(gòu)。對(duì)比IOS6與IOS7的圖形用戶界面，各功能圖標(biāo)在圖案的外形上并沒有很大改變，IOS7依舊遵循IOS6使用的功能代表物，但所有桌面圖標(biāo)的半圓形立體視覺效果則被完全舍棄，做成了平面效果（如圖5）。

大部分按鈕被壓扁或刪除外框只留文字和圖形。通知欄內(nèi)原有的深灰色布紋背景也全被刪除改為半透明灰色平面。設(shè)置內(nèi)的背景變成純白，每個(gè)條目用線段分割，功能小圖標(biāo)也僅僅用純藍(lán)色圖形顯示（如圖6）。

打開文件夾的界面從裂屏下凹效果變成白色半透明圓角方形背景。解鎖屏依舊保留了滑動(dòng)來解鎖字樣，但按鈕與凹槽已消失不見，只余一個(gè)雙線向上箭頭表示（如圖7）。

甚至于狀態(tài)欄的背景也變成了全透明狀態(tài)，完全與各種顏色的背景融為一體（如圖8）。其他各界面也多用不同的色彩明度和透明度來制造差別。

1.簡(jiǎn)易性：扁平化的圖形用戶界面使次要的信息變得更加簡(jiǎn)單，減少了用戶視線停留的時(shí)間，只為在用戶寶貴的碎片化時(shí)間內(nèi)將最重要的信息突出展現(xiàn)，由此，整體界面變得清爽整潔。因?yàn)橹恍枰\(yùn)用簡(jiǎn)單的元素設(shè)計(jì)，所以多個(gè)圖標(biāo)很容易達(dá)到視覺統(tǒng)一的效果，這對(duì)于推行品牌印象大有裨益。同時(shí)規(guī)則相同的元素通過精心排列和留白也能帶來優(yōu)雅的視覺效果，在一定程度上愉悅和放松了使用者的心情，增加了用戶對(duì)于品牌的好感度。

2.功能性：與擬物化的劣勢(shì)相反，簡(jiǎn)單的圖案更加注重功能的呈現(xiàn)。擬物化的干擾性在此被剔除，圖標(biāo)更像是一個(gè)通道，它變成簡(jiǎn)單的功能入口，不同的顏色和外形更像是功能入口的區(qū)分，多樣的信息沒有其他的視覺干擾，用戶可以輕松地捕獲真實(shí)所需，大大提高了生活效率，減少了過量信息帶來的焦慮和不安。

（二）扁平化的劣勢(shì)

扁平化的劣勢(shì)也同樣明顯。在大批量扁平化界面的影響下，用戶很容易達(dá)到審美疲勞。平淡干凈的界面當(dāng)然會(huì)讓人肅然起敬，但是簡(jiǎn)單元素的組合卻非常考驗(yàn)設(shè)計(jì)師的設(shè)計(jì)功力，尤其在設(shè)計(jì)資源大量卻又層次不齊的時(shí)期，簡(jiǎn)單的界面模仿似乎變得極其容易實(shí)現(xiàn)，然而只得其形不得其神使得大量界面設(shè)計(jì)干篇一律，清新平淡的設(shè)計(jì)再無法在用戶心中留下深刻印象，反而過目即忘，這對(duì)現(xiàn)在越來越注重個(gè)性化的用戶而言絕非好事。

四、當(dāng)前設(shè)計(jì)偏向扁平化的原因

擬物化隨著智能手機(jī)興起，此時(shí)，用戶尚不能熟悉自如地與智能手機(jī)交互，處于使用智能手機(jī)的學(xué)習(xí)期。擬物化能極好地模仿現(xiàn)實(shí)世界中的物體，其視覺效果對(duì)用戶的聯(lián)想思維有極大的幫助，降低了學(xué)習(xí)成本，減輕了學(xué)習(xí)負(fù)擔(dān)，喚醒用戶熟悉的自然行為和認(rèn)知，有助于緩解他們對(duì)于學(xué)習(xí)新事物的焦慮感。

當(dāng)用戶在擬物化的暗示下熟悉了智能手機(jī)的操作，擬物化的映射和引導(dǎo)功能似乎就不那么明顯重要了，只純粹地剩下了裝飾性元素帶來的視覺效果。然而因?yàn)樵O(shè)計(jì)擬物化的圖標(biāo)需要模擬它在真實(shí)世界里的形態(tài)而在圖標(biāo)上加上各種各樣的陰影、高光、透視、材質(zhì)等元素，使得制作一個(gè)圖標(biāo)要耗費(fèi)設(shè)計(jì)師較多的時(shí)間和精力，更不用說部分設(shè)計(jì)師為了突顯自己的作品特色抓住盡可能多的客戶，在圖標(biāo)設(shè)計(jì)上下了更大的功夫，將目光放在了更多可有可無的細(xì)節(jié)上，使原來就包含了很多裝飾效果的擬物化界面變得愈發(fā)復(fù)雜，占有的系統(tǒng)資源越來越多，對(duì)用戶也造成萬～定的認(rèn)知負(fù)擔(dān)和審美疲勞。而到了全民智能、信息過載的時(shí)代，手機(jī)所傳達(dá)的信息量上漲的趨勢(shì)愈發(fā)明顯，快節(jié)奏的生活讓用戶越來越重視效率的提高，手機(jī)圖標(biāo)上已經(jīng)失去意義的裝飾性內(nèi)容離用戶注重功能性的要求愈來愈遠(yuǎn)，信息本身的過量已經(jīng)讓用戶感到焦慮，而無意義的裝飾又對(duì)用戶造成視覺干擾，挑戰(zhàn)用戶對(duì)過量信息的承受能力。在這些情況的敦促下，扁平化設(shè)計(jì)便應(yīng)運(yùn)而生。

似乎是想要極力撇去擬物化的風(fēng)格影響，扁平化出現(xiàn)時(shí)風(fēng)格迥異。它注重二維平面，舍去一切陰影、透視、高光等會(huì)使人聯(lián)想到三維物體的元素，與具有繁復(fù)裝飾效果的擬物化風(fēng)格形成鮮明對(duì)比。由于看到了這個(gè)信息爆炸的時(shí)代下惶惶不安的心情，功能性在此被扁平化強(qiáng)調(diào)。而當(dāng)完全不同以往的新風(fēng)格初現(xiàn)時(shí)，用戶難免會(huì)有不適應(yīng)的感受。在這種情況下，為了延續(xù)用戶從擬物化環(huán)境中學(xué)習(xí)到的認(rèn)知和操作習(xí)慣，部分扁平化設(shè)計(jì)仍舊在造型上模擬之前的擬物化圖案，只不過去掉了三維元素。

新的風(fēng)格盡管帶來不一的評(píng)價(jià)，它終究是有被用戶習(xí)慣的時(shí)候。扁平化確實(shí)讓界面顯得干凈整潔，主要信息被更加突出。但當(dāng)一種審美從出現(xiàn)走到成熟，也終有走向衰弱的一天。當(dāng)二維平面被大量使用，除了造型和顏色的區(qū)別，各圖標(biāo)的特色似乎在漸漸變淡，用戶又開始靠肌肉運(yùn)動(dòng)習(xí)慣來操作手機(jī)時(shí)，好像又輪到了設(shè)計(jì)師推陳出新的主場(chǎng)。于是又漸漸興起了扁平擬物化風(fēng)格。如同字面意思，扁平擬物化既是在扁平化的基礎(chǔ)上添加少許的陰影和高光等元素，略帶擬物化特征，為簡(jiǎn)單冷漠的扁平化添加了一點(diǎn)溫度和個(gè)性。小結(jié)

擬物化和扁平化的風(fēng)格不能說成各取所愛，而是歷史規(guī)律的發(fā)展，猶如象形文字甲骨文到如今以功能性為主的簡(jiǎn)體漢字的轉(zhuǎn)變。

人類一開始總是自模仿進(jìn)行發(fā)展，當(dāng)發(fā)展到成熟至過熟階段時(shí)再進(jìn)行自我否定，走向一種新的符號(hào)化方式：手機(jī)圖形用戶界面的擬物化到扁平化，對(duì)于界面來說，概念上的“擬物化”其實(shí)并未沒落，現(xiàn)在被多數(shù)人遺棄的只是設(shè)計(jì)風(fēng)格上的擬物化，對(duì)于現(xiàn)在處于扁平化時(shí)代的圖標(biāo)來說，也是換百～種風(fēng)格的“擬物化”，并且將一些不符合現(xiàn)在時(shí)代背景，因未曾選作被模仿對(duì)象而造成使用者困惑的元素舍棄，替換成更加符合當(dāng)下時(shí)代背景的代表物體。然而在時(shí)間的作用下，當(dāng)此時(shí)變成過去，此時(shí)的圖標(biāo)必然又會(huì)造成新的困惑，也會(huì)再次被舍棄替換，設(shè)計(jì)風(fēng)格也將被新的圖標(biāo)所影響，這種過程周而復(fù)始，總是隨著時(shí)間不停滾動(dòng)。但唯一不會(huì)改變的是人類模仿的天性，無論圖標(biāo)怎樣變化，都是在模擬當(dāng)前時(shí)期的事物或行為，而不同的風(fēng)格和審美也總是在形式和內(nèi)容的變化過程中輪流交替。

兩者相較而言，擬物化更加情感化，能夠帶動(dòng)用戶的情緒流露;而扁平化則以功能性為主，注重任務(wù)的執(zhí)行。擬物化和扁平化并無對(duì)錯(cuò)之分，只有在當(dāng)前環(huán)境背景以及應(yīng)用場(chǎng)景下哪個(gè)更合適的區(qū)別。矯枉過正也非良策，不論哪一種方向的極端都會(huì)帶來一定的弊病和困擾。設(shè)計(jì)也如太極，用辯證思維看待設(shè)計(jì)風(fēng)格，陰陽調(diào)和才是正道。

參考文獻(xiàn)

[1]劉馨憶.重看圖形界面“扁平化”與“擬物化”之爭(zhēng)——關(guān)于設(shè)計(jì)思維的探討[J].工業(yè)設(shè)計(jì)，2016，（10）：163-164.

[2]王軍亮.扁平化設(shè)計(jì)在交互設(shè)計(jì)中的應(yīng)用[J].參花，2017，（15）：148.

[3]夏韜.淺析智能手機(jī)圖標(biāo)擬物化與扁平化的發(fā)展趨勢(shì)[J].設(shè)計(jì)，2017，（1）：122-123.

[4]李怡.移動(dòng)端界面設(shè)計(jì)從擬物化到扁平化風(fēng)格的演變[J].今傳媒（學(xué)術(shù)版），2016，24（4）：115-116.

[5]李宜勇.淺析UI圖標(biāo)擬物化和扁平化的交互方式[J].電腦知識(shí)與技術(shù)，2016，12（24）：64-65.

[6]楊光.界面扁平化設(shè)計(jì)風(fēng)格成因探析[J].設(shè)計(jì)，2016，29（13）：46-47.

[7]李剛，佘天琪.解讀扁平化在智能手機(jī)界面設(shè)計(jì)中的藝術(shù)表達(dá)[J].設(shè)計(jì)，2016，29（13）：134-135.

[8]熊琳.扁平化信息圖形設(shè)計(jì)在交互設(shè)計(jì)領(lǐng)域的應(yīng)用[J].大觀，2016，（6）：74.