2022-9-19 純純
Neumorphism / soft ui(新擬態(tài)也有人叫同化、軟UI)是什么?在前一段時間,大家即使沒有看過,但是應(yīng)該也聽到過一些關(guān)于這種新風(fēng)格的介紹,或者是在某某趨勢中有類似作品的出現(xiàn),不太了解或者一看而過。簡單的介紹一下,標(biāo)題并非判斷結(jié)果,而是希望同大家一起探尋一起交流,一起討論這種風(fēng)格是否會是接下來的新趨勢...
起因是源于2019年11月5日,來自烏克蘭的設(shè)計師 Alexander Plyuto 在追波和ins上發(fā)布了下圖的一張作品,作者說明信息:
“讓我們想象一下,如果在移動界面設(shè)計中,投影的形式發(fā)展的更好的話,那將來的界面將會是什么樣的,這是我的愿景?!?/span>
Dribbble-Alexander Plyuto的作品
目前作品在追波平臺收獲贊量4000+,瀏覽量23W+,一路飆升至追波2019年pop排行第一熱門的作品,同時在ins上的傳播也是異常的火爆,獲得很多設(shè)計的喜歡,評論頓時炸開了鍋,其中有設(shè)計師稱呼這種風(fēng)格為“Neumorphism 新擬態(tài)”或者“Soft UI 軟UI”,于是這種叫法慢慢傳開,可能并不準(zhǔn)確。
為什么這個風(fēng)格會火?你怎么認(rèn)為?
先拋開作品發(fā)布的平臺帶來的熱度,很多設(shè)計師認(rèn)為這本身也是一種潛在的趨勢,隨處可見的C4D的輕質(zhì)感在不同領(lǐng)域和不同方向的使用,IOS13更新后的部分拋棄了純扁平,重拾了3D的感覺。它會火的主要還是在視覺上,這種風(fēng)格剛一出現(xiàn),它是非常新穎的,在長達(dá)半年的幾乎高度一致的風(fēng)格下,它是新的嘗試,讓人憧憬的方向。
能有不斷創(chuàng)新的設(shè)計師帶給我們不同的設(shè)計風(fēng)格,首先需要感謝,其次再去以個人的視角看待它。那么多風(fēng)格的作品,那么擬態(tài)就變成趨勢了?我們帶著這個問題,一起繼續(xù)探討(我們先把代碼實現(xiàn)等話題放在文章最后討論)。
帶著疑問,仔細(xì)看一下上面的作品,第一眼看有點(diǎn)像早期的寫實風(fēng)格(如下圖),接近真實感,有強(qiáng)烈的質(zhì)感和空間感......但是不同的是也帶了一點(diǎn)當(dāng)前依舊流行的多彩模糊陰影的感覺。我們試著去找一下這種風(fēng)格的特點(diǎn)有哪些......
IOS 13 圖片編輯界面
by Mike | Creative MintsMike
通過觀察,我們不難發(fā)現(xiàn)這種風(fēng)格的一些基本特點(diǎn):
元素并不浮動
元素色彩相對單一,與背景高度統(tǒng)一
左上角亮色投影,右下角深色投影
多以卡片樣式出現(xiàn)
更加適合大圓角圖形
...
克服恐懼最好的辦法就是 —— 臨摹它!
這種表現(xiàn)方式,其實并不難,去閱讀了幾乎全部相關(guān)的資料,也去查閱了作者相關(guān)的介紹和說明,試著去了解一下這種風(fēng)格。首先我們先以按鈕為例,請看下圖:
這三個圖標(biāo),你更愿意點(diǎn)哪一個?
這是我們比較常見的三種也是相對比較流行的表現(xiàn)方式,我們分別從常規(guī)的頂部視角和側(cè)面視角去觀察它們:
扁平的:首先在層級上,扁平的通常給我們的感知就是與背景是同為一個平面,視覺層級也沒有特別強(qiáng)烈的前后關(guān)系(不考慮圖標(biāo)本身),對背景沒有太大的依賴,如果本身背景與畫面整體背景有區(qū)分,色彩就劃分了層級。
投影的:帶投影的給我們的感知就是漂浮起來的,單獨(dú)看它,它漂浮在背景之上,與扁平并列看,它還要高于扁平的,通常大家為了突出某些內(nèi)容,某個模塊會去使用這種樣式。投影的使用對背景的依賴幾乎可以忽略,因為投影除了形狀可以調(diào)整,包括色彩、大小等都可以調(diào)整,且它是無邊界的漂浮著,即你可以隨意定義它的高度。
新擬態(tài):頂面看,它似乎是介于扁平與投影之間,側(cè)面看,同樣也是漂浮的,但是它有厚度卻又沒有離開平面,它的范圍相對于投影的無邊界,似乎還有一些模糊的界定。對背景的有一定的依賴,需要幾乎相同的色值去實現(xiàn)。
回到上面的問題,這三個你會更傾向于點(diǎn)哪個?當(dāng)然上面的案例沒有示意在不同色彩下的情況,也有認(rèn)為拋開體感上,前面兩張白色背景的已經(jīng)高于新擬態(tài),因為它與背景的高度融合,在對比度上已經(jīng)弱了很多。
可能這時候有人會有疑惑,單獨(dú)看這一個按鈕不是很有對比性,尤其是在視覺上體現(xiàn)的也不明顯。所以我們簡單繪制了一些卡片試試在作為信息承載的時候,這種風(fēng)格的效果如何,同時也去將不同的樣式融合,看看脫離背景的約束,局部是否可用與協(xié)調(diào)。
我們可以從上圖看出,當(dāng)這種風(fēng)格用做內(nèi)容承載時候,不管是文字圖片按鈕或者圖標(biāo),僅僅在用做卡片的時候,效果還是蠻好的,它同前面兩種風(fēng)格一樣,仍然可以清晰的區(qū)別內(nèi)容層次、間距等,但是親測如果大面積使用,頁面會變的更加復(fù)雜,整體的層級較難清晰劃分,那么局部使用效果如何?
局部使用在某種特定的場景是可以用的,如下圖的計算器界面。在的卡片、按鈕、進(jìn)度條等樣式下也能得以很好的展現(xiàn)。但是它比起投影卡片,除了視覺上,點(diǎn)擊感、移動效果......差了很多。
看的這里,大家應(yīng)該會有一個自我評定標(biāo)準(zhǔn),這應(yīng)該(目前)不會是一個大趨勢,至少明年不會,雖然這種風(fēng)格很受人喜歡,但是這種風(fēng)格還存在很多弊端:
首先,除了卡片等樣式,它不能有效的提高信息的傳達(dá),頁面內(nèi)容密集,過多使用容易導(dǎo)致混亂,如果靠投影的大小或深淺來區(qū)分,即使達(dá)到效果,畫面會變得復(fù)雜沉重。
按鈕的凸起和凹陷的狀態(tài),絕大部分需要通過投影來識別,這是比較困難也是比較嚴(yán)重的問題,這樣是幾乎很難區(qū)分點(diǎn)擊的前后狀態(tài)的。
背景色的依賴太大,色彩對比度較低,相對于白卡投影等形式的應(yīng)用,目前的樣式不能讓內(nèi)容與背景產(chǎn)生良好的對比,不利于信息傳遞。
實現(xiàn)問題,其實現(xiàn)實難度到還真不難,話筒交給你們......
所以這種風(fēng)格就涼了嗎?
這種風(fēng)格其實在某些局部地方還是可以使用的,小面積的和其他風(fēng)格進(jìn)行混合使用。無數(shù)的可能性需要大家去做更多的嘗試和創(chuàng)新。通過對趨勢的了解,結(jié)合我們認(rèn)知范圍內(nèi)正確的組合和排列,說不定會創(chuàng)造一個意想不到的“船新版本”。
我們只有在這樣的思考和創(chuàng)造的過程中,獲得更多的靈感。不能不考慮實現(xiàn)問題,但是我們更需要順應(yīng)趨勢,不管這個趨勢能火多久,在將來能否得到應(yīng)用,只有不斷的探索更多更新的東西,設(shè)計才會變得更加美好。動起手來吧~
下面還是簡單的分享一下實現(xiàn)的方法,并分享一下相關(guān)的源文件與作者的源文件供大家學(xué)習(xí)交流哦!
凸起部分:
第一步:確定配色,最好是淺色或者是深色,選取高光色和投影色(非同色系的不同組合大家可以多去嘗試)
第二部:創(chuàng)建對象,更加適合圓角的對象,可以是純色,或者輕微的漸變效果也更好
第三部:添加投影,投最好是X和Y軸的位移是一致的,至于角度,大家自由發(fā)揮吧,這里建議亮色投影和深色投影分別復(fù)制一份制作,如果是在同一圖層上做,交界處效果不理想,更模糊。
凹陷部分:
步驟幾乎一致,投影換成內(nèi)陰影做對角線的深淺添加可以。
這里說一下,凹陷部分完全按照這種風(fēng)格去實現(xiàn),顯示效果其實不好,作者包括其他設(shè)計師都在這里做了優(yōu)化,優(yōu)化后的實現(xiàn)方式上已經(jīng)不屬于這個風(fēng)格了,因為最后的實現(xiàn)效果,側(cè)面觀察它已經(jīng)是脫離背景的,如果融合背景也可以,只是邊界會更加模糊,所以仔細(xì)觀察作品,細(xì)心的同學(xué)應(yīng)該已經(jīng)發(fā)現(xiàn)是如何處理的:其實就是添加一個邊框,再讓投影充當(dāng)淺色高光。
作者:Frannnk
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://m.yvirxh.cn