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

01、擬物化

所謂擬物化原本是希臘詞匯，是指對(duì)象僅僅保留了之前的裝飾性元素，而這些元素對(duì)于當(dāng)前的功能已不再必要的。其設(shè)計(jì)核心就是利用一切裝飾效果，諸如陰影，透視，紋理，漸變等手段再現(xiàn)原有物體效果，表現(xiàn)出真實(shí)世界的物體形態(tài)。擬物化設(shè)計(jì)的特點(diǎn)，就是讓體驗(yàn)者能較快的了解產(chǎn)品，同時(shí)使體驗(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)生針對(duì)實(shí)物性質(zhì)本身的聯(lián)想，從而使體驗(yàn)者較容易地做出選擇判斷。如圖標(biāo)設(shè)計(jì)中，話機(jī)代表電話、聊天代表信息、播放符代表視頻等。喬布斯在早期的人機(jī)界面中也指出："當(dāng)應(yīng)用中的可視化對(duì)象和操作按照現(xiàn)實(shí)世界中的對(duì)象與操作進(jìn)行模仿，用戶就能快速領(lǐng)會(huì)如何使用它。"因此，擬物化風(fēng)格的優(yōu)勢(shì)便是將原本包含較多現(xiàn)實(shí)元素的抽象內(nèi)容具象化，使其更直觀地傳遞給用戶，降低學(xué)習(xí)成本，使用戶易于接受，提高產(chǎn)品的認(rèn)知度。

02、新擬物化的由來

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

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

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

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

1．高辨識(shí)度

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

2．人性化

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

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

擬物化設(shè)計(jì)的視覺質(zhì)感非常強(qiáng)烈，并且其交互效果能夠給人很好的體驗(yàn)，以至于人們對(duì)擬物化設(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í)間和精力實(shí)現(xiàn)對(duì)象的視覺表現(xiàn)和質(zhì)感效果，而忽略了其功能化的實(shí)現(xiàn)。許多擬物化設(shè)計(jì)并沒有實(shí)現(xiàn)較強(qiáng)的功能化，而只是實(shí)現(xiàn)了較好的視覺效果。并且在移動(dòng)設(shè)備中，受到屏幕尺寸大小的限制，圖標(biāo)的顯示尺寸有可能較小，當(dāng)擬物化圖標(biāo)在較小的尺寸時(shí)，其辨識(shí)度會(huì)大大降低。

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

1.新擬物化≠輕擬物

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

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

來看一個(gè)輕擬物與新擬物卡片的比對(duì)：

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

2.新擬物化控件示例

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

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

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

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

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

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

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

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

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

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

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

很簡單，就是給他們切圖。按鈕的軟點(diǎn)擊切兩張狀態(tài)圖，卡片背景只需要切一張，ppduck壓縮走一波，對(duì)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ì)中使用這個(gè)設(shè)計(jì)手法，可以根據(jù)項(xiàng)目的需要及特點(diǎn)分析而定。涉及到ui設(shè)計(jì)方面，不管采用何種風(fēng)格都應(yīng)該注意2020ui設(shè)計(jì)方面的規(guī)范，不然會(huì)顧此失彼。