手机APP模糊背景设计的优雅欣赏
模糊背景(blurred backgrounds)长时间以来都是作为一个基本的照片效果,但在最近模糊背景已做为使设计元素脱颖而出的非凡工具,而受到很多设计师的青睐。这种做法相当容易,悄无声息又自然的给予内容适当突出,图标和图形就能脱颖而出。这样做能够二鸟一石。首先,你可以为你的项目增加些不一样的效果;其次,适当的增加这种设计效果对小尺寸的手机屏幕很有必要,能有效地提高可读性体验。
模糊的背景还提供了其他潜在的好处。例如,你可以轻易减少你的调色板,而只侧重于一个主色,尤其是在使用白色为基调的设计,在模糊背景下看起来绝对精彩、干净。至于图形,你可以使用面或线形的图形,都能很好地与这样的图像进行呼应。字体也不受其影响,因此,即使超窄的字体也会显得清晰易读。
现在,我们继续来看一些令人惊艳的App界面,用各种实例和方案来证明这种强大的效果。
基于模糊背景(blurred backgrounds)的App范例
下面是由Rocket Child正在进行的Solar alarm的项目,设计方案有个很可爱,充满活力的圆形构图。线条分明的设计元素与失焦炫光背景完美的融合在一起,使得画面看起来是多么的和谐、精致。
http://file02.16sucai.com/d/file/2014/0517/8f908c639433c1d46deefd9f04a2c54c.png
下面是一个健身应用程序,是呈现半透明玻璃质感的图层和友好控件组合都覆盖到模糊的背景上的方案,其中绿色景观的情景增加了一些自然设计因素。
http://file02.16sucai.com/d/file/2014/0517/9d016904f7e51e014bf92bfb6699a8aa.png
通知面板的设计巧妙地利用了温暖的色彩,以使界面充满更加积极的外观。像上面的案例一样,设计师也运用了低透明的模糊背景和优雅的小部件和谐共生。
http://file02.16sucai.com/d/file/2014/0517/49e89850fe1ffdb4f160967ddfbc1505.png
这个菜单通过镜头流畅的切换,描绘了菜单两态的变化,在灰色的模糊背景中,白色的黑体字和时尚图形符号有很好地融合。
http://file02.16sucai.com/d/file/2014/0517/af11eca88dcdb7db6a0199ee60aebe90.png
下面是一个医疗应用,大面积蓝色模糊背景中,运用了很好的背景虚化效果,以配合时尚的绿松石色的功能面板。
http://file02.16sucai.com/d/file/2014/0517/b2f1bea07a5125d7579b0989932be1c9.png
下面的列表设计是基于一个充满活力的图像背景,巧妙地散焦效果使得前面的设计元素更加突出。因此,所有的文字内容和图形元素都能呈现出一个很清晰效果。
http://file02.16sucai.com/d/file/2014/0517/4aab2937c045abf349fc130b58ee0661.png
接下来是iOS 7的音乐应用,这个方案里有个小而美的CD图像,很适合放在这里。后面大面积暖色调的模糊背景为音乐播放器和控件组,提供了良好的氛围。
http://file02.16sucai.com/d/file/2014/0517/00f1898779f39af027adaab2901daf70.png
Extranet 是个美好光泽和氛围的应用范例,有利的模糊化背景和众多的控件组成了这样的理想组合,让界面变得美观大方。
http://file02.16sucai.com/d/file/2014/0517/5cb02fa3a24494ca2fff1604066fcef9.png
下图演示了白色锐利图标与城市模糊图片背景的常规排版设计,形成了干脆且精致的侧面菜单设计方案。
http://file02.16sucai.com/d/file/2014/0517/49743d2f3b3bcb98ad47d75b3a012a1e.png
页:
[1]