界面設計的擬物化和扁平化的風格探討

馮敏

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

關鍵詞：擬物化 扁平化 風格 交互設計 圖形用戶界面

中圖分類號：JO24 文獻標識碼：A

文章編號：1003-0069（2019）03-0069-03

一、手機圖形用戶界面

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

在很多情況下，手機圖形用戶界面的設計需要能做到對用戶的操作進行暗示和引導，最好還能同時引起用戶對交互操作的興趣，而最簡單的方式莫過于在視覺上的設計。由此，手機圖形用戶界面也有了越來越明顯的設計風格。

二、擬物化

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

（一）擬物化的優勢

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

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

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

蘋果公司的人機界面指南《iOS Human Interface Guidelines》里也提到：“當應用中的可視化對象和操作按照現實世界中的對象與操作模仿，用戶就能快速領會如何使用它。”

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

3.情感性：對于現實的模仿能夠極大地調動用戶的情緒。由于視覺上的真實性極高，圖標也就不僅僅只是一種功能的符號。對于真實的模仿不光勾起用戶的回憶或聯想，也流露出設計師的設計情感，這種情感通過細致的描繪傳遞給用戶，用戶也能感受到設計師在模仿真實時的個人情緒。

（二）擬物化的劣勢

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

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

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

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

三、扁平化

扁平化設計其實在IOS7之前就已經出現了。Windows Phone（如圖4）和安卓4.0系統分別在2010年和2011年運用了扁平化風格，但當時圖形用戶界面的設計仍舊處于擬物化盛行階段，因此扁平化設計并沒有受到多少關注。直到2013年IOS7帶領著完全不同以往的新設計風格來襲，扁平化設計才受到了眾人的矚目。

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

（一）扁平化的優勢

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

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

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

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

1.簡易性：扁平化的圖形用戶界面使次要的信息變得更加簡單，減少了用戶視線停留的時間，只為在用戶寶貴的碎片化時間內將最重要的信息突出展現，由此，整體界面變得清爽整潔。因為只需要運用簡單的元素設計，所以多個圖標很容易達到視覺統一的效果，這對于推行品牌印象大有裨益。同時規則相同的元素通過精心排列和留白也能帶來優雅的視覺效果，在一定程度上愉悅和放松了使用者的心情，增加了用戶對于品牌的好感度。

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

（二）扁平化的劣勢

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

四、當前設計偏向扁平化的原因

擬物化隨著智能手機興起，此時，用戶尚不能熟悉自如地與智能手機交互，處于使用智能手機的學習期。擬物化能極好地模仿現實世界中的物體，其視覺效果對用戶的聯想思維有極大的幫助，降低了學習成本，減輕了學習負擔，喚醒用戶熟悉的自然行為和認知，有助于緩解他們對于學習新事物的焦慮感。

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

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

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

擬物化和扁平化的風格不能說成各取所愛，而是歷史規律的發展，猶如象形文字甲骨文到如今以功能性為主的簡體漢字的轉變。

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

兩者相較而言，擬物化更加情感化，能夠帶動用戶的情緒流露;而扁平化則以功能性為主，注重任務的執行。擬物化和扁平化并無對錯之分，只有在當前環境背景以及應用場景下哪個更合適的區別。矯枉過正也非良策，不論哪一種方向的極端都會帶來一定的弊病和困擾。設計也如太極，用辯證思維看待設計風格，陰陽調和才是正道。

參考文獻

[1]劉馨憶.重看圖形界面“扁平化”與“擬物化”之爭——關于設計思維的探討[J].工業設計，2016，（10）：163-164.

[2]王軍亮.扁平化設計在交互設計中的應用[J].參花，2017，（15）：148.

[3]夏韜.淺析智能手機圖標擬物化與扁平化的發展趨勢[J].設計，2017，（1）：122-123.

[4]李怡.移動端界面設計從擬物化到扁平化風格的演變[J].今傳媒（學術版），2016，24（4）：115-116.

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

[6]楊光.界面扁平化設計風格成因探析[J].設計，2016，29（13）：46-47.

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

[8]熊琳.扁平化信息圖形設計在交互設計領域的應用[J].大觀，2016，（6）：74.