Neumorphism新擬物化,會成為2020年的UI設計趨勢嗎?

時間：2020-04-07 10:42
發布：轉載
來源：網絡
分享到：

什么是Neumorphism

Neumorphism 風格，也稱為 Soft UI，是一種類似于浮雕的效果。目前關于他的叫法：Neuomorphism，Neumorphism，Skeuomorphism，Soft UI等，在沒有實際確定的情況下，其實怎樣叫都無所謂，重點是我們要知道這種設計風格趨勢，關注的不是名字，而是設計。這種風格的出現，給目前流行的扁平化設計增加了一種新的設計形式，很多媒體甚至還將這個風格列為 2020新的設計趨勢，其中三星 Galaxy 系列的發布會宣傳海報也使用了這種風格，可見這個風格的火熱程度。

還記得擬物風格嗎？

既然 Neumorphism 只是一個虛構詞，也沒有任何官方認定，那就先不糾結應該叫什么，我們還是來說說它的前身吧，也就是 Skeuomorphism（擬物）。這是最早被 Apple 提出的設計概念，就是在界面中模仿現實物體紋理材質的設計，目的是讓人們在使用界面時習慣性地聯想到現實物體的使用方式。

擬物寫實的設計風格曾經風靡全球，當時的 UI 設計師幾乎都對擬物作品著迷。

而在 2013 年的 WWDC 大會中，蘋果公司發布的 iOS7 系統，系統 UI 使用更簡潔的設計風格。這場大會也使擬物風格逐漸過時，直到現在扁平風格的全面普及，擬物風格就再沒有被廣泛應用。

從前幾年的設計趨勢可以看到，扁平風格作為更高效更簡潔的風格被設計師推崇，再加上蘋果系統 iOS 7 設計風格的面世和谷歌系統規范 Material Design 的普及，扁平風格在 UI 設計中一直占據重要位置。

但設計的流行趨勢也一直在改變著，在蘋果公司最新發布的 iOS 13 系統中，就有出現輕擬物的設計手法，接著就有一大堆設計師猜測是不是擬物風格的回歸，但我看系統中大部分界面設計也還是扁平風格，并沒有把擬物風格作為主要設計風格，也許只是某種程度上解決了畫筆的視覺識別問題。

擬物效果能否回歸，這個言之尚早，但是新的風格趨勢也許可以在扁平同質化的時候增添一點靈感與樂趣。

會用在實際項目中嗎？

1. 設計其實要做到這個效果并不難，了解一下這個風格的結構。

主要有三個樣式組成，1 個背景+ 2 個投影。在這個基礎上，通過改變顏色和大小參數來達到不同效果。

之前嘗試著使用彩色去做這個效果，使用淺色背景時還是有效果的，但使用深一點的顏色時，問題就出現了，效果更像是外發光或者普通投影。這也可能是為什么大多數作品都采用比較素的顏色作為背景的原因。

2. 瀏覽這個風格最大的問題就是缺少對比度。在色彩使用上比較克制，沒有大面積的平鋪顏色，僅在極少的位置進行色彩點綴，作用是吸引眼球。從眾多設計師的作品可以看出，整體視覺是比較平的，缺少層次。

拿其中兩張圖進行了 15% 強度的模糊處理，可以看到除了點綴的位置以外，界面是沒有重點的。

3. 操作
因為在界面中除了文字以外，幾乎所有元素都應用了這種效果，導致界面所有內容看起來都是按鈕的錯覺。界面中的主要操作按鈕也沒有被重點提亮。正常態和點擊態的對比度并沒有拉開，容易造成狀態混淆。點擊欲望比較低，不利于引導用戶進行下一步操作。

4. 動畫跟擬物效果的動畫有同樣的問題，元素動畫效果很難做得輕快，更適合按鈕的使用。由于視覺層級跟背景沒有實際分離開，就像固定在了背景上一樣，所以動畫效果只要出現移動，就會讓人覺得不合理，容易給人一種蟲子在皮膚底下蠕動的感覺。

5. 開發問題跟當年的擬物效果的實現類似，要實現這個風格，主要有兩個方式。

切圖：對元素的每個狀態（Normal、Hover、Pressed），設計師都需要分別提供一張切圖，這個會導致資源庫增加大量的圖片。

· 代碼實現：這個風格的實現效果是對元素增加兩個不同方向的投影，通過代碼可以實現。但是需要開發對每個元素添加投影，樣式代碼增多，繁瑣的工作量，開發也不會樂意。最后附 CSS 實現新風格的網站：Neumorphism 的生成器。

總結

這個風格的出現也確實給大家帶來了一個新的思考，這個風格會持續嗎？可用嗎？也許扁平風格的多年流行后，設計潮流開始往回走，但并不是直接回到擬物風格，而是在效率和視覺效果中找一個平衡點。不論這個風格的對錯，起碼引起了設計師的注意，也激發了很多設計師的靈感，就像當年擬物風格和扁平風格的討論一樣，不分對錯，設計師也不妨多留意一下這個風格，試著做一下效果圖，或許會有新的發現。當然，蘿卜白菜各有所愛，你覺得你是喜歡現在的扁平風還是Neumorphism ？我想每個人內心都有自己答案！