(Windows Vista界面)
(苹果IOS7)
在之后的很长时间里,这种风格成为了设计师们常用的手法。直到在近期发布的Win11以及Mac OS Big Sur中 强化了毛玻璃质感,又将玻璃拟态风格的趋势掀起了一个小高潮。
(Win11界面)
(Mac OS Big Sur界面)
02
毛玻璃效果的视觉表现特征
毛玻璃效果本就如其名,主要以 模拟磨砂玻璃的质感与视觉效果为主,具备以下几个特点:
1. 透明(还原真实玻璃的特性)
2. 模糊(使用背景模糊/高斯模糊模仿磨砂玻璃效果,保证准确传递信息层级的同时,让视觉更有层次且透气)
3. 悬浮(采用细微的阴影,在界面中多以弹窗、浮窗、抽屉等形式出现)
4. 边界细节的处理(采用细腻的边框模拟玻璃的厚度,从而带来更加精致的视觉感受)
关于玻璃拟态的技术实现方法和技术参数在这里就不过多介绍了,各大设计平台已经有非常多的分享。这里就提供一些玻璃拟态、亚克力拟态的应用案例供大家欣赏:
(OS Big Sur)
(音乐播放器)
(品牌应用-腾讯文档品牌升级)
(车载HMI界面)
(移动UI,dribbble设计师 Ghani Pradita作品)
03
为什么选择玻璃拟态效果?
以上聊的内容其实网络上有很多分享了,接下来我们聊聊玻璃拟态背后的逻辑。
我们发现,大部分设计师都只是知道毛玻璃的样式,知道有哪些大公司、设计师、设计团队和产品采用了这种设计手法,但很少有人去研究玻璃拟态为什么存在, 为什么UI设计中要选择使用玻璃拟态的效果?为什么不是塑料拟态、沙子拟态、水泥拟态、金属拟态等等其他材质的拟态呢…?
设计中的“拟态”顾名思义,就是通过视觉的形式从而“模拟某种状态或形态”让使用者对现实中的事物产生联想,尽可能模拟和还原一种使用场景和状态。因此,我们认为以下几点才是采用玻璃拟态的核心原因:
1. “玻璃”在生活中给人们留下的印象多是精致、轻盈、易碎、高档品等;
2. 玻璃在生活中无处不在,大家对玻璃都不陌生,更有一种原生的熟悉感,从内心更容易被接受不排斥;
3. 几乎所有的移动终端设备的屏幕都采用玻璃(钢化玻璃)材质(尤其是iphone),这样一来从触觉上和视觉上统一,更有助于引导和还原用户的使用场景与感受;
4. 加上磨砂玻璃本身就有的属性,柔和且易更容表现视觉上的层次感,朦胧增加细节上的空间感与透气性。
(图片摘自36kr)
04
总结
我们认为,拟态的设计手法是移动UI设计历史上“重拟物”表现形式的一种蜕变与延展。
随着行业的发展与互联网软硬件的进步,今天的拟态设计并不只是设计趋势的轮回,而是在以Material Design为代表的,主张以内容为核心进行设计的扁平化设计思维的进一步延伸。
是移动UI设计从抵制过度设计、放弃重拟物设计到解放设计生产力时期至今设计行业整体水平的提升与进步。
通过我们的观察和经验,得知玻璃拟态设计目前大多用于系统级的界面,毕竟这种设计在提升用户体验的同时,为硬件性能带来了一定的压力。所以,建议广大设计师们也不要盲目跟风,选择适合自己产品和内容的设计表现形式。
希望大家能够秉着创新精神多探索、多尝试,同时也期待行业中下一个具有代表性的设计风格的到来。
文章来源:Tu Design,版权归原作者所有。
话题发起人:TuDesign 成员 瑞雪
总结成员:TUD成员 Kai
原文链接:
https://mp.weixin.qq.com/s/9LaQwdBgCjTT3Ey7snhJfA
版权声明: “IXDC”所推送的文章,除非确实无法确认,我们都会注明作者和来源。本公众号对转载、分享的内容、陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完善性提供任何明示或暗示的保证,仅供读者参考。文内出现的商标及图像版权属于其合法持有人,只供传递信息之用,非商务用途。如无意侵犯到您的权益,请及时联系我们处理。本公众号不承担任何责任,并拥有对此声明的最终解释权。
联系微信:Meia_99
👆推荐关注IXDC视频号👆
▼
点这里,一键进入IXDC2021国际体验设计大会!
👇返回搜狐,查看更多