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è)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(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è)計公司