2020 年最火的設計趨勢Neumorphism,快來了解下

什麼是Neumorphism?

最開始是一位來自烏克蘭的設計師 Alexander Plyuto 在各平臺發佈了新的作品「Skeuomorph Mobile Banking」。這個作品自發布以來就獲得了數十萬瀏覽量,數千點贊數,熱度持續飆升並登上 Popular 榜首。

2020 年最火的設計趨勢Neumorphism,快來了解下

作者是用 Skeuomorph 來命名這個作品風格,評論區就開始了這種風格的討論,有的人說這是新的擬物風格(New Skeuomorphism),也有人說這是擬物風格 2.0 版本(Skeuomorph 2.0),而後來就有設計師創出一個新的虛構名詞,把 New Skeuomorphism 兩個詞組合,Neo 諧音 New 就是 Neuomorphism。

這個名字就這麼火了。大家都開始用上了這個名詞出作品,成為了設計新趨勢。甚至連作者後面的作品,也使用了這個名稱。

2020 年最火的設計趨勢Neumorphism,快來了解下

再後來國外知名設計師 Michal Malewicz 發佈了一篇關於這個風格的文章,將 Neuomorphism,刪減了裡面的字母「O」,改成了 Neumorphism。在大神的推動下大家又開始爭先恐後地使用這個名稱。

目前有各種對名稱的說法,Neuomorphism,Neumorphism,Skeuomorphism,Soft UI,在沒有實際確定的情況下,其實怎樣叫都無所謂,重點是我們要知道這種設計風格趨勢,關注的不是名字,而是設計。

還記得擬物風格嗎?

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

2020 年最火的設計趨勢Neumorphism,快來了解下

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

2020 年最火的設計趨勢Neumorphism,快來了解下

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

2020 年最火的設計趨勢Neumorphism,快來了解下

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

2020 年最火的設計趨勢Neumorphism,快來了解下

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

2020 年最火的設計趨勢Neumorphism,快來了解下

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

能用在實際項目中嗎?

1. 設計

其實要做到這個效果並不難,瞭解一下這個風格的結構。

2020 年最火的設計趨勢Neumorphism,快來了解下

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

2020 年最火的設計趨勢Neumorphism,快來了解下

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

2020 年最火的設計趨勢Neumorphism,快來了解下

2. 瀏覽

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

2020 年最火的設計趨勢Neumorphism,快來了解下

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

2020 年最火的設計趨勢Neumorphism,快來了解下

3. 操作

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

2020 年最火的設計趨勢Neumorphism,快來了解下

4. 動畫

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

2020 年最火的設計趨勢Neumorphism,快來了解下

5. 開發

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

  • 切圖:對元素的每個狀態(Normal、Hover、Pressed),設計師都需要分別提供一張切圖,這個會導致資源庫增加大量的圖片。
  • 代碼實現:這個風格的實現效果是對元素增加兩個不同方向的投影,通過代碼可以實現。但是需要開發對每個元素添加投影,樣式代碼增多,繁瑣的工作量,開發也不會樂意。

附 CSS 實現新風格的網站:Neumorphism 的生成器

綜合分析來看,這種設計風格目前在項目中推廣和實現中並不合適。

總結

這個風格的出現也確實給大家帶來了一個新的思考,這個風格會持續嗎?可用嗎?也許扁平風格的多年流行後,設計潮流開始往回走,但並不是直接回到擬物風格,而是在效率和視覺效果中找一個平衡點。不論這個風格的對錯,起碼引起了設計師的注意,也激發了很多設計師的靈感,就像當年擬物風格和扁平風格的討論一樣,不分對錯,設計師也不妨多留意一下這個風格,試著做一下效果圖,或許會有新的發現。

今天就分享到這裡啦~~

如果有任何關於設計的問題

都可以私聊站長喲


分享到:


相關文章: