2020-3-22 濤濤
最近關于新擬物化 Neumorphism 的風太大，簡直是傳遍大江南北無人不知。對于它的看法大家也都眾說紛紜，大部分的觀點都集中于：第一看過去非常的高大上，再仔細琢磨一下就感覺只能是飛機稿中的戰斗稿。對此我表示非常的理解，畢竟在國內體制下的用戶界面設計基本都延續商業設計的命脈──低效能、不實用、不能帶來良好轉化的東西統統給我丟掉，哪怕是用戶體驗也是建立在商業目標驅動下的存在。
盡管觀點如此，我還是想為新擬物化這位誕生在不平凡 2020 年的新生兒稍稍正個身，它并非空穴來風，也并非完全無法落地使用，相反如果合理加以優化應該能達到意想不到的雙贏效果。
一切的開始都源于一個叫 Alexander Plyuto 的設計師在各平臺發布了一個他的新作品──「Skeuomorph Mobile Banking（擬物化手機銀行）」。
在去年末的時候這名設計師還一直沿用 Skeuomorph（擬物化）這個名詞來命名自己的一系列設計作品，直到 HYPE4 的 CEO-Michal Malewicz 寫了一篇關于此風格的文章，并賦予了它一個新名詞 Neumorphism（New+Skeuomorphism），自此之后大家就都照著這個新名詞進行傳播了。
在詳解新風格之前，先讓我們回憶一下這些年移動端用戶界面設計風格的演變歷程。自 2013 年蘋果推出了 iOS7 之后開始刮起的扁平風潮，所有走在設計前沿的大廠都開始不約而同地對自己家的 app 進行了大刀闊斧的改版。
這扁平風一刮就是 7 年，仔細分析一下就能明白為何 ta 如此長壽：內容優先的認知簡約，不僅拓展性強且具有能的特性，解放了一大堆「手活」不是那么好的設計師，讓他們有更多時間專注在設計解決問題的命題上。
但就算一個風格再適應市場的需求，用戶和時代還是會對它逐漸疲憊，審美疲勞和新的市場需求都會催生新的變革。
1. 新擬物化≠輕擬物
第一次看到這個風格介紹的時候險些以為就是曾經的輕擬物重返江湖了，但仔細看看原設計師輸出的設計原則，發現確實是完全不同的 2 種定義。
輕擬物從本質上來說是 Y 軸面原質化層級分離的，而新擬物是在 Y 軸面不分離的情況下物理化擬態。
來看一個輕擬物與新擬物卡片的比對：
從上圖可以感受到新擬物在保留輕質感的同時，更貼近事物的物理還原，但真實感與舒適度帶來的代價就是它的辨識度和對比度明顯較其他風格低了很多，這也是它被大家吐槽飛機稿中的戰斗稿的重要原因之一。
2. 新擬物化控件示例
原設計師對新擬物化的「淺色版」控件規范如下，基本涵蓋了核心的界面設計控件，整體對于控件的定義就在于良好使用投影和漸變來打造物理化界面肌理。
另外還有可以良好適配當前流行黑色模式的「黑色版」。
在了解新擬物化的設計語言特點之后，大家應該都發現這種風格的設計是有一定局限性的，它并不適用于一部分商業產品，大部分時候也不適合全局控件應用。那么如果我們想要把新擬物化應用到我們的落地項目設計中，需要注意哪些地方，并進行什么樣的改良呢？
1. 深淺模式疊加解決弱可視難題
新擬物的按鈕肌理很多是建立在素色白板上的淺色按鈕，如果繼續沿用淺色按鈕，且不說色弱用戶的可視問題，普通用戶的操作行為也會大打折扣，所以這里我們建議將新擬物的深淺模式疊加來使用，如下圖：
2. 局部高光使用解決層級難辨問題
如果將新擬物化全控制使用，確實容易造成界面層級混亂的問題，因為畢竟它的設計語言就是 Y 軸面不分離的設計定義，但如果我們合理選擇它來作為局部高光，應該大部分情況下還是不錯的。如下圖，我們僅在銀行卡部分使用新擬物化（深淺雙模式均可用），其他的控件部分保持扁平，使用 2 個風格相融合的方式可以良好保障層級的劃分：
3. 拿什么解決開發崩潰的問題？
之前看到很多文章在轉發一個生成新擬物化 css 代碼的網站：Neumorphism.io，說是用這個就可以輕松解決開發的問題。
然而事實的真相總是令人落淚的，這個網站提供的 css 代碼只是網頁代碼，移動端是完全用不了的。而且就算有對應的 css 代碼，對于開發來說也是遠不夠的，他們還是要寫框架來支持這套 css 代碼，不然是跑不起來的。所以我們要如何解決開發小哥哥手寫新擬物化設計稿崩潰的問題呢？
很簡單，就是給他們切圖。按鈕的軟點擊切兩張狀態圖，卡片背景只需要切一張，ppduck 壓縮走一波，對 app 性能的影響基本可以忽略不計（因為上文我也說過了這種風格不大可能大面積或者全界面應用）。
至于新擬物風不適用的場景大家應該都心知肚明了，信息承載大，層級關系復雜，我就不一一舉例了，基本就涵蓋了大部分現在市面上主流的產品的大部分場景。但即便如此我們還是需要對新的設計保有一絲激情與希望，不要輕易的去否定，畢竟新生事物總是有它的魅力與獨到之處。
文章來源：優設 作者：Nana的設計錦囊