網(wǎng)頁界面設(shè)計中的擬物化設(shè)計風格，通常指的是圖標icon的設(shè)計技巧，相對于純粹的品牌公司網(wǎng)站建設(shè)來說，更多的是指UI設(shè)計領(lǐng)域。優(yōu)秀的擬物化設(shè)計風格，能直觀的讓你的品牌網(wǎng)站或app產(chǎn)品更直觀，更易用，更有辨識度。今天我們簡單聊聊擬物化風格設(shè)計的特點及一些把控的技巧。

01、擬物化

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

界面設(shè)計領(lǐng)域，擬物化的設(shè)計風格是指利用設(shè)計元素來模仿現(xiàn)實中的實物，創(chuàng)造出虛擬的三維效果，并產(chǎn)生針對實物性質(zhì)本身的聯(lián)想，從而使體驗者較容易地做出選擇判斷。如圖標設(shè)計中，話機代表電話、聊天代表信息、播放符代表視頻等。喬布斯在早期的人機界面中也指出："當應(yīng)用中的可視化對象和操作按照現(xiàn)實世界中的對象與操作進行模仿，用戶就能快速領(lǐng)會如何使用它。"因此，擬物化風格的優(yōu)勢便是將原本包含較多現(xiàn)實元素的抽象內(nèi)容具象化，使其更直觀地傳遞給用戶，降低學習成本，使用戶易于接受，提高產(chǎn)品的認知度。

02、新擬物化的由來

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

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

03、擬物化（圖標icon）設(shè)計的優(yōu)點與缺點

擬物化設(shè)計因其完全模擬現(xiàn)實生活中的物體對象，其優(yōu)勢也很明顯，主要包括以下幾點。

1．高辨識度

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

2．人性化

擬物化風格圖標能夠體現(xiàn)較好的人性化，其設(shè)計的風格與使用方法與實現(xiàn)生活中的對象相統(tǒng)一，在使用上非常方便，也更容易使用戶理解。如圖 2-13 所示為人性化的擬物化圖標設(shè)計。

3．質(zhì)感強烈

擬物化設(shè)計的視覺質(zhì)感非常強烈，并且其交互效果能夠給人很好的體驗，以至于人們對擬物化設(shè)計已經(jīng)養(yǎng)成了統(tǒng)一的認知和使用習慣。如圖 2-14 所示為質(zhì)感強烈的擬物化圖標設(shè)計。

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

04、新擬物化設(shè)計語言解析

1.新擬物化≠輕擬物

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

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

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

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

2.新擬物化控件示例

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

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

05、新擬物化的改良與應(yīng)用

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

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

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

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

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

3.拿什么解決開發(fā)崩潰的問題

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

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

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

網(wǎng)頁界面設(shè)計中的擬物化設(shè)計風格的優(yōu)點與缺陷都已經(jīng)跟大家分享了。是否應(yīng)該在ui界面設(shè)計中使用這個設(shè)計手法，可以根據(jù)項目的需要及特點分析而定。涉及到ui設(shè)計方面，不管采用何種風格都應(yīng)該注意2020ui設(shè)計方面的規(guī)范，不然會顧此失彼。