恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反??!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
玻璃拟物化落地教程
12.2°
原创文章 / 设计趋势 / / 举报
2704 13 3 0

2021-02-26

流行趋势要跟上??!~

学过设计的同学应该都知道RGBA,在元素堆叠的情况下,改变上层Alpha值,就会形成透过上层看下层的颜色,类似于玻璃半透明的效果,这就是不透明度,类似玻璃的效果。

那么毛玻璃呢?是在玻璃不透明度的基础上,加上一些材质的感觉,也就是模糊效果,让元素边界模糊,就好像像素眼变成了高度近视,色块进行了混合,产生了磨砂材质的感觉,叫做毛玻璃。

MKBHD(油管博主) 首先提到了风格Glassmorphism (玻璃拟物化)是 Glass(玻璃)和 Skeumorphism(拟物化)的结合,也确实在2020成为了流行视觉元素。

  • 摘自dribbble


溯源的话是ios开始,到win10开始更新在Fluent Design 当中,背景和前景之间的「Acrylic」层包含饱和增强层、高斯模糊层、色彩融合层、色调叠加层、噪点肌理层。而后mac os广泛使用这种玻璃透明层,感兴趣的小伙伴可以查一下苹果微软设计的过程,这里不再赘述。

摘自dribbble

在视觉上体现出纵深感,这里涉及到Z轴的概念,也就是各元素之间的空间感,去强调顶部关键信息,更好的建立界面的层次,提升品质感和神秘感。              

总的来说毛玻璃拟物化可以提升界面的:层次感、品质感、用户的惊喜感、更好的表达用户当前的位置、多用于卡片的展示中。

摘自dribbble

首先,我们来观察玻璃拟物化需要的细节特点


▼元素的层次性如何体现?

具有明显的悬浮感,需要突出的主元素在最上层。


▼玻璃的透明感如何体现?

使用鲜艳的色彩从半透明的卡片层中透出。


▼那透明度需要如何调节?

填充和透明度调节程度不同,效果是不一样的,在卡片布局来说,离我们近的元素吸引的光就多,则更透明。


▼背景玻璃的质感?

磨砂材质的质感是通过各种背景模糊实现的,或者可以再叠加上纹理的效果。


▼细节质感表达。

你可以发现现实玻璃边缘是有光泽的,所以我们也可以在边框增加细微的光线边界去强化质感,更可以突出主体本身。

摘自dribbble

有时候我们总能看到很多流行趋势?可是怎么把这些趋势运用到自己的实际工作中呢?今天小核儿带大家来实际操作一下,模拟一下真实工作需要的环境去产出。

首先我们分析这种流行因素适用于什么环境?可以看到收集的很多参考都将这种玻璃拟物化效果做成了卡片,具体优点上面提及了,但很少作为按钮或者其他部分,因为这样会不利于部分用户的阅读体验。这个可用性测试结束后,我们还发现国内app也开始运用这些玻璃拟物,除了海报H5之外,可以看到最初自如的图标这种通透新鲜感则是玻璃拟物化,而后腾讯、58都有相关设计。

摘自dribbble

拆解好思路后,我们实操尝试去运用,比方小核儿的公司需要做首页金刚区的图标,和产品商量过后可以尝试新的流行方案,那我们就开始做吧。

首先做出面性组合图标的图形设计

  • ——加入渐变色提升图标轻量感

  • ——思考把哪部分色块变成玻璃感



    • ——复制一层在上面作为玻璃透明层调节填充的不透明度数值

    • ——把模糊改成背景模糊调节数值

    • ——增加细微边框调节玻璃边缘光感




      • ——轻微错位与下层形成层次性

      • ——增加整体阴影层拟物化更具立体感

      • ——然后最后根据界面的主色去更改图标的颜色

总结 讲道理,这个效果在很早就已经应用了,但这就是流行趋势,不断的轮回,设计师在感知和探索流行趋势的同时,去创造出新的东西来,所以不妨动手试试看,在实验的同时会获得很多新的灵感。

这就是设计,有趣且不单调,永远给你新的东西,永远让你保持热爱!


Powered by Froala Editor

收藏

13人已收藏

  • 10

    作品

  • 12

    粉丝

  • 35

    关注

  • emo!你还不会国潮中国风插画?
  • 全方位击破运营设计!
  • 膜拜一下大佬的互联网黑话!
  • 交互UX的日常规范工作内容

猜你喜欢

    硬核Design

    硬核Design

    小有见解话唠收藏家lv.3
    • 12

      粉丝

    • 56.1

      人气

    • 738

      颜值

    作品

      最新推荐

      2021年设计趋势盘点

      2415 0 8

      相关佳作
      换一换

        硬核Design

        点赞:3

        收藏:13

        评论:0

        玻璃拟物化落地教程

        你确定要举报玻璃拟物化落地教程?

        如果查出恶意举报,十天内禁止提交任何举报申请。

        0/200

        上传证据: 超过10M的附件请使用网盘地址

        点击上传附件

        对谁可见:

        全部设计师
        • 全部设计师
        • 推荐设计师和认证设计师

        您确认要推荐?

        该作品发布时间:2021年02月26日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

        账号或密码错误,请重新输入

        账号或密码错误,请重新输入

        登录

        账号或密码错误

        发送验证码 120s 验证码错误

        登录
        全网福利资源合集搜索处解压码