編輯導讀：社會不斷進步，人們審美不斷變化，界面視覺風格也不斷變化。近年來出現的新擬物風格讓不少設計師思考，擬物設計又回來了嗎？本文作者將從三個方面，對新擬物設計展開分析，希望對你有幫助。
前言：
80年代以來，界面視覺風格從扁平到擬物，然後又回歸扁平，設計風格交替登場。
近兩年，新的風格湧現，其中不得不提的就是Neumorphism（新擬物），它的出現讓不少設計師思考：擬物設計又回來了麼？
對此我們梳理了風格演變的過程，然後通過設計案例與問卷調研的方式對新擬物進行了分析，希望可以啟發你的思考。
一、技術發展與界面風格演變
網際網路設計這份職業由於技術變革而出現，設計手段、設計風格也註定受到技術最為直接的影響。通過下圖可以看到，界面設計風格在技術驅動下經歷的多次更迭。
△ 界面設計風格演變
1.1 從初期的扁平化到擬物化
1983年，蘋果推出全球首款搭載圖形用戶界面的個人電腦，從此GUI進入大家的生活。但早期受限於設備解析度，主流操作界面均為扁平化設計。
隨著顯示技術升級，開始出現追求真實質感的擬物風格，即通過陰影、高光、紋理等技法使設計對象更加接近現實世界。
當然，此演變也適用於移動網際網路時代，其本質都是借用擬物化降低用戶的認知成本、學習成本，消除用戶的「陌生感」，這一點對新手用戶來說非常重要。
△ 扁平風格與擬物風格對比（來源：網絡）
2012年，研報顯示全球網際網路用戶已達24億，智能終端全面普及，用戶對於界面的操作心智已經成熟。
另一方面，內容豐富度的爆發，使擬物化設計風格的缺點日益凸顯，如：設計成本高、焦點分散、視覺疲勞等，設計師們逐漸意識到信息與效率優先的重要性。
1.2 扁平化的流行
2013年9月，蘋果正式推出iOS7，界面設計語言徹底重構，視覺上擺脫了擬物映射，不再追求紋理、透視等效果，通過扁平化風格構建了一套信息優先、簡單實用、統一的設計語言，成為扁平化進程的重要推手。
扁平化的回歸不是偶然，它首先解決了擬物設計長期積累的諸多矛盾，其次滿足了用戶對於內容、效率的訴求。它不單是風格的扁平化，更是圍繞內容做設計的思維轉變。
△ 擬物化與扁平化界面風格對比（來源：網絡）
扁平風格作為主流至今仍被廣泛應用，其在可識別性、可讀性方面的優勢較為突出，但多年的體驗和實踐，讓大家開始審視扁平化的一些「軟肋」：
個性化設計空間有限，產品容易出現雷同；多層次信息呈現困難，信息也被「扁平化」；3.過度去裝飾化，頁面缺少情感；面對這些問題，一方面我們在觀察扁平化能否自我修正，另一方面也在不斷探索新的風格。
1.3 「新」擬物的萌芽
2019年11月，烏克蘭設計師 Alexander Plyuto 在多個平臺發布了一組名為《Skeuomorph Mobile Banking / 新擬物手機銀行》的UI作品，以乾淨、輕盈、立體的設計風格在短時間內獲得廣泛好評，掀起一場新的風格熱潮，一大批此類風格的設計作品湧現，人們將這種新的物種命名為「新擬物」、「新擬態」。
△ Alexander Plyuto 作品（來源：Dribbble）
新擬物可以看做是介於扁平與「舊」擬物之間的融合方案，既保留了信息的突出，又賦予元素立體的質感，它的精髓在於對光線的絕妙運用，以及對背景色、高光色、陰影色的嚴謹處理。
但不同於「舊」擬物的是，新擬物沒有重拾裝飾化，而是用更輕盈的手法模擬現實世界，呈現出一種真實物體的微質感，給用戶帶來新穎、有趣的界面體驗。
△ 「新」擬物設計特徵
△ 新擬物與「舊」擬物的差異
近些年，智能設備實現跨越式發展，性能不再是內容的制約因素，反而成為推動內容創新的力量；同時我們已經逐步邁入AI時代，機器學習、智能搜索、自然語言處理等技術對生活影響深遠：
內容側：AI已經成為內容重要的生產者和推手，而其群智開放的特點加速了現實與虛擬的融合，就像物聯網、車聯網，現實與虛擬的邊界更加模糊，極大豐富了智能終端為用戶所呈現的內容類型。用戶側：AI打開了我們的感官，多彩的世界讓每個人的興趣更加多元化，人們對於內容、形式的個性化訴求愈加強烈；
△ 設計導向的迭代路徑
新的形勢下想獲取用戶注意力更加困難，扁平化對此顯得力不從心，而新擬物的出現，讓設計師看到了一個新的突破方向。新擬物微凸的質感，讓以往扁平的頁面與「真實世界」建立聯繫，多年審美疲勞後新擬物使用戶感受到久違的熟悉感，「舊」擬物的情懷重新被點燃。
綜上，我們可以看到40年的風格演變史，其實就是處理與技術、內容、用戶關係的歷史：
技術受限時，設計儘可能降低形式的資源佔用而凸顯內容；技術成熟後，設計得以施展，開始追求形式的美感；內容的增多與擬物化的過度，促使我們開始關注信息可讀性，在效率面前選擇回歸扁平；智能、多元的今天，我們聚焦用戶，期望通過設計獲得用戶更多的注意力，因此不斷進行風格的融合探索。
二、新擬物風格的應用與分析
為了深入了解新擬物，我們收集了一些具有代表性的應用案例，並進行了一次問卷調研，從多種角度來分析新擬物風格的優缺點。
2.1 應用案例
QQ小世界內測版：
QQ在今年上半年發布了「小世界」內側版本，它主打年輕人的興趣分享。頁面中，在關鍵按鈕、卡片等元素上運用了新擬物風格，帶給人一種新鮮感。然而在發文前不久，小世界進行了頁面迭代，其中頁面底色、按鈕樣式均進行了優化調整，部分細節已脫離新擬物特徵。
△ QQ小世界內測版界面（來源：QQ）
Hillman Synth：
Hillman Synth 是一款音樂合成器APP，靈感源於老式組合風琴以及弦樂器。界面採用了新擬物風格，模擬真實觸感的合成器按鈕，具有「隱喻」的視覺體驗讓用戶在真實世界和虛擬界面中自由切換。
△ Hillman Synth界面（來源：App Store）
Spotify：
Spotify是一個月活用戶高達2.5億的音樂服務平臺，其內容形式豐富，包含卡片、滑塊、列表、文本等頁面部件，層次結構表現極具挑戰。設計師Sangeeta Baishya於5月份發布了其使用新擬物風格對Spotify 重新設計的方案。
△ Spotify概念方案（來源：uxdesign）
小米遙控器：
設計師 Igor Erema 在Dribbble上發布了小米智能遙控器App的概念設計方案，用新擬物風格模擬了遙控器按鍵，給IOT領域的界面設計帶來了新的嘗試和啟發。
△ 小米遙控器概念設計方案（來源：Dribbble）
收集案例時我們發現，概念設計方案有很多，但實際落地產品少之又少，兩者的數量對比鮮明。出現這種情況，我們認為原因可能有3個：
新擬物風格出現的時間較短，很多設計師還沒有認知；沒有成熟的新擬物設計指引，設計容易，設計好卻很難；最重要的一點，就是還沒有明確的數據或用戶反饋證明新擬物能對產品形成正向助力。因此，在沒有明確的預期收益下對於新擬物的落地都比較冷靜克制。
2.2 新擬物風格問卷調研
為了在案例之外獲得一些真實用戶的反饋和數據，透過相對理性的視角審視新擬物，我們在疫情期間，選擇了相對便捷的問卷方式對用戶的風格感知、用戶偏好等內容進行了調研。問卷內容和形式不免存在局限性，大家可辯證看待問卷結果。
問卷以《APP界面設計小調研》為主題，通過模擬真實用戶界面，成對呈現新擬物和扁平化設計，讓用戶進行偏好選擇，包含簡單的彈窗、開關、按鈕、卡片，還包含多組件綜合運用的複雜頁面；然後通過語義差異量表，測量用戶對不同風格的感知；問卷最後設置了收集偏好原因的開放題目及關鍵人口學信息。為保證填答有效，問卷題量控制在19道，發布概況如下：
△ 調研問卷概況
就問卷的結果來說，整體趨向一致，部分偶有差異，主要總結為以下幾點：
功能操作型界面，以提示彈窗、深色模式切換頁、鬧鐘開關列表頁為例，用戶更偏向扁平化。內容展示型界面，以信息卡片、關注頁為例，新擬物的信息卡片更被喜歡，但當卡片放在關注頁中時，用戶則又偏向了扁平。綜合型界面，以常見的首頁為例，用戶仍然更喜歡扁平化，但值得關注的是新擬物的偏愛佔比逐漸變高，與扁平化的差距在縮小。對於扁平化風格，用戶認為其簡潔、乾淨、輕便，也比較柔和；對於新擬物風格，用戶認為有質感、乾淨、立體、高級；其中扁平的乾淨感知數值高於新擬物。
△ 問卷設置-用戶偏好題舉例
兩個風格中用戶依然最喜歡扁平，且傾向非常明確，這個結果頗有些意外，對此我們的分析是：
功能操作型界面，對於識別、理解、判斷信息，扁平風格的顯示更加清晰明確，操作效率上優於新擬物。內容展示型界面，信息數量及應用場景都是偏好的影響因素；信息數量少、場景簡單時，用戶容易關注視覺，新擬物的視覺表現力更好；信息數量多、場景複雜時，用戶更在乎信息的呈現，新擬物厚重感強，顏色偏灰偏冷，反而降低了信息的識別度，扁平風格的輕便簡潔，優勢凸顯。綜合型界面，用戶主要聚焦信息的瀏覽，注意力轉移讓新擬物的部分缺點被遮蓋，這也是新擬物喜愛度提升的原因，但整體顏色依然會被感知，扁平仍略勝一籌。
2.3 新擬物優缺點及應用建議
通過以上對新擬物的深入認識，是時候總結一下了：
優點：
真實：立體表達比扁平風格更加符合真實世界，代入感強，容易拉近與用戶的距離，相比「舊」擬物也更輕量化。趣味：陰影高光產生的前後層次，營造出一定的空間感，結合可視化信息可增加頁面的趣味性，吸引用戶體驗。轉化：新擬物的點擊感強，傳遞了明確的行為召喚，很容易吸引用戶注意力，提升頁面元素的點擊轉化率。缺點：
形式影響信息識別：元素與背景的統一融合，缺乏清晰邊界，視覺對比度低，部分情況下（如屏幕亮度低、視障用戶）嚴重影響內容識別。應用場景非常有限：新擬物有明確的觸發感、點擊感，適於結合操作類元素，信息呈現類元素使用時容易引發歧義，造成誤判。不適合大面積使用：陰影、高光等元素的大量增加，導致頁面信息難以聚焦，同時信息層級拉不開，重點信息無法突出。高度依賴設計能力：使用新擬物風格需考慮的因素（功能、場景、信息數量等）較多，難以形成設計規範，頁面質量把控困難。開發工作量增加：對於開發來說，需要寫框架來支持實現新擬物UI效果的 css 代碼，而且無法在移動端使用，代碼的工作量增加。應用建議：
注意場景適配度：新擬物更加適合功能單一、層級簡單的工具類頁面（如物聯網操作頁面），有時頁面元素在現實中有實體，新擬物可呈現真實物體的質感，讓頁面富有趣味性。尊重內容優先級：嚴控新擬物元素數量，選擇性、針對性的使用，如優先級高、吸引用戶聚焦、期望提升點擊轉化的信息元素。增加視覺對比度：通過顏色、粗細等手段進一步增強視覺對比度，解決新擬物頁面偏灰的特點，信息承載大，層級關係複雜的產品，謹慎使用新擬物風格。要符合既有認知：新擬物可以增強滑塊、開關、按鈕等組件的操作感知，但有些組件並不適合，如臨時出現的模態框、下拉框等，新擬物反而會誤導用戶認知。
三、理性看待，大膽嘗試
關於新擬物，我們看過太多悲觀、否定的態度，人們更願意相信它是「曇花一現」，很多訊息似乎也在佐證著這一觀點。
但我們要看到一個事實，風格只是解決問題的方法，方法沒有對錯，是否能解決問題才是關注的重點。
風格演變過程告訴我們沒有一個風格可以解決所有問題，而且隨著時間推移，新的問題不斷出現，我們需要新的風格，新的解題思路。
新生事物有它獨有的魅力，也必然存在潛在的「問題」，我們要理性看待，大膽嘗試，不執著於手段，聚焦解決問題，敢於突破任何風格的條框，去嘗試去探索。
未來，人工智慧發展、5G普及、新的智能終端誕生等每一步都在推動整個時代往前邁步，界面風格也會不斷迭代演變，面對未知與挑戰，讓我們保持激情與敬畏~
本文由 @Du Design 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖由作者提供