在網(wǎng)上流行起了一股 Neumorphism 的新風(fēng)格倒信，也有人稱為 Soft Ui 科贬，這是一種類似浮雕的效果。這種風(fēng)格的出現(xiàn)鳖悠，給目前流行的扁平化設(shè)計增加了一種新的設(shè)計形式榜掌，很多媒體甚至還將這個風(fēng)格列為 2020 的設(shè)計趨勢，三星 Galaxy 系列的發(fā)布會宣傳海報也使用了這種風(fēng)格乘综，可見這個風(fēng)格的火熱程度憎账。那么一開始我們先不討論這個風(fēng)格好還是不好，先來了解一下這個新風(fēng)格趨勢卡辰。
什么是 Neumorphism 胞皱？
最開始是一位來自烏克蘭的設(shè)計師 Alexander Plyuto 在各平臺發(fā)布了新的作品”Skeuomorph Mobile Banking“。這個作品發(fā)布以來就獲得了數(shù)十萬瀏覽量九妈，數(shù)千點贊數(shù)反砌，熱度持續(xù)飆升并登上 Popular 榜首。
作者是用 Skeuomorph 來命名這個作品風(fēng)格萌朱，評論區(qū)就開始了這種風(fēng)格的討論宴树，有的人說這是新的擬物風(fēng)格（ New Skeuomorphism ），也有人說這是擬物風(fēng)格2.0版本（ Skeuomorph 2.0 ) 晶疼，而后來就有設(shè)計師創(chuàng)出一個新的虛構(gòu)名詞酒贬，把 New Skeuomorphism 把兩個詞組合又憨，Neo 諧音 New 就是 Neuomorphism。
這個名字就這么火了锭吨。大家都開始用上了這個名詞出作品蠢莺，成為了設(shè)計新趨勢。甚至連作者后面的作品零如，也使用了這個名稱躏将。
還沒完，再后來國外知名設(shè)計師 Michal Malewicz 發(fā)布了一篇關(guān)于這個風(fēng)格的文章埠况，將 Neuomorphism 耸携，刪減了里面的字母”O(jiān)“，改成了 Neumorphism 辕翰。大神推動下大家又開始用這個名稱夺衍。
目前有各種對名稱的說法，Neuomorphism喜命，Neumorphism沟沙，Skeuomorphism，Soft UI , 在沒有實際確定的時候壁榕，其實所有叫法都無所謂矛紫，重點是我們要知道這種設(shè)計風(fēng)格趨勢，關(guān)注的不是名字牌里，而是設(shè)計颊咬。
還記得擬物風(fēng)格嗎？
既然 Neumorphism 只是一個虛構(gòu)詞牡辽，也沒有任何官方認定喳篇，那就先不糾結(jié)應(yīng)該叫什么，我們還是來說說它的前身吧态辛，也就是 Skeuomorphism（擬物） 镰吵。這是最早被 Apple 提出的設(shè)計概念咬腕，就是在界面中模仿現(xiàn)實物體的紋理材質(zhì)的設(shè)計而姐，目的是讓人們在使用界面時習(xí)慣性的聯(lián)想到現(xiàn)實物體的使用方式孩擂。
擬物寫實的設(shè)計風(fēng)格曾經(jīng)風(fēng)靡全球，當(dāng)時的 Ui 設(shè)計師幾乎都對擬物作品著迷熟史。
而在 2013 年的 WWDC 大會中馁害，蘋果公司發(fā)布了的 iOS7 系統(tǒng)，系統(tǒng) Ui 使用更簡潔的設(shè)計風(fēng)格蹂匹。這場大會也使擬物風(fēng)格逐漸過時碘菜，直到現(xiàn)在扁平風(fēng)格的全面普及，擬物風(fēng)格就再沒有被廣泛應(yīng)用。
從前幾年的設(shè)計趨勢可以看到炉媒，扁平風(fēng)格作為更高效更簡潔的風(fēng)格被設(shè)計師推崇，再加上蘋果系統(tǒng) iOS 7 設(shè)計風(fēng)格的面世和谷歌系統(tǒng)規(guī)范 Material Design 的普及昆烁，扁平風(fēng)格在 Ui 設(shè)計中一直占據(jù)重要位置吊骤。
但設(shè)計的流行趨勢也一直在改變著，在蘋果公司最新發(fā)布的 iOS 13 系統(tǒng)中静尼，就有出現(xiàn)輕擬物的設(shè)計手法白粉，接著就有一大堆設(shè)計師猜測是不是擬物風(fēng)格的回歸，但我看系統(tǒng)中大部分界面也還是扁平風(fēng)格鼠渺，并沒有把擬物風(fēng)格作為主要設(shè)計風(fēng)格鸭巴，也許只是某程度上解決了畫筆的視覺識別問題。
擬物效果能否回歸拦盹，這個言之尚早鹃祖，但是新的風(fēng)格趨勢也許可以在扁平同質(zhì)化的時候增添一點靈感與樂趣。
能用在實際項目中嗎普舆？
設(shè)計：
其實要做到這個效果并不難恬口，了解一下這個風(fēng)格的結(jié)構(gòu)。
主要有三個樣式組成沼侣，1個背景+2個投影祖能。在這個基礎(chǔ)上，通過改變顏色和大小參數(shù)來達到不同效果蛾洛。
我嘗試著使用彩色去做這個效果养铸，使用淺色背景時還是有效果，但使用深一點的顏色時轧膘，問題就出現(xiàn)了钞螟，效果更像是外發(fā)光或者普通投影。這也可能是為什么大多數(shù)作品的都采用比較素的顏色作為背景的原因扶供。
瀏覽：
這個風(fēng)格最大的問題就是缺少對比度筛圆。在色彩使用上比較克制，沒有大面積的平鋪顏色椿浓，僅在極少的位置色彩點綴太援，作用是吸引眼球。在從眾多設(shè)計師的作品可以看出扳碍，整體視覺是比較平的提岔，缺少層次。
我拿其中兩張圖進行了 15% 強度的模糊處理笋敞，可以看到除了點綴的位置以外碱蒙，界面是沒有重點了。
操作：
因為在界面中除了文字以外，幾乎所有元素都應(yīng)用了這種效果赛惩，導(dǎo)致界面所有內(nèi)容看起來都是按鈕的錯覺哀墓。界面中的主要操作按鈕也沒有被重點提亮。正常態(tài)和點擊態(tài)的對比度并沒有拉開喷兼，容易造成狀態(tài)混淆篮绰。點擊欲望比較低，不利于引導(dǎo)用戶進行下一步操作季惯。
動畫：
跟擬物效果的動畫有同樣的問題吠各，元素動畫效果很難做得很輕快，更適合按鈕的使用勉抓。由于視覺層級跟背景沒有實際分離開贾漏，就像固定在了背景上一樣，所以動畫效果只要出現(xiàn)移動藕筋，就會讓人覺得不合理纵散，容易給人一種蟲子在皮膚底下蠕動的感覺。
開發(fā)：
問題跟當(dāng)年的擬物效果的實現(xiàn)類似念逞，要實現(xiàn)這個風(fēng)格困食，主要有兩個方式。
1翎承、切圖硕盹。對元素的每個狀態(tài)（Normal, Hover, Pressed），設(shè)計師都需要分別提供一張切圖叨咖，這個會導(dǎo)致資源庫增加大量的圖片瘩例。
2、代碼實現(xiàn)甸各。這個風(fēng)格的實現(xiàn)效果是對元素增加兩個不同方向的投影垛贤，通過代碼可以實現(xiàn)。但是需要開發(fā)對每個元素添加投影趣倾，樣式代碼增多聘惦，繁瑣的工作量，開發(fā)也不會樂意儒恋。
3善绎、附 CSS 實現(xiàn)新風(fēng)格的網(wǎng)站：Neumorphism 的生成器
綜合分析來看，這種設(shè)計風(fēng)格目前在項目中推廣和實現(xiàn)還并不合適诫尽。
總結(jié)
這個風(fēng)格的出現(xiàn)也確實給大家提出了一個新的思考禀酱，這個風(fēng)格會持續(xù)嗎？可用嗎牧嫉？也許扁平風(fēng)格的多年流行后剂跟，設(shè)計潮流開始往回走减途，但并不是直接回到擬物風(fēng)格，而是在效率和視覺效果中找一個平衡點曹洽。不論這個風(fēng)格的對錯鳍置，起碼引起了設(shè)計師的注意，也激發(fā)了很多設(shè)計師的靈感送淆，就像當(dāng)年擬物風(fēng)格和扁平風(fēng)格的討論一樣墓捻，不分對錯，設(shè)計師也不妨多留意這個風(fēng)格坊夫，試著做一下效果圖，或許會有新的發(fā)現(xiàn)撤卢。
以上是我個人的思考和結(jié)論环凿，如果對文章或者新風(fēng)格有不同的看法也可以在評論區(qū)交流。感謝閱讀放吩。
