2020-7-1 濤濤
新擬物化——Neumorphism ，這么說(shuō)可能不容易理解，但如果說(shuō)「新擬物風(fēng)格」，想必 UI 界的設(shè)計(jì)師們就知道這股「風(fēng)頭」，在2020年刮的多么兇猛了。
烏克蘭設(shè)計(jì)師亞歷山大·普盧托 （Alexander Plyuto） 在 Dribble 平臺(tái)發(fā)布了一張 UI 作品《Skeuomorph Mobile Banking》，由于該作品使用了擬物化的設(shè)計(jì)風(fēng)格，令人耳目一新，導(dǎo)致了作品的熱度持續(xù)飆升，并登上了平臺(tái) Popular 榜首。Dribble 的評(píng)論區(qū)直接炸開(kāi)了鍋，大家紛紛討論。
△ 普盧托的《Skeuomorph Mobile Banking》，獲得了3000多次喜歡
隨后一位評(píng)論者杰森·凱利（Jason Kelley）在評(píng)論中將 New Skeuomorphism 「新擬物化」組合得到的 Neuomorphism 稱為「新擬物」 ，并決定去掉「 o 」，于是新設(shè)計(jì)詞匯「 Neumorphism 」便產(chǎn)生了。之后大家便用此做 Tag ，為自己的新擬物化設(shè)計(jì)作品打標(biāo)簽上傳。
此風(fēng)格的出現(xiàn)也給一直流行的扁平化設(shè)計(jì)添加了新的展現(xiàn)形式。今年2月初，三星召開(kāi) Galaxy Unpacked 活動(dòng)，為宣傳新設(shè)備而發(fā)出的邀請(qǐng)函，便應(yīng)用了新擬物化。
△ 凸出的部分，用來(lái)比喻新機(jī)型的賣點(diǎn)
想要了解新擬物的由來(lái)，就必須知道擬物的概念。擬物又被稱為擬物化，或是現(xiàn)實(shí)主義（Realism），概括的說(shuō)其主要目標(biāo)是使用戶界面更有代入感，降低人們使用的學(xué)習(xí)成本，產(chǎn)生熟悉親和的情感聯(lián)系。
A skeuomorph, or skeuomorphism is a design element of a product that imitates design elements functionally necessary in the original product design, but which have become ornamental in the new design. Skeuomorphs may be deliberately employed to make the new look comfortablyold and familiar.
via：en.wikipedia.org/wiki/Skeuomorph維基百科上關(guān)于擬物化的釋義
Apple 蘋(píng)果公司最早提出了擬物化的設(shè)計(jì)概念，通過(guò)模擬現(xiàn)實(shí)物體的紋理、材質(zhì)來(lái)進(jìn)行界面設(shè)計(jì)，當(dāng)時(shí)的 UI 設(shè)計(jì)師們都為擬物化設(shè)計(jì)「癡狂」。蘋(píng)果創(chuàng)始人喬布斯也非常推崇擬物化，他認(rèn)為：「通過(guò)擬物化，用這種更加自然的認(rèn)知體驗(yàn)方式，可以減少用戶對(duì)電腦操作產(chǎn)生的恐懼感」。不妨來(lái)回憶下曾經(jīng)擬物化的 IOS 界面：
△ IOS 5系統(tǒng)中的相機(jī)展開(kāi)狀態(tài)（擬物化的鏡頭）
△ 擬物化的精美 ICON
△ IOS 6系統(tǒng)中，被精細(xì)刻畫(huà)的錄音機(jī)（底部指針也很惟妙惟肖）
而新擬物則是擬物的變體，在擬物的基礎(chǔ)上改變了圖形的樣式，讓設(shè)計(jì)元素看起來(lái)更有真實(shí)感，不再是精細(xì)的模擬，更像是從界面中「生長(zhǎng)」出來(lái)。設(shè)計(jì)師 Michal Malewicz 以卡片的形式，將新擬物和質(zhì)感設(shè)計(jì)（Material Design）對(duì)比，闡述了二者在實(shí)現(xiàn)時(shí)的差別。
新擬物卡片給人呈現(xiàn)的是一種無(wú)縫隙的「閉合」感，由界面中凸起；而質(zhì)感設(shè)計(jì)卡片，則是漂浮狀，陰影向四周發(fā)散，沒(méi)有邊界限制；二者的光影效果也非常明顯，新擬物偏柔和，質(zhì)感設(shè)計(jì)則相反，非常凸顯物體本體。
Michal Malewicz 還標(biāo)注了新擬物卡片的背景、陰影和高光的色值，整體色調(diào)比較接近。
擬物化風(fēng)格的結(jié)構(gòu)由背景色+高光色+陰影組成，掌握了基本規(guī)律，就可以通過(guò)改變按鈕、卡片的參數(shù)進(jìn)行調(diào)整變換。
△ 形狀、陰影參數(shù)的不同，實(shí)際效果也有區(qū)別
新擬物也經(jīng)常被拿來(lái)與扁平化比較，因?yàn)閿M物和扁平化是兩個(gè)相對(duì)的概念。其實(shí)在蘋(píng)果創(chuàng)造的設(shè)計(jì)系統(tǒng)的早期界面其實(shí)是非常擬物風(fēng)的，但系統(tǒng)從 IOS 7開(kāi)始，才轉(zhuǎn)向扁平的設(shè)計(jì)風(fēng)格。
隨著 AR、VR 技術(shù)的進(jìn)步，其實(shí)對(duì)于真實(shí)物理環(huán)境，或者說(shuō)對(duì)顯示效率的提升之后，我們對(duì)接近物理環(huán)境的設(shè)計(jì)更熱衷了。比較有代表性的就是 Google 推出的 Material Design System，它基于人們?nèi)ツM真實(shí)的物理世界的樣子，進(jìn)而在數(shù)字世界里展現(xiàn)我們對(duì)于真實(shí)世界的一個(gè)反饋后，這樣的設(shè)計(jì)流程和邏輯，也讓我們的設(shè)計(jì)更真實(shí)，更具有感染力。當(dāng)然也不止 Google 一家發(fā)布了這樣偏擬物化的設(shè)計(jì)風(fēng)格。
從美學(xué)角度來(lái)看，其實(shí)新擬物化拋棄了之前很多擬物化里不必要的冗余，比如一些陰影、細(xì)節(jié)的繁瑣設(shè)計(jì)，更偏近現(xiàn)在先進(jìn)科技發(fā)展的設(shè)計(jì)風(fēng)格。比如 Windows 推出的 Fluent Design System ，正迎合了未來(lái)的 AR、VR 技術(shù)廣泛普及后的設(shè)計(jì)環(huán)境，希望打造一個(gè)先趨的設(shè)計(jì)系統(tǒng)。
在 Fluent Design System 提到的特點(diǎn)有：Lignt、Depth、Motion、Material、Scale。
1. Lignt
光照，它指的是點(diǎn)擊或 Hover 的動(dòng)作上面加入光照的效果，或是像柔和的光源灑落在空間中，可以去反應(yīng)物體本身的反光質(zhì)感，它和 Material Design 強(qiáng)調(diào)的光影的擴(kuò)散的光影效果是不同的概念。
2. Depth
深度，其實(shí)它的概念從 Material Design 開(kāi)始就已經(jīng)被強(qiáng)調(diào)了，但是 Fluent Design System 希望是用更多的方式去呈現(xiàn)，比如井深的模糊效果，視差滾動(dòng)的動(dòng)態(tài)效果，物件彼此的大小與位置等等。
3. Motion
動(dòng)效，其實(shí)它想強(qiáng)調(diào)的動(dòng)態(tài)效果更接近真實(shí)的世界，更強(qiáng)調(diào)細(xì)膩的變化，比如李安的電影「比利·林恩的中場(chǎng)戰(zhàn)事」，這個(gè)電影拍攝的幀數(shù)與以往傳統(tǒng)電影不一樣，看起來(lái)的感覺(jué)會(huì)更加的流暢自然，你體驗(yàn)過(guò)之后會(huì)很難回去之后那種電影呈現(xiàn)效果了。而 Windows 強(qiáng)調(diào)的 Motion 也是一樣的，比起這種單調(diào)的動(dòng)作，它也會(huì)去強(qiáng)調(diào)每個(gè)設(shè)計(jì)對(duì)象彼此之間的動(dòng)態(tài)效果的時(shí)間差，看起來(lái)會(huì)更加的流暢自然。而且與真實(shí)空間中前景后景的物理概念一樣，不同的時(shí)間差會(huì)更容易凸顯出想要凸顯的主題效果，也會(huì)更加的聚焦。
4. Material
材質(zhì)，其實(shí)在 Windows 提出的 Fluent Design System 里面，它會(huì)出現(xiàn)大量的模糊，透明的背景。也就是模擬毛玻璃的材質(zhì)感。通常也會(huì)代入一些微光源的效果。除了能夠吸睛，吸引你的視覺(jué)之外呢，其實(shí)在 AR、VR 的界面上面感知空間中的物件是很重要的，所以模糊的背景的利用可以在不影響觀看內(nèi)容情況下，還能起到背景暗示的作用。其實(shí)毛玻璃效果在 Windows 系統(tǒng)中已經(jīng)被運(yùn)用到了，但是由于當(dāng)時(shí)的效能以及干擾視線的問(wèn)題僅僅運(yùn)用在了一些小區(qū)域，而這次 Fluent Design System 的就成為了最強(qiáng)烈的視覺(jué)焦點(diǎn)，其實(shí)同樣的 iOS 和 Mac iOS 系統(tǒng)里面在最近的更新也大量使用了模糊效果。
6. Scale
縮放，在視覺(jué)上眼前的物體大，后面的物體小，所以縮放也是來(lái)營(yíng)造空間感、縱深感，尺度感的這樣一個(gè)設(shè)計(jì)特性。
常應(yīng)用于圖標(biāo)、卡片或按鈕元素設(shè)計(jì)上，背景板多為干凈的純色；界面平滑，沒(méi)有明顯的顆粒感；
△ HYPE4《 Neumorphic Bank Redesign in Dark and Light mode 》
△ Filip Legierski 《 Banking App 》
按鈕的外邊框均設(shè)置了陰影、漸變效果，突出立體感；
△ Samson Vowles《 Neumorphic dark ui kit components 》
在視覺(jué)處理上，凸出的按鈕為可點(diǎn)擊的狀態(tài)，凹進(jìn)去則代表已選中。
△ Emy Lascan《 Freebie Neumorphic UX UI Elements 》
層次結(jié)構(gòu)弱
Whale Lab 觀察發(fā)現(xiàn)，新擬物弱化顏色區(qū)分而強(qiáng)調(diào)近遠(yuǎn)景陰影布局，所以整體色彩都相近，除了在個(gè)別的位置加入其它顏色點(diǎn)綴，用戶識(shí)別起來(lái)也會(huì)迷茫；而卡片、按鈕都使用了陰影，高光效果，層次結(jié)構(gòu)不明確，也很難帶來(lái)流暢的體驗(yàn)；
△ 新擬物風(fēng)格，F(xiàn)ilip Legierski《 Neumorphism UI Elements 》
對(duì)比度和視覺(jué)限制
明顯的對(duì)比是界面設(shè)計(jì)的重要原則。由于新擬物風(fēng)格具有各種陰影色調(diào)和角度，可單擊的內(nèi)容與不可單擊的內(nèi)容區(qū)域在哪里不是很好區(qū)分。根據(jù)產(chǎn)品的功能和要求，每個(gè)應(yīng)用神經(jīng)同構(gòu)的產(chǎn)品都可以具有自己的UI階段規(guī)則；但是由于陰影，角度和浮動(dòng)水平的不同，由于缺乏一致性，迷失方向的可操作項(xiàng)，「神經(jīng)變形」會(huì)給用戶帶來(lái)混亂，最終為殘疾用戶造成使用障礙。
如同下面這個(gè)例子，按鈕狀態(tài)已點(diǎn)擊和未點(diǎn)擊的一個(gè)效果，由于受壓狀態(tài)的反差太小，則看起來(lái)的效果也沒(méi)有什么不同。
增加開(kāi)發(fā)難度
更為嚴(yán)重的是，不少設(shè)計(jì)者在使用 Neumorphism 進(jìn)行界面開(kāi)發(fā)過(guò)程中，也遭遇到了不少局限。要實(shí)現(xiàn)這個(gè)風(fēng)格，主要有兩個(gè)方式：
卡片、按鈕切圖，每個(gè)狀態(tài)（Normal、Hover、Pressed）都要裁切，導(dǎo)致資源庫(kù)圖片量過(guò)載；
代碼實(shí)現(xiàn)，這個(gè)風(fēng)格的實(shí)現(xiàn)效果是對(duì)元素增加兩個(gè)不同方向的投影，但需要開(kāi)發(fā)對(duì)每個(gè)元素添加投影，樣式代碼增多，工作量浩大。
網(wǎng)站neumorphism.io，可以快速生成 Neumorphism UI 。設(shè)置按鈕的參數(shù)值，就能看到多樣的新擬物化效果，非常神奇！
新技術(shù)、事物、趨勢(shì)的出現(xiàn)，起初都會(huì)給人們帶來(lái)焦慮甚至是恐慌。不管是擬物還是扁平，Whale Lab 覺(jué)得若是絕對(duì)化的去推崇某一種，都是錯(cuò)誤的，盡管蘋(píng)果放棄了擬物進(jìn)入扁平化，也不一定代表扁平就是最好，畢竟二者始終相輔相成。不敢否認(rèn)，新擬物風(fēng)格在今后是否變得「真香」，但對(duì)于設(shè)計(jì)師來(lái)說(shuō)，從用戶體驗(yàn)、產(chǎn)品出發(fā)的優(yōu)秀設(shè)計(jì)，都值得被認(rèn)可與尊敬。
文章來(lái)源：優(yōu)設(shè) 作者：UX辭典
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.73404.com.cn