新擬物設(shè)計(jì)（Neumorphism UI）是2020年 UI 設(shè)計(jì)的主要趨勢(shì)之一，在 dribbble 上可以看到很多這種風(fēng)格的作品，也有人稱之為 Soft UI。這種類(lèi)似于浮雕的效果風(fēng)格的出現(xiàn)，給目前流行的扁平化設(shè)計(jì)增加了一種新的設(shè)計(jì)形式，但其實(shí)它不一定是最實(shí)用的設(shè)計(jì)。

01

什么是新擬物化設(shè)計(jì)

新擬物Neumorphism是基于New+Skeuomorphism英文單詞的拼寫(xiě)，是一種使用對(duì)象陰影的模糊、角度和強(qiáng)度來(lái)突顯出對(duì)象的樣式。其柔和的陰影和整體的外觀使該設(shè)計(jì)看起來(lái)逼真、未來(lái)、有吸引力。

這種風(fēng)格最初來(lái)自烏克蘭設(shè)計(jì)師 Alexander Plyuto 發(fā)布的新作品「Skeuomorph Mobile Banking」。這個(gè)作品自發(fā)布以來(lái)就獲得了極大關(guān)注，熱度持續(xù)飆升并登上 Popular 榜首。大家都開(kāi)始用這種風(fēng)格出作品，便成為了新的設(shè)計(jì)趨勢(shì)。

前身

新擬物的前身是 Skeuomorphism（擬物），即在界面中模仿現(xiàn)實(shí)物紋理材質(zhì)的設(shè)計(jì)，讓人們?cè)谑褂媒缑鏁r(shí)聯(lián)想到現(xiàn)實(shí)物體的使用方式。擬物寫(xiě)實(shí)的設(shè)計(jì)風(fēng)格曾經(jīng)風(fēng)靡全球。

直到蘋(píng)果公司發(fā)布 iOS7 系統(tǒng)，使用了簡(jiǎn)潔的設(shè)計(jì)風(fēng)格，才使擬物風(fēng)格逐漸過(guò)時(shí)。扁平風(fēng)格作為更高效簡(jiǎn)潔的風(fēng)格被全面普及，擬物風(fēng)格再?zèng)]被廣泛應(yīng)用。

然而設(shè)計(jì)趨勢(shì)一直在改變，蘋(píng)果公司最新發(fā)布的 iOS 13 系統(tǒng)中，就出現(xiàn)了輕擬物的手法。雖然擬物效果能否回歸尚且未知，但新風(fēng)格的出現(xiàn)可以在扁平同質(zhì)化時(shí)帶來(lái)一些靈感。

02

如何實(shí)現(xiàn)

新擬物主要由三個(gè)元素組成：1 個(gè)背景+ 2 個(gè)投影。再在此基礎(chǔ)上，改變顏色和大小參數(shù)以達(dá)到不同效果。

使用淺色背景時(shí)效果顯著，但使用深一點(diǎn)的顏色時(shí)，效果像是外發(fā)光或者普通投影。因此大多數(shù)作品都采用比較素的顏色作為背景。

新擬物在色彩使用上比較克制，沒(méi)有大面積的平鋪顏色，僅在極少的位置進(jìn)行色彩點(diǎn)綴以吸引眼球。

元素動(dòng)畫(huà)效果很難做得輕快，視覺(jué)層級(jí)上跟背景沒(méi)有分離開(kāi)，所以動(dòng)畫(huà)效果只要出現(xiàn)移動(dòng)，會(huì)讓人覺(jué)得有些不合理。

在開(kāi)發(fā)上，要實(shí)現(xiàn)新擬物，主要有兩個(gè)方式。

切圖：對(duì)元素的每個(gè)狀態(tài)（Normal、Hover、Pressed），設(shè)計(jì)師都需要分別提供一張切圖。

代碼實(shí)現(xiàn)：這個(gè)風(fēng)格的實(shí)現(xiàn)效果是對(duì)元素增加兩個(gè)不同方向的投影，通過(guò)代碼可以實(shí)現(xiàn)。但是需要開(kāi)發(fā)對(duì)每個(gè)元素添加投影，工作量繁重。

03

注意事項(xiàng)

不適宜用于按鈕

新擬物將按鈕的選中狀態(tài)呈現(xiàn)得很美觀，但是對(duì)于患有視力障礙的群體及使用設(shè)備的屏幕質(zhì)量較差或?qū)Ρ榷容^低的用戶而言，不同按鈕狀態(tài)間的微妙差別讓人難以分辨。

卡片和滑動(dòng)條

卡片和滑動(dòng)條可能是新擬物的最佳使用場(chǎng)景。但是卡片的結(jié)構(gòu)需要處理恰當(dāng)。需要確保圖片、圖標(biāo)和字體間的層級(jí)清晰，間距足夠明顯。

04

評(píng)價(jià)

可辨識(shí)性較差

新擬物僅通過(guò)柔和的陰影來(lái)區(qū)分元素，缺少對(duì)比度，因此對(duì)視力低下、失明、色盲的用戶來(lái)說(shuō)，可辨識(shí)性較差，不太友好。用戶在戶外時(shí)，陽(yáng)光、屏幕眩光和缺乏對(duì)比度使用戶的使用受到更大的影響，尤其是對(duì)于已經(jīng)有視覺(jué)障礙的用戶。

讓用戶思考

帶有陰影的元素通常比較突出。但是在新擬物中，樣式非常統(tǒng)一，大多數(shù)元素都會(huì)得到突出，在一個(gè)屏幕上互相競(jìng)爭(zhēng)，這導(dǎo)致用戶難以輕易理解頁(yè)面中視覺(jué)層次和信息層級(jí)關(guān)系，界面缺少適當(dāng)?shù)慕裹c(diǎn)，從而在眼動(dòng)追蹤中造成混亂。

界面上缺少信息層級(jí)關(guān)系，會(huì)對(duì)用戶的決策過(guò)程及思考過(guò)程產(chǎn)生重大影響。如存在多個(gè)可操作的內(nèi)容，但是重點(diǎn)不突出，這會(huì)讓用戶在當(dāng)前的流程上產(chǎn)生困惑，從而可能導(dǎo)致錯(cuò)誤的判斷和誤操作，好的 UI/UX 不需要讓用戶思考。

到底點(diǎn)擊了嗎

對(duì)象的階段由內(nèi)部/外部陰影決定和標(biāo)識(shí)。由于新擬態(tài)圍繞著各種陰影色調(diào)和角度變化，因此會(huì)給用戶帶來(lái)困惑，可點(diǎn)擊與不可點(diǎn)擊之間的界限在哪里。

05

改良應(yīng)用

風(fēng)格融合

新擬物易產(chǎn)生界面層級(jí)混亂的問(wèn)題，因此可以考慮將新擬物作為局部高光來(lái)使用，融合扁平化風(fēng)格，可以良好地保障信息層級(jí)的劃分。

疊加深淺模式

新擬物按鈕多是疊加在淺色背景上的淺色按鈕，這造成了前文所述的可辨識(shí)性差的問(wèn)題，因此可以將新擬物的深淺模式疊加使用。

扁平風(fēng)格多年流行后，設(shè)計(jì)潮流開(kāi)始往回走，但并不是直接回到擬物風(fēng)格，而是在效率和視覺(jué)效果中找一個(gè)平衡點(diǎn)。

不論新擬物的對(duì)錯(cuò)，起碼引起了設(shè)計(jì)師注意，也激發(fā)了很多設(shè)計(jì)師的靈感，試著做一下效果圖，或許會(huì)有新的發(fā)現(xiàn)！

本篇文章部分圖片素材來(lái)源自網(wǎng)絡(luò)

文章版權(quán)為51design所有 若需轉(zhuǎn)載請(qǐng)注明來(lái)源并鏈接原文

- END -