為了讓你的網頁設計更有趣，設計師提出了"微妙動效"的新概念

+ 查看更多

 

作為網頁設計領域的"老大哥"，扁平化設計憑借其簡潔的布局、流暢的加載速度、完美適配響應式等特點穩坐第一把交椅，不過它也不是毫無缺點的：應用扁平化設計的網站往往配色方案比較單一，視覺體驗較單調。為了彌補這一缺陷，扁平化設計開始積極吸納一些有用的設計技巧，比如負空間（留白）、漸變、動效等。而動畫效果無疑是其中最引人注目的、最受歡迎的一種，它在2017年的眾多網站案例中都得到了廣泛的應用，這是因為動效可以快速吸引用戶的注意力，有效增強網站互動。不過相比華麗、顯眼的動效，設計師越來越傾向于在網站中使用微妙動效了。什么是微妙動效？怎樣在網站中使用微妙動效？今天這篇文章就可以給你答案。

 

 

 

微妙動效，顧名思義，是指動作幅度相對較小的一類動效。在網站中使用動畫效果主要是為了吸引用戶的注意力，讓用戶對網站有進一步的了解，進而與網站完成互動。換句話說，動效是網站內容的一個載體。而當網頁動效設計太過華麗的話，用戶可能會將更多的注意力放在動效形式上，卻忽略網頁的本質內容。這也是為什么不少站長在網站中使用動效設計卻沒有獲得預期效果的原因。也是在這種情況下，設計師開始提出了"微妙動效"的概念。在網站的局部區域應用動作幅度較小的動畫效果，這一方面能給網站帶來生機與活力，讓用戶享受獨特的設計體驗，另一方面它還有利于保持網站頁面的干凈整潔，幫助完成頁面核心信息的順暢傳遞。

 

 

 

和動效一樣，微妙動效的應用場景有很多。下面小飛簡要列舉了幾種：

 

 

通過鼠標滾動進行網頁內容的瀏覽，這對訪客來說實在是再普通不過了，這種設計方式也幾乎是所有網站的"標配"。如何使網頁滾動的設計更加獨特呢？這時，不妨在網頁中使用一些小而微妙的動畫。下圖就做了一個很好的演示，它在網頁中使用了一條帶有微妙動效的線條，當訪客滾動鼠標向下瀏覽時，線條會逐步呈現，引導訪客視線下移。這個小小的標志并不突出，但它與微妙動效的結合卻能將你的網站與競爭對手的區別開來。

 

 

 

背景視頻，從本質上來看，也算是動效的一種表現形式。在2017年，不少設計師都在頁面中使用了這種設計方法。不過，大多數時候，網站上的背景視頻是模糊的、或包含了一些與網站主題無關的場景，播放速度比較快。而事實上，背景視頻可不僅僅能充當"花瓶"的角色，它還可以在突出網站主題等方面起到一定的輔助作用。下圖就是一個很好的栗子，網站的主題是"Creation Without Limits（無限的創造力）"，背景視頻則呈現了雪山等場景，很好的契合了網站主題，讓這種不斷開拓進取的創造精神更加具象。在這個示例中，視頻的緩慢播放（微妙動效）更是一大亮點，它讓視頻真正發揮了自己的作用，也讓網站內容信息更易為用戶所理解。

 

 

 

如果說GIF是夸張動效的典型，那么Cinemagraph就是微妙動效的代表。Cinemagraph是一種結合了動態影像（cinema）和靜態圖像（Graph）的圖片呈現方式，這類圖片中的大部分元素通常會保持靜止不動，僅有部分元素呈現動態（見下圖），這與微妙動效的理念不謀而合。由于它在觀感上與GIF格式的動畫類似，也經常被拿來比較，不過現在設計師更傾向于在網頁中使用Cinemagraph，因為他們認為相比GIF，Cinemagraph的動效幅度更小，更顯得簡約高級。在網站中使用它，不僅可以給用戶帶來驚艷的視覺體驗，還能在動靜之間，將用戶的目光集中到特定的元素上，在宣傳產品時，尤其是一把好手。當然，要想Cinemagraph帶來預期的效果，一定要注意它的使用情景。由于Cinemagraph的動效往往是微妙的，它比較適合在較大的屏幕中呈現，比如主頁或著陸頁的header位置。

 

 

 

微妙動效不僅僅適用于以上這些場景，還可以用在著陸頁設計上。比如在下面這個例子中，著陸頁主要是為了突出網站的Logo的，微妙動效就用在了網站的字體Logo上。逐步呈現的字體和線條、不規則的布局、以及貼合網站主題的背景圖片，都能讓用戶的瀏覽體驗更加愉悅。

 

 

 

如果你已經厭倦了傳統的視差滾動效果，不妨對它進行一些改進，比如在背景圖片上使用微妙的動畫效果。在下圖這個網站中，當用戶滾動鼠標向下瀏覽時，不僅可以瀏覽到視差效果，還會看見主頁圖片在滾動的過程中會有逐漸放大的微妙動效，這能讓給用戶帶來耳目一新的視覺體驗。

 

 

 

趕緊來起飛頁自助建站平臺搭建一個屬于你的響應式網站吧！快在網站中使用微妙動效吧！