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