網頁界面設計中的擬物化設計風格，通常指的是圖標icon的設計技巧，相對于純粹的網站建設來說，更多的是指UI設計領域。優秀的擬物化設計風格，能直觀的讓你的品牌網站或APP產品更直觀，更易用，更有辨識度。今天我們簡單聊聊擬物化風格設計的特點及一些把控的技巧。

01擬物化

所謂擬物化原本是希臘詞匯，是指對象僅僅保留了之前的裝飾性元素，而這些元素對于當前的功能已不再必要的。其設計核心就是利用一切裝飾效果，諸如陰影，透視，紋理，漸變等手段再現原有物體效果，表現出真實世界的物體形態。擬物化設計的特點，就是讓體驗者能較快的了解產品，同時使體驗者與產品的交互方式也是在模擬現實生活的使用過程，而所有的元素都取自于現實，都是運用現實生活中的物體或者是能通過關聯到的物體來體現。

界面設計領域，擬物化的設計風格是指利用設計元素來模仿現實中的實物，創造出虛擬的三維效果，并產生針對實物性質本身的聯想，從而使體驗者較容易地做出選擇判斷。如圖標設計中，話機代表電話、聊天代表信息、播放符代表視頻等。

喬布斯在早期的人機界面中也指出：“當應用中的可視化對象和操作按照現實世界中的對象與操作進行模仿，用戶就能快速領會如何使用它。”因此，擬物化風格的優勢便是將原本包含較多現實元素的抽象內容具象化，使其更直觀地傳遞給用戶，降低學習成本，使用戶易于接受，提高產品的認知度。

02新擬物化由來

一切的開始都源于一個叫 Alexander Plyuto 的設計師在各平臺發布了一個他的新作品——"Skeuomorph Mobile Banking（擬物化手機銀行）"。

在去年末的時候這名設計師還一直沿用Skeuomorph（擬物化）這個名詞來命名自己的一系列設計作品，直到HYPE4的CEO-Michal Malewicz寫了一篇關于此風格的文章，并賦予了它一個新名詞Neumorphism（New+Skeuomorphism），自此之后大家就都照著這個新名詞進行一傳十十傳百的傳播了。

03擬物化設計優缺點

擬物化設計因其完全模擬現實生活中的物體對象，其優勢也很明顯，主要包括以下幾點。

1．高辨識度

擬物化風格圖標因為完全模擬現實生活中對象的外觀和質感，所以其具有很高的辨識度，無論是什么膚色、什么性別、什么年齡或文化程度的人都能夠認知擬物化的設計。

2．人性化

擬物化風格圖標能夠體現較好的人性化，其設計的風格與使用方法與實現生活中的對象相統一，在使用上非常方便，也更容易使用戶理解。

3．質感強烈

擬物化設計的視覺質感非常強烈，并且其交互效果能夠給人很好的體驗，以至于人們對擬物化設計已經養成了統一的認知和使用習慣。

擬物化風格圖標的缺點是，在設計中花費大量的時間和精力實現對象的視覺表現和質感效果，而忽略了其功能化的實現。許多擬物化設計并沒有實現較強的功能化，而只是實現了較好的視覺效果。并且在移動設備中，受到屏幕尺寸大小的限制，圖標的顯示尺寸有可能較小，當擬物化圖標在較小的尺寸時，其辨識度會大大降低。

04新擬物化設計語言解析

1.新擬物化≠輕擬物

第一次看到這個風格介紹的時候險些以為就是曾經的輕擬物重返江湖了，但仔細看看原設計師輸出的設計原則，發現確實是完全不同的2種定義。

輕擬物從本質上來說是Y軸面原質化層級分離的，而新擬物是在Y軸面不分離的情況下物理化擬態。

來看一個輕擬物與新擬物卡片的比對：

從上圖可以感受到新擬物在保留輕質感的同時更貼近事物的物理還原，但真實感與舒適度帶來的代價就是它的辨識度和對比度明顯較其他風格低了很多，這也是正是它被大家吐槽飛機稿中的戰斗稿的重要原因之一。

2.新擬物化控件示例

原設計師對新擬物化的“淺色版”控件規范如下，基本涵蓋了核心的界面設計控件，整體對于控件的定義就在于良好使用投影和漸變來打造物理化界面肌理。

另外還有可以良好適配當前流行黑色模式的“黑色版”。

05新擬物化的改良與應用

在了解新擬物化的設計語言特點之后，大家應該都發現這種風格的設計是有一定局限性的，它并不適用于一部分商業產品，大部分時候也不適合全局控件應用。那么如果我們想要把新擬物化應用到我們的落地項目設計中，需要注意哪些地方，并進行什么樣的改良呢？

1.深淺模式疊加解決弱可視難題

新擬物的按鈕肌理很多是建立在素色白板上的淺色按鈕，如果繼續沿用淺色按鈕，且不說色弱用戶的可視問題，普通用戶的操作行為也會大打折扣，所以這里我們建議將新擬物的深淺模式疊加來使用，如：

2.局部高光使用解決層級難辨問題

如果將新擬物化全控制使用，確實容易造成界面層級混亂的問題，因為畢竟它的設計語言就是Y軸面不分離的設計定義，但如果我們合理選擇它來作為局部高光，應該大部分情況下還是不錯的選擇。如下圖，我們僅在銀行卡部分使用新擬物化（深淺雙模式均可用），其他的控件部分保持扁平，使用2個風格相融合的方式可以良好保障層級的劃分：

3.拿什么解決開發崩潰的問題

之前看到很多文章在轉發一個生成新擬物化css代碼的網站：Neumorphism.io  說是用這個就可以輕松解決開發的問題，復制粘貼開心愉快。

然而事實的真相總是令人落淚的，這個網站提供的css代碼只是網頁代碼，移動端是完全用不了的。而且就算有對應的css代碼對于開發來說也是遠不夠的，他們還是要寫框架來支持這套css代碼，不然是跑不起來的。所以我們要如何解決開發小哥哥手寫新擬物化設計稿崩潰的問題呢？

很簡單，就是給他們切圖。按鈕的軟點擊切兩張狀態圖，卡片背景只需要切一張，ppduck壓縮走一波，對app性能的影響基本可以忽略不計（因為上文我也說過了這種風格我們不大可能大面積或者全界面應用）。

總之，上面已經詳細地介紹了網頁界面設計中的擬物化設計風格的優缺點，是否應該在UI界面設計中使用這個設計手法，可以根據項目的需要及特點分析而定。涉及到UI設計方面，不管采用何種風格都應該注意設計方面的規范，不然會顧此失彼。