日前蓝谨，在網(wǎng)上流行起了一種叫 Neumorphism 的新風格，也有人稱為 Soft UI青团，這是一種類似于浮雕的效果譬巫。這種風格的出現(xiàn)，給目前流行的扁平化設計增加了一種新的設計形式督笆，很多媒體甚至還將這個風格列為 2020 的設計趨勢芦昔，三星 Galaxy 系列的發(fā)布會宣傳海報也使用了這種風格，可見這個風格的火熱程度胖腾。那么一開始我們不討論這個風格好還是不好烟零，先來了解一下這個新風格趨勢。
什么是Neumorphism咸作？
最開始是一位來自烏克蘭的設計師 Alexander Plyuto 在各平臺發(fā)布了新的作品「Skeuomorph Mobile Banking」锨阿。這個作品自發(fā)布以來就獲得了數(shù)十萬瀏覽量，數(shù)千點贊數(shù)记罚，熱度持續(xù)飆升并登上 Popular 榜首墅诡。
作者是用 Skeuomorph 來命名這個作品風格，評論區(qū)就開始了這種風格的討論，有的人說這是新的擬物風格（New Skeuomorphism）末早，也有人說這是擬物風格 2.0 版本（Skeuomorph 2.0）烟馅，而后來就有設計師創(chuàng)出一個新的虛構名詞，把 New Skeuomorphism 兩個詞組合然磷，Neo 諧音 New 就是 Neuomorphism郑趁。
這個名字就這么火了。大家都開始用上了這個名詞出作品姿搜，成為了設計新趨勢寡润。甚至連作者后面的作品，也使用了這個名稱舅柜。
再后來國外知名設計師 Michal Malewicz 發(fā)布了一篇關于這個風格的文章梭纹，將 Neuomorphism，刪減了里面的字母「O」致份，改成了 Neumorphism变抽。在大神的推動下大家又開始爭先恐后地使用這個名稱。
目前有各種對名稱的說法氮块，Neuomorphism绍载，Neumorphism，Skeuomorphism雇锡，Soft UI逛钻，在沒有實際確定的情況下，其實怎樣叫都無所謂锰提，重點是我們要知道這種設計風格趨勢曙痘，關注的不是名字，而是設計立肘。
還記得擬物風格嗎边坤？
既然 Neumorphism 只是一個虛構詞，也沒有任何官方認定谅年，那就先不糾結應該叫什么茧痒，我們還是來說說它的前身吧，也就是 Skeuomorphism（擬物）融蹂。這是最早被 Apple 提出的設計概念旺订，就是在界面中模仿現(xiàn)實物體紋理材質的設計，目的是讓人們在使用界面時習慣性地聯(lián)想到現(xiàn)實物體的使用方式超燃。
擬物寫實的設計風格曾經(jīng)風靡全球区拳，當時的 UI 設計師幾乎都對擬物作品著迷。
而在 2013 年的 WWDC 大會中意乓，蘋果公司發(fā)布的 iOS7 系統(tǒng)樱调，系統(tǒng) UI 使用更簡潔的設計風格。這場大會也使擬物風格逐漸過時，直到現(xiàn)在扁平風格的全面普及笆凌，擬物風格就再沒有被廣泛應用圣猎。
從前幾年的設計趨勢可以看到，扁平風格作為更高效更簡潔的風格被設計師推崇乞而，再加上蘋果系統(tǒng) iOS 7 設計風格的面世和谷歌系統(tǒng)規(guī)范 Material Design 的普及送悔，扁平風格在 UI 設計中一直占據(jù)重要位置。
但設計的流行趨勢也一直在改變著爪模，在蘋果公司最新發(fā)布的 iOS 13 系統(tǒng)中放祟，就有出現(xiàn)輕擬物的設計手法，接著就有一大堆設計師猜測是不是擬物風格的回歸呻右，但我看系統(tǒng)中大部分界面設計也還是扁平風格，并沒有把擬物風格作為主要設計風格鞋喇，也許只是某種程度上解決了畫筆的視覺識別問題声滥。
擬物效果能否回歸，這個言之尚早侦香，但是新的風格趨勢也許可以在扁平同質化的時候增添一點靈感與樂趣落塑。
能用在實際項目中嗎？
1. 設計
其實要做到這個效果并不難罐韩，了解一下這個風格的結構憾赁。
主要有三個樣式組成，1 個背景+ 2 個投影散吵。在這個基礎上龙考，通過改變顏色和大小參數(shù)來達到不同效果。
我嘗試著使用彩色去做這個效果矾睦，使用淺色背景時還是有效果的晦款，但使用深一點的顏色時，問題就出現(xiàn)了枚冗，效果更像是外發(fā)光或者普通投影缓溅。這也可能是為什么大多數(shù)作品都采用比較素的顏色作為背景的原因。
2. 瀏覽
這個風格最大的問題就是缺少對比度赁温。在色彩使用上比較克制坛怪，沒有大面積的平鋪顏色，僅在極少的位置進行色彩點綴股囊，作用是吸引眼球袜匿。從眾多設計師的作品可以看出，整體視覺是比較平的毁涉，缺少層次沉帮。
我拿其中兩張圖進行了 15% 強度的模糊處理，可以看到除了點綴的位置以外，界面是沒有重點的穆壕。
3. 操作
因為在界面中除了文字以外待牵，幾乎所有元素都應用了這種效果，導致界面所有內(nèi)容看起來都是按鈕的錯覺喇勋。界面中的主要操作按鈕也沒有被重點提亮缨该。正常態(tài)和點擊態(tài)的對比度并沒有拉開，容易造成狀態(tài)混淆川背。點擊欲望比較低贰拿，不利于引導用戶進行下一步操作。
4. 動畫
跟擬物效果的動畫有同樣的問題熄云，元素動畫效果很難做得輕快膨更，更適合按鈕的使用。由于視覺層級跟背景沒有實際分離開缴允，就像固定在了背景上一樣荚守，所以動畫效果只要出現(xiàn)移動，就會讓人覺得不合理练般，容易給人一種蟲子在皮膚底下蠕動的感覺矗漾。
5. 開發(fā)
問題跟當年的擬物效果的實現(xiàn)類似，要實現(xiàn)這個風格薄料，主要有兩個方式敞贡。
切圖：對元素的每個狀態(tài)（Normal、Hover摄职、Pressed）誊役，設計師都需要分別提供一張切圖，這個會導致資源庫增加大量的圖片琳钉。
代碼實現(xiàn)：這個風格的實現(xiàn)效果是對元素增加兩個不同方向的投影势木，通過代碼可以實現(xiàn)。但是需要開發(fā)對每個元素添加投影歌懒，樣式代碼增多啦桌，繁瑣的工作量，開發(fā)也不會樂意及皂。
附 CSS 實現(xiàn)新風格的網(wǎng)站：Neumorphism 的生成器
綜合分析來看甫男，這種設計風格目前在項目中推廣和實現(xiàn)中并不合適。
總結
這個風格的出現(xiàn)也確實給大家?guī)砹艘粋€新的思考验烧，這個風格會持續(xù)嗎板驳？可用嗎？也許扁平風格的多年流行后碍拆，設計潮流開始往回走若治，但并不是直接回到擬物風格慨蓝，而是在效率和視覺效果中找一個平衡點。不論這個風格的對錯端幼，起碼引起了設計師的注意礼烈，也激發(fā)了很多設計師的靈感，就像當年擬物風格和扁平風格的討論一樣婆跑，不分對錯此熬，設計師也不妨多留意一下這個風格，試著做一下效果圖滑进，或許會有新的發(fā)現(xiàn)犀忱。
關注我的微信公眾號【ps平面設計】，每天分享設計技巧扶关，素材阴汇。幫助你快速學習
