設(shè)計(jì)趨勢(shì)預(yù)測(cè)師 Michal Malewicz 又搞事情了。或者說，他又預(yù)測(cè)了一個(gè)新的設(shè)計(jì)趨勢(shì)：Claymorphism，或者說，粘土擬物化。

在此之前，Michal Malewicz 預(yù)測(cè)了新擬物化、玻璃擬物化、極光風(fēng)等設(shè)計(jì)趨勢(shì)的流行：

那么粘土擬物化到底是怎么出現(xiàn)的，它又有哪些特征呢？下面詳細(xì)看看：

「新擬物化」沒最終流行起來的原因

如你現(xiàn)在所知的，從2年前開始在 Dribbble 開始流行的視覺風(fēng)格「新擬物化」最終沒有在實(shí)際產(chǎn)品當(dāng)中大規(guī)模流行，這一點(diǎn)并不難理解——新擬物化固然很有特色，但是在開發(fā)那邊并不容易流暢自然地全部落地。一個(gè)僅僅只能停留在視覺設(shè)計(jì)當(dāng)中的設(shè)計(jì)風(fēng)格，是無法在實(shí)際產(chǎn)品中流行開來的。

之前有人質(zhì)疑過 「新擬物化」存在可用性方面的問題，但是實(shí)際上，僅僅只需要一定程度的微調(diào)，就能讓實(shí)際效果還不錯(cuò)。在 Michal 看來，更深層的原因是，新擬物化想要做到足夠出彩并不容易，一方面簡單的實(shí)現(xiàn)并不夠吸引人，想要做到細(xì)膩，在前端實(shí)現(xiàn)上壓力又會(huì)非常大，來回衡量一下，選擇別的視覺風(fēng)格會(huì)更加合理。

而廣大設(shè)計(jì)師對(duì)于新擬物化的追捧，更深層的原因是大家對(duì)于扁平化視覺風(fēng)的厭倦，人類視覺認(rèn)知，從天性上決定了眼睛會(huì)更加青睞陰影所構(gòu)建的信息層級(jí)和視覺關(guān)系。

那么從這一點(diǎn)上來說，在視覺設(shè)計(jì)上倒是并不是非得跟新擬物化死磕。

「粘土擬物化」是「新擬物化」的自然延伸

所以，這就要說說正在逐漸崛起的這種「粘土擬物化」設(shè)計(jì)風(fēng)格。這種視覺風(fēng)格看起來不像新擬物化那樣「微妙」，陰影和漸變更加清晰，元素和元素之間涇渭分明，簡單，但是足夠友好。

Michael 提到，隨著 2021 年元宇宙和 NFT 的大規(guī)模流行，這種源自于新擬物化但是更加適合用來創(chuàng)建虛擬角色的視覺風(fēng)格，開始引起許多設(shè)計(jì)從業(yè)者的注意力。設(shè)計(jì)師 Amrit Pal Singh、Sam briskar 以及 著名的設(shè)計(jì)團(tuán)隊(duì) icons8 的成員都在探討如何探索這種新的風(fēng)格，讓它不僅僅在元宇宙中流行，而是走入更加日常的 UI 素材和圖標(biāo)當(dāng)中。

上圖中，分別是 Amrit Pal Signh、Icons8 和 Sam Briskar 的設(shè)計(jì)作品

在 NFT 交易中可以很清晰地注意到用戶對(duì)于這類風(fēng)格的作品的追捧。那么，將這種設(shè)計(jì)風(fēng)格自然地延伸地加入到 UI 設(shè)計(jì)當(dāng)中，讓扁平的 UI 元素更加具備親和力。

視覺風(fēng)格：3D、友好、蓬松

實(shí)際上，Michael 在大概6年前的一個(gè)設(shè)計(jì)研究項(xiàng)目當(dāng)中，就涉及到類似的風(fēng)格。在那個(gè)扁平化依然是絕對(duì)主流的階段，這種使用圓潤邊角、立體且柔和的 UI 設(shè)計(jì)風(fēng)格倒是得到了很多人的青睞，倒是在設(shè)計(jì)從業(yè)者群體中鮮有好評(píng)。

老實(shí)說，粘土擬物化風(fēng)格給人感覺非常「童趣」，不過在設(shè)計(jì)的時(shí)候，考慮到它本身會(huì)自帶光影變化，所以排版布局最好盡量「極簡」一點(diǎn)，同時(shí)用好強(qiáng)調(diào)色，調(diào)整好對(duì)比度。

不過，在前端落地上，目前還沒有特別完美的 CSS 來落地，不過已經(jīng)有一些開發(fā)人員借助 SVG 確定它可以在 UI 界面當(dāng)中實(shí)現(xiàn)了。Michael 和他的朋友們已經(jīng)創(chuàng)建了一個(gè)簡單的 CSS 生成器，如果你想試試，可以借助它來制作出足夠具有粘土擬物化特質(zhì)的光影：

和新擬物化類似，粘土擬物化需要借助內(nèi)外陰影共同來構(gòu)建出元素的立體感，同時(shí)，背景投影除了Y軸上的偏移之外，還存在一個(gè)X軸上的偏移，這一點(diǎn)和多數(shù)的 UI 陰影有明顯的差別：

為了確保整體的立體感，左上角的內(nèi)陰影必須稍微亮一點(diǎn)，而右下角要適當(dāng)暗一點(diǎn)：

在形狀上，盡量使用使用圓角矩形，同時(shí)，它的圓角的尺寸也要比普通的更大：

最后，使用路徑工具給四邊增加額外的錨點(diǎn)，將錨點(diǎn)向外拖動(dòng)，讓它的整個(gè)輪廓更加圓潤。

當(dāng)然，粘土擬物化其實(shí)也適合深色模式的，不過要注意對(duì)比度，內(nèi)陰影的變化要能夠讓人感知到才能將這種風(fēng)格的特質(zhì)凸顯出來。

趨勢(shì)融合：和玻璃擬物化的結(jié)合

而隨著元宇宙的蓬勃發(fā)展，NFT的繁榮，粘土擬物化必然會(huì)以更高的頻率出現(xiàn)在越來越多的設(shè)計(jì)當(dāng)紅總。

值得一提的是，隨著 Fluent Design、蘋果的 HIG 都明顯的擁抱了玻璃擬物化的設(shè)計(jì)趨勢(shì)，在如今的 UI 設(shè)計(jì)中玻璃擬物化已經(jīng)是當(dāng)之無愧的重要趨勢(shì)了，而玻璃和粘土擬物化其實(shí)也可以很好地融合到一起：

詳細(xì)教程：怎么實(shí)現(xiàn)這種風(fēng)格

最后，Michael Malewicz 還錄制了一個(gè)視頻來專門說這個(gè)事情，其中還包含教程，教你如何在他們所創(chuàng)建的工具中制作粘土擬物化的元素，這個(gè)工具是在線的，地址是（需要搭梯子）：https://claymorphism.com/

不過時(shí)間有限，視頻是生肉，大家湊合先看看，不難理解：

參考來源：

https://uxdesign.cc/claymorphism-in-user-interfaces-1757fabaa377

https://michalmalewicz.medium.com/claymorphism-tutorial-5acc4c91a440