Neumorphism / soft ui（新擬態(tài)也有人叫同化、軟UI）是什么？在前一段時(shí)間，大家即使沒有看過，但是應(yīng)該也聽到過一些關(guān)于這種新風(fēng)格的介紹，或者是在某某趨勢(shì)中有類似作品的出現(xiàn)，不太了解或者一看而過。簡(jiǎn)單的介紹一下，標(biāo)題并非判斷結(jié)果，而是希望同大家一起探尋一起交流，一起討論這種風(fēng)格是否會(huì)是接下來的新趨勢(shì)...

起因是源于2019年11月5日，來自烏克蘭的設(shè)計(jì)師 Alexander Plyuto 在追波和ins上發(fā)布了下圖的一張作品，作者說明信息：

“讓我們想象一下，如果在移動(dòng)界面設(shè)計(jì)中，投影的形式發(fā)展的更好的話，那將來的界面將會(huì)是什么樣的，這是我的愿景?！?/span>

Dribbble-Alexander Plyuto的作品

目前作品在追波平臺(tái)收獲贊量4000+，瀏覽量23W+，一路飆升至追波2019年pop排行第一熱門的作品，同時(shí)在ins上的傳播也是異常的火爆，獲得很多設(shè)計(jì)的喜歡，評(píng)論頓時(shí)炸開了鍋，其中有設(shè)計(jì)師稱呼這種風(fēng)格為“Neumorphism 新擬態(tài)”或者“Soft UI 軟UI”，于是這種叫法慢慢傳開，可能并不準(zhǔn)確。

為什么這個(gè)風(fēng)格會(huì)火？你怎么認(rèn)為？

先拋開作品發(fā)布的平臺(tái)帶來的熱度，很多設(shè)計(jì)師認(rèn)為這本身也是一種潛在的趨勢(shì)，隨處可見的C4D的輕質(zhì)感在不同領(lǐng)域和不同方向的使用，IOS13更新后的部分拋棄了純扁平，重拾了3D的感覺。它會(huì)火的主要還是在視覺上，這種風(fēng)格剛一出現(xiàn)，它是非常新穎的，在長(zhǎng)達(dá)半年的幾乎高度一致的風(fēng)格下，它是新的嘗試，讓人憧憬的方向。

能有不斷創(chuàng)新的設(shè)計(jì)師帶給我們不同的設(shè)計(jì)風(fēng)格，首先需要感謝，其次再去以個(gè)人的視角看待它。那么多風(fēng)格的作品，那么擬態(tài)就變成趨勢(shì)了？我們帶著這個(gè)問題，一起繼續(xù)探討（我們先把代碼實(shí)現(xiàn)等話題放在文章最后討論）。

帶著疑問，仔細(xì)看一下上面的作品，第一眼看有點(diǎn)像早期的寫實(shí)風(fēng)格（如下圖），接近真實(shí)感，有強(qiáng)烈的質(zhì)感和空間感......但是不同的是也帶了一點(diǎn)當(dāng)前依舊流行的多彩模糊陰影的感覺。我們?cè)囍フ乙幌逻@種風(fēng)格的特點(diǎn)有哪些......

IOS 13 圖片編輯界面

 by  Mike | Creative MintsMike

通過觀察，我們不難發(fā)現(xiàn)這種風(fēng)格的一些基本特點(diǎn)：

• 元素并不浮動(dòng)

• 元素色彩相對(duì)單一，與背景高度統(tǒng)一

• 左上角亮色投影，右下角深色投影

• 多以卡片樣式出現(xiàn)

• 更加適合大圓角圖形

• ...

      

克服恐懼最好的辦法就是 —— 臨摹它！

這種表現(xiàn)方式，其實(shí)并不難，去閱讀了幾乎全部相關(guān)的資料，也去查閱了作者相關(guān)的介紹和說明，試著去了解一下這種風(fēng)格。首先我們先以按鈕為例，請(qǐng)看下圖：

這三個(gè)圖標(biāo)，你更愿意點(diǎn)哪一個(gè)？

這是我們比較常見的三種也是相對(duì)比較流行的表現(xiàn)方式，我們分別從常規(guī)的頂部視角和側(cè)面視角去觀察它們：

• 扁平的：首先在層級(jí)上，扁平的通常給我們的感知就是與背景是同為一個(gè)平面，視覺層級(jí)也沒有特別強(qiáng)烈的前后關(guān)系（不考慮圖標(biāo)本身），對(duì)背景沒有太大的依賴，如果本身背景與畫面整體背景有區(qū)分，色彩就劃分了層級(jí)。   

• 投影的：帶投影的給我們的感知就是漂浮起來的，單獨(dú)看它，它漂浮在背景之上，與扁平并列看，它還要高于扁平的，通常大家為了突出某些內(nèi)容，某個(gè)模塊會(huì)去使用這種樣式。投影的使用對(duì)背景的依賴幾乎可以忽略，因?yàn)橥队俺诵螤羁梢哉{(diào)整，包括色彩、大小等都可以調(diào)整，且它是無邊界的漂浮著，即你可以隨意定義它的高度。   

• 新擬態(tài)：頂面看，它似乎是介于扁平與投影之間，側(cè)面看，同樣也是漂浮的，但是它有厚度卻又沒有離開平面，它的范圍相對(duì)于投影的無邊界，似乎還有一些模糊的界定。對(duì)背景的有一定的依賴，需要幾乎相同的色值去實(shí)現(xiàn)。

回到上面的問題，這三個(gè)你會(huì)更傾向于點(diǎn)哪個(gè)？當(dāng)然上面的案例沒有示意在不同色彩下的情況，也有認(rèn)為拋開體感上，前面兩張白色背景的已經(jīng)高于新擬態(tài)，因?yàn)樗c背景的高度融合，在對(duì)比度上已經(jīng)弱了很多。

可能這時(shí)候有人會(huì)有疑惑，單獨(dú)看這一個(gè)按鈕不是很有對(duì)比性，尤其是在視覺上體現(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è)如果大面積使用，頁面會(huì)變的更加復(fù)雜，整體的層級(jí)較難清晰劃分，那么局部使用效果如何？

局部使用在某種特定的場(chǎng)景是可以用的，如下圖的計(jì)算器界面。在的卡片、按鈕、進(jìn)度條等樣式下也能得以很好的展現(xiàn)。但是它比起投影卡片，除了視覺上，點(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á)，頁面內(nèi)容密集，過多使用容易導(dǎo)致混亂，如果靠投影的大小或深淺來區(qū)分，即使達(dá)到效果，畫面會(huì)變得復(fù)雜沉重。

• 按鈕的凸起和凹陷的狀態(tài)，絕大部分需要通過投影來識(shí)別，這是比較困難也是比較嚴(yán)重的問題，這樣是幾乎很難區(qū)分點(diǎn)擊的前后狀態(tài)的。

• 背景色的依賴太大，色彩對(duì)比度較低，相對(duì)于白卡投影等形式的應(yīng)用，目前的樣式不能讓內(nèi)容與背景產(chǎn)生良好的對(duì)比，不利于信息傳遞。

實(shí)現(xiàn)問題，其實(shí)現(xiàn)實(shí)難度到還真不難，話筒交給你們......

所以這種風(fēng)格就涼了嗎？

這種風(fēng)格其實(shí)在某些局部地方還是可以使用的，小面積的和其他風(fēng)格進(jìn)行混合使用。無數(shù)的可能性需要大家去做更多的嘗試和創(chuàng)新。通過對(duì)趨勢(shì)的了解，結(jié)合我們認(rèn)知范圍內(nèi)正確的組合和排列，說不定會(huì)創(chuàng)造一個(gè)意想不到的“船新版本”。

我們只有在這樣的思考和創(chuàng)造的過程中，獲得更多的靈感。不能不考慮實(shí)現(xiàn)問題，但是我們更需要順應(yīng)趨勢(shì)，不管這個(gè)趨勢(shì)能火多久，在將來能否得到應(yīng)用，只有不斷的探索更多更新的東西，設(shè)計(jì)才會(huì)變得更加美好。動(dòng)起手來吧~

下面還是簡(jiǎn)單的分享一下實(shí)現(xiàn)的方法，并分享一下相關(guān)的源文件與作者的源文件供大家學(xué)習(xí)交流哦！

凸起部分：

第一步：確定配色，最好是淺色或者是深色，選取高光色和投影色（非同色系的不同組合大家可以多去嘗試）

第二部：創(chuàng)建對(duì)象，更加適合圓角的對(duì)象，可以是純色，或者輕微的漸變效果也更好

第三部：添加投影，投最好是X和Y軸的位移是一致的，至于角度，大家自由發(fā)揮吧，這里建議亮色投影和深色投影分別復(fù)制一份制作，如果是在同一圖層上做，交界處效果不理想，更模糊。

凹陷部分：

步驟幾乎一致，投影換成內(nèi)陰影做對(duì)角線的深淺添加可以。

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司