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