多语言展示
当前在线:743今日阅读:167今日分享:16

APP中的模糊效果怎么制作?

现在市场上交互设计做比较成功的产品无一不是在功能性设计上给用户良好的体验。但是我们要知道,同类产品的功能和价格趋于相同,产品的用户体验和美学价值在用户的选择中起了关键作用。我们如何在保证实现功能需求的同时又可以让产品更好用好看呢?惊喜往往存在于被忽视的点上,这篇文章我就来给大家谈谈经常被我们忽视的模糊效果(Blur Effects)。
方法/步骤
1

简化操作流程模糊效果可以让不同层级的功能与内容出现在同一个页面中,特别是对于一些内容比较繁杂、功能比较多的app来说,模糊效果可以简化操作流程,减少用户的学习成本。例如雅虎天气这个应用,对于不同的天气会配有不同的图片。基本的天气数据会出现在页面中,如果你想知道更多详细的天气信息(比如湿度,风速,气压,日出时间,日落时间等),只要点击一下就能看到。用户想获取的任何信息都可以出现在当前页面中,不需要重新打开新页面。这种设计对于用户来说很具有力。

2

吸引用户注意力人总是会不由自主的被那些对焦准确的部分吸引而忽视掉被虚化的部分。眼球的对焦机制好像一个调节器一样捕捉那些离你忽远忽近的物体,这样才能让你感受到周围一切事物的深度和距离。这就是我们人眼的工作机制。设计师可以根据这个理论将界面中一些不重要的内容进行模糊处理来凸显那些重要的内容。TweetBot就通过模糊功能来引导用户的视线。在TweetBot界面中背景是被完全虚化处理的,根本无法看清。这样用户的注意力自然而然的被吸引到账号信息和行为召唤按钮了。

3

良好的装饰效果将模糊效果处理的图片作为页面背景对于设计师来说是一个不错的选择。简洁而又美观。下图中的Trellie农场网站就使用了模糊处理的农场照片作为背景,首先给用户对农村一个大体上的认识。但是农场长什么样不是设计师希望用户注意的。他们希望用户关注的是那句词语:Family Owned Farm&Garden Store。为了进一步的吸引用户的目光,设计师还使用了艺术字体。

4

优化图片加载过程随着网速的不断提升,这给网页中加载更多的图片提供了一个契机。如何优化网页中图片的加载过程也成为了设计师的一项新课题。Medium.com给我们提供了一个很好的范例:当用户进入一个新页面,正在加载中的图片会以一种模糊效果展示给用户。图片会在加载过程中逐渐变得清晰直至完全加载完成。这种设计主要有两点好处:1 模糊效果会解决不同设备中图片的适配难题2 模糊效果的缩略图很小,降低了页面的加载负担

5

测试页面的视觉层次模糊效果不仅可以提升页面的视觉表现力,还是衡量页面视觉层次的一项重要测试工具。模糊效果可以帮助我们发现页面的视觉重心,看用户的目光是否放在我们希望他关注的内容上。方法其实很简单,我们只要将图片导进Photoshop中,对图片进行高斯模糊处理,强度为5-10px。就像下图一样,模糊处理后的页面模拟的就是用户第一眼看到页面的场景:用户对页面整体布局会有一种大致上的认识,但是不会注意到具体细节。如果模糊状态下的页面我们找不到任何重点,那么就以为我们要做出一些调整了。

6

模糊效果与文字可读性我们在给页面引入模糊效果之前,我们要考虑的一个问题就是:模糊效果是否影响到了文字的可读性。下图中谷歌钱包首页中我们可以发现,次标题内容完全无法辨识。

7

模糊效果与页面内容的兼容性问题当页面中内容比较多的时候,我们对模糊效果的使用就要谨慎了。我们可以比较下图中的两个案例,左边因为使用了模糊效果,致使页面整体效果比较;右边的页面则明显的清爽许多。

推荐信息