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

　　什么是微妙動(dòng)效?

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

　　怎樣在網(wǎng)頁設(shè)計(jì)中使用微妙動(dòng)效?

　　和動(dòng)效一樣，微妙動(dòng)效的應(yīng)用場景有很多。下面小編簡要列舉了幾種：

　　頁面滾動(dòng)設(shè)計(jì)

　　通過鼠標(biāo)滾動(dòng)進(jìn)行網(wǎng)頁內(nèi)容的瀏覽，這對(duì)訪客來說實(shí)在是再普通不過了，這種設(shè)計(jì)方式也幾乎是所有網(wǎng)站的"標(biāo)配"。如何使網(wǎng)頁滾動(dòng)的設(shè)計(jì)更加獨(dú)特呢?這時(shí)，不妨在網(wǎng)頁中使用一些小而微妙的動(dòng)畫。下圖就做了一個(gè)很好的演示，它在網(wǎng)頁中使用了一條帶有微妙動(dòng)效的線條，當(dāng)訪客滾動(dòng)鼠標(biāo)向下瀏覽時(shí)，線條會(huì)逐步呈現(xiàn)，引導(dǎo)訪客視線下移。這個(gè)小小的標(biāo)志并不突出，但它與微妙動(dòng)效的結(jié)合卻能將你的網(wǎng)站與競爭對(duì)手的區(qū)別開來。

　　背景視頻設(shè)計(jì)https://news.fh21.com.cn/yldt/

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

　　Cinemagraph

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

　　著陸頁設(shè)計(jì)https://m.fh21.com.cn/news/yldt/

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

　　視差滾動(dòng)設(shè)計(jì)

　　如果你已經(jīng)厭倦了傳統(tǒng)的視差滾動(dòng)效果，不妨對(duì)它進(jìn)行一些改進(jìn)，比如在背景圖片上使用微妙的動(dòng)畫效果。在下圖這個(gè)網(wǎng)站中，當(dāng)用戶滾動(dòng)鼠標(biāo)向下瀏覽時(shí)，不僅可以瀏覽到視差效果，還會(huì)看見主頁圖片在滾動(dòng)的過程中會(huì)有逐漸放大的微妙動(dòng)效，這能讓給用戶帶來耳目一新的視覺體驗(yàn)。