玻璃拟态(Glassmorphism)会成为UI 的新趋势吗? 第1张

去年,我无意间引发了关于Neumorphism的热潮,但就像我那时所展望的那样,这只是一时之兴,并没有真正成为设计主流。



固然——的确有一些app和产物接纳了这种气概,不外其中最值得注意,接纳最普遍的当属三星的部门广告以及MKBHD的简介影片。不是整个产物都用,而是一小部门元素,这证明晰我的看法,即若是审慎地少量接纳,而且在这些靠山上的对像在没有装饰的情形下仍能保持结构和可读性的话,这种气概是行得通的。



玻璃拟态(Glassmorphism)会成为UI 的新趋势吗? 第2张MKBHD Neumorphism气概的产物先容



你好,Glassmorphism(玻璃拟态)

现在又有一种新的气概泛起,而且越来越盛行了。Neumorphism模拟的是一个受挤压的塑料外面(但看起来仍然像单层)时,但这种新趋势会加倍垂直化。它最具有界说性的特征是:



  • 透明度(靠山模糊的磨砂玻璃效果)
  • 工具悬浮在空中的多层做法
  • 突出模糊透明度的鲜艳色彩
  • 为半透明工具添加浅细边框。

这种垂直性以及你可以透过它看到的事实,意味着使用者可以确定介面的条理结构和深度。他们只是看哪一层在哪一层上,就像虚拟玻璃一样。



鉴于这种垂直性,以及你可以看透它这一的事实,意味着使用者可以让介面有条理和深度。使用者可以看清哪一层在哪一层之上,就像虚拟的玻璃一样。



鉴于这种玻璃一样的外观,我以为这种气概最好叫做玻璃拟态(GLASSMORPHISM)。



玻璃拟态(Glassmorphism)会成为UI 的新趋势吗? 第3张玻璃拟态



历史

模糊靠山最早是iOS 7在2013年普遍引入的。这是一个相当激进的转变,只不外那时对超轻量字体以及貌寝的图示争议更大,这算是是未引起争议的改变之一了。人人似乎还喜欢。



玻璃拟态(Glassmorphism)会成为UI 的新趋势吗? 第4张玻璃拟态



快速删除通知成为一件有趣的事,由于你可以清晰地看到(在缓慢执行时)图示在新面板下若何淡出和模糊。



下拉通知很快变成了一件值得去做的趣事,由于(你逐步地下拉通知时)可以看清晰新面板下的图示是如怎么淡出变模糊的。



玻璃拟态(Glassmorphism)会成为UI 的新趋势吗? 第5张Mac OS Big Sur —透明



趋势的增强

自那以后,苹果极大地降低了其行动作业系统中的模糊效果,但最近Mac OS Big Sur带来了透明的模糊效果。只需查看此「素描」视窗,以及上面照片的模糊部门若何从中渗透。我突出显示了靠山模糊最清晰可见的地方。



今后苹果极大减少了在行动作业系统对模糊玻璃效果的使用,然则最近在Mac OS Big Sur内里又增添了透明的模糊。不妨看看这个「Sketch」视窗,看看图片的模糊部门是怎么渗透已往的。我已经把靠山模糊的响应部门高亮显示了。



固然,你可以在系统设置内里完全关闭这种效果。



玻璃拟态(Glassmorphism)会成为UI 的新趋势吗? 第6张Microsoft Fluent设计系统



微软的Fluent设计系统也很重视这种效果。他们把这种特殊元素叫做「压克力」,还把它作为设计系统的必不可少的一部门来展示。



压克力是一种可以发生半透明质感的画笔。你可以将压克力应用于app外面来增添深度感,而且辅助确立视觉条理感。— 微软Fluent设计系统



Dribbble案例剖析

固然,跟任何UI趋势一样,它经常在Dribbble上过分使用。这最先逐步最先,已经有一些漂亮的例子。固然,它们都与演示文稿有很大关系,由于在现实的电话萤幕上,它们很难覆蓋靠山。这仅仅是由于手机上的应用程式都是全萤幕的。



固然,跟任何UI趋势一样,在Dribbble上趋势往往会被用滥。这个趋势现在才刚刚有迹象,已经有了一些很漂亮的例子。固然,这些跟演示作品有很大关系,由于在现实的手机萤幕上,你是很难看清覆蓋的靠山的。这仅仅是由于手机上的app都是全萤幕的。



玻璃拟态(Glassmorphism)会成为UI 的新趋势吗? 第7张Ghani Pradita的智慧型日历app 



上面的示例在某些地方可能处于可读性的边缘,但这清晰地表明晰这种趋势。靠山异常玄妙,但仍然可见,而且形状具有1点半透明的白色轮廓,可以模拟玻璃边缘。



上面的例子在一些地方可能已处在可读性的边缘,但这是这种趋势的清晰展示。靠山异常模糊,但仍然可见,而且轮廓有1个像素厚度半透明的边,可以模拟玻璃的边缘。



玻璃拟态(Glassmorphism)会成为UI 的新趋势吗? 第8张玻璃拟态的例子,作者Ghulam Rasool就像neumorphism(新拟物气概)一样,若是只是用到一个元素上面的话,这种气概会稀奇亮眼——就像就像上面例子的靠山一样。固然,在这里,主要是为了出现效果,然则你可以想像桌面Web介面用类似的透明度来显示靠山。玻璃拟态(Glassmorphism)会成为UI 的新趋势吗? 第9张带玻璃拟态的图示,作者Marshall



玻璃拟态用于图示可能会有点争议,好比像上面这种。

,

allbet网址ALLbet6.com

欢迎进入欧博开户网址(Allbet Gaming):www.aLLbetgame.us,allbet网址开放allbet网址、allbet会员注册、代理开户、电脑客户端下载、苹果安卓下载等业务。

,

从Dribbble的情形来看,这种气概现在都用,glass来标识,但我以为,Glassmorphism更合适。你用glass的话,喝水的玻璃杯也可以是glass,以是我以为这种气概应有一个便于识别的名称。



怎么才气实践这种效果呢?

效果自己很容易实现,然则要思量两点。跟任何基于卡片的结构一样,第一点是工具离我们越近,它吸收的光线应该越多。在这种情形下,这意味着它会加倍透明。



玻璃拟态(Glassmorphism)会成为UI 的新趋势吗? 第10张若何实现玻璃拟态(Glassmorphism):离萤幕越远透明度越低,越近透明度越高这种效果的基础是把阴影、透明度和模糊靠山结合到一起。这种气概只能行使一个透明层,或者多个透明层,但然则在相当杂乱彩色的靠山上至少有两个半透明层的时刻,透明层必须是最突出的,可见的。



若何准确设置透明度

主要的是要记着一点,不管怎样,你不能让整个形状都透明,只能让它的填充透明。大多数设计工具在100%填充,工具透明度较低时,靠山模糊会不起作用。。



玻璃拟态(Glassmorphism)会成为UI 的新趋势吗? 第11张玻璃拟态教程



譬喻说上面的这个例子,左右的靠山模糊都是8,然则图像看上去完全不一样。当填充不透明度为100%时,工具的不透明度再低也没有作用。基本得不到所需的模糊靠山。



若何选择合适的靠山

靠山在这个效果当中扮演着主要的角色。靠山不能太简朴或者太单调,否则效果就看不出来。但也不能太庞大。



玻璃拟态(Glassmorphism)会成为UI 的新趋势吗? 第12张玻璃拟态靠山



这可能就是苹果选择彩色靠山作为Mac OS Big Sur默认壁纸的缘故原由。当模糊的透明外面位于顶部时,那些容易鉴别的色调差异也很容易看得见。



选择靠山时,要确保色调差足够大,这样玻璃效果才真正可见。



最后细节

最后,你可以试着给形状加入1个像素厚的内边框,而且让它有一定的透明度。这可以模拟玻璃的边缘,让形状在靠山当中脱颖而出。只管这种气概的元素(好比模糊靠山)已经存在了许多年,但现在正变得越来越盛行,以是,仍然许多很酷的创意效果可以去探索。



玻璃拟态(Glassmorphism)会成为UI 的新趋势吗? 第13张玻璃拟态的边框:左侧的图像是半透明的边框,而右侧的图像则是无边框。 



你还可以看看有关若何用Sketch和Figma建立这种效果的简短教学。



可达性

就像Neumorphism一样,这种气概的可达性可能不够强(譬喻说跟Material Design相比)。Neumorphism的主要规则也可以用到这里——若是功效条理结构优越的话,则萤幕上的元素在没有靠山的情形应该也能事情。这样可以确保有视力障碍的人仍然能够明白UI。





玻璃拟态的欠好例子:这是一个欠好的例子,跟Neumorphism一样,对每一个可能的萤幕元素滥用了这种效果。导致整个萤幕UI对某些使用者来说险些都没法接见,同时也显得无聊,非原创。



只有在这些透明效果只是装饰性,而不是体验的不可或缺的部门时,才会发生这种情形。应制止按钮或开关(这些主要的工具始终应该设置更大的对比度)接纳这种效果,但你可以运用到卡片靠山。



只需确保卡片内对比度足够,且有适当的间距来界说条理,并在视觉上对所有相关工具举行「分组」即可。





这是一个更好的例子——卡片结构界说清晰,以是就算完全去掉玻璃靠山,内容也可以正常使用。这只是简朴示例——色彩对比度还可以改善。



2021走玻璃拟态气概?

苹果公司在Big Sur中引入了这种气概,以是可以预见在接下来几个月的时间里这种气概一定会被人人效仿。这种气概不会接受所有的介面,但会比现在更热门一点。



作为人,我们很容易就会对趋势感应厌烦,以是每隔几年就会摇摆到另一种差别的气概。极简、扁平化的气概已经盛行了很长一段时间了,也许现在又会逐步向色彩更厚实、更立体、更炫丽的气概回归了。



作为设计师,我们需要探索开发产物的一切可能性以及创造性的方式。在某些情形下,有控制地用一下「玻璃」是可以让产物看起来更好,对使用者更有吸引力的。



设计探索— 玻璃拟态



虽然我对照喜欢无装饰有超高对比度的是非介面,但我对于能够玩一下这种气概看看它会带给我什么照样对照兴奋的。由于最终-设计应该很有趣,由于这是我们探索新路径,享受我们所做的事情并交付真正卓越的器械的唯一途径。到头来设计应该是有趣的,由于这是我们探索新路,享受所做的事情,以及推出真正精彩的器械的唯一途径。



我们在玻璃的另一头见!



  • 资料泉源:Glassmorphism in user interfaces
  • 本文授权转载自36Kr
Facebook LINE 环球UG官网声明:该文看法仅代表作者自己,与本平台无关。转载请注明:玻璃拟态(Glassmorphism)会成为UI 的新趋势吗?
发布评论

分享到:

大同二手房网:樱井翔一脚踏两船 美女上门过夜
3 条回复
  1. 欧博注册
    欧博注册
    (2020-12-09 00:53:55) 1#

    环球UG官网www.ugbet.us欢迎进入环球UG官网(UG环球),环球UG官方网站:www.ugbet.net开放环球UG网址访问、环球UG会员注册、环球UG代理申请、环球UG电脑客户端、环球UG手机版下载等业务。来人解读一下呗

    1. 卡利注册
      卡利注册
      (2020-12-11 06:06:08)     

      「这展示他们实在不顾人死活,不关心世界正发生甚么事,只在乎如何赢得联赛冠军。」约翰米基尔(John Obi Mikel)就近日逃离特拉布宗一事作出解说:「我在去年夏天加入特拉布宗就是为了赢得联赛,我每场比赛都付出100%。」 「然而在这个情况,全世界都处于这个艰难时刻,我不认为足球该继续。」这位曾效力车路士的尼日利亚国脚中场续说。 米基尔周二证实已经离开所效力球会土耳其球队特拉布宗,甚至不惜放弃余下的薪金,回复自由身。这位32岁老将去年夏天加盟特拉布宗,并签下两年合约。土耳其联赛在新型冠状病毒肆虐下,一度继续举行,直到周四才宣布停战。很棒很棒,不能再棒

      1. USDT自动充值
        USDT自动充值
        (2020-12-15 08:11:28)     

        次节7分09秒拉杜利察强打2+1,杜锋对于判罚不满予以埋怨,甚至是示意,“我们要是学北京队,(你们)怎么办?我们这样配合,还这样吹!”裁判随后给予杜锋忠告一次。不知道说啥,给大家拜年

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。