討論如何在UI設(shè)計(jì)中正確地使用新擬物化風(fēng)格，但首先需要先了解一些背景信息。
新擬物化風(fēng)格（Neumorphism），或稱(chēng)為“新擬真主義（new skeuomorphism）”，在設(shè)計(jì)領(lǐng)域已經(jīng)存在一段時(shí)間，但人們?nèi)匀幌矚g使用它的原因很容易理解。
這種設(shè)計(jì)趨勢(shì)以其柔和的、凸出的塑料外觀為特征，為用戶(hù)界面（UI）設(shè)計(jì)帶來(lái)了全新的設(shè)計(jì)理念。它是一種既熟悉又新穎的風(fēng)格，將擬真主義的觸感和令人舒適的元素與現(xiàn)代、極簡(jiǎn)主義的美學(xué)相結(jié)合。
什么是新擬物風(fēng)格？
新擬物風(fēng)格是一種設(shè)計(jì)趨勢(shì)，大約在2020年左右開(kāi)始興起，并迅速在UI設(shè)計(jì)社區(qū)中流行起來(lái)。它是擬真主義的一種風(fēng)格繼承者，擬真主義是一種設(shè)計(jì)方法，涉及使物品看起來(lái)像它們現(xiàn)實(shí)世界的對(duì)應(yīng)物。還記得舊版iBooks的界面上有書(shū)架嗎？
2013年的iBooks UI；擬真主義的一個(gè)例子。
新擬物化風(fēng)格以現(xiàn)代方式演繹了這個(gè)概念。與模仿木材或玻璃等現(xiàn)實(shí)世界材料不同，新擬物化設(shè)計(jì)看起來(lái)就像是由與背景相同的材料制成的，產(chǎn)生了一種柔和凸起或凹陷的效果。
以下是新擬物化效果的一個(gè)示例：
Yandex Services在Dribble上的新擬物化風(fēng)格示例。
通過(guò)使用精確的陰影和高光來(lái)實(shí)現(xiàn)這種效果，從而產(chǎn)生了三維形狀從背景中浮現(xiàn)的幻覺(jué)。結(jié)果是一種柔軟的、有墊子的外觀，似乎同時(shí)凹陷和凸起。它就像UI元素是由與背景相同的材料制成的，它們從屏幕中突出（或嵌入）出來(lái)。
新擬物化設(shè)計(jì)原則
創(chuàng)建成功的新擬物化設(shè)計(jì)需要仔細(xì)平衡顏色、陰影和形狀。以下是一些需要牢記的關(guān)鍵原則：
1.使用陰影
陰影是新擬物化的支撐。它們創(chuàng)造了讓元素看起來(lái)像是從背景中凸起或沉入其中的三維效果。關(guān)鍵在于使用兩種陰影：一個(gè)在元素的頂部，另一個(gè)在底部。
頂部陰影通常是背景顏色的較淺版本，而底部陰影則較暗。這種組合營(yíng)造出深度和維度的幻覺(jué)。
2.淡雅的色彩調(diào)色板
新擬物化偏愛(ài)簡(jiǎn)潔而淡雅的色彩調(diào)色板。UI元素通常與背景顏色相同，但具有稍微不同的色調(diào)以創(chuàng)建柔和的對(duì)比。色彩調(diào)色板通常是柔和而明亮的，包括大量的白色、米色和淺灰色。當(dāng)然也可以使用較深的顏色以獲得不同的外觀和感覺(jué)。
3.簡(jiǎn)單的幾何形狀
新擬物化設(shè)計(jì)傾向于偏愛(ài)簡(jiǎn)單的幾何形狀。圓形、矩形和正方形通常被廣泛使用。這些形狀與柔和的陰影和高光相配合，有助于營(yíng)造出新擬物化UI整體的“柔軟”外觀。
4.一致性
一致性在新擬物化設(shè)計(jì)中至關(guān)重要。光源應(yīng)在所有元素上保持一致，顏色和陰影也一樣。這種一致性有助于保持元素與背景相同材料的幻覺(jué)。
新擬物化風(fēng)格：UI設(shè)計(jì)中的雙刃劍
2020年，新擬物化風(fēng)格無(wú)處不在。盡管這種風(fēng)格的流行度有所減退，但對(duì)許多設(shè)計(jì)師和開(kāi)發(fā)者來(lái)說(shuō)，它仍然是首選。但就像任何設(shè)計(jì)趨勢(shì)一樣，它都有一系列的優(yōu)點(diǎn)和缺點(diǎn)。
以下是它的利弊。
新擬物化風(fēng)格的優(yōu)勢(shì)
以下是這種設(shè)計(jì)趨勢(shì)的一些優(yōu)點(diǎn)：
1.視覺(jué)吸引力：新擬物化的一個(gè)顯著特點(diǎn)是它的溫和、輕盈的美學(xué)，通常使用淡色調(diào)，最小化對(duì)比。這導(dǎo)致設(shè)計(jì)元素似乎“凸顯”或“隱退”到背景中，創(chuàng)造出一種深度和逼真感，視覺(jué)上令人愉悅。
2.風(fēng)格平衡：新擬物化在擬真主義和扁平設(shè)計(jì)之間取得了平衡。它努力保持現(xiàn)實(shí)感，同時(shí)保持清晰和極簡(jiǎn)主義的外觀。這種平衡可以使界面看起來(lái)更加直觀和引人入勝。
3.重燃擬真主義：術(shù)語(yǔ)“新擬物化”是“neo”（新）和“skeuomorphism”（擬真主義）的結(jié)合，突出了它作為擬真主義的部分復(fù)興的角色。這重新引入了一些來(lái)自早期數(shù)字設(shè)計(jì)中常見(jiàn)的現(xiàn)實(shí)世界物體的觸覺(jué)和視覺(jué)線索，潛在地增強(qiáng)了用戶(hù)的理解和互動(dòng)。
新擬物化風(fēng)格的劣勢(shì)
與任何設(shè)計(jì)趨勢(shì)一樣，新擬物化風(fēng)格也有一些缺點(diǎn)：
1.可訪問(wèn)性問(wèn)題：正如前面提到的，對(duì)新擬物化的一個(gè)重要批評(píng)是它可能存在的可訪問(wèn)性問(wèn)題。元素與背景之間的微弱對(duì)比可能會(huì)讓一些用戶(hù)難以區(qū)分不同的元素，尤其是那些視覺(jué)障礙的用戶(hù)。
2.復(fù)雜性和性能：為了實(shí)現(xiàn)新擬物化的“柔軟”外觀，使用陰影和漸變可能會(huì)增加設(shè)計(jì)過(guò)程的復(fù)雜性。這可能會(huì)影響網(wǎng)站或應(yīng)用程序的性能，導(dǎo)致加載時(shí)間延長(zhǎng)。
3.模糊性：盡管新擬物化的柔和和極簡(jiǎn)主義外觀在視覺(jué)上吸引人，但它也可能導(dǎo)致用戶(hù)界面缺乏清晰度。元素之間缺乏明確的邊界和區(qū)別可能會(huì)讓用戶(hù)難以理解如何與界面進(jìn)行交互。
雖然新擬物化風(fēng)格可以為設(shè)計(jì)注入新穎和吸引人的外觀，但仍然需要考慮其潛在的缺陷。在實(shí)施任何設(shè)計(jì)趨勢(shì)之前，將用戶(hù)的需求和體驗(yàn)置于設(shè)計(jì)決策的首位。
如何創(chuàng)建新擬物化設(shè)計(jì)
那么，下一個(gè)項(xiàng)目中如何實(shí)現(xiàn)新擬物化風(fēng)格的設(shè)計(jì)？以下是一個(gè)簡(jiǎn)單的逐步指南，幫助創(chuàng)建自己的新擬物化UI。
步驟1：了解設(shè)計(jì)
熟悉一下什么是新擬物化（以及什么不是）。瀏覽設(shè)計(jì)示例庫(kù)，以更好地了解您想要采用的整體外觀。
例如，可以選擇一些微妙的設(shè)計(jì)：
或者，可以選擇一些更加復(fù)雜的設(shè)計(jì)：
步驟2：選擇正確的色彩調(diào)色板
接下來(lái)，需要選擇合適的色彩調(diào)色板。要實(shí)現(xiàn)新擬物化效果，需要三種相同顏色的色調(diào)：
-
淺色，用于淺色陰影。
-
中間色，用于主要的背景和元素顏色。
-
深色，用于深色陰影。
這種色彩選擇技巧可以確保顏色一致性和協(xié)調(diào)性。
步驟3：創(chuàng)建設(shè)計(jì)元素
一旦選擇了色彩調(diào)色板，就該創(chuàng)建設(shè)計(jì)元素了。在新擬物化設(shè)計(jì)中，元素通常以不同的形式或不同的技術(shù)來(lái)表示。關(guān)鍵是要?jiǎng)?chuàng)建那些給人以從背景中浮現(xiàn)的印象，而不是漂浮在界面上的元素。
可以在Envato Elements上找到許多新擬物化UI元素可供選擇。例如，Osvaro Neumorphism Design Mobile Template UI Kit是一個(gè)很好的示例。可以輕松看到按鈕帶有陰影，給人深度感。
"Purasa Responsive Mobile Template"也包括新擬物化元素：
為了在自己的設(shè)計(jì)中實(shí)現(xiàn)類(lèi)似的外觀，需要嘗試使用陰影和顏色。背景不應(yīng)完全是白色或完全是黑色，因?yàn)殛幱皩o(wú)法清晰定義。相反，選擇稍微帶有色調(diào)的顏色。
步驟4：在用戶(hù)界面中實(shí)現(xiàn)新擬物化效果
現(xiàn)在，已經(jīng)擁有了設(shè)計(jì)元素，是時(shí)候在用戶(hù)界面中實(shí)現(xiàn)它們了，這涉及創(chuàng)建界面元素（如按鈕、滑塊和卡片）的新擬物化設(shè)計(jì)。
請(qǐng)記住，新擬物化的目標(biāo)是在保持極簡(jiǎn)主義的同時(shí)創(chuàng)建出深度和逼真感。因此，請(qǐng)保持設(shè)計(jì)干凈簡(jiǎn)潔，讓陰影和顏色來(lái)實(shí)現(xiàn)效果。
步驟5：考慮可訪問(wèn)性
在創(chuàng)建新擬物化設(shè)計(jì)時(shí)，考慮可訪問(wèn)性非常重要。因?yàn)樾聰M物化設(shè)計(jì)在按鈕和背景上使用相同的顏色，所以沒(méi)有對(duì)比度比要考慮。這可能會(huì)使一些用戶(hù)，尤其是那些有視覺(jué)障礙的用戶(hù)，難以區(qū)分不同的元素。
為確保設(shè)計(jì)具有可訪問(wèn)性，考慮在設(shè)計(jì)元素添加額外的視覺(jué)提示，例如圖標(biāo)或文本。此外，考慮為重要的元素（如呼叫到行動(dòng)按鈕）使用更高對(duì)比度的顏色。
新擬物化的實(shí)際案例：值得借鑒的案例研究
看看新擬物化在實(shí)際應(yīng)用中的一個(gè)案例，以更好地理解這種設(shè)計(jì)趨勢(shì)如何有效地實(shí)施。
Spotify
新擬物化在實(shí)際應(yīng)用中的一個(gè)最有趣的案例研究之一是Spotify用戶(hù)界面的重新設(shè)計(jì)。在這個(gè)案例研究中，設(shè)計(jì)師Sangeeta Baishya決定在深色模式下嘗試新擬物化。之所以選擇Spotify進(jìn)行此實(shí)驗(yàn)，是因?yàn)樗鼡碛袕V泛的用戶(hù)群，各種小部件（卡片、芯片、列表、滑塊、文本字段）以及簡(jiǎn)單明了的架構(gòu)。
重新設(shè)計(jì)保持了應(yīng)用程序的原始色彩調(diào)色板、字體和結(jié)構(gòu)，但在按鈕和Spotify標(biāo)志中引入了新擬物化元素。標(biāo)志的周?chē)晕⑻嵘瑒?chuàng)建了更加明確定義的邊緣，同時(shí)保留了新擬物化的魅力。按鈕的設(shè)計(jì)方式使它們不會(huì)讓用戶(hù)感到不知所措，同時(shí)保持了新擬物化風(fēng)格的完整性。
你會(huì)使用新擬物風(fēng)格的UI嗎？
新擬物化是一種引人入勝的設(shè)計(jì)趨勢(shì)，為UI設(shè)計(jì)帶來(lái)了全新的理念。憑借其柔和的陰影、微妙的色彩和極簡(jiǎn)主義美學(xué)，它是一種可以使您的界面脫穎而出的風(fēng)格。
然而，與任何設(shè)計(jì)趨勢(shì)一樣，明智地使用它并始終考慮可訪問(wèn)性非常重要。采用正確的方法，新擬物化可以成為設(shè)計(jì)工具包中的強(qiáng)大工具。你將如何利用它呢？
精選文章：
空間設(shè)計(jì)：打開(kāi)通往新世界的大門(mén)