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