作为网页设计领域的"老大哥"，扁平化设计凭借其简洁的布局、流畅的加载速度、完美适配响应式等特点稳坐第一把交椅，不过它也不是毫无缺点的：应用扁平化设计的网站往往配色方案比较单一，视觉体验较单调。为了弥补这一缺陷，扁平化设计开始积极吸纳一些有用的设计技巧，比如负空间(留白)、渐变、动效等。而动画效果无疑是其中最引人注目的、最受欢迎的一种，它在2017年的众多网站案例中都得到了广泛的应用，这是因为动效可以快速吸引用户的注意力，有效增强网站互动。不过相比华丽、显眼的动效，设计师越来越倾向于在网站中使用微妙动效了。什么是微妙动效?怎样在网站中使用微妙动效?今天这篇文章就可以给你答案。
什么是微妙动效?
微妙动效，顾名思义，是指动作幅度相对较小的一类动效。在网站中使用动画效果主要是为了吸引用户的注意力，让用户对网站有进一步的了解，进而与网站完成互动。换句话说，动效是网站内容的一个载体。而当网页动效设计太过华丽的话，用户可能会将更多的注意力放在动效形式上，却忽略网页的本质内容。这也是为什么不少站长在网站中使用动效设计却没有获得预期效果的原因。也是在这种情况下，设计师开始提出了"微妙动效"的概念。在网站的局部区域应用动作幅度较小的动画效果，这一方面能给网站带来生机与活力，让用户享受独特的设计体验，另一方面它还有利于保持网站页面的干净整洁，帮助完成页面核心信息的顺畅传递。
怎样在网页设计中使用微妙动效?
和动效一样，微妙动效的应用场景有很多。下面小编简要列举了几种：
页面滚动设计
通过鼠标滚动进行网页内容的浏览，这对访客来说实在是再普通不过了，这种设计方式也几乎是所有网站的"标配"。如何使网页滚动的设计更加独特呢?这时，不妨在网页中使用一些小而微妙的动画。下图就做了一个很好的演示，它在网页中使用了一条带有微妙动效的线条，当访客滚动鼠标向下浏览时，线条会逐步呈现，引导访客视线下移。这个小小的标志并不突出，但它与微妙动效的结合却能将你的网站与竞争对手的区别开来。
背景视频设计https://news.fh21.com.cn/yldt/
背景视频，从本质上来看，也算是动效的一种表现形式。在2017年，不少设计师都在页面中使用了这种设计方法。不过，大多数时候，网站上的背景视频是模糊的、或包含了一些与网站主题无关的场景，播放速度比较快。而事实上，背景视频可不仅仅能充当"花瓶"的角色，它还可以在突出网站主题等方面起到一定的辅助作用。下图就是一个很好的栗子，网站的主题是"Creation Without Limits(无限的创造力)"，背景视频则呈现了雪山等场景，很好的契合了网站主题，让这种不断开拓进取的创造精神更加具象。在这个示例中，视频的缓慢播放(微妙动效)更是一大亮点，它让视频真正发挥了自己的作用，也让网站内容信息更易为用户所理解。
Cinemagraph
如果说GIF是夸张动效的典型，那么Cinemagraph就是微妙动效的代表。Cinemagraph是一种结合了动态影像(cinema)和静态图像(Graph)的图片呈现方式，这类图片中的大部分元素通常会保持静止不动，仅有部分元素呈现动态(见下图)，这与微妙动效的理念不谋而合。由于它在观感上与GIF格式的动画类似，也经常被拿来比较，不过现在设计师更倾向于在网页中使用Cinemagraph，因为他们认为相比GIF，Cinemagraph的动效幅度更小，更显得简约高级。在网站中使用它，不仅可以给用户带来惊艳的视觉体验，还能在动静之间，将用户的目光集中到特定的元素上，在宣传产品时，尤其是一把好手。当然，要想Cinemagraph带来预期的效果，一定要注意它的使用情景。由于Cinemagraph的动效往往是微妙的，它比较适合在较大的屏幕中呈现，比如主页或着陆页的header位置。
着陆页设计https://m.fh21.com.cn/news/yldt/
微妙动效不仅仅适用于以上这些场景，还可以用在着陆页设计上。比如在下面这个例子中，着陆页主要是为了突出网站的Logo的，微妙动效就用在了网站的字体Logo上。逐步呈现的字体和线条、不规则的布局、以及贴合网站主题的背景图片，都能让用户的浏览体验更加愉悦。
视差滚动设计
如果你已经厌倦了传统的视差滚动效果，不妨对它进行一些改进，比如在背景图片上使用微妙的动画效果。在下图这个网站中，当用户滚动鼠标向下浏览时，不仅可以浏览到视差效果，还会看见主页图片在滚动的过程中会有逐渐放大的微妙动效，这能让给用户带来耳目一新的视觉体验。
