超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

「玻璃擬物化」界面風(fēng)格欣賞

2020-11-30    資深UI設(shè)計(jì)者

還記得今年年初大家追捧的 新擬物化(Neumorphism)風(fēng)格嘛?這種風(fēng)格最初在社交媒體上風(fēng)靡,很大程度上,來(lái)源于資深設(shè)計(jì)師 Michal Malewicz 的文章《Neumorphism in user interfaces》,這篇文章透過(guò) Medium 平臺(tái),開(kāi)始在各個(gè)設(shè)計(jì)師社區(qū)當(dāng)中發(fā)酵,隨后被不少平臺(tái)預(yù)測(cè)為 2020 年會(huì)逐漸流行的一種視覺(jué)設(shè)計(jì)風(fēng)格。

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

事實(shí)上,也確實(shí)有很多產(chǎn)品和 UI 界面跟進(jìn)了這種設(shè)計(jì)風(fēng)格。包括三星在內(nèi)的很多品牌甚至?xí)褂眠@種風(fēng)格來(lái)制作宣傳視頻,油管主播 MKBHD 也在自己的視頻中使用到了這種風(fēng)格:

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

從美學(xué)價(jià)值上來(lái)說(shuō),新擬物化足夠現(xiàn)代,看起來(lái)也頗為時(shí)尚,科技感也很足,不過(guò)在在實(shí)際的應(yīng)用上,新擬物化本身確實(shí)不算是一種系統(tǒng)全面的設(shè)計(jì)風(fēng)格,因?yàn)樵诤芏嗑唧w的 UI 元素上,是難以保證可用性和易用性的。

在需要體現(xiàn)出視覺(jué)縱深(Z軸方向的高程、高度)的地方,新擬物化的 UI 元素很難做到顯著,而這也使得用戶很難立刻馬上意識(shí)到「這是一個(gè)可交互的元素」:

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

此外,彩云還梳理了新擬物化可以應(yīng)用的范疇和場(chǎng)景,可以說(shuō)非常貼心了。不過(guò),這不是今天要說(shuō)的重點(diǎn)。

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

Michal Malewicz,對(duì),就是去年年底讓我們注意到新擬物化風(fēng)格的這個(gè)小哥,他又搞事情了:他在油管和 Medium 上又預(yù)測(cè)了可能會(huì)流行的新設(shè)計(jì)風(fēng)格:Glassmorphism。

Glassmorphism 是什么?

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

顯而易見(jiàn),Glassmorphism 這個(gè)詞是 Glass(玻璃)和 Skeumorphism(擬物化)的結(jié)合,我們姑且將其稱之為「玻璃擬物化設(shè)計(jì)」。

Malewicz 小哥對(duì)于這種風(fēng)格特征歸結(jié)為4點(diǎn):

  • 透明:使用帶有模糊磨砂質(zhì)感背景的透明效果
  • 懸?。簬в忻黠@懸浮感的多個(gè)層級(jí)
  • 鮮明:使用鮮艷色彩作為強(qiáng)調(diào)色并且從半透明層中透出
  • 微妙:使用輕薄微妙的邊框來(lái)強(qiáng)化物理質(zhì)感

簡(jiǎn)單的來(lái)說(shuō),「玻璃擬物化」在某些方面和「新擬物化」是一脈相承的,但是它有著相對(duì)更加具體的視覺(jué)隱喻,也就是我們?nèi)粘=佑|的「玻璃」。

如果你和經(jīng)常翻看 Dribbble 或者 Behance ,你會(huì)注意到有很多設(shè)計(jì)師在有意識(shí)地采用「玻璃擬物化」美學(xué)的設(shè)計(jì)。

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

比如這是 Figma 團(tuán)隊(duì)的設(shè)計(jì)師 Rogie 所設(shè)計(jì)的小圖標(biāo)

大家著迷于這種風(fēng)格到底原因何在?

Glassmorphism 的優(yōu)點(diǎn)有哪些?

1、愉悅感

首先,當(dāng)然是視覺(jué)愉悅感。

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

設(shè)計(jì)師 Ghani Pradita 所設(shè)計(jì)的日歷應(yīng)用

使用「玻璃擬物化」來(lái)設(shè)計(jì)的界面,由于毛玻璃的通透性,在有多個(gè)控件的情況下,呈現(xiàn)出一種獨(dú)特的「虛實(shí)結(jié)合」的美感。

2、層次感

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

Happy Tri Milliarta 設(shè)計(jì)的展示頁(yè)面

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

來(lái)自 Paperpillar 團(tuán)隊(duì)的 Ghani Pradita 設(shè)計(jì)的 UI 控件

用戶可以很清晰地感知到多個(gè)不同的層次,看不清楚但是可以透過(guò)「玻璃」的「背景層」,創(chuàng)造朦朧效果的「玻璃層」,前景的UI控件,這已經(jīng)比原有的 UI 界面多了一層,當(dāng)然,實(shí)際上如果你用的巧妙,可以讓層次更多但是協(xié)調(diào)地存在。

3、呈現(xiàn)語(yǔ)境

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

這是設(shè)計(jì)師 Ilham Maulana 為 Plainthing Studio 團(tuán)隊(duì)所設(shè)計(jì)的網(wǎng)頁(yè)

有些東西應(yīng)該是不言自明的。比如「我在哪」「我是從哪里來(lái)的」這種事情,可以透過(guò)「玻璃」看到的背景層就能夠很好地暗示出此刻的位置。

4、微妙高級(jí)

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

設(shè)計(jì)師 Ghulam Rasool 設(shè)計(jì)的 UI 范例

經(jīng)過(guò)「玻璃層」處理之后的背景顯得非常柔和,無(wú)論是動(dòng)態(tài)還是靜態(tài)的都不會(huì)影響前景元素的呈現(xiàn)。同時(shí),位于前景的文本、色彩、UI 控件依然可以保證良好的可讀性。

在設(shè)計(jì)中間的「玻璃層」的時(shí)候,可能需要你控制好這個(gè)「微妙」的程度。不過(guò)不論怎樣,這種呈現(xiàn)方式都非常的雅致,甚至有那么一絲「詩(shī)意」存在。

那么,這種設(shè)計(jì)風(fēng)格到底是如何被塑造出來(lái)的?如果要追根溯源,「玻璃擬物化」到底是從哪里來(lái)的?

Glassmorphism 是從哪里來(lái)的?

老實(shí)說(shuō),玻璃擬物化,Glassmorphism,追根溯源還是在蘋(píng)果頭上。

我之前在《Mac 視覺(jué)史 vol.3:浴「水」重生的 Mac 視覺(jué)美學(xué)》這篇文章當(dāng)中,曾詳細(xì)回顧了設(shè)計(jì)師 Cordell Ratzlaff 是在怎樣的背景之下,發(fā)掘并延展出了蘋(píng)果的整套 Aqua 視覺(jué)美學(xué):

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

這種對(duì)于光影的追求也促使老競(jìng)爭(zhēng)對(duì)手微軟做出了改變,很難說(shuō)幾年后微軟在Windows Vista 上所推行的「Aero」(光)視覺(jué)風(fēng)格不是從「Aqua」上衍生出來(lái)的:

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

而「Aero」這種視覺(jué)風(fēng)格當(dāng)中,就使用了非常引人矚目的玻璃的質(zhì)感,只不過(guò)陰影的設(shè)計(jì)毫無(wú)疑問(wèn)「參考學(xué)習(xí)」了同時(shí)期 Mac OS X 當(dāng)中相對(duì)明顯的黑色投影。

只是這種設(shè)計(jì)風(fēng)格經(jīng)歷了 Windows 7 之后,一直在自家 MP3 播放器 Zune 上使用實(shí)驗(yàn)性的設(shè)計(jì)得到了青睞,并逐漸普及到整個(gè)微軟系產(chǎn)品,甚至因此犧牲了同時(shí)期的社交手機(jī)產(chǎn)品 Kin:

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

值得注意的是,在 Kin 系列的界面當(dāng)中,「玻璃」式的半透明元素是存在的,并且很明顯是延續(xù)自「Aero」美學(xué),只是受限于屏幕分辨率(320×240 px,320×480 px),很難呈現(xiàn)出更多細(xì)節(jié)。

隨后,Windows Phone 誕生,Windows 8 問(wèn)世,包豪斯十足的 Metro 視覺(jué)風(fēng)格成為微軟的選擇。

不過(guò)在此過(guò)程中,還有一些更重要的事情:Android 和 iOS 全面擁護(hù)扁平化設(shè)計(jì)。全新的 iOS 系統(tǒng)當(dāng)中,全新的通知系統(tǒng)會(huì)使用半透明材質(zhì),用來(lái)暗示用戶當(dāng)前所處的環(huán)境:

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

這種對(duì)于毛玻璃材質(zhì)的選擇,很大程度上和時(shí)任設(shè)計(jì)高級(jí)副總裁的喬納森艾維分不開(kāi)——這是一個(gè)對(duì)于材質(zhì)、場(chǎng)景、暗喻有著清晰認(rèn)知和感知力的工業(yè)設(shè)計(jì)大師,而這一點(diǎn)也體現(xiàn)在他為 iOS 7 所制作的設(shè)計(jì)語(yǔ)言的介紹視頻當(dāng)中。至于喬納森對(duì)于玻璃材質(zhì)的迷戀我們可以回頭在聊。

值得一提的是,在 移動(dòng)端 UI 界面當(dāng)中,成體系地使用「玻璃」的隱喻,是從 iOS 7 開(kāi)始的。但是 iOS 的設(shè)計(jì)美學(xué)是一個(gè)更加龐大的東西,真正的「文藝復(fù)興」應(yīng)該是在 Windows 10。

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

之所以說(shuō)是文藝復(fù)興,很大程度上是因?yàn)槲④浽O(shè)計(jì)團(tuán)隊(duì)在2016年的時(shí)候開(kāi)始構(gòu)建的 Fluent Design 這套設(shè)計(jì)美學(xué)體系,而它所使用的核心設(shè)計(jì)隱喻是「Acrylic」,也就是亞克力,是從「Aero」繼承而來(lái)。

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

實(shí)際上,最初的 Windows 10 更多的是在設(shè)計(jì)體系和交互上花心思,「Acrylic」其實(shí)是在發(fā)布之后很久,大概2017 年的某次重要更新中加入的「新材質(zhì)」。

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

相比于 Windows Vista/7 時(shí)代的 「Aero」,「Acrylic」更加具體,量化,功能性更強(qiáng),美學(xué)上更加優(yōu)雅,而在具體的實(shí)施上,微軟的 Fluent Design 和如今的「玻璃擬物化」更加接近,而近年來(lái)很多接近「玻璃擬物化」的設(shè)計(jì),也和這種設(shè)計(jì)美學(xué)架構(gòu)近似。

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

微軟的 Fluent Design 當(dāng)中,背景和前景之間的「Acrylic」層,其實(shí)是由5個(gè)部分構(gòu)成:

  • 飽和增強(qiáng)層
  • 高斯模糊層
  • 色彩融合層
  • 色調(diào)疊加層
  • 噪點(diǎn)肌理層

當(dāng)然,使用這么多手段這也是盡可能讓最終的色調(diào)盡可能地在前景的 UI 當(dāng)中,顯得自然不突兀。如果你想了解更多,可以看這里:

雖然 Fluent Design 并沒(méi)有如同最初大家所期待的一樣,像 Material Design 或者蘋(píng)果的 HIG 那樣成為一種極為主流、廣泛應(yīng)用的設(shè)計(jì)系統(tǒng),但是它隨著 Windows 10 在世界范圍內(nèi)的普及而始終潛移默化地影響著整個(gè)設(shè)計(jì)領(lǐng)域。

一方面,在的 Windows 10 20H2 版本當(dāng)中,從開(kāi)始菜單到具體的 UI 界面當(dāng)中,徹底將 Windows 8 時(shí)代 Metro 風(fēng)格去掉了,扎眼的動(dòng)態(tài)磁貼都用上了 Fluent Design 風(fēng)格的毛玻璃效果:

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

另外一邊,的 macOS Big Sur 也在整個(gè) UI 界面當(dāng)中大規(guī)模使用了接近「玻璃擬物化」的半透明毛玻璃視覺(jué)效果,在系統(tǒng)自帶的 APP 當(dāng)中尤其顯著:

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

而值得一提的是,macOS Big Sur 和當(dāng)下的 iOS 14 在視覺(jué)美學(xué)上也保持著高度的一致,尤其是在系統(tǒng)的設(shè)計(jì)美學(xué)邏輯上是統(tǒng)一的:

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

這種主流操作系統(tǒng)的背書(shū),「玻璃擬物化」的進(jìn)一步推行和普及,無(wú)疑有著重要的影響。相比于看起來(lái)高級(jí)但是炫技多于實(shí)用性的「新擬物化」,「玻璃擬物化」這種風(fēng)格在各大操作系統(tǒng)的踐行和驗(yàn)證之下,實(shí)用性更強(qiáng),視覺(jué)美學(xué)上也得到目前的操作系統(tǒng)的驗(yàn)證。

Glassmorphism 有哪些設(shè)計(jì)要點(diǎn)?

相比于 iOS 14,macOS Big Sur 和 Windows 10 20H2,我們此刻所討論的「玻璃擬物化」在視覺(jué)效果上無(wú)疑是更加激進(jìn)、強(qiáng)化的。

設(shè)計(jì)師 Malewicz 在他的文章當(dāng)中對(duì)于這種設(shè)計(jì)風(fēng)格有一個(gè)非常直觀的總結(jié):

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

  • 整體的效果是來(lái)自于陰影、透明和背景模糊的組合
  • 需要使用微妙的、貼合環(huán)境色的投影來(lái)呈現(xiàn)層次感
  • 越是靠近前景的元素,通透性就越強(qiáng)
  • 越是靠近背景的元素,通透性就越低

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

  • 不要對(duì)整個(gè)對(duì)象設(shè)置透明度,而是要調(diào)整填充透明度
  • 添加 1px 的內(nèi)邊框,同時(shí)為它單獨(dú)設(shè)置透明度,這會(huì)讓「玻璃層」和背景有顯著的分離

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!

  • 選擇有明顯色彩變化的背景,這樣能夠讓玻璃效果更容易被用戶感知到

「新擬物化」過(guò)時(shí)了!此刻你最應(yīng)該擁抱的是「玻璃擬物化」!


藍(lán)藍(lán)設(shè)計(jì)www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



分享本文至:

日歷

鏈接

個(gè)人資料

存檔