Sharing
擬物化設計曾經風靡一時，真實的體積和細膩的質感給人們留下了深刻印象。
在不斷髮展中，介面又逐漸向扁平化演變，擬物化材質出現得越來越少。
近些年，我們發現設計師重新開始使用擬物的陰影和紋理，幫助使用者提供逼真的體驗和富有吸引力的外觀。
擬物在設計中起到了什麼價值？又帶給設計師怎樣的幫助呢？或許瞭解從擬物風潮從興起到衰落，最後再次復興的原因，能幫助我們更好審視擬物化的現實意義。
1
誕生——從裝飾開始
擬物最初以裝飾的形態出現。製作者透過模仿生活中常見的形象來裝飾手工藝品和工業製品，喚起人們對熟悉事物的記憶。
擬物化（Skeuomorphic）一詞最早出現在 19 世紀英國考古學家 H。Colley March 所著的《裝飾的意義》中，他提到在古陶器中會出現這種模仿生活中常見事物結構或形態的現象。出於裝飾目的，人們會模仿其他物體的外形捏製陶器的輪廓，或者繪製出木柵欄、漁網等事物的紋理。
▲ 新石器時代，船形彩陶壺。從器形到紋樣都讓人都讓人聯想到漁船、漁網、捕魚活動等水上生活場面
在此之後，擬物的裝飾手法也出現在工業製品中。最初的汽車車身多數採用了木質框架。在當時的工藝條件下，木質框架既能保證車身的強度，又有不錯的價效比。在 20 世紀初，福特推出了木本旅行車。小夥子們開始駕駛著木本旅行車把衝浪板帶到海邊，吸引著姑娘的目光。這種價格便宜、外觀獨特，內部空間也非常寬敞的老式木質車型開始受到大量年輕衝浪者的喜愛。隨著衝浪文化在美國的流行，這種木質車身也逐漸變成一種流行風格（woodie 風格）。
隨著金屬工藝的完善和木材的減少，車廠開始普遍生產鋼架車身。曾經風靡的 woodie 風格也變成了一種復古風潮，人們開始懷念質感細膩的木質車身。1957 年，福特為大量 woodie 風格愛好者推出了“水星殖民公園”，車身採用乙烯基塑膠和鋼模仿木材質感。
在這個時期，這時擬物的形態還是以裝飾產品外觀為主。人們將熟悉的場景、喜歡的事物經過加工美化後，還原在某種製品上。本意是希望讓使用者在體驗新事物的同時，喚起原有事物的相關回憶，感受到原有事物的美感。
2
發展——數字時代的寵兒
在數字時代，擬物化設計伴隨圖形介面的發展，成為連線人與虛擬世界的重要方式。
1973 年，施樂就最早開發出被稱為施樂之星的 Xerox 8108 系統，引入了“桌面”的概念和看起來像資料夾或是紙片的圖示。受到施樂的啟發，Apple Lisa、GEM、Microsoft Windows 1。01 也緊隨其後，研發出了帶有 GUI 的計算器系統。
▲ Xerox 8108
姆斯·吉布森於 1977 年提出了功能可供性理論，這一理論也深刻影響了擬物化設計。他認為可供性是環境給人提供的行動可能性。比如看到一個木棍，人們可以感知到多種對它的使用方式。比如用棍子敲人、支撐身體、當作燃料等等。圖形介面中的擬物化正是利用到這種可供性，透過模仿某種事物來暗示元素的內容，將功能直觀的呈現給使用者。
計算機介面對當時的大多數使用者是一個完全陌生的概念。擬物化可以幫助使用者理解全新的數字介面互動，降低使用者的學習成本。它借用人們對現實資料夾的認識，來表達數字世界的檔案。透過隱喻讓使用者認識到資料夾的功能，比如可以開啟關閉、內部存有文件等。
早期介面也廣泛參考了物理世界的可操作表面，Mac OS最初的控制中心就模擬了重型機械或普通家用開關的控制面板。其透過模模擬實按鍵、旋鈕的形態，還有模組的佈局體現了不同功能的區分度和可操縱性。
隨著數字螢幕技術和介面設計的發展，介面上的影象也更加完善精細，力求達到與數字程式無縫互動。隨著影象不斷細化，擬物化的介面元素不僅模仿了現實產品的外觀，也可以做到表現產品的材質和體積。
MacOS X10。0 推出的 Aque 系統，就在介面上繪製出細膩的材質和體積效果。這種材質最突出的質感是半透明塑膠和水滴狀晶體，靈感來源於當時的mac硬體外觀。真實細膩的擬物效果不光具有裝飾美感，同時也強化了可點選的操作暗示。
▲ MacOS X10。0
iphone 1 首次採用電容觸控式螢幕幕，並且移除了物理鍵盤，僅保留 home 鍵。為了讓觸控操作更加自然、直接，iphone os 也繪製了精細的擬物風格介面，透過大量使用陰影高光來體現體積效果，讓使用者可以更直觀出哪些按鈕是可互動的。
3
衰落——扁平化風潮
隨著計算機和智慧手機的普遍使用，人機介面的普及程度也越來越高。一代人已經接掌握了人機介面的互動邏輯，這時候一味追求實體化世界的體驗會增加更多的不必要資訊。
人們開始嘗試簡化介面的裝飾元素，扁平化的設計風格逐漸成為主流。最初的扁平化設計受到 20 世紀初興起的國際主義排版風格啟發。國際主義排版風格主要強調版面的乾淨、易讀，更注重內容的清晰展示。主要特點有：
1。 符號化、圖形化，只保留最基本的視覺元素。
2。 推崇無襯線字型。
3。 文字遵從柵格系統進行工整的佈局。
▲ Brockmann 的海報作品，將文字和圖片進行混合排版的模式，也影響了後期的扁平化設計
扁平化設計也推崇相同的設計原則。設計師不再一味的追求和真實物體外觀上對應，而是希望透過更加簡潔的元素來突出重點資訊。2010 年 Windows 推出首款移動系統“Metro”，採用純色的背景和大量的卡片作為基本佈局。Metro 介面去掉了多餘的裝飾，更注重提高資訊的傳遞效率。
▲ 微軟稱其為 Metro （地鐵）是因為它“既現代又幹淨。速度快，而且在運動。”
Jony Ive 在喬布斯去世後接管了介面設計的工作，在他的主導下 ios 也一改喬布斯最喜歡的精緻擬物風格。在 2013 年釋出的 ios 7。0 中，蘋果將大部分陰影和紋理刪去。
雖然 Flat 一詞並沒有出現在蘋果的設計規範中，但《福布斯》說出了大部分人想說的話：擬物化已死（It Was Time For Skeuomorphism To Die）。
但擬物化真的被人們拋棄了嗎？
4
復興——擬物化的“迴歸”
擬物化和簡單高效並不矛盾。正如 ios 7。0 推出後，蘋果在官網所寫的：“真正的簡單不僅僅是沒有雜亂或去除裝飾。我們所創作的一切，從不只是為了看起來美觀而設計。”
擬物化最常見的是繪製外形、材質和體積來模擬事物的外觀，但也可以模仿熟悉的操作模式，方便使用者上手使用。
從蘋果計算器的演化就可以看出，雖然介面逐漸轉簡化，但都沒有脫離擬物的本質。ios 1 的計算器靈感來自於博朗計算器，並模仿了博朗使用色彩進行功能分割槽的設計方式。後期蘋果雖然對按鍵歸類進行了調整，但這套操作也一直在蘋果計算器沿用了下來。
▲ ios的計算器一貫使用色彩進行功能分割槽設計
擬物化的材質和體積經過簡化後，同樣可以作為扁平介面中的元素，並維持原有的功能屬性。
在 ios 7。0 中的“毛玻璃”沿襲自 MacOS X10。0 的半透明塑膠材質。ios 7 剔除材質中多餘的裝飾後，這種半透明的質感更強化其功能特性。在刪去大量陰影后，頁面的空間層次變得難以區分，ios 正是使用了這種半透明的材質有效的拉開了介面層次。
▲ 儘管刪去了陰影，但頁面的空間層次還是存在
合理利用體積也可以在平面起到畫龍點睛的作用。ios 13。0的備忘錄中，塗鴉畫筆從線條變成立體的形態。線條的版本中，畫筆工具更像是在紙上繪製的符號。新版用平面-立體的區分暗示出了備忘錄和畫筆，突出需要操作的內容。
而過於追求視覺效果上的極簡，反而會走向效率的反面。在微軟後續推出的 Windows 8 中，對扁平化介面的爭論達到了高潮。Windows 8 使用磁貼卡片替代擬物的圖示和按鈕，應用資訊直接以文字加圖片的形式呈現在磁貼上。在規整的卡片佈局下，頁面中的複雜資訊看起來也可以變得簡單又整潔。
但 Windows 8 的磁鐵設計卻帶來了大量的負面反饋。頁面上眾多平面元素缺少可進行互動的線索，導致使用者不知道哪些可以點選。為了提高應用的吸引力，Windows 支援在磁貼卡片上配置背景圖片。但是豐富多彩的背景讓應用圖示本身變得更加無法識別。使用者對 Windows 8 扁平的介面產生了更多困惑。
▲ Windows 8 啟動頁，沒有名稱的應用和背景圖
研究顯示在介面中刪除可點選感知和層級提示後，使用者的操作效率會降低。Kate Meyer 的眼動實驗將 9 個不同類別的介面分別改造成強化版（擬物）和輕量版（扁平）兩個版本。71 名測試者將對 9 個頁面進行體驗（每個頁面將隨機抽取輕量/強化版本其中一個），體驗前會設定一個目標讓其完成，最後統計所有測試者完成的時間和查詢過程中的視覺動線。
統計發現了兩個關鍵點：
1。 使用輕量版的使用者比使用強化版的多花了 22% 的時間找到目標。
2。 使用輕量版的使用者比使用強化版的多出 25% 的視線焦點。
▲ 限定任務為：您將看到航空公司航班的頁面。請找到在上午 8：00 到下午 3：00 之間起飛的航班。
可以看到強化版（擬物）的介面主要用漸變和陰影強調了介面上的重要元素，如按鈕、搜尋框等。在刪除了這些元素後，雖然介面變得更加乾淨，但是使用者使用時也更加費力，視線在介面掃視了很多地方才完成目標。
在扁平化興起之前，頁面上有多種視覺要素可以提示頁面的層級關係。而當這些“多餘的裝飾”被刪除後，我們更需要思考如何處理元素的層級關係。
Material Design 就在扁平化設計的基礎上，提出了更多構建頁面層級的手法。比如引入頁面的高度，並使用陰影、色彩和不透明度區分不同高度的元素。在保持干擾資訊儘可能少的情況下，也可以提示出頁面的層級。
▲ Material Design 像是把手機螢幕簡化成了一個向內的小盒，每個元素按自己的分層整理在一個小空間中。
雖然介面已經逐漸轉向了一種更扁平、更抽象的表達形式，但擬物化仍然在介面空間關係和視覺隱喻中存在，但是更加微妙和含蓄了。
5
可能性——難以替代的擬物化
人機介面發展的不同階段，擬物化的形態也在發生變化。但直到現在，擬物化仍然在數字介面上發揮著難以替代的作用。
近年隨著可穿戴裝置、AR 和 VR 的興起，擬物化的作用更加顯著。在《Painting VR》這款 VR 應用中，人們繪畫時仍然在使用筆+調色盤的傳統操作模式。可能是 VR 環境太具有創造力，所以開發商們所打造的繪畫軟體看上去都很酷炫，繁多的功能和複雜的操作也讓普通繪畫愛好者望而卻步。兼顧到虛擬空間的自由度，和使用者上手的門檻，正是《Painting VR》在眾多 VR 繪圖應用中脫穎而出的原因。儘管已經非常熟悉數字世界，使用者上手新的操作模式同樣需要參考熟悉的物件。
6
對我們的啟示
擬物化最初作為一種裝飾手法，在數字時代到來後被賦予了更強的功能屬性。其核心是透過模仿使用者熟悉的事物達到降低使用者學習成本的目標。至少在人們完全成為“數字世界原住民”前，我們無法拋棄擬物化設計方法，每當需要使用視覺手段對使用者進行提示時，參考現實世界中的線索都可以幫助到我們。
當我們需要使用擬物化設計時，我們可以從過往實踐中獲得一些啟發：
1。 把元素與現實世界的事物關聯，可以省去大量解釋成本。
2。 擬物化不是單純的裝飾手法，同樣可以參考使用者熟悉的操作模式。
3。 不要拘泥於扁平，可以使用材質和體積構建頁面的層級。
— The end —
參考文獻：
Sam Judah，What is skeuomorphism？［N］，BBC NEWS，［2013］
Lancashire and Cheshire Antiquarian Society，Transactions of the Lancashire and Cheshire Antiquarian Society［M］，［1883］
Tim Worstall，Apple‘s iOS7， Well， It Was Time For Skeuomorphism To Die［N］，Forbes，［2013］
Adrian Zumbrunnen，Skeuomorphism In Conversational Design［EB/OL］，［2017］
Tamara Julaton，The Digitization of Reality［EB/OL］，［2018］
作者：
WeDesignCenter
We-Design
出處：https：//mp。weixin。qq。com/s/Ry6qKZDJwuZxkWDuEJZBxA