藍(lán)藍(lán)注：我非常喜歡這個(gè)風(fēng)格。

日前，在網(wǎng)上流行起了一種叫 Neumorphism 的新風(fēng)格，也有人稱為 Soft UI，這是一種類似于浮雕的效果。這種風(fēng)格的出現(xiàn)，給目前流行的扁平化設(shè)計(jì)增加了一種新的設(shè)計(jì)形式，很多媒體甚至還將這個(gè)風(fēng)格列為 2020 的設(shè)計(jì)趨勢(shì)，三星 Galaxy 系列的發(fā)布會(huì)宣傳海報(bào)也使用了這種風(fēng)格，可見(jiàn)這個(gè)風(fēng)格的火熱程度。那么一開(kāi)始我們不討論這個(gè)風(fēng)格好還是不好，先來(lái)了解一下這個(gè)新風(fēng)格趨勢(shì)。

什么是Neumorphism？

最開(kāi)始是一位來(lái)自烏克蘭的設(shè)計(jì)師 Alexander Plyuto 在各平臺(tái)發(fā)布了新的作品「Skeuomorph Mobile Banking」。這個(gè)作品自發(fā)布以來(lái)就獲得了數(shù)十萬(wàn)瀏覽量，數(shù)千點(diǎn)贊數(shù)，熱度持續(xù)飆升并登上 Popular 榜首。

作者是用 Skeuomorph 來(lái)命名這個(gè)作品風(fēng)格，評(píng)論區(qū)就開(kāi)始了這種風(fēng)格的討論，有的人說(shuō)這是新的擬物風(fēng)格（New Skeuomorphism），也有人說(shuō)這是擬物風(fēng)格 2.0 版本（Skeuomorph 2.0），而后來(lái)就有設(shè)計(jì)師創(chuàng)出一個(gè)新的虛構(gòu)名詞，把 New Skeuomorphism 兩個(gè)詞組合，Neo 諧音 New 就是 Neuomorphism。

這個(gè)名字就這么火了。大家都開(kāi)始用上了這個(gè)名詞出作品，成為了設(shè)計(jì)新趨勢(shì)。甚至連作者后面的作品，也使用了這個(gè)名稱。

再后來(lái)國(guó)外知名設(shè)計(jì)師 Michal Malewicz 發(fā)布了一篇關(guān)于這個(gè)風(fēng)格的文章，將 Neuomorphism，刪減了里面的字母「O」，改成了 Neumorphism。在大神的推動(dòng)下大家又開(kāi)始爭(zhēng)先恐后地使用這個(gè)名稱。

目前有各種對(duì)名稱的說(shuō)法，Neuomorphism，Neumorphism，Skeuomorphism，Soft UI，在沒(méi)有實(shí)際確定的情況下，其實(shí)怎樣叫都無(wú)所謂，重點(diǎn)是我們要知道這種設(shè)計(jì)風(fēng)格趨勢(shì)，關(guān)注的不是名字，而是設(shè)計(jì)。

還記得擬物風(fēng)格嗎？

既然 Neumorphism 只是一個(gè)虛構(gòu)詞，也沒(méi)有任何官方認(rèn)定，那就先不糾結(jié)應(yīng)該叫什么，我們還是來(lái)說(shuō)說(shuō)它的前身吧，也就是 Skeuomorphism（擬物）。這是最早被 Apple 提出的設(shè)計(jì)概念，就是在界面中模仿現(xiàn)實(shí)物體紋理材質(zhì)的設(shè)計(jì)，目的是讓人們?cè)谑褂媒缑鏁r(shí)習(xí)慣性地聯(lián)想到現(xiàn)實(shí)物體的使用方式。

擬物寫(xiě)實(shí)的設(shè)計(jì)風(fēng)格曾經(jīng)風(fēng)靡全球，當(dāng)時(shí)的 UI 設(shè)計(jì)師幾乎都對(duì)擬物作品著迷。

而在 2013 年的 WWDC 大會(huì)中，蘋(píng)果公司發(fā)布的 iOS7 系統(tǒng)，系統(tǒng) UI 使用更簡(jiǎn)潔的設(shè)計(jì)風(fēng)格。這場(chǎng)大會(huì)也使擬物風(fēng)格逐漸過(guò)時(shí)，直到現(xiàn)在扁平風(fēng)格的全面普及，擬物風(fēng)格就再?zèng)]有被廣泛應(yīng)用。

從前幾年的設(shè)計(jì)趨勢(shì)可以看到，扁平風(fēng)格作為更更簡(jiǎn)潔的風(fēng)格被設(shè)計(jì)師推崇，再加上蘋(píng)果系統(tǒng) iOS 7 設(shè)計(jì)風(fēng)格的面世和谷歌系統(tǒng)規(guī)范 Material Design 的普及，扁平風(fēng)格在 UI 設(shè)計(jì)中一直占據(jù)重要位置。

但設(shè)計(jì)的流行趨勢(shì)也一直在改變著，在蘋(píng)果公司發(fā)布的 iOS 13 系統(tǒng)中，就有出現(xiàn)輕擬物的設(shè)計(jì)手法，接著就有一大堆設(shè)計(jì)師猜測(cè)是不是擬物風(fēng)格的回歸，但我看系統(tǒng)中大部分界面設(shè)計(jì)也還是扁平風(fēng)格，并沒(méi)有把擬物風(fēng)格作為主要設(shè)計(jì)風(fēng)格，也許只是某種程度上解決了畫(huà)筆的視覺(jué)識(shí)別問(wèn)題。

擬物效果能否回歸，這個(gè)言之尚早，但是新的風(fēng)格趨勢(shì)也許可以在扁平同質(zhì)化的時(shí)候增添一點(diǎn)靈感與樂(lè)趣。

能用在實(shí)際項(xiàng)目中嗎？

1. 設(shè)計(jì)

其實(shí)要做到這個(gè)效果并不難，了解一下這個(gè)風(fēng)格的結(jié)構(gòu)。

主要有三個(gè)樣式組成，1 個(gè)背景+ 2 個(gè)投影。在這個(gè)基礎(chǔ)上，通過(guò)改變顏色和大小參數(shù)來(lái)達(dá)到不同效果。

我嘗試著使用彩色去做這個(gè)效果，使用淺色背景時(shí)還是有效果的，但使用深一點(diǎn)的顏色時(shí)，問(wèn)題就出現(xiàn)了，效果更像是外發(fā)光或者普通投影。這也可能是為什么大多數(shù)作品都采用比較素的顏色作為背景的原因。

2. 瀏覽

這個(gè)風(fēng)格最大的問(wèn)題就是缺少對(duì)比度。在色彩使用上比較克制，沒(méi)有大面積的平鋪顏色，僅在極少的位置進(jìn)行色彩點(diǎn)綴，作用是吸引眼球。從眾多設(shè)計(jì)師的作品可以看出，整體視覺(jué)是比較平的，缺少層次。

我拿其中兩張圖進(jìn)行了 15% 強(qiáng)度的模糊處理，可以看到除了點(diǎn)綴的位置以外，界面是沒(méi)有重點(diǎn)的。

3. 操作

因?yàn)樵诮缑嬷谐宋淖忠酝?，幾乎所有元素都?yīng)用了這種效果，導(dǎo)致界面所有內(nèi)容看起來(lái)都是按鈕的錯(cuò)覺(jué)。界面中的主要操作按鈕也沒(méi)有被重點(diǎn)提亮。正常態(tài)和點(diǎn)擊態(tài)的對(duì)比度并沒(méi)有拉開(kāi)，容易造成狀態(tài)混淆。點(diǎn)擊欲望比較低，不利于引導(dǎo)用戶進(jìn)行下一步操作。

4. 動(dòng)畫(huà)

跟擬物效果的動(dòng)畫(huà)有同樣的問(wèn)題，元素動(dòng)畫(huà)效果很難做得輕快，更適合按鈕的使用。由于視覺(jué)層級(jí)跟背景沒(méi)有實(shí)際分離開(kāi)，就像固定在了背景上一樣，所以動(dòng)畫(huà)效果只要出現(xiàn)移動(dòng)，就會(huì)讓人覺(jué)得不合理，容易給人一種蟲(chóng)子在皮膚底下蠕動(dòng)的感覺(jué)。

5. 開(kāi)發(fā)

問(wèn)題跟當(dāng)年的擬物效果的實(shí)現(xiàn)類似，要實(shí)現(xiàn)這個(gè)風(fēng)格，主要有兩個(gè)方式。

切圖：對(duì)元素的每個(gè)狀態(tài)（Normal、Hover、Pressed），設(shè)計(jì)師都需要分別提供一張切圖，這個(gè)會(huì)導(dǎo)致資源庫(kù)增加大量的圖片。 代碼實(shí)現(xiàn)：這個(gè)風(fēng)格的實(shí)現(xiàn)效果是對(duì)元素增加兩個(gè)不同方向的投影，通過(guò)代碼可以實(shí)現(xiàn)。但是需要開(kāi)發(fā)對(duì)每個(gè)元素添加投影，樣式代碼增多，繁瑣的工作量，開(kāi)發(fā)也不會(huì)樂(lè)意。

附 CSS 實(shí)現(xiàn)新風(fēng)格的網(wǎng)站：Neumorphism 的生成器

綜合分析來(lái)看，這種設(shè)計(jì)風(fēng)格目前在項(xiàng)目中推廣和實(shí)現(xiàn)中并不合適。

總結(jié)

這個(gè)風(fēng)格的出現(xiàn)也確實(shí)給大家?guī)?lái)了一個(gè)新的思考，這個(gè)風(fēng)格會(huì)持續(xù)嗎？可用嗎？也許扁平風(fēng)格的多年流行后，設(shè)計(jì)潮流開(kāi)始往回走，但并不是直接回到擬物風(fēng)格，而是在效率和視覺(jué)效果中找一個(gè)平衡點(diǎn)。不論這個(gè)風(fēng)格的對(duì)錯(cuò)，起碼引起了設(shè)計(jì)師的注意，也激發(fā)了很多設(shè)計(jì)師的靈感，就像當(dāng)年擬物風(fēng)格和扁平風(fēng)格的討論一樣，不分對(duì)錯(cuò)，設(shè)計(jì)師也不妨多留意一下這個(gè)風(fēng)格，試著做一下效果圖，或許會(huì)有新的發(fā)現(xiàn)。