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

01、擬物化

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

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

02、新擬物化的由來

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

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

03、擬物化（圖標(biāo)icon）設(shè)計(jì)的優(yōu)點(diǎn)與缺點(diǎn)

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

1．高辨識度

擬物化風(fēng)格圖標(biāo)因?yàn)橥耆M現(xiàn)實(shí)生活中對象的外觀和質(zhì)感，所以其具有很高的辨識度，無論是什么膚色、什么性別、什么年齡或文化程度的人都能夠認(rèn)知擬物化的設(shè)計(jì)。如圖2-12 所示為高辨識度的擬物化圖標(biāo)設(shè)計(jì)。

2．人性化

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

3．質(zhì)感強(qiáng)烈

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

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

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

1.新擬物化≠輕擬物

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

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

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

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

2.新擬物化控件示例

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

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

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

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

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

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

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

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

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

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

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

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

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