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