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