2020-5-25 藍(lán)藍(lán)設(shè)計的小編
藍(lán)藍(lán)注:我非常喜歡這個風(fēng)格。
日前,在網(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)格趨勢。
最開始是一位來自烏克蘭的設(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」,改成了 Neumorphism。在大神的推動下大家又開始爭先恐后地使用這個名稱。
目前有各種對名稱的說法,Neuomorphism,Neumorphism,Skeuomorphism,Soft UI,在沒有實際確定的情況下,其實怎樣叫都無所謂,重點是我們要知道這種設(shè)計風(fēng)格趨勢,關(guān)注的不是名字,而是設(shè)計。
既然 Neumorphism 只是一個虛構(gòu)詞,也沒有任何官方認(rèn)定,那就先不糾結(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)中大部分界面設(shè)計也還是扁平風(fēng)格,并沒有把擬物風(fēng)格作為主要設(shè)計風(fēng)格,也許只是某種程度上解決了畫筆的視覺識別問題。
擬物效果能否回歸,這個言之尚早,但是新的風(fēng)格趨勢也許可以在扁平同質(zhì)化的時候增添一點靈感與樂趣。
1. 設(shè)計
其實要做到這個效果并不難,了解一下這個風(fēng)格的結(jié)構(gòu)。
主要有三個樣式組成,1 個背景+ 2 個投影。在這個基礎(chǔ)上,通過改變顏色和大小參數(shù)來達(dá)到不同效果。
我嘗試著使用彩色去做這個效果,使用淺色背景時還是有效果的,但使用深一點的顏色時,問題就出現(xiàn)了,效果更像是外發(fā)光或者普通投影。這也可能是為什么大多數(shù)作品都采用比較素的顏色作為背景的原因。
2. 瀏覽
這個風(fēng)格最大的問題就是缺少對比度。在色彩使用上比較克制,沒有大面積的平鋪顏色,僅在極少的位置進(jìn)行色彩點綴,作用是吸引眼球。從眾多設(shè)計師的作品可以看出,整體視覺是比較平的,缺少層次。
我拿其中兩張圖進(jìn)行了 15% 強度的模糊處理,可以看到除了點綴的位置以外,界面是沒有重點的。
3. 操作
因為在界面中除了文字以外,幾乎所有元素都應(yīng)用了這種效果,導(dǎo)致界面所有內(nèi)容看起來都是按鈕的錯覺。界面中的主要操作按鈕也沒有被重點提亮。正常態(tài)和點擊態(tài)的對比度并沒有拉開,容易造成狀態(tài)混淆。點擊欲望比較低,不利于引導(dǎo)用戶進(jìn)行下一步操作。
4. 動畫
跟擬物效果的動畫有同樣的問題,元素動畫效果很難做得輕快,更適合按鈕的使用。由于視覺層級跟背景沒有實際分離開,就像固定在了背景上一樣,所以動畫效果只要出現(xiàn)移動,就會讓人覺得不合理,容易給人一種蟲子在皮膚底下蠕動的感覺。
5. 開發(fā)
問題跟當(dāng)年的擬物效果的實現(xiàn)類似,要實現(xiàn)這個風(fēng)格,主要有兩個方式。
切圖:對元素的每個狀態(tài)(Normal、Hover、Pressed),設(shè)計師都需要分別提供一張切圖,這個會導(dǎo)致資源庫增加大量的圖片。 代碼實現(xiàn):這個風(fēng)格的實現(xiàn)效果是對元素增加兩個不同方向的投影,通過代碼可以實現(xiàn)。但是需要開發(fā)對每個元素添加投影,樣式代碼增多,繁瑣的工作量,開發(fā)也不會樂意。
附 CSS 實現(xiàn)新風(fēng)格的網(wǎng)站:Neumorphism 的生成器
綜合分析來看,這種設(shè)計風(fēng)格目前在項目中推廣和實現(xiàn)中并不合適。
這個風(fēng)格的出現(xiàn)也確實給大家?guī)砹艘粋€新的思考,這個風(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)。
藍(lán)藍(lán)設(shè)計的小編 http://m.820esy.cn