整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者：老姚，《JS正则迷你书》的作者 https://github.com/qdlaoyao/css-gif
本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。
需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。另外这里，老姚谢谢各位一如既往的支持。
希望有所帮助。
也欢迎阅读本人的《JS正则迷你书》
本文完。
《JS正则迷你书》(https://github.com/qdlaoyao/js-regex-mini-book)
希望有所帮助。
们如何在保证实现功能性需求的同时又可以让产品更好用好看呢？惊喜往往存在于被忽视的点上，这篇文章我就来给大家谈谈经常被我们忽视的模糊效果（Blur Effects）。
简化操作流程
模糊效果可以让不同层级的功能与内容出现在同一个页面中，特别是对于一些内容比较繁杂、功能比较多的app来说，模糊效果可以简化操作流程，减少用户的学习成本。
例如雅虎天气这个应用，对于不同的天气会配有不同的图片。基本的天气数据会出现在页面中，如果你想知道更多详细的天气信息（比如湿度，风速，气压，日出时间，日落时间等），只要点击一下就能看到。
用户想获取的任何信息都可以出现在当前页面中，不需要重新打开新页面。这种设计对于用户来说很具有诱惑力。
吸引用户注意力
人总是会不由自主的被那些对焦准确的部分吸引而忽视掉被虚化的部分。眼球的对焦机制好像一个调节器一样捕捉那些离你忽远忽近的物体，这样才能让你感受到周围一切事物的深度和距离。这就是我们人眼的工作机制。设计师可以根据这个理论将界面中一些不重要的内容进行模糊处理来凸显那些重要的内容。
TweetBot就通过模糊功能来引导用户的视线。在TweetBot界面中背景是被完全虚化处理的，根本无法看清。这样用户的注意力自然而然的被吸引到账号信息和行为召唤按钮了。
良好的装饰效果
将模糊效果处理的图片作为页面背景对于设计师来说是一个不错的选择。简洁而又美观。
下图中的Trellie农场网站就使用了模糊处理的农场照片作为背景，首先给用户对农村一个大体上的认识。但是农场长什么样不是设计师希望用户注意的。他们希望用户关注的是那句广告语：Family Owned Farm&Garden Store。为了进一步的吸引用户的目光，设计师还使用了艺术字体。
优化图片加载过程
随着网速的不断提升，这给网页中加载更多的图片提供了一个契机。如何优化网页中图片的加载过程也成为了设计师的一项新课题。Medium.com给我们提供了一个很好的范例：当用户进入一个新页面，正在加载中的图片会以一种模糊效果展示给用户。图片会在加载过程中逐渐变得清晰直至完全加载完成。
这种设计主要有两点好处：
1 模糊效果会解决不同设备中图片的适配难题
2 模糊效果的缩略图很小，只有几kb，降低了页面的加载负担
测试页面的视觉层次
模糊效果不仅可以提升页面的视觉表现力，还是衡量页面视觉层次的一项重要测试工具。
模糊效果可以帮助我们发现页面的视觉重心，看用户的目光是否放在我们希望他关注的内容上。方法其实很简单，我们只要将图片导进Photoshop中，对图片进行高斯模糊处理，强度为5-10px。就像下图一样，模糊处理后的页面模拟的就是用户第一眼看到页面的场景：用户对页面整体布局会有一种大致上的认识，但是不会注意到具体细节。如果模糊状态下的页面我们找不到任何重点，那么就以为我们要做出一些调整了。
Mailchimp的首页就可以说是通过了模糊效果测试，因为页面视觉重点是“注册”按钮，这也是我们希望新用户进到这个页面的初衷。
模糊效果与文字可读性
我们在给页面引入模糊效果之前，我们要考虑的一个问题就是：模糊效果是否影响到了文字的可读性。下图中谷歌钱包首页中我们可以发现，次标题内容完全无法辨识。
模糊效果与页面内容的兼容性问题
当页面中内容比较多的时候，我们对模糊效果的使用就要谨慎了。我们可以比较下图中的两个案例，左边因为使用了模糊效果，致使页面整体效果比较“脏”；右边的页面则明显的清爽许多。
我见过一些设计师为了炫技抑或是为了提高所谓的“设计感”使用模糊效果，其实大可不必。内容是决定了一款产品的气质风格的，为了追求设计感而使内容得不到完全展示是本末倒置。
总结
模糊效果会给用户提供一个视觉引导，帮助他们更好的了解页面，特别是可以很好的解释元素之间的关系，更能提升页面的美感。但是我们也不能过度迷信模糊效果，要谨慎使用。
文章来源：UI中国
文章链接：http://www.ui.cn/detail/217625.html
*请认真填写需求信息，我们会在24小时内与您取得联系。
