一朝衰落，又東山再起？我們來聊聊重返網頁設計領域的GIF動畫吧！

+ 查看更多

隨著動效在網站設計中的進一步崛起，GIF動畫也開始重新回歸到大眾的視野當中。有關GIF和其他圖像格式的定義大家可以查看《橫向對比GIF/JPEG/PNG/SVG，教你如何合理選擇圖像格式》。從誕生、衰落再到重新回歸，GIF動畫之所以能夠迸發出蓬勃生機最主要還是因為其內在的獨特屬性。一方面，這種格式可以讓靜態的事物動起來并循環播放，最能傳遞某種情感，易對用戶產生感染力和吸引力。另一方面，GIF動畫是一種體積比較小的圖片格式。換句話說，它既能實現大于圖片的效果，在播放上還比視頻方便，這意味著它易適用于多個平臺，是一種非常具有優勢的傳播方式。現在，越來越多的設計師致力于創造出一個優秀的GIF動畫，GIF動畫要怎樣設計才足夠有趣呢？今天小飛就給大家分享分享在網站中設計GIF動畫的一些準則、技巧以及工具（均為知名設計師長期工作的經驗總結）。

 

 

 

盡管GIF動畫本身就可以在一定程度上吸引用戶的注意力，但為了充分發揮這種圖像格式在網頁設計或產品宣傳中的作用，我們需要讓GIF動畫足夠顯眼。這涉及到兩個方面，其一，動畫設計本身需要足夠醒目。這有多種實現方式，比如我們可以使用有趣的配色、獨特的動效等讓動畫吸人眼球。其二，動畫推廣渠道應足夠顯眼。隨著社交媒體使用率再達新高，在社交平臺中使用GIF動畫就是一個不錯的嘗試。在眾多靜態帖子當中，使用GIF動畫的社交帖子要更加有趣、更引人注目，它還能傳遞給用戶更多的信息。下圖是Fiasco Design工作室為2016年里約奧運會創造的GIF動畫。這個動畫很是生動有趣，它使用了多種元素，比如生動的配色，在各種設備尺寸下都能良好顯示的字體類型，再加上流暢的切換，整個動畫顯得尤為炫酷。

 

 

 

 

控制GIF動畫的尺寸大小也是非常有必要的。這是因為如果GIF動畫尺寸太大，網頁加載的時間就會更長，不少用戶可能會因此直接放棄瀏覽，這時即使是再好看的動畫效果也無濟于事。而對于社交媒體來說，很多社交平臺都會限制上傳圖片的尺寸大小，較大的GIF動畫可能無法上傳，即使上傳成功了，動畫格式的像素也會有一定程度的損壞，這會影響用戶的優質體驗。因此，一定要記得控制GIF動畫的尺寸。這有幾種控制尺寸的方法，首先，使用有限配色；其次，避免使用漸變色，漸變色只會帶來沉重的陰影以及較大的圖片；最后，避免使用半透明的像素，半透明的像素會給GIF動畫的周邊帶來鋸齒問題（見下圖），GIF動畫的透明度要么全部關閉或全部開啟。

 

 

 

 

移動設備的迅猛發展和移動端用戶的重要性小飛在這里就不多說了，GIF動畫的設計也應貼合移動用戶的需求。比如，一個網頁中最好不要放置多個GIF動畫；動畫最好以用戶期望的速度進行演示。如此一來，建議先面向小的設備（移動設備）進行動畫設計，這樣它們更容易在其他設備上得到良好呈現。除此以外，一些設計師還建議動畫設計可以在一個近似正方形的圖案中進行，因為這樣的動畫在需要進行壓縮或裁剪時比較方便，比如在一個4:3的布局中設計動畫，它更容易裁剪成正方形或放大成標準的16:9的布局，同時對移動端用戶也更加友好。

 

 

 

如果我們認真了解GIF動畫，我們會發現它不僅僅是關于如何讓靜態的圖片動起來，更關乎一定速度的循環概念。不少設計師都贊同說，GIF動畫就應該是循環播放的，它不應該有明確的開始和結束點，他們認為動畫的每一次循環都能給用戶呈現不一樣的感覺，循環的GIF動畫還有助于延長用戶在網頁上停留的時間。當然，一些網站的GIF動畫可能只有一到兩秒，無限循環可能會給用戶覺得十分累贅，這時我們可以設置有限制的循環，比如循環3次。而如果你是在設計一個面向社交平臺的GIF動畫，那就完全沒有循環次數的顧慮了，因為動畫只有在出現在人們視線中時才會進行循環，當人們下移瀏覽其他內容時，它就會自然停止。最后，GIF動畫的循環一定要盡可能的順暢，這里有一個誤區需要避免，如果動畫最后一幀和開始一幀是一樣的，用戶在瀏覽時很容易就會出現停頓，瀏覽體驗就會受到阻礙。

 

 

對于大多數設計師來說，Photoshop是設計GIF動畫的關鍵工具之一。如果你想要學習PS技術，不妨去YouTube網站尋找一些有關的在線教程視頻，以獲取PS軟件的相關知識。在充分掌握了PS技術后，你就可以開始動畫的設計與制作了。除了PS技術外，大家還可以嘗試一下CodePen，這個軟件里有很多靈感想法、代碼編寫等資源，對新手和老手都同樣適用。至于更加復雜的GIF動畫，設計師們的首選工具是After Effects，這個工具提供豐富的動畫效果、強大的時速設置功能，以及其他有效的輔助工具。對了，盡管我們可以將設計好的動畫作為GIF格式直接輸出，但專家建議最好先輸出視頻格式，因為這樣比較方便圖像文件尺寸的壓縮。

 

 

 

關于GIF動畫如何制作小飛已經說了這么多了，大家可能會覺得有點復雜，不知從哪里下手。的確，GIF動畫的設計涉及到很多變量，即使是最專業的設計師可能都需要花費一定的時間進行摸索。因此，這里建議大家不要想著一口吃成個胖子，在制作GIF動畫時不要想著馬上創造出一個復雜的GIF動畫，相反，一定要從最簡單、最基礎的動畫開始著手。不少設計師直言說自己的首個GIF動畫設計只是一個可以彈跳的小球，是不是很不可思議？其實，正是通過簡單動畫的設計，我們才能了解各種元素是怎樣移動的，才能為復雜動畫設計打下堅實的基礎。

 

 

 

 

為了確保GIF動畫內容能夠面向更廣闊的人群，設計師還需重點關注GIF動畫的可訪問性，以提升用戶體驗。如何增強動畫的可訪問性？就像在上傳圖片時添加一個alt文本描述一樣，我們可以在GIF動畫旁添加一些文字描述，以方便視覺障礙的人可以快速了解動畫內容。另外，GIF動畫中最好不要有太多閃爍、跳躍等，因為這會讓部分光敏用戶覺得很不舒服。

 

 

 

 

為什么GIF動畫能夠如此流行？對于很多設計師來說，GIF動畫給他們打開了一扇新的大門，讓他們擁有一種全新的、創造力十足的表達方式；對于用戶來說，這種新穎的設計更能吸引他們的注意；而對于企業來說，GIF動畫是一個比較小的項目，需要投入的預算很少，而且優秀的GIF動畫很可能會帶來非比尋常的品牌塑造，也就是說，企業通過GIF動畫設計需要承擔的風險很小，可能的獲益很多。不過，關于優秀GIF動畫一直沒有明確的定義，即使很多從業多年的設計師也直言他們仍在不斷學習進步的過程之中。因為GIF動畫設計是很靈活的，它需要設計師在掌握基本元素的基礎上，再添加一些自己的想法，所以，勇于嘗試新想法和新創意吧，沒準你就能創造一個十分強大的GIF動畫。

 

 

 

快來起飛頁自助建站平臺搭建一個響應式網站吧！