用戶界面中的＂玻璃態＂(Glassmorphism)

2021-01-19 DESIGN GROCER

↑ 點擊上方 DESIGN GROCER 關注我們


你好，Glassmorphism

現在設計圈子中有一種新樣式，並且越來越流行。它最具有定義性的特徵是：

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

物體漂浮在空中的多層方法

鮮豔的色彩突出了模糊的透明度

半透明物體上的細微淺色邊框。

這種垂直性以及可以通過它看到的效果，意味著用戶可以確定界面的層次結構和深度。他們只是看哪一層在哪一層上，就像虛擬玻璃一樣。

由於是玻璃般的外觀，所有我相信最好的稱呼方法是」玻璃態」(GLASSMORPHISM)。

玻璃態(GLASSMORPHISM)


歷史

大概最早是在2013年隨iOS 7廣泛引入的」玻璃態」。這是一個非常重大的變化，但是圍繞超輕字體和醜陋圖標的所有爭議，這是沒有爭議的變化之一。人們似乎喜歡它。

iOS 7通知

快速刪除通知成為一件有趣的事，因為您可以清楚地看到（在緩慢執行時）圖標在新面板下如何淡出和模糊。

Mac OS Big Sur — 半透明


加強趨勢

自那以後，蘋果極大地降低了其行動作業系統中的模糊效果，但最近Mac OS Big Sur帶來了透明的模糊效果。

當然，您可以在系統設置中完全關閉該效果。

資料來源：Microsoft Fluent設計系統

微軟的Fluent設計系統也很重視這種效果。他們稱此特殊元素為「丙烯酸」(Acrylic)(俗稱」亞克力」)，並將其展示為設計系統的組成部分。


丙烯酸(Acrylic)可以產生半透明質感。您可以將丙烯酸(Acrylic)應用於應用程式表面以增加深度並幫助建立視覺層次。
— Microsoft Fluent設計系統


Dribbble分析

與任何UI趨勢一樣，它在Dribbble上經常被過度使用。但慢慢的已經開始有一些漂亮的例子了。當然，它們大部分都是飛機稿，因為在實際的手機屏幕上，它們很難覆蓋背景。這僅僅是因為手機上的應用程式都是全屏的。

Ghani Pradita的智能日曆應用程式

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

By Ghulam Rasool

玻璃態的效果僅在一個元素上使用時，這種樣式會特別明亮，就像上面示例中的背景一樣。當然，在這裡，飛機稿起著舉足輕重的作用，但是您可以想像桌面Web界面在背景上使用相似的透明度。

By Marshall

圖標雖然可能會引起爭議，但它們也得到了玻璃變形處理，就像上面的Marshall示例一樣。

從Dribbble看，他們目前都坐在#glass標籤下，但我認為#Glassmorphism更合適。


效果實現

效果本身很容易，但是要考慮兩點。與任何基於卡片的布局一樣，第一個是物體離我們越近，它吸引的光越多。在這種情況下，這意味著它將更透明。

Glassmorphism怎麼做

整個效果的基礎來自陰影、透明度和背景模糊的結合。這種樣式可以使用一個透明層，也可以使用多個透明層，但是在相當複雜的彩色背景上至少出現兩個半透明級別時，它是最突出和可見的。


如何設置正確的透明度

重要的是要記住，不能使圖層形狀透明度，只能使用圖層填充控制透明度。大多數設計工具在填充率為100％且對象透明度較低時，是會禁用背景模糊。

glassmorphism使用方法

在上面的示例中，背景模糊值都是為8，但是圖像看上去完全不同。當填充不透明度為100％時，圖層不透明度有多低都沒用。我們根本不會獲得所需的模糊背景。


如何選擇適合的背景

背景在使這種效果時起著至關重要的作用。它們不能太過於簡單平淡，否則完全達不到想要的效果。

Glassmorphism背景

這可能就是Apple選擇彩色背景作為Mac OS Big Sur默認壁紙的原因。當模糊的透明表面位於其頂部時，那些易於辨別的色調差異也很容易看到。

選擇背景時，請確保其具有足夠的色調差異，以使玻璃態效果真正可見。


最終細節

您可以嘗試的最後一件事是為形狀添加1像素內描邊，並具有一定的透明度。它模擬玻璃邊緣，可以使形狀從背景中脫穎而出。事實證明，儘管背景模糊等這種風格的元素已經存在了很多年，但現在它正變得越來越流行，因此，這裡仍然有很多很酷的創意效果可供探索。

左側的圖像具有半透明的邊框，而右側的圖像則是無邊界的。


輔助功能

就像Neumorphism一樣，這種樣式可能不像默認的Material Design那樣易於使用。Neumorphism的主要規則也可以轉化於此，如果您具有良好的功能層次結構，則屏幕上的元素應該能夠在沒有背景的情況下工作。這樣可以確保有視力障礙的人仍然能夠理解UI。

這是一個與Neumorphism相同的不良示例，它在每個可能的屏幕元素上濫用效果。這樣，某些用戶幾乎無法訪問整個UI，同時也使其變得毫無創意且無聊。

當這些透明效果只是裝飾性，而不是體驗的組成部分時，才會發生這種情況。應避免將它們用於按鈕或切換標籤上（這些重要的對象應始終具有更大的對比度），但你可以將其用於卡片背景中。

只需確保卡片的內部具有足夠的對比度和適當的間距即可定義層次結構，並在視覺上將所有相關對象」分組」。

這是一個更好的例子，該卡片具有定義明確的結構，因此即使完全去除玻璃背景，其內容也可以正常使用。(這是一個簡單示例，色彩對比度仍然可改善。)


玻璃態的2021

蘋果公司在Big Sur中引入了這種風格，這是對玻璃態效果最肯定的方式，它將在接下來的幾個月中被不斷模仿。它可能不會接管所有接口（這很好），但是它將會比現在更流行一些。

作為人類，我們很容易對這種趨勢感到厭煩，並且每隔幾年設計方向就會向另一側擺動。我們使用了很長一段時間的近乎扁平的界面，但隨後它們將開始變得更加色彩鮮豔，且垂直得更加「in your face」。

作為設計師，我們需要探索所有可能的創新產品製造方式。在某些情況下，「玻璃(glass)」的有限使用實際上會使產品看起來更好，對用戶更具吸引力。

儘管我喜歡沒有裝飾和超高對比度的黑白界面，但我還是很高興能多玩一點這種風格，看看能帶給我什麼。

因為最終，設計應該很有趣，因為這是我們探索新路徑，享受我們所做的事情並交付真正卓越設計的唯一途徑。

在玻璃杯的另一邊見！







相關焦點

  • 用戶界面中Glassmorphism設計趨勢正在流行
    由於玻璃般的外觀，我覺得最好的稱呼方式就是Glassmorphism。一、Glassmorphism作為現在市場上一種新的風格，已經越來越流行了。對比之前火爆一時的Neumorphism（新擬態風格），模仿一個擠壓的塑料表面（但是仍然看起來像一層），這種新趨勢更加垂直。
  • 獨領風騷，中國＂人造月亮＂光明喜人。面對自然規律，是利是弊？
    中國＂人造月亮＂在2020年完成並進入空中軌道飛行。這個計劃是我國在重慶舉辦的「創新創業」活動中提出來的。這個項目一經披露，立即在國內引外起極大的轟動並引起關注。關於＂人造月亮＂，俄羅斯早在1993年就制定了自己的造月計劃。該計劃稱為「旗幟計劃」。它共分為三個步驟：第一步：被稱作「太空鏡面」計劃。具體構想是通過M—40貨運飛船，攜帶了一面反射鏡進入太空；第二步：在太空開展了＂旗幟1.0＂的陽光反射試驗；第三步：在太空中順利展開了一面由鍍鋁膜合成膠片製成薄膜鏡面，形成一個直徑為20米的反射鏡面。
  • 溫哥華公園裡的那麼多＂野兔＂,到底是從哪裡來的?
    確定點擊上方標題下「加拿大家園」可快捷關注家園君微信號：canadau  歡迎勾搭！
  • 中國科考馬裡亞納海溝再獲新突破，＂海鬥一號＂首次完成萬米潛。
    據報導，首次擔任這次探險任務的是＂海鬥一號＂潛水器，它不但完成了任務，而且還取得多項重大突破，並填補了我國萬米級作業型無人潛水器的空白。另外，在這次科考中，「海鬥一號」完成了對「挑戰者深淵」（＂挑戰者深淵＂是指太平洋馬裡亞納海溝最深處，深約11000米處的地方，同時也是世界上海洋最深的地方）巡航探測與高精度深度測量，並獲取了關鍵性數據。
  • ​科學家通過＂摘除＂魷魚的色素基因，出生後魷魚是透明的
    科學家通過＂摘除＂魷魚的色素基因，出生後魷魚是透明的科學家歷史上第一次通過摘除一種產生透明生物的色素基因，產生了基因變化的魷魚胚胎。研究小組使用 CRISPR-Cas9來＂去除＂ Doryteuthis pealeii中的基因，從而消除眼睛和皮膚細胞中的顏色。
  • 添了這對雙胞胎女兒,一瞬間張杰的評論開始＂炸＂了!
    長按下圖二維碼，後＂識別圖中二維碼＂可直接進入＂家園商城＂，或（點擊文章左下角＂閱讀原文＂進入搶購區）（點擊文章左下角＂閱讀原文＂去搶購）家園，近200種原裝進口生活用品特價中！重磅新品！長按上圖右邊二維碼，後＂識別圖中二維碼＂可直接購買，或（點擊文章左下角＂閱讀原文＂進入搶購區。
  • ＂北境＂就是在加國?《權力的遊戲》中的鐵王座在加拿大小鎮被發現!
    當然，她也沒忘記將收穫的福利與粉絲們共享，這位貼心的女士將王座所在具體方位告訴了大家，讓他們去拍照留念。Birgit告訴大家，要想找到鐵王座，就在52號公路上行駛到距離滕不勒嶺以南20公裡的地區，路過Core Lodge路上的Peace River煤礦岔道，往前再開1公裡，右側會出現一個出口，王座就在那裡。
  • 中科院2nm晶片研究突破瓶頸獲得成功，＂無芯＂之痛將為期不遠。
    因為，美國和他的一些所謂＂鐵哥們＂，就是用這把＂鹽＂來擦抹我們這處已經受傷的傷口，也正因為我們的晶片研發落後，才讓這痛很難癒合。晶片在我們的生活中無處不在；比如：我們使用的手機和電腦；全自動洗衣機和照相機；電視機和生活中的機器人等等。至於在工業上的；軍事上的；醫療和航天以及科考深潛器上的晶片技術用途更是廣泛。由此可以看出，晶片雖小，它被稱為電子產品的心臟卻是沒有絲毫的誇張，它的功能如同人類的大腦一樣重要那更是不必細說。
  • [喜訊] 強烈祝賀藍旗魚品牌創始人＂藍狼＂成功路亞真正的＂藍旗魚」!
    以下是中國國慶當天，＂藍狼＂發自澳大利亞聖誕島的實戰情報。建議WIFI環境下觀看，土豪隨意，精彩圖文附後，歡迎品讀！早上五點我們正常出船，一會兒快艇就到達釣點，又遇到金槍魚群，還是一樣中魚[老人與海]中，那條巨大的馬林讓鯊魚啃剩了骨頭。這次，鯊魚同樣在邊上繞，竟然繞了幾圈沒有下手，心裡非常擔心，還好沒有下手，也是因為對手太強太大了，鯊魚也不敢咬！
  • 科學家發現純釹金屬存在自感旋轉玻璃態
    儘管大多數人已經了解物質的四種經典狀態（固、液、氣、等離子體），但荷蘭拉德堡德大學和瑞典烏普薩拉大學的物理學家們，已經發現了一種新的物質形態 ——「自感旋轉玻璃態」（self-induced spin glass）。
  • 嫦娥四號在探索＂秘境中的秘境＂時，在月球的背面究竟看到什麼？
    在這需要說明的是：馮.卡門環形山位於更大的艾特肯盆地（Aitken basin）中，記得阿波羅8號的太空人William Anders在飛過月球背面時，這樣形容他看到的景象：＂月球的背面，看起來就像是我家孩子們玩了一段時間的沙堆，到處坑坑窪窪，亂糟糟一片＂。
  • 從小分子玻璃中探究玻璃態形成的秘密
    在此過程中，液體的粘度會發生快速變化。然而，玻璃的結構以及玻璃化轉變的過程目前研究地還很不透徹，有很多物理機制上的問題還沒有解決。研究玻璃化轉變溫度之下的玻璃態弛豫過程可能是一個探索該問題的手段。科學家在理論上已經預測從超冷液態到玻璃態的轉變與結構弛豫有關。但是在長時間老化實驗中對於結構弛豫因子是否存在收斂性仍沒有定論。
  • 中國哲學中的體用義
    摘要：體用論在中國哲學中運用甚廣,是儒、釋、道三家共同使用的思想範疇,然體用這對範疇在傳統的哲學文獻中仍有不同的指義。為了清楚地了解體用論的淵源及使用,現簡要梳理哲學史上重要學者對＂體用＂範疇的使用,並考察其中有何不同的強調與轉變。
  • Python中利用Matplotlib繪製多圖並合併展示
    那麼下面這幾行代碼大家都懂了吧：ax1 ＝ plt．subplot（221）ax1．plot（t，s， color＝＂r＂，linestyle ＝ ＂－－＂）ax2 ＝ plt．subplot（222）ax2．plot（t，s，color＝＂y＂，linestyle ＝ ＂－＂）ax3 ＝ plt．subplot（223）
  • 焰色反應＂Flame Test＂的原理及不同元素的焰色一覽表
    列夫•託爾斯泰在《智慧曆書》中有一句名言，「愛你的敵人，你將只有朋友」。我們這些世俗的人，有多少可以有這樣的心胸呢？輕鬆一下，給你分享的是20世紀80年代-90年代比較流行的，當年的甜歌公主楊鈺瑩演唱的三首歌曲。以下來自百度百科：焰色反應，也稱作焰色測試及焰色試驗，是某些金屬或它們的化合物在無色火焰中灼燒時使火焰呈現特徵的顏色的反應。
  • 西遊記中,四大部洲究竟歸誰管?為何如來的兩次說法不一樣?
    在西遊記中，天地的概念和我們現在想的可不一樣，原著第一回是這樣交代的：感盤古開闢，三皇治世，五帝定倫，世界之間，遂分為四大部洲：曰東勝神洲，曰西牛賀洲，曰南贍部洲，曰北俱蘆洲。按照這句話的理解，天、地、人三界中，＂地＂是由四大部洲組成的，而且這裡的＂地＂並不單指陸地，其實還包括江河湖海，是與＂天＂相對應的概念，即＂天下＂，所以作者乾脆就稱其為＂世界＂。那麼，四大部洲的主宰是誰呢？
  • 《道德經》中老子說的不爭是什麼意思,原來它可以化解戰爭
    前些日子我在一篇文章裡提到過關於＂中國語言與文字的起源＂過程，其核心就是通過抽象思維認識＂易象象形＂，闡述了我們國家語言與文字文化的博大精深。今天我們要用抽象思維認識並解析戰爭的根源。老子在《道德經》中多次用到過爭這個字：＂夫唯不爭，故天下莫能與之爭＂；＂善用人者為之下，是謂不爭之德＂；＂天之道利而不害，聖人之道為而不爭＂等等。到目前為止還有許多解《道德經》者對爭字仍存在爭議。其實老子不單是教我們如何做事，同時也在講事物與事物之間的效應規律。
  • 《創世記》中的上帝觀
    《創世記》中的上帝觀作者：季鳳文牧師  讀經：創1：1；創15：15；創28：15；創21：33  上帝的名稱在《創世記》中有許多，都有豐富的屬靈含義。我們＂拉法福音＂平臺從來不開設打賞，也不作任何廣告，為的是讓眾肢體不花錢得福音的好處。最近有人假冒我的姓名季鳳文和拉法福音以及我在拉法福音平臺上我的頭像建了＂拉法福音季鳳文＂；＂拉法福音季鳳文講道＂；＂拉法福音平臺＂。＂季鳳文拉法福音＂；＂拉法福音講道＂；＂拉法福音視頻＂；＂拉法的福音＂。這七個平臺都是盜版原創＂拉法福音＂的智慧財產權。
  • 玻璃態物理的若干方面
    理論研究上，類似於鐵磁轉變中居裡—魏斯定律或者液—汽轉變中範德瓦爾斯理論，忽略了漲落，人們通常採用平均場理論對玻璃轉變問題進行了研究。數學上，在維度d 趨向無窮大極限條件下平均場近似是精確的。由此，人們能夠確立液態和玻璃態之間存在平衡態相變，從而能詳盡詮釋液體—玻璃轉變的相變本質。這一結果與過去至少25 年的無序材料中相變理論是一脈相承的。