你知道如何使用阴影和模糊效应在现代UI设计中吗？
当你查看近些年来最成功的交互设计,你会发现那些赢家共同的特点就是提供了很好功能的设计。通俗点来说就是：这个功能用起来很舒服。在功能方面的设计是产品成功的关键,美学和视觉细节同样重要。但是你真的了解这些元素吗？知道如何使用才恰当吗？
在今天的文章中,我将解释如何利用视觉元素,如利用阴影和模糊效应这些功能元素来提高设计效果。
阴影和用户界面的可发现性
阴影和用户界面的可发现性是有原因的，GUI设计师将阴影纳入设计之中——他们帮助创造视觉线索，把用户界面元素与人类的大脑的思维方式链接起来，告诉用户看到的真正效果。
设计功能可见性
自从早期的图形用户界面开始,电脑的界面已经利用阴影来帮助用户了解如何使用一个接口。图片和元素的阴影似乎成了一种很流行的页面,让用户觉得他们可以与元素进行交互。尽管视觉线索是从应用程序到应用程序,用户通常可以依靠两个假设来做出判断:
· 元素出现了看起来可以按下(用鼠标点击或利用手指)。这种技术通常是用作按钮的视觉象征。
· 元素出现凹陷的看起来可以填满。这种技术通常是用作输入字段的视觉象征。
你可以看到阴影的使用,帮助用户理解这个Windows 2000互动对话框包含的交互元素:
感知的可能性行动:你会注意到按钮出现了。
创建一个视觉层次和深度的印象
现代的界面分层充分利用了z轴。几个对象的z轴的位置作为重要提示来告知用户。
z轴是垂直地排列的平面,能与x轴和y轴形成很好的立体效果。
阴影帮助指示元素通过区分两个对象的层次结构。而且,在某些情况下,阴影帮助用户理解一个对象是在另一个之上（看下图）
为什么这么重要的可视化元素的位置要在三维空间体现？答案很简单——物理定律。
物质世界中的一切空间,彼此和元素在三维空间交互:他们可以相互堆叠，每个对象也投射阴影和反射光线。这些交互的理解是我们理解的图形界面的基础。
让我们看一看谷歌的界面设计。很多人仍然称之为平面设计,但关键特性是它的维度——使用一致的隐喻和原则，借鉴物理原理帮助用户理解上下文的接口和解释视觉层次。
物理定律是深深融入我们的认知:例如这个黄色的按钮，如果没有一个大的阴影,怎么能够表明黄色的圆圈是独立于背景表面呢？
使用高程提供视觉反馈
高程的体现是需要阴影与之想配合的。高程可以说是海拔相对深度,或两个表面沿着Z轴之间的距离。测量从一个表面到另一个表面的距离。从下图可以看到,影子越来越模糊，对象和地面之间的距离就越大。
海拔在材料设计:z-depth = 1非常接近地面,z-depth = 5是远离地面。
一些元素通过按钮动态海拔来提示用户这些交互元素的作用。阴影提供有用的线索关于物体的运动方向和表面之间的距离是否增加或减少。让用户相信这些东西事可点击的或者其他目的,他们需要立即放心点击,而高程通过诗句提供了这些线索:
一个物体的高度决定了阴影的出现。显示的值为Android应用程序。
模糊的效果
模糊效果对移动应用模糊影响
当苹果推出iOS 8,它提高了应用程序的设计效果,特别是它的屏幕界面显示效果。最重要的变化之一是使用模糊,尤其是在控制中心的显示效果上;当你划出屏幕底部边缘显示控制中心,回发现背景是模糊的。这种模糊效果体现的是一个交互的设计方式,模仿出一种用你的手指来控滑动的真实效果体验。
（苹果iOS的控制中心效果）
苹果进一步在这个方向的设计应用在了最新的IOS版本，使用3 d触摸手电筒,照相机,计算器和计时器图标。当用户的手按在这些图标,就会出现实时的模糊效果。
模糊技术对现代手机界面有以下好处:
让用户流明显
模糊效应允许一个窗口内出现多个界面或者应用程序，尤其是在移动应用程序方面。这是一个非常有效的解决方案，能够使UI分层,因为它使用户对手机应用程序的用户流程有一个清晰的理解。
雅虎天气iOS应用程序显示每个天气位置的照片,和你所需要的基本天气数据是清晰可见的，他们都在一个界面里，每个UI依次设计排列，当你点击某个功能后，很容易的显示详细的信息。但是与此同时你会发现，背景照片一直都在显示的，只不过是在需要体现的元素后面加了一层模糊效果。
雅虎天气使用模糊效果能够使用户感知到用户导航的层次结构。
用户的直接注意力
人类倾向于关注焦点对象，这是一个自然的结果，因为我们的眼睛就是这样工作的,被称为住宿条件反射。应用程序设计人员可以使用它来模糊在屏幕上上不重要的东西，使用户直接关注到有价值的内容。Tweetbot应用程序使用模糊吸引用户关注关注什么产品主体;背景几乎认不出来的,而重点的账户信息和调用操作按钮清晰可见。
使覆盖文本清晰
文本在你的应用程序的目的是建立一个明确的应用程序和用户之间的联系,以及帮助用户完成他们的目标。字体设计在这一过程中起着至关重要的作用,好的排版使阅读的行为毫不费力,而有些字体排版却让用户抓狂。
为了使文本的可读性最大化，您需要在文本和背景之间创建一个适当的对比，模糊就是一个很好的方法。模糊给设计师提供了一个在杂乱的背景上完美体现文本可读性的方法——效果非常棒。
在网页设计中模糊效果
模糊效果可以无缝地融入网站设计。
装饰背景
全屏照片背景经常用于网站装饰,这样模糊背景已经在现代网站设计找到了自己的市场定位。这个装饰效果也有实用价值:通过模糊一个对象,它将集中到另一个地方。因此,如果你想强调你的主题,把背景模糊的方法是最好的解决方案。
格子农场网站使用一个标志性的形象，用一个农场坐位网站的背景。为了增加文本可读性,这张照片是分层的,背景使用了模糊，导致字体最大程度的吸引访问者的注意力。与此同时，背景也很有逼格，也不会显得单调。
模糊背景能够使你关注指定元素。
渐进图像加载
现代web页面图像的加载越来越多,但是加载过程会影响性能和用户体验。使用模糊效果您可以创建一个进步形象负载效应。一个很好的例子是Medium.com,它模糊了帖子文章中的图像覆盖以及图像内容,直到图像完全加载。首先,它加载一个小模糊的图像(缩略图),然后过渡到大图。
在Medium.com上载入图像是如何工作的
这种方法有两个好处:
· 它能帮助你提供不同的图像大小取决于设备的请求,优化页面的权重。
· 缩略图是非常小的(只有几kb)，结合模糊效果，非常的棒。
测试网站的视觉层次
可以使用模糊效果不仅是视觉设计技术也是一个测试页面视觉层次的很好的技术。
模糊测试是指用一个快速的技术来帮助你确定你的用户的眼睛所重点关注的地方。你需要做的是,网站的截图,并添加一个5 - 10 px在Photoshop中高斯模糊，就会发现你需要强调的元素脱颖而出。
模糊测试技术用于揭示设计的焦点和视觉层次。
当然模糊效果会导致一些问题
过度使用模糊的移动应用
模糊效果并不是免费的。它的成本在于——图形性能和影响电池寿命（特别是手机电池）。由于模糊是一个内存带宽和功率集约效应,它能影响系统性能和电池寿命。被滥用的模糊会导致较慢的加载应用程序，影响用户体验。
我们都想创造一个美丽的设计,但与此同时,我们不能让用户遭受长时间加载或使电池空空如也。模糊效果应该明合理的使用,你需要找到一个外观和资源利用之间的平衡
模糊效果和文本可读性问题
另一个因素,你应该记住——模糊是没有动态的。如果你的图像变化了，记得模糊也要相应的做出改变，或者采取其他效果，来始终保持你的文本可读性。
下图的现象就是：图片更换了，小字在背景上完全不可读了。
当用于屏幕充斥着很多的内容的时候要慎用模糊效果
当用于屏幕充斥着很多的内容的时候模糊的背景会出现一个问题。你可以比较下面的两个例子。左边的屏幕使用模糊效果看起来脏,和文本似乎不可读。屏幕没有模糊效果更清晰。
当我们需要在页面上显示更多的内容,模糊背景可能不太好，就是说如果整个页面很干净，使用模糊效果会给人大气的效果。而如果页面满满的都是元素，最好就不要使用模糊效果了，这样会是你的界面看起来像是被压缩过了，不清楚。
结论
阴影和模糊效应能够很好的提供视觉线索,是用户更好和更容易明白正在发生什么。特别是,利用阴影和模糊设计师能够很好的告诉用户这些对象元素相互之间的关系,以及潜在的与这些对象的互动。但是有些地方也是慎用的（例如界面元素太多）。
快行动起来，让这些元素来改善你的设计页面吧！
