擬物化設計曾經風靡一時,真實的體積和細膩的質感給人們留下了深刻印象。
在不斷發展中,界面又逐漸向扁平化演變,擬物化材質出現得越來越少。
近些年,我們發現設計師重新開始使用擬物的陰影和紋理,幫助用戶提供逼真的體驗和富有吸引力的外觀。
擬物在設計中起到了什么價值?又帶給設計師怎樣的幫助呢?或許了解從擬物風潮從興起到衰落,最后再次復興的原因,能幫助我們更好審視擬物化的現實意義。
擬物最初以裝飾的形態出現。制作者通過模仿生活中常見的形象來裝飾手工藝品和工業制品,喚起人們對熟悉事物的記憶。
擬物化(Skeuomorphic)一詞最早出現在 19 世紀英國考古學家 H.Colley March 所著的《裝飾的意義》中,他提到在古陶器中會出現這種模仿生活中常見事物結構或形態的現象。出于裝飾目的,人們會模仿其他物體的外形捏制陶器的輪廓,或者繪制出木柵欄、漁網等事物的紋理。
新石器時代,船形彩陶壺。從器形到紋樣都讓人都讓人聯想到漁船、漁網、捕魚活動等水上生活場面
在此之后,擬物的裝飾手法也出現在工業制品中。最初的汽車車身多數采用了木質框架。在當時的工藝條件下,木質框架既能保證車身的強度,又有不錯的性價比。在 20 世紀初,福特推出了木本旅行車。小伙子們開始駕駛著木本旅行車把沖浪板帶到海邊,吸引著姑娘的目光。這種價格便宜、外觀獨特,內部空間也非常寬敞的老式木質車型開始受到大量年輕沖浪者的喜愛。隨著沖浪文化在美國的流行,這種木質車身也逐漸變成一種流行風格(woodie 風格)。
隨著金屬工藝的完善和木材的減少,車廠開始普遍生產鋼架車身。曾經風靡的 woodie 風格也變成了一種復古風潮,人們開始懷念質感細膩的木質車身。1957 年,福特為大量 woodie 風格愛好者推出了“水星殖民公園”,車身采用乙烯基塑料和鋼模仿木材質感。
在這個時期,這時擬物的形態還是以裝飾產品外觀為主。人們將熟悉的場景、喜歡的事物經過加工美化后,還原在某種制品上。本意是希望讓使用者在體驗新事物的同時,喚起原有事物的相關回憶,感受到原有事物的美感。
在數字時代,擬物化設計伴隨圖形界面的發展,成為連接人與虛擬世界的重要方式。
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 也繪制了精細的擬物風格界面,通過大量使用陰影高光來體現體積效果,讓用戶可以更直觀出哪些按鈕是可交互的。
隨著計算機和智能手機的普遍使用,人機界面的普及程度也越來越高。一代人已經接掌握了人機界面的交互邏輯,這時候一味追求實體化世界的體驗會增加更多的不必要信息。
人們開始嘗試簡化界面的裝飾元素,扁平化的設計風格逐漸成為主流。最初的扁平化設計受到 20 世紀初興起的國際主義排版風格啟發。國際主義排版風格主要強調版面的干凈、易讀,更注重內容的清晰展示。主要特點有:
- 符號化、圖形化,只保留最基本的視覺元素。
- 推崇無襯線字體。
- 文字遵從柵格系統進行工整的布局。
Brockmann 的海報作品,將文字和圖片進行混合排版的模式,也影響了后期的扁平化設計
扁平化設計也推崇相同的設計原則。設計師不再一味的追求和真實物體外觀上對應,而是希望通過更加簡潔的元素來突出重點信息。2010 年 Windows 推出首款移動系統“Metro”,采用純色的背景和大量的卡片作為基本布局。Metro 界面去掉了多余的裝飾,更注重提高信息的傳遞效率。
微軟稱其為 Metro (地鐵)是因為它“既現代又干凈。速度快,而且在運動?!?/span>
Jony Ive 在喬布斯去世后接管了界面設計的工作,在他的主導下 iOS 也一改喬布斯最喜歡的精致擬物風格。在 2013 年發布的 iOS 7.0 中,蘋果將大部分陰影和紋理刪去。
雖然 Flat 一詞并沒有出現在蘋果的設計規范中,但《福布斯》說出了大部分人想說的話:擬物化已死(It Was Time For Skeuomorphism To Die)。
但擬物化真的被人們拋棄了嗎?
擬物化和簡單高效并不矛盾。正如 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 個頁面進行體驗(每個頁面將隨機抽取輕量/強化版本其中一個),體驗前會設定一個目標讓其完成,最后統計所有測試者完成的時間和查找過程中的視覺動線。
統計發現了兩個關鍵點:
- 使用輕量版的用戶比使用強化版的多花了 22% 的時間找到目標。
- 使用輕量版的用戶比使用強化版的多出 25% 的視線焦點。
限定任務為:您將看到航空公司航班的頁面。請找到在上午 8:00 到下午 3:00 之間起飛的航班。
可以看到強化版(擬物)的界面主要用漸變和陰影強調了界面上的重要元素,如按鈕、搜索框等。在刪除了這些元素后,雖然界面變得更加干凈,但是用戶使用時也更加費力,視線在界面掃視了很多地方才完成目標。
在扁平化興起之前,頁面上有多種視覺要素可以提示頁面的層級關系。而當這些“多余的裝飾”被刪除后,我們更需要思考如何處理元素的層級關系。
Material Design 就在扁平化設計的基礎上,提出了更多構建頁面層級的手法。比如引入頁面的高度,并使用陰影、色彩和不透明度區分不同高度的元素。在保持干擾信息盡可能少的情況下,也可以提示出頁面的層級。
Material Design 像是把手機屏幕簡化成了一個向內的小盒,每個元素按自己的分層整理在一個小空間中。
雖然界面已經逐漸轉向了一種更扁平、更抽象的表達形式,但擬物化仍然在界面空間關系和視覺隱喻中存在,但是更加微妙和含蓄了。
人機界面發展的不同階段,擬物化的形態也在發生變化。但直到現在,擬物化仍然在數字界面上發揮著難以替代的作用。
近年隨著可穿戴設備、AR 和 VR 的興起,擬物化的作用更加顯著。在《Painting VR》這款 VR 應用中,人們繪畫時仍然在使用筆+調色板的傳統操作模式。可能是 VR 環境太具有創造力,所以開發商們所打造的繪畫軟件看上去都很酷炫,繁多的功能和復雜的操作也讓普通繪畫愛好者望而卻步。兼顧到虛擬空間的自由度,和用戶上手的門檻,正是《Painting VR》在眾多 VR 繪圖應用中脫穎而出的原因。盡管已經非常熟悉數字世界,用戶上手新的操作模式同樣需要參考熟悉的對象。
擬物化最初作為一種裝飾手法,在數字時代到來后被賦予了更強的功能屬性。其核心是通過模仿用戶熟悉的事物達到降低用戶學習成本的目標。至少在人們完全成為“數字世界原住民”前,我們無法拋棄擬物化設計方法,每當需要使用視覺手段對用戶進行提示時,參考現實世界中的線索都可以幫助到我們。
當我們需要使用擬物化設計時,我們可以從過往實踐中獲得一些啟發:
- 把元素與現實世界的事物關聯,可以省去大量解釋成本。
- 擬物化不是單純的裝飾手法,同樣可以參考用戶熟悉的操作模式。
- 不要拘泥于扁平,可以使用材質和體積構建頁面的層級。
參考文獻:
- 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]
歡迎關注作者微信公眾號:「We-Design」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。
熱評 ?? LeBron??