擬物化設(shè)計(jì)曾經(jīng)風(fēng)靡一時(shí)，真實(shí)的體積和細(xì)膩的質(zhì)感給人們留下了深刻印象。

在不斷發(fā)展中，界面又逐漸向扁平化演變，擬物化材質(zhì)出現(xiàn)得越來(lái)越少。

近些年，我們發(fā)現(xiàn)設(shè)計(jì)師重新開(kāi)始使用擬物的陰影和紋理，幫助用戶提供逼真的體驗(yàn)和富有吸引力的外觀。

擬物在設(shè)計(jì)中起到了什么價(jià)值？又帶給設(shè)計(jì)師怎樣的幫助呢？或許了解從擬物風(fēng)潮從興起到衰落，最后再次復(fù)興的原因，能幫助我們更好審視擬物化的現(xiàn)實(shí)意義。

1. 誕生——從裝飾開(kāi)始

擬物最初以裝飾的形態(tài)出現(xiàn)。制作者通過(guò)模仿生活中常見(jiàn)的形象來(lái)裝飾手工藝品和工業(yè)制品，喚起人們對(duì)熟悉事物的記憶。

擬物化（Skeuomorphic）一詞最早出現(xiàn)在 19 世紀(jì)英國(guó)考古學(xué)家 H.Colley March 所著的《裝飾的意義》中，他提到在古陶器中會(huì)出現(xiàn)這種模仿生活中常見(jiàn)事物結(jié)構(gòu)或形態(tài)的現(xiàn)象。出于裝飾目的，人們會(huì)模仿其他物體的外形捏制陶器的輪廓，或者繪制出木柵欄、漁網(wǎng)等事物的紋理。

新石器時(shí)代，船形彩陶壺。從器形到紋樣都讓人都讓人聯(lián)想到漁船、漁網(wǎng)、捕魚活動(dòng)等水上生活場(chǎng)面

在此之后，擬物的裝飾手法也出現(xiàn)在工業(yè)制品中。最初的汽車車身多數(shù)采用了木質(zhì)框架。在當(dāng)時(shí)的工藝條件下，木質(zhì)框架既能保證車身的強(qiáng)度，又有不錯(cuò)的性價(jià)比。在 20 世紀(jì)初，福特推出了木本旅行車。小伙子們開(kāi)始駕駛著木本旅行車把沖浪板帶到海邊，吸引著姑娘的目光。這種價(jià)格便宜、外觀獨(dú)特，內(nèi)部空間也非常寬敞的老式木質(zhì)車型開(kāi)始受到大量年輕沖浪者的喜愛(ài)。隨著沖浪文化在美國(guó)的流行，這種木質(zhì)車身也逐漸變成一種流行風(fēng)格（woodie 風(fēng)格）。

隨著金屬工藝的完善和木材的減少，車廠開(kāi)始普遍生產(chǎn)鋼架車身。曾經(jīng)風(fēng)靡的 woodie 風(fēng)格也變成了一種復(fù)古風(fēng)潮，人們開(kāi)始懷念質(zhì)感細(xì)膩的木質(zhì)車身。1957 年，福特為大量 woodie 風(fēng)格愛(ài)好者推出了“水星殖民公園”，車身采用乙烯基塑料和鋼模仿木材質(zhì)感。

在這個(gè)時(shí)期，這時(shí)擬物的形態(tài)還是以裝飾產(chǎn)品外觀為主。人們將熟悉的場(chǎng)景、喜歡的事物經(jīng)過(guò)加工美化后，還原在某種制品上。本意是希望讓使用者在體驗(yàn)新事物的同時(shí)，喚起原有事物的相關(guān)回憶，感受到原有事物的美感。

2. 發(fā)展——數(shù)字時(shí)代的寵兒

在數(shù)字時(shí)代，擬物化設(shè)計(jì)伴隨圖形界面的發(fā)展，成為連接人與虛擬世界的重要方式。

1973 年，施樂(lè)就最早開(kāi)發(fā)出被稱為施樂(lè)之星的 Xerox 8108 系統(tǒng)，引入了“桌面”的概念和看起來(lái)像文件夾或是紙片的圖標(biāo)。受到施樂(lè)的啟發(fā)，Apple Lisa、GEM、Microsoft Windows 1.01 也緊隨其后，研發(fā)出了帶有 GUI 的計(jì)算器系統(tǒng)。

Xerox 8108

姆斯·吉布森于 1977 年提出了功能可供性理論，這一理論也深刻影響了擬物化設(shè)計(jì)。他認(rèn)為可供性是環(huán)境給人提供的行動(dòng)可能性。比如看到一個(gè)木棍，人們可以感知到多種對(duì)它的使用方式。比如用棍子敲人、支撐身體、當(dāng)作燃料等等。圖形界面中的擬物化正是利用到這種可供性，通過(guò)模仿某種事物來(lái)暗示元素的內(nèi)容，將功能直觀的呈現(xiàn)給用戶。

計(jì)算機(jī)界面對(duì)當(dāng)時(shí)的大多數(shù)用戶是一個(gè)完全陌生的概念。擬物化可以幫助用戶理解全新的數(shù)字界面交互，降低用戶的學(xué)習(xí)成本。它借用人們對(duì)現(xiàn)實(shí)文件夾的認(rèn)識(shí)，來(lái)表達(dá)數(shù)字世界的文件。通過(guò)隱喻讓用戶認(rèn)識(shí)到文件夾的功能，比如可以打開(kāi)關(guān)閉、內(nèi)部存有文檔等。

早期界面也廣泛參考了物理世界的可操作表面，Mac OS 最初的控制中心就模擬了重型機(jī)械或普通家用開(kāi)關(guān)的控制面板。其通過(guò)模仿真實(shí)按鍵、旋鈕的形態(tài)，還有模塊的布局體現(xiàn)了不同功能的區(qū)分度和可操縱性。

隨著數(shù)字屏幕技術(shù)和界面設(shè)計(jì)的發(fā)展，界面上的圖像也更加完善精細(xì)，力求達(dá)到與數(shù)字程序無(wú)縫交互。隨著圖像不斷細(xì)化，擬物化的界面元素不僅模仿了現(xiàn)實(shí)產(chǎn)品的外觀，也可以做到表現(xiàn)產(chǎn)品的材質(zhì)和體積。

MacOS X10.0 推出的 Aque 系統(tǒng)，就在界面上繪制出細(xì)膩的材質(zhì)和體積效果。這種材質(zhì)最突出的質(zhì)感是半透明塑料和水滴狀晶體，靈感來(lái)源于當(dāng)時(shí)的 mac 硬件外觀。真實(shí)細(xì)膩的擬物效果不光具有裝飾美感，同時(shí)也強(qiáng)化了可點(diǎn)擊的操作暗示。

MacOS X10.0

iPhone 1 首次采用電容觸摸屏幕，并且移除了物理鍵盤，僅保留 home 鍵。為了讓觸控操作更加自然、直接，iPhone os 也繪制了精細(xì)的擬物風(fēng)格界面，通過(guò)大量使用陰影高光來(lái)體現(xiàn)體積效果，讓用戶可以更直觀出哪些按鈕是可交互的。

3. 衰落——扁平化風(fēng)潮

隨著計(jì)算機(jī)和智能手機(jī)的普遍使用，人機(jī)界面的普及程度也越來(lái)越高。一代人已經(jīng)接掌握了人機(jī)界面的交互邏輯，這時(shí)候一味追求實(shí)體化世界的體驗(yàn)會(huì)增加更多的不必要信息。

人們開(kāi)始嘗試簡(jiǎn)化界面的裝飾元素，扁平化的設(shè)計(jì)風(fēng)格逐漸成為主流。最初的扁平化設(shè)計(jì)受到 20 世紀(jì)初興起的國(guó)際主義排版風(fēng)格啟發(fā)。國(guó)際主義排版風(fēng)格主要強(qiáng)調(diào)版面的干凈、易讀，更注重內(nèi)容的清晰展示。主要特點(diǎn)有：

1. 符號(hào)化、圖形化，只保留最基本的視覺(jué)元素。
2. 推崇無(wú)襯線字體。
3. 文字遵從柵格系統(tǒng)進(jìn)行工整的布局。

Brockmann 的海報(bào)作品，將文字和圖片進(jìn)行混合排版的模式，也影響了后期的扁平化設(shè)計(jì)

扁平化設(shè)計(jì)也推崇相同的設(shè)計(jì)原則。設(shè)計(jì)師不再一味的追求和真實(shí)物體外觀上對(duì)應(yīng)，而是希望通過(guò)更加簡(jiǎn)潔的元素來(lái)突出重點(diǎn)信息。2010 年 Windows 推出首款移動(dòng)系統(tǒng)“Metro”，采用純色的背景和大量的卡片作為基本布局。Metro 界面去掉了多余的裝飾，更注重提高信息的傳遞效率。

微軟稱其為 Metro （地鐵）是因?yàn)樗凹痊F(xiàn)代又干凈。速度快，而且在運(yùn)動(dòng)。”

Jony Ive 在喬布斯去世后接管了界面設(shè)計(jì)的工作，在他的主導(dǎo)下 iOS 也一改喬布斯最喜歡的精致擬物風(fēng)格。在 2013 年發(fā)布的 iOS 7.0 中，蘋果將大部分陰影和紋理刪去。

雖然 Flat 一詞并沒(méi)有出現(xiàn)在蘋果的設(shè)計(jì)規(guī)范中，但《福布斯》說(shuō)出了大部分人想說(shuō)的話：擬物化已死（It Was Time For Skeuomorphism To Die）。

但擬物化真的被人們拋棄了嗎？

4. 復(fù)興——擬物化的“回歸”

擬物化和簡(jiǎn)單高效并不矛盾。正如 iOS 7.0 推出后，蘋果在官網(wǎng)所寫的：“真正的簡(jiǎn)單不僅僅是沒(méi)有雜亂或去除裝飾。我們所創(chuàng)作的一切，從不只是為了看起來(lái)美觀而設(shè)計(jì)。”

擬物化最常見(jiàn)的是繪制外形、材質(zhì)和體積來(lái)模擬事物的外觀，但也可以模仿熟悉的操作模式，方便用戶上手使用。

從蘋果計(jì)算器的演化就可以看出，雖然界面逐漸轉(zhuǎn)簡(jiǎn)化，但都沒(méi)有脫離擬物的本質(zhì)。iOS 1 的計(jì)算器靈感來(lái)自于博朗計(jì)算器，并模仿了博朗使用色彩進(jìn)行功能分區(qū)的設(shè)計(jì)方式。后期蘋果雖然對(duì)按鍵歸類進(jìn)行了調(diào)整，但這套操作也一直在蘋果計(jì)算器沿用了下來(lái)。

iOS 的計(jì)算器一貫使用色彩進(jìn)行功能分區(qū)設(shè)計(jì)

擬物化的材質(zhì)和體積經(jīng)過(guò)簡(jiǎn)化后，同樣可以作為扁平界面中的元素，并維持原有的功能屬性。

在 iOS 7.0 中的“毛玻璃”沿襲自 MacOS X10.0 的半透明塑料材質(zhì)。iOS 7 剔除材質(zhì)中多余的裝飾后，這種半透明的質(zhì)感更強(qiáng)化其功能特性。在刪去大量陰影后，頁(yè)面的空間層次變得難以區(qū)分，iOS 正是使用了這種半透明的材質(zhì)有效的拉開(kāi)了界面層次。

盡管刪去了陰影，但頁(yè)面的空間層次還是存在

合理利用體積也可以在平面起到畫龍點(diǎn)睛的作用。iOS 13.0 的備忘錄中，涂鴉畫筆從線條變成立體的形態(tài)。線條的版本中，畫筆工具更像是在紙上繪制的符號(hào)。新版用平面-立體的區(qū)分暗示出了備忘錄和畫筆，突出需要操作的內(nèi)容。

而過(guò)于追求視覺(jué)效果上的極簡(jiǎn)，反而會(huì)走向效率的反面。在微軟后續(xù)推出的 Windows 8 中，對(duì)扁平化界面的爭(zhēng)論達(dá)到了高潮。Windows 8 使用磁貼卡片替代擬物的圖標(biāo)和按鈕，應(yīng)用信息直接以文字加圖片的形式呈現(xiàn)在磁貼上。在規(guī)整的卡片布局下，頁(yè)面中的復(fù)雜信息看起來(lái)也可以變得簡(jiǎn)單又整潔。

但 Windows 8 的磁鐵設(shè)計(jì)卻帶來(lái)了大量的負(fù)面反饋。頁(yè)面上眾多平面元素缺少可進(jìn)行交互的線索，導(dǎo)致用戶不知道哪些可以點(diǎn)擊。為了提高應(yīng)用的吸引力，Windows 支持在磁貼卡片上配置背景圖片。但是豐富多彩的背景讓應(yīng)用圖標(biāo)本身變得更加無(wú)法識(shí)別。用戶對(duì) Windows 8 扁平的界面產(chǎn)生了更多困惑。

Windows 8 啟動(dòng)頁(yè)，沒(méi)有名稱的應(yīng)用和背景圖

研究顯示在界面中刪除可點(diǎn)擊感知和層級(jí)提示后，用戶的操作效率會(huì)降低。Kate Meyer 的眼動(dòng)實(shí)驗(yàn)將 9 個(gè)不同類別的界面分別改造成強(qiáng)化版（擬物）和輕量版（扁平）兩個(gè)版本。71 名測(cè)試者將對(duì) 9 個(gè)頁(yè)面進(jìn)行體驗(yàn)（每個(gè)頁(yè)面將隨機(jī)抽取輕量/強(qiáng)化版本其中一個(gè)），體驗(yàn)前會(huì)設(shè)定一個(gè)目標(biāo)讓其完成，最后統(tǒng)計(jì)所有測(cè)試者完成的時(shí)間和查找過(guò)程中的視覺(jué)動(dòng)線。

統(tǒng)計(jì)發(fā)現(xiàn)了兩個(gè)關(guān)鍵點(diǎn)：

1. 使用輕量版的用戶比使用強(qiáng)化版的多花了 22% 的時(shí)間找到目標(biāo)。
2. 使用輕量版的用戶比使用強(qiáng)化版的多出 25% 的視線焦點(diǎn)。

限定任務(wù)為：您將看到航空公司航班的頁(yè)面。請(qǐng)找到在上午 8:00 到下午 3:00 之間起飛的航班。

可以看到強(qiáng)化版（擬物）的界面主要用漸變和陰影強(qiáng)調(diào)了界面上的重要元素，如按鈕、搜索框等。在刪除了這些元素后，雖然界面變得更加干凈，但是用戶使用時(shí)也更加費(fèi)力，視線在界面掃視了很多地方才完成目標(biāo)。

在扁平化興起之前，頁(yè)面上有多種視覺(jué)要素可以提示頁(yè)面的層級(jí)關(guān)系。而當(dāng)這些“多余的裝飾”被刪除后，我們更需要思考如何處理元素的層級(jí)關(guān)系。

Material Design 就在扁平化設(shè)計(jì)的基礎(chǔ)上，提出了更多構(gòu)建頁(yè)面層級(jí)的手法。比如引入頁(yè)面的高度，并使用陰影、色彩和不透明度區(qū)分不同高度的元素。在保持干擾信息盡可能少的情況下，也可以提示出頁(yè)面的層級(jí)。

Material Design 像是把手機(jī)屏幕簡(jiǎn)化成了一個(gè)向內(nèi)的小盒，每個(gè)元素按自己的分層整理在一個(gè)小空間中。

雖然界面已經(jīng)逐漸轉(zhuǎn)向了一種更扁平、更抽象的表達(dá)形式，但擬物化仍然在界面空間關(guān)系和視覺(jué)隱喻中存在，但是更加微妙和含蓄了。

5. 可能性——難以替代的擬物化

人機(jī)界面發(fā)展的不同階段，擬物化的形態(tài)也在發(fā)生變化。但直到現(xiàn)在，擬物化仍然在數(shù)字界面上發(fā)揮著難以替代的作用。

近年隨著可穿戴設(shè)備、AR 和 VR 的興起，擬物化的作用更加顯著。在《Painting VR》這款 VR 應(yīng)用中，人們繪畫時(shí)仍然在使用筆+調(diào)色板的傳統(tǒng)操作模式。可能是 VR 環(huán)境太具有創(chuàng)造力，所以開(kāi)發(fā)商們所打造的繪畫軟件看上去都很酷炫，繁多的功能和復(fù)雜的操作也讓普通繪畫愛(ài)好者望而卻步。兼顧到虛擬空間的自由度，和用戶上手的門檻，正是《Painting VR》在眾多 VR 繪圖應(yīng)用中脫穎而出的原因。盡管已經(jīng)非常熟悉數(shù)字世界，用戶上手新的操作模式同樣需要參考熟悉的對(duì)象。

6. 對(duì)我們的啟示

擬物化最初作為一種裝飾手法，在數(shù)字時(shí)代到來(lái)后被賦予了更強(qiáng)的功能屬性。其核心是通過(guò)模仿用戶熟悉的事物達(dá)到降低用戶學(xué)習(xí)成本的目標(biāo)。至少在人們完全成為“數(shù)字世界原住民”前，我們無(wú)法拋棄擬物化設(shè)計(jì)方法，每當(dāng)需要使用視覺(jué)手段對(duì)用戶進(jìn)行提示時(shí)，參考現(xiàn)實(shí)世界中的線索都可以幫助到我們。

當(dāng)我們需要使用擬物化設(shè)計(jì)時(shí)，我們可以從過(guò)往實(shí)踐中獲得一些啟發(fā)：

1. 把元素與現(xiàn)實(shí)世界的事物關(guān)聯(lián)，可以省去大量解釋成本。
2. 擬物化不是單純的裝飾手法，同樣可以參考用戶熟悉的操作模式。
3. 不要拘泥于扁平，可以使用材質(zhì)和體積構(gòu)建頁(yè)面的層級(jí)。

參考文獻(xiàn)：

1. Sam Judah,What is skeuomorphism?[N],BBC NEWS,[2013]
2. Lancashire and Cheshire Antiquarian Society,Transactions of the Lancashire and Cheshire Antiquarian Society[M],[1883]
3. Tim Worstall,Apple's iOS7, Well, It Was Time For Skeuomorphism To Die[N],Forbes,[2013]
4. Adrian Zumbrunnen,Skeuomorphism In Conversational Design[EB/OL],[2017]
5. Tamara Julaton,The Digitization of Reality[EB/OL],[2018]

歡迎關(guān)注作者微信公眾號(hào)：「We-Design」