手机APP模糊背景设计的优雅

   模糊背景(blurred backgrounds)长时间以来都是作为一个基本的照片效果,但在最近模糊背景已做为使设计元素脱颖而出的非凡工具,而受到很多设计师的青睐。这种做法相当容易,悄无声息又自然的给予内容适当突出,图标和图形就能脱颖而出。这样做能够二鸟一石。首先,你可以为你的项目增加些不一样的效果;其次,适当的增加这种设计效果对小尺寸的手机屏幕很有必要,能有效地提高可读性体验。

  模糊的背景还提供了其他潜在的好处。例如,你可以轻易减少你的调色板,而只侧重于一个主色,尤其是在使用白色为基调的设计,在模糊背景下看起来绝对精彩、干净。至于图形,你可以使用面或线形的图形,都能很好地与这样的图像进行呼应。字体也不受其影响,因此,即使超窄的字体也会显得清晰易读。

  现在,我们继续来看一些令人惊艳的App界面,用各种实例和方案来证明这种强大的效果。

  基于模糊背景(blurred backgrounds)的App范例

  下面是由Rocket Child正在进行的Solar alarm的项目,设计方案有个很可爱,充满活力的圆形构图。线条分明的设计元素与失焦炫光背景完美的融合在一起,使得画面看起来是多么的和谐、精致。


  下面是一个健身应用程序,是呈现半透明玻璃质感的图层和友好控件组合都覆盖到模糊的背景上的方案,其中绿色景观的情景增加了一些自然设计因素。


  通知面板的设计巧妙地利用了温暖的色彩,以使界面充满更加积极的外观。像上面的案例一样,设计师也运用了低透明的模糊背景和优雅的小部件和谐共生。


  这个菜单通过镜头流畅的切换,描绘了菜单两态的变化,在灰色的模糊背景中,白色的黑体字和时尚图形符号有很好地融合。


  下面是一个医疗应用,大面积蓝色模糊背景中,运用了很好的背景虚化效果,以配合时尚的绿松石色的功能面板。


  下面的列表设计是基于一个充满活力的图像背景,巧妙地散焦效果使得前面的设计元素更加突出。因此,所有的文字内容和图形元素都能呈现出一个很清晰效果。


  接下来是iOS 7的音乐应用,这个方案里有个小而美的CD图像,很适合放在这里。后面大面积暖色调的模糊背景为音乐播放器和控件组,提供了良好的氛围。


  Extranet 是个美好光泽和氛围的应用范例,有利的模糊化背景和众多的控件组成了这样的理想组合,让界面变得美观大方。


  下图演示了白色锐利图标与城市模糊图片背景的常规排版设计,形成了干脆且精致的侧面菜单设计方案。


  天气应用!由 Fueled设计的,经过反复推敲,无不散发着精致和匠心的应用界面。它有2个设计上的创新:利用模糊背景进行巧妙、有效地内容诠释,超窄型字体与轮廓图形设计的非常匹配。


  由Georg Bednorz 设计的设置界面,设计师借力缤纷颜色的万花筒形成了一个精彩的案例,使得界面看起来愉快又充满积极活力。在白色蒙版下五颜六色的模糊背景很好的和前景活泼的元素相呼应。


  下面的这个设计传达了一个很温暖的氛围。设计师让界面呈现简单易懂,其中运用到了光滑而模糊的光斑背景,大号字体和直观地图标。


  设计师完全是通过调色板带来了成熟的女性氛围。利落的使用紫罗兰的时尚色调创造了柔和的氛围,线性的轮廓和优雅的形态,使主题看上去十分完整。

时间: 2024-10-09 17:56:24

手机APP模糊背景设计的优雅的相关文章

移动-对于现在手机App的UI设计的问题

问题描述 对于现在手机App的UI设计的问题 今天,公司要求我做PS,可以我不知道尺寸呀,ps的文件像素大小?--真心纠结呀 解决方案 各个手机操作系统都 App UI 的图片要求是不一样的,你设计的是用于 Android 吗?应用图标尺寸(宽*高) 1024 * 1024(其他尺寸我们可以自己缩放)要求:应用图标iOS端要求直角图片.Android端要求圆角图片启动界面图尺寸(宽*高) android:1920*1080 背景:1920*1080 解决方案二: .......没特别要求就默认么

手机app接口开发-手机APP登录接口设计问题,不知道加密方式如何登录?

问题描述 手机APP登录接口设计问题,不知道加密方式如何登录? 不知道网站的密码的加密方式,知道密码,手机APP接口该怎么设计登录呢? 解决方案 用fiddler调试,看看密码是不是明文传过去的.如果不是,再用js调试工具看密码在客户端的加密方式是什么. 解决方案二: 设计基于HTML5的APP登录功能及安全调用接口的方式(原理篇)设计基于HTML5的APP登录功能及安全调用接口的方式(原理篇) 解决方案三: 知道密码,但不知道加密方式,这个就需要从 PC,即网页端分析了.只有分析出加密的算法,

新技能get√!模糊背景该怎样设计

  单张的模糊图像没有任何看点,但不可否认他的确是一位很好的配角. 模糊背景(blurred backgrounds)是一个很常见的设计效果,也被称为背景虚化,在网页和App的设计中屡见不鲜.虚化的界面设计直观的给人一种干净自然的视觉感受,因此,模糊背景的基调会使整个界面看起来更柔美. 接下来,我们汇总了"背景虚化"的各种案例,供大家评论欣赏. 1.circle将繁华的城市场景做了虚化效果,背景会随着输入的城市而变化,或繁华或静谧,但都无一例外的突出了每座城市的独特之处.当背景被蒙上一

网页设计中的模糊背景

全尺寸背景在网页设计中已经越来越受欢迎,几年来,这一趋势的另一个变化是模糊的背景图像. 最近似乎有更多的模糊背景设计雨后春笋般冒出来,在使用某种类型的模糊图像的大背景下或者一个全尺寸的背景,不仅让整个网站下显得非常的人性化,烘托出网站所要给用户的氛围,也能更够突出产品或者人物本身特质,在配合新的CSS技术的情况下 更能到给用户舒适的用户体验~~~~~~~~ 有多种不同类型的网站使用这种方法,有许多非常好的的设计,这种风格,我们已经看到许多Web应用程序或iPhone应用程序. 在这篇文章中,我们

温暖人心的模糊界面设计

  模糊背景(blurred backgrounds)是一个很常见的设计效果,也被称为背景虚化,在网页和App的设计中屡见不鲜.虚化的界面设计直观的给人一种干净自然的视觉感受,因此,模糊背景的基调会使整个界面看起来更柔美.合理运用虚化背景可以将界面效果提高一个档次,下面就是背景虚化的案例,供大家赏析学习. 1.circle将繁华的城市场景做了虚化效果,背景会随着输入的城市而变化,或繁华或静谧,但都无一例外的突出了每座城市的独特之处.当背景被蒙上一层朦胧的外衣后,产生了一种喧嚣背后的城市沉淀. 2

手机APP设计师经验分享:APP用户体验设计

文章描述:实用的经验分享:如何让APP变快! ​做了设计转眼间也4年多了,从2011年由网页设计师转到手机APP设计师:最近的工作不是很忙,就静下心来去阅读学习下互联网的一些发展趋势来弥补自己在这方面的不足(因为工作的时间大部份都是做设计):之前一直以为用户体验方面的工作是有专门的研究人员去做的,与设计人员没有关系,通过这几天的学习,发现做设计的也可以做到用户体验啊,下面我就给大家一一介绍下,大家互相学习 ^_^ 一.后台的执行 核心思想:通过在状态栏运行加载的程序的同时,可以使用户可以做其他的

网页设计之模糊背景在网站中的经典应用案例

如今,网页设计领域出现了多种创新的设计方法,例如视差滚动,全屏背景,单页设计等等.今天这篇文章向大家介绍另一种新的网页设计趋势--模糊背 景.这种类似于摄影拍摄的效果应用在网页中能够突出主题内容,同时若隐若现的模糊背景向用户展示非常真实的产品在生活中的应用场景,像一些支付网站的首 页,还有产品的展示页面都会使用这种效果. Square Daniel Filler 开发经典案例"> Do NOE Interactive Humaan Pulse Hipstamatic Rivers &

app反馈-手机app设计意见反馈类似功能时,后台除了用数据库保存用户意见还有其它比较好的方式吗?

问题描述 手机app设计意见反馈类似功能时,后台除了用数据库保存用户意见还有其它比较好的方式吗? 把用户反馈的信息用一个比较好的方式保存在远处服务器上,至少先保存下来

APP浏览体验设计的思考:如何理解用户的眼

生活中很多人会调侃道:"每天手指在手机屏幕上滑动的距离比走路的距离还长!"随着指尖上的浏览融入到生活的方方面面,如何让用户手指滑动的更有效率,在滑动手指的同时看到更多想看的内容,而不白白滑动手指,是提升手机APP用户体验的重要方面.为深入理解人们的APP浏览行为,我们使用专门用于追踪移动设备注视行为的眼动仪对用户浏览社交APP的习惯进行了研究,试图更加直观地展示人们浏览APP的特点,以及由此引发的对于优化APP浏览体验设计的思考. 手机与PC浏览,区别在哪里? 我们曾先后针对QQ空间P