工具/原料
越狱版的 iOS7
第一步、下载并安装Dockshift插件
1
首先还是要打开主屏上的 Cydia 越狱应用中心图标
2
打开 Cydia 以后,点击底部右下角的“搜索”图标
3
随后在搜索插件界面中,输入 Dockshift 关键字,点击搜索即可
4
随后在搜索列表中,点击这款插件
5
接下来请点击右上角的“安装”按钮
6再点击右上角的“确认”按钮
7
等待下载安装完成以后,点击底部的“重启 SpringBoard”按钮
第二步、去除主屏毛玻璃效果
1
重启完成以后,点击主屏上的“设置”图标
2
这里 iPad 为例,在设置列表的底部找到“Dockshift”设置选项
3
在 Dockshift 设置中,启动 Enable 选项,并选择 Style 中自己喜欢效果就可以了。
如果想要达到透明的效果,请在 Sytle 选项中选择 Transparent 效果,
5
最后就可以看到如下的效果吧,是不是底牌的那一栏不见了。
UIToolbar有一个属性:barStyle,设置对应的枚举值来呈现毛玻璃的样式,最后再添加到需要进行毛玻璃效果的view上即可.
观察UIToolbar的试图结构:UIBarBackgournd、UIVisualEffectView、UIVisualEffectFilterView
在iOS8.0之后,苹果新增了一个类UIVisualEffectView,通过UIVisualEffectView即可实现毛玻璃效果。
UIVisualEffectView在初始化时,需要一个UIVisualEffect参数。另外UIVisualEffect是一个抽象类,需通过它下面的子类来实现。UIBlurEffect, UIVibrancyEffect。
渐变可通过 CAGradientLayer 实现。只需设置其颜色数组、起点与终点。
demo地址: https://github.com/taoGod/frostedGlass
• 什么是毛玻璃?
• 毛玻璃的作用
• 毛玻璃的实际运用
• 案例练习
毛玻璃是近两年来继新拟物化 「Neumorphism」之后又一流行起来的视觉设计风格,设计师 Michal Malewicz称呼它为 「Glassmorphism」 (毛玻璃) [2]。这一词来源于glass (玻璃) + morphism (形态主义),其风格的最大特点是像玻璃一样的通透性,可以透过表层看到背景的模糊形态,因此而得名。
Michal总结的毛玻璃风格的四个特征为[2]:
• 使用背景模糊营造出的「玻璃透明质感」
•「多层级」使得物件看起来悬浮在界面上
•「鲜艳的色彩」突出了模糊的透明性
• 半透明物件的「轻薄微妙边框」
也有一部分人会把这种风格叫作「Aero」,此名来自Windows Vista开始使用的新型用户界面 - 「Windows Aero」。「Aero」取自四个英文单词首字母:
• Authentic (真实)
• Energetic (动感)
• Reflective (反射)
• Open (开阔)
意为Aero界面是具立体感、令人震撼、具透视感和阔大的用户界面[3]。
毛玻璃其实并不是最近才出现的全新设计风格,它可以追溯到苹果早期的「Aqua」风格,以及Windows Vista的「Aero」。而自2020年以来毛玻璃再次得以发展,在电脑端和移动端用户界面中都可以看到毛玻璃风格的身影。尤其在设计网站Dribbble上毛玻璃风格更是风靡一时,直到现在还有很多毛玻璃风格的作品层出不穷。
有通透性的玻璃质感,页面轻盈,有呼吸感。
透过毛玻璃层,可以看到下面模糊的背景,并不会影响前景元素的展示。这种方式可以将层级很好的表达,虚化了背景而强化前景,用户也可以清晰地感知到自己身处何处。
毛玻璃图标的使用使得图标更加精致,具备透视感,可以增添页面的活力。
典型的例子 —— iOS以及macOS系统对毛玻璃作为页面背景的使用。比如,iPhone的搜索和控制中心页面,还有macOS的桌面。这样的处理可以让用户知道自己所处位置,也不会影响当前功能的视觉与使用。
这种目前在实际app及web页面设计中并不十分常见,但在设计中若有突出层级以及营造品质感的需求,毛玻璃背景不失为一种很好的表现形式。
我们可以看到iOS的底部标签栏和macOS的侧边栏都使用了毛玻璃背景形式,而微信标签栏也采用了相同形式。毛玻璃风格的标签栏主要优点在于弱化了标签栏和主体内容之间的割裂感,突出了主体内容。同样的,它并不会影响用户对标签栏按钮的 *** 作使用。
毛玻璃同样适用于图标设计,精美的毛玻璃风格图标可以给我们的页面带来活力和品质感。可以看到,喜马拉雅App主页的图标就使用了毛玻璃风格。
除了作为背景、图标设计,毛玻璃还可用于一些特殊控件。比如下图QQ音乐App就使用了毛玻璃风格,作为小图标的背景,置于歌曲图片之上。这样的表现形式使得图片展示与其上的图标功能过渡自然,歌曲图片并不会有图片被挡住的不适感。
以上,可以看出,目前市场上对于毛玻璃的使用还是比较谨慎的,一般会用于比较小的控件中,比如标签栏和图标。通过细小的控件设计,营造出精致与品质感。大面积的毛玻璃形式还是要小心使用。
我们就以毛玻璃图标为例,做个小练习 (使用工具:Figma)。
在做的过程中,谨记Michal总结的4个特征 - 背景模糊 (玻璃透明质感)、多层级 (悬浮)、鲜艳色彩、轻薄微妙边框。
Step 1: 构建基础图标
这里我们以「照相机」图标为例,我们使用填充类型的图标,复制一个相机形状并缩小,旋转15度左右,置于正的相机右上方,图层置于后方。这里设置的整体大小为32x32px。
Step 2: 填充鲜艳色彩
我们给后方的相机填充一个鲜艳的色彩,也可以使用渐变色。这里使用的色值如下:
Step 3: 背景模糊
这里给前方的相机填充一个带透明度的相近颜色,添加背景模糊 (数值需要根据图标应用大小和实际 *** 作效果而设置)。我们可以看到图标已经有了玻璃透明质感。
Step 4: 添加轻薄微妙边框
我们给玻璃透明质感的相机涂层添加一层淡淡的边框,数值参考下图。边框最好设置渐变色由x% 到0%,营造微妙感。
Step 5: 增添细节
相机的圆圈添加渐变效果,与背景更加融合。
这样我们一个毛玻璃风格的图标就做好了!可以试着自己练习设计一下其它的图标。
参考引用
[1] Food Ordering Website Design - By Tazrin
[2] Glassmorphism in user interfaces
[3] Windows Aero百度百科
[4] Sales Pop ‑ Social Proof Popup - By Ibrahim emran
[5] Food Delivery Dashboard - By Alexandra Ivanchenko
[6] Freebie: Iconly Glass | Dark - By Amir Baqian
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)