2022-5-21 純純
UI圈兒刮起了一股勢(shì)頭猛勁的新擬物風(fēng)（Neumorphism），起因是烏克蘭設(shè)計(jì)師亞歷山大·普盧托 （Alexander Plyuto） 在 Dribble 平臺(tái)發(fā)布了一張應(yīng)用了新擬物風(fēng)格的UI作品，便引發(fā)了圈內(nèi)的激烈討論，更一直占據(jù)著當(dāng)時(shí)的熱點(diǎn)榜首。此風(fēng)格出現(xiàn)后，也給流行的扁平化設(shè)計(jì)添加了新的展現(xiàn)形式。
普盧托的《Skeuomorph Mobile Banking》，在Dribble獲得了3000多次喜歡
也有一些非常著名的品牌公司在設(shè)計(jì)上結(jié)合了新擬物風(fēng)格，像三星召開(kāi)的Galaxy Unpacked活動(dòng)、MKBHD的介紹視頻等，效果都很出彩。當(dāng)趨勢(shì)熱潮退去，新擬物風(fēng)格并沒(méi)有像一部分評(píng)論者堅(jiān)持的那樣，“洗牌”式地接管整個(gè)設(shè)計(jì)圈。
三星 Galaxy Unpacked 活動(dòng)
MKBHD在2020年的簡(jiǎn)介中使用了這種風(fēng)格
復(fù)習(xí)結(jié)束回歸正題，我們看到現(xiàn)今又出現(xiàn)了一種新樣式—Glassmorphism，字面上由玻璃（glass）和擬物化（skeumorphism）組成，叫法頗多：玻璃擬態(tài)、玻璃擬物化設(shè)計(jì)、玻璃擬物風(fēng)格，其實(shí)意思都對(duì)，它比新擬物風(fēng)格更直觀清晰。那么，玻璃擬物風(fēng)格最具有定義性的特征是什么呢？一起來(lái)看：
-透明度，使用背景模糊的磨砂玻璃效果；
-物體漂浮，畫(huà)面中有多個(gè)漂浮層級(jí)；
-鮮艷的色彩，在磨砂玻璃后更突出整體效果；
-淺色邊框，應(yīng)用在半透明物體上襯托質(zhì)感。
玻璃擬物風(fēng)格特征顯著，用戶(hù)也能快速確定界面的層次結(jié)構(gòu)和深度。畫(huà)面中清晰顯著的則是最迫切想要表達(dá)的重點(diǎn)，非常好辨認(rèn)。
在Drrible的#Glassmorphism#下，大家已經(jīng)紛紛提交自己的作品了，也讓辭典醬發(fā)現(xiàn)了一些它獨(dú)有的「魅力」：
-顏色明艷、歡快，視覺(jué)上帶來(lái)一定的刺激性；
Music Player Apps by Adhiari Subekti
glassmorphism redesign by Frédéric Musso
-icon虛實(shí)結(jié)合，營(yíng)造出了一種「小而精」的質(zhì)感；
MEDIACRAFT ICONS by Ayo Kid
Glassmorphism Iconography by Hemanth Ravi
-邊緣細(xì)框，模擬玻璃，帶來(lái)微妙的「高級(jí)感」。
Procreate app icon redesign by Zhenia ievgen
Coffee Shop App by Saud Ali
說(shuō)到由來(lái)，那么蘋(píng)果帶來(lái)的影響力毋庸置疑。蘋(píng)果早期的設(shè)計(jì)系統(tǒng)為擬物風(fēng)格，從2013年推出的iOS 7開(kāi)始，系統(tǒng)風(fēng)格進(jìn)行了全新嘗試，背景模糊也是從那時(shí)起進(jìn)入大眾視線，雖然人們褒貶不一，但使用過(guò)的用戶(hù)還是很買(mǎi)賬的。
與蘋(píng)果互為對(duì)手的微軟也推出了這種類(lèi)似于毛玻璃質(zhì)感的Vista系統(tǒng)，但距離真正的玻璃擬物還有一段路程要走。
最新的macOS Big Sur 和 iOS 14系統(tǒng)都已經(jīng)使用了偏向玻璃擬物化的半透明效果。
通知欄的彈出變成了一件有趣的事，你可以清楚地看到新面板下的圖標(biāo)是如何彈出和消失的。
微軟的Fluent設(shè)計(jì)系統(tǒng)也很重視這種效果，他們稱(chēng)此特殊元素稱(chēng)為「亞克力」，并將其作為設(shè)計(jì)系統(tǒng)中不可分割的一部分。
Microsoft Fluent設(shè)計(jì)系統(tǒng)
實(shí)現(xiàn)玻璃擬物效果需要注意的是，與任何基于卡片的布局一樣——物體離我們?cè)浇?，它吸引的光就越多，也就意味著它?huì)變更加透明，反之亦然。
它依靠3個(gè)基礎(chǔ)元素來(lái)實(shí)現(xiàn)，分別是陰影、透明度和背景模糊。還可以使用一個(gè)或多個(gè)透明層，假設(shè)在一個(gè)顏色相對(duì)復(fù)雜的彩色背景中應(yīng)用，那么至少加兩個(gè)半的透明層級(jí)，要展示的文字或圖標(biāo)的可見(jiàn)性才會(huì)最大最突出。
不要設(shè)置對(duì)象的透明度，而是調(diào)整填充透明度。下圖示例中，兩種不透明度的數(shù)值調(diào)整，得到了完全不同的視覺(jué)感受。
背景在玻璃擬物效果中至關(guān)重要，太單調(diào)會(huì)導(dǎo)致完全不出效果。這可能就是Apple選擇彩色背景作為MacOS Big Sur默認(rèn)壁紙的原因，背景圖片的色調(diào)差異大，玻璃擬物的效果越強(qiáng)烈。
別小看了這1px的細(xì)微邊框，它模擬了玻璃的邊緣，將其單獨(dú)設(shè)置透明度，就能讓形狀從背景中脫穎而出。
半透明邊框圖形（左）vs 無(wú)邊框圖像（右）
建立一個(gè)良性的層次結(jié)構(gòu)同樣重要，和新擬物類(lèi)似，它們都不是Material Design被廣大用戶(hù)熟知與接受的呈現(xiàn)形式，裝飾味道會(huì)相對(duì)濃郁。所以設(shè)計(jì)師在應(yīng)用前，最好能確?！睾透鲗蛹?jí)在沒(méi)有花哨背景加持下，一樣能被用戶(hù)以及視力障礙人群輕松識(shí)別理解。
下圖就是一個(gè)很好的例子，卡片具有清晰的結(jié)構(gòu)，即使完全去除玻璃背景。它也能正常使用。
作為人類(lèi)，我們很容易對(duì)各種趨勢(shì)感到厭倦，所以每隔一段時(shí)間就會(huì)迸發(fā)出新的靈感與創(chuàng)意。但作為設(shè)計(jì)師，我們需要探索所有可能創(chuàng)新產(chǎn)品的方式。在當(dāng)下，玻璃擬物的應(yīng)用的確會(huì)使產(chǎn)品看起來(lái)更好，對(duì)用戶(hù)更具吸引力。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn