給人以玻璃的質(zhì)感。

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比烏拉特中網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式烏拉特中網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋烏拉特中地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

神譯局是36氪旗下編譯團(tuán)隊(duì)，關(guān)注科技、商業(yè)、職場(chǎng)、生活等領(lǐng)域，重點(diǎn)介紹國(guó)外的新技術(shù)、新觀點(diǎn)、新風(fēng)向。

編者按：人的興趣總是捉摸不定，設(shè)計(jì)趨勢(shì)因此也會(huì)會(huì)鐘擺一樣搖擺不定。在Material Design為首的簡(jiǎn)約風(fēng)格流行了幾年之后，以蘋果新的Mac OS big Sur操作系統(tǒng)發(fā)布為標(biāo)志，一種新的擬物風(fēng)格正在悄悄回歸。這種把陰影、透明度以及模糊背景結(jié)合到一起的UI設(shè)計(jì)思路，因?yàn)榻o人以玻璃的質(zhì)感，被Michal Malewicz稱為Glassmorphism（玻璃擬態(tài)），這會(huì)成為新的UI設(shè)計(jì)趨勢(shì)嗎？如何才能實(shí)現(xiàn)制作效果呢？不妨看看他的介紹。原文發(fā)表在uxdesign上面，標(biāo)題是：Glassmorphism in user interfaces

劃重點(diǎn):

設(shè)計(jì)趨勢(shì)就像個(gè)鐘擺,會(huì)時(shí)不時(shí)回歸

玻璃擬態(tài)屬于擬物風(fēng)格,是陰影、透明度以及模糊背景結(jié)合

有節(jié)制地運(yùn)用這種設(shè)計(jì)風(fēng)格能起到很好的效果

去年，我無意間引發(fā)了關(guān)于Neumorphism的熱潮，但就像我當(dāng)時(shí)所預(yù)測(cè)的那樣，這只是一時(shí)之興，并沒有真正成為設(shè)計(jì)主流。

當(dāng)然——的確有一些app和產(chǎn)品采用了這種風(fēng)格，不過其中最值得注意，采用最廣泛的當(dāng)屬三星的部分廣告以及MKbHD的簡(jiǎn)介視頻。不是整個(gè)產(chǎn)品都用，而是一小部分元素，這證明了我的觀點(diǎn)，即如果審慎地少量采用，并且在這些背景上的對(duì)象在沒有裝飾的情況下仍能保持結(jié)構(gòu)和可讀性的話，這種風(fēng)格是行得通的。

你好，Glassmorphism（玻璃擬態(tài)）

現(xiàn)在又有一種新的風(fēng)格出現(xiàn)，而且越來越流行了。Neumorphism模仿的是一個(gè)受擠壓的塑料表面（但看起來仍然像單層）時(shí)，但這種新趨勢(shì)會(huì)更加垂直化。它最具有定義性的特征是：

透明度（背景模糊的磨砂玻璃效果）

對(duì)象懸浮在空中的多層做法

突出模糊透明度的鮮艷色彩

給半透明對(duì)象添加淺細(xì)邊框。

這種垂直性以及你可以通過它看到的事實(shí)，意味著用戶可以確定界面的層次結(jié)構(gòu)和深度。他們只是看哪一層在哪一層上，就像虛擬玻璃一樣。

鑒于這種垂直性，以及你可以看透它這一的事實(shí)，意味著用戶可以讓界面有層次和深度。用戶可以看清哪一層在哪一層之上，就像虛擬的玻璃一樣。

鑒于這種玻璃一樣的外觀，我覺得這種風(fēng)格最好叫做玻璃擬態(tài)（GLASSMORpHISM）。

歷史

模糊背景最早是iOS 7在2013年廣泛引入的。這是一個(gè)相當(dāng)激進(jìn)的變化，只不過當(dāng)時(shí)對(duì)超輕量字體以及丑陋的圖標(biāo)爭(zhēng)議更大，這算是是未引起爭(zhēng)議的改變之一了。大家似乎還喜歡。

快速刪除通知成為一件有趣的事，因?yàn)槟憧梢郧宄乜吹剑ㄔ诰徛龍?zhí)行時(shí)）圖標(biāo)在新面板下如何淡出和模糊。

下拉通知很快變成了一件值得去做的趣事，因?yàn)椋懵叵吕ㄖ獣r(shí)）可以看清楚新面板下的圖標(biāo)是如怎么淡出變模糊的。

趨勢(shì)的加強(qiáng)

自那以后，蘋果極大地降低了其移動(dòng)操作系統(tǒng)中的模糊效果，但最近Mac OS big Sur帶來了透明的模糊效果。只需查看此“素描”窗口，以及上面照片的模糊部分如何從中滲出。我突出顯示了背景模糊最清晰可見的地方。

此后蘋果極大減少了在移動(dòng)操作系統(tǒng)對(duì)模糊玻璃效果的使用，但是最近在Mac OS big Sur里面又增加了透明的模糊。不妨看看這個(gè)“Sketch”窗口，看看圖片的模糊部分是怎么滲透過去的。我已經(jīng)把背景模糊的相應(yīng)部分高亮顯示了。

當(dāng)然，你可以在系統(tǒng)設(shè)置里面完全關(guān)閉這種效果。

微軟的Fluent設(shè)計(jì)系統(tǒng)也很重視這種效果。他們把這種特殊元素叫做“亞克力”，還把它作為設(shè)計(jì)系統(tǒng)的必不可少的一部分來展示。

亞克力是一種可以產(chǎn)生半透明質(zhì)感的畫筆。你可以將亞克力應(yīng)用于app表面來增加深度感，并且?guī)椭⒁曈X層次感。— 微軟 Fluent設(shè)計(jì)系統(tǒng)

Dribbble案例分析

當(dāng)然，跟任何UI趨勢(shì)一樣，它經(jīng)常在Dribbble上過度使用。這開始慢慢開始，已經(jīng)有一些漂亮的例子。當(dāng)然，它們都與演示文稿有很大關(guān)系，因?yàn)樵趯?shí)際的電話屏幕上，它們很難覆蓋背景。這僅僅是因?yàn)槭謾C(jī)上的應(yīng)用程序都是全屏的。

當(dāng)然，跟任何UI趨勢(shì)一樣，在Dribbble上趨勢(shì)往往會(huì)被用濫。這個(gè)趨勢(shì)目前才剛剛有跡象，已經(jīng)有了一些很漂亮的例子。當(dāng)然，這些跟演示作品有很大關(guān)系，因?yàn)樵趯?shí)際的手機(jī)屏幕上，你是很難看清覆蓋的背景的。這僅僅是因?yàn)槭謾C(jī)上的app都是全屏的。

上面的示例在某些地方可能處于可讀性的邊緣，但這清楚地表明了這種趨勢(shì)。背景非常微妙，但仍然可見，并且形狀具有1點(diǎn)半透明的白色輪廓，可以模擬玻璃邊緣。

上面的例子在一些地方可能已處在可讀性的邊緣，但這是這種趨勢(shì)的清晰展示。背景非常模糊，但仍然可見，而且輪廓有1個(gè)像素厚度半透明的邊，可以模擬玻璃的邊緣。

就像neumorphism（新擬物風(fēng)格）一樣，如果只是用到一個(gè)元素上面的話，這種風(fēng)格會(huì)特別亮眼——就像就像上面例子的背景一樣。當(dāng)然，在這里，主要是為了呈現(xiàn)效果，但是你可以想象桌面Web界面用類似的透明度來顯示背景。

從Dribbble的情況來看，這種風(fēng)格目前都用#glass來標(biāo)識(shí)，但我認(rèn)為#Glassmorphism更合適。你用glass的話，喝水的玻璃杯也可以是glass，所以我認(rèn)為這種風(fēng)格應(yīng)有一個(gè)便于識(shí)別的名稱。

怎么才能實(shí)現(xiàn)這種效果呢？

效果本身很容易實(shí)現(xiàn)，但是要考慮兩點(diǎn)。跟任何基于卡片的布局一樣，第一點(diǎn)是對(duì)象離我們?cè)浇盏墓饩€應(yīng)該越多。在這種情況下，這意味著它會(huì)更加透明。

這種效果的基礎(chǔ)是把陰影、透明度和模糊背景結(jié)合到一起。這種風(fēng)格只能利用一個(gè)透明層，或者多個(gè)透明層，但但是在相當(dāng)雜亂彩色的背景上至少有兩個(gè)半透明層的時(shí)候，透明層必須是最突出的，可見的。

如何正確設(shè)置透明度

重要的是要記住一點(diǎn)，不管怎樣，你不能讓整個(gè)形狀都透明，只能讓它的填充透明。大多數(shù)設(shè)計(jì)工具在100%填充，對(duì)象透明度較低時(shí)，背景模糊會(huì)不起作用。。

比方說上面的這個(gè)例子，左右的背景模糊都是8，但是圖像看上去完全不一樣。當(dāng)填充不透明度為100％時(shí)，對(duì)象的不透明度再低也沒有作用。根本得不到所需的模糊背景。

如何選擇合適的背景

背景在這個(gè)效果當(dāng)中扮演著重要的角色。背景不能太簡(jiǎn)單或者太單調(diào)，否則效果就看不出來。但也不能太復(fù)雜。

這可能就是蘋果選擇彩色背景作為Mac OS big Sur默認(rèn)壁紙的原因。當(dāng)模糊的透明表面位于頂部時(shí)，那些容易辨別的色調(diào)差異也很容易看得見。

選擇背景時(shí)，要確保色調(diào)差足夠大，這樣玻璃效果才真正可見。

最后細(xì)節(jié)

最后，你可以試著給形狀添加1個(gè)像素厚的內(nèi)邊框，并且讓它有一定的透明度。這可以模擬玻璃的邊緣，讓形狀在背景當(dāng)中脫穎而出。盡管這種風(fēng)格的元素（比如模糊背景）已經(jīng)存在了很多年，但現(xiàn)在正變得越來越流行，所以，仍然很多很酷的創(chuàng)意效果可以去探索。

你還可以看看有關(guān)如何用Sketch和Figma創(chuàng)建這種效果的簡(jiǎn)短教程。

可達(dá)性

就像Neumorphism一樣，這種風(fēng)格的可達(dá)性可能不夠強(qiáng)（比方說跟Material Design相比）。Neumorphism的主要規(guī)則也可以用到這里——如果功能層次結(jié)構(gòu)良好的話，則屏幕上的元素在沒有背景的情況應(yīng)該也能工作。這樣可以確保有視力障礙的人仍然能夠理解UI。

玻璃擬態(tài)的不好例子:這是一個(gè)不好的例子，跟Neumorphism一樣，對(duì)每一個(gè)可能的屏幕元素濫用了這種效果。導(dǎo)致整個(gè)屏幕UI對(duì)某些用戶來說幾乎都沒法訪問，同時(shí)也顯得無聊，非原創(chuàng)。

只有在這些透明效果只是裝飾性，而不是體驗(yàn)的不可或缺的部分時(shí)，才會(huì)發(fā)生這種情況。應(yīng)避免按鈕或開關(guān)（這些重要的對(duì)象始終應(yīng)該設(shè)置更大的對(duì)比度）采用這種效果，但你可以運(yùn)用到卡片背景。

只需確保卡片內(nèi)對(duì)比度足夠，且有適當(dāng)?shù)拈g距來定義層次，并在視覺上對(duì)所有相關(guān)對(duì)象進(jìn)行“分組”即可。

這是一個(gè)更好的例子——卡片結(jié)構(gòu)定義清晰，所以就算完全去掉玻璃背景，內(nèi)容也可以正常使用。這只是簡(jiǎn)單示例——色彩對(duì)比度還可以改善。

2021走玻璃擬態(tài)風(fēng)格？

蘋果公司在big Sur中引入了這種風(fēng)格，所以可以預(yù)見在接下來幾個(gè)月的時(shí)間里這種風(fēng)格一定會(huì)被大家效仿。這種風(fēng)格不會(huì)接管所有的界面，但會(huì)比現(xiàn)在更火一點(diǎn)。

作為人，我們很容易就會(huì)對(duì)趨勢(shì)感到厭煩，所以每隔幾年就會(huì)搖擺到另一種不同的風(fēng)格。極簡(jiǎn)、扁平化的風(fēng)格已經(jīng)流行了很長(zhǎng)一段時(shí)間了，也許現(xiàn)在又會(huì)慢慢向色彩更豐富、更立體、更炫麗的風(fēng)格回歸了。

作為設(shè)計(jì)師，我們需要探索開發(fā)產(chǎn)品的一切可能性以及創(chuàng)造性的方法。在某些情況下，有節(jié)制地用一下“玻璃”是可以讓產(chǎn)品看起來更好，對(duì)用戶更有吸引力的。

雖然我比較喜歡無裝飾有超高對(duì)比度的黑白界面，但我對(duì)于能夠玩一下這種風(fēng)格看看它會(huì)帶給我什么還是比較興奮的。

因?yàn)樽罱K-設(shè)計(jì)應(yīng)該很有趣，因?yàn)檫@是我們探索新路徑，享受我們所做的事情并交付真正卓越的東西的唯一途徑。

因?yàn)榈筋^來設(shè)計(jì)應(yīng)該是有趣的，因?yàn)檫@是我們探索新路，享受所做的事情，以及推出真正出色的東西的唯一途徑。

我們?cè)诓ＡУ牧硪活^見！

譯者：boxi。

網(wǎng)站標(biāo)題：玻璃擬態(tài)（Glassmorphism）會(huì)成為UI的新趨勢(shì)嗎？
網(wǎng)頁(yè)地址：http://chinadenli.net/article8/scdjip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、網(wǎng)頁(yè)設(shè)計(jì)公司、自適應(yīng)網(wǎng)站、網(wǎng)站改版、網(wǎng)站收錄、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)