這是一個(gè)什么都在變快的時(shí)代。在互聯(lián)網(wǎng)上，一切都開(kāi)始動(dòng)起來(lái)，短視頻開(kāi)始流行，而 Gif圖早就已經(jīng)像病毒一樣占據了網(wǎng)絡(luò )的每個(gè)角落。用戶(hù)用 Gif圖來(lái)傳達信息，來(lái)表達情緒，甚至記錄生活。怎么能不愛(ài) Gif圖呢?

　　但是就和所有的好東西一樣，優(yōu)質(zhì)的 Gif圖從來(lái)都不是輕易得來(lái)。無(wú)論是制造動(dòng)態(tài)的 UI界面，還是有趣的表情，又或者是好玩兒的動(dòng)態(tài)小插畫(huà)，想要確保它足夠吸引用戶(hù)，讓人感覺(jué)對味，還足夠小，這并不是一件簡(jiǎn)單的事情。

　　不過(guò)，不用擔心，設計一個(gè)稱(chēng)職的 Gif圖是有技巧的，接下來(lái)，分享的 10 個(gè)技巧，能讓你的 Gif圖設計得更優(yōu)秀。

　　1、不要提供多余無(wú)效的內容

　　雖然設計師會(huì )在自己所熱愛(ài)的項目中投入更多，但是在做 Gif動(dòng)態(tài)圖的時(shí)候，在傳達信息的同時(shí)，要盡量簡(jiǎn)化其中的內容，一般而言，更少的信息能夠讓你在制作動(dòng)畫(huà)的時(shí)候獲得更多的自由和可能性!

　　一定要克制住加入大量?jì)热莸臎_動(dòng)。用戶(hù)在觀(guān)看你的 Gif圖的時(shí)候，很容易被過(guò)多的內容所淹沒(méi)，尤其是當你想要借助 Gif圖來(lái)傳達特定的情緒和感受的時(shí)候，多余的色彩和內容很容易弱化它們。

　　不要過(guò)度設計。圍繞著(zhù)核心的元素和調色板來(lái)設計，讓它們足夠獨特和誘人。

　　2、在Gif圖中建立一致的視覺(jué)

　　Gif圖是世界上最短的電影。你可以借助它來(lái)進(jìn)行品牌化的傳達。

　　你可以在設計的時(shí)候使用品牌的配色來(lái)對它進(jìn)行設計，將品牌的形象、LOGO和其他元素在 Gif圖中呈現，讓品牌、企業(yè)和產(chǎn)品以更加富有活力的方式呈現出來(lái)。

　　而用戶(hù)則能夠借助這些元素，來(lái)和品牌本身產(chǎn)生關(guān)聯(lián)。在特定的情形和需求之下，Gif圖能夠幫助用戶(hù)了解產(chǎn)品的功能和其他的信息，而品牌化的配色則能夠強化這種關(guān)聯(lián)。

　　比如 GE 就在 Gif圖當中提供了非常值得期待的氛圍，在官方的 Tumblr 當中分享這些有趣的 Gif 圖，展示 GE 在科學(xué)和機械設計上的造詣。借助 #badassmachines 這樣的標簽，讓他們在社交媒體上進(jìn)行更有效的傳播。

　　3、刪除Gif圖中所有的額外幀

　　當你在設計 Gif圖的時(shí)候，無(wú)論你使用哪種類(lèi)型的動(dòng)畫(huà)，Gif圖中，總會(huì )有某些時(shí)刻是狀態(tài)停止的，創(chuàng )建好 Gif圖之后，應該通過(guò)調整，刪除掉額外的、停止不同的幀。

　　刪除額外的幀，僅保留其中一幀，并根據動(dòng)畫(huà)的狀態(tài)和節奏來(lái)調整該幀的時(shí)長(cháng)，可以縮減 Gif圖的大小和播放時(shí)候的壓力。

　　這樣的調整不僅能夠讓 Gif圖整體質(zhì)量保持不變，而且同時(shí)可以減少不必要的空間占用。

　　4、在上傳Gif圖的時(shí)候，保持良好的可訪(fǎng)問(wèn)性

　　作為設計師，你應該熟悉用戶(hù)群體，并且將 Gif圖中可能會(huì )分散精力的視覺(jué)內容給去掉。

　　最典型的，如果你所面對的用戶(hù)群體當中有視力障礙并且使用屏幕閱讀功能或者癲癇患者，那么盡量兼顧到他們的需求，文字內容盡量放在 Gif 之外，單獨顯示，并且避免頻繁的閃爍效果。

　　不斷移動(dòng)的 Gif圖會(huì )很大程度上轉移用戶(hù)的注意力，在一屏當中使用多個(gè) Gif圖的時(shí)候，尤其要注意這一點(diǎn)。如果有大量文本內容的時(shí)候，Gif圖中的色彩和特效盡量控制數量，因為它們可能會(huì )過(guò)多抓取用戶(hù)注意力。

　　避免 Gif圖自動(dòng)播放，這樣讓用戶(hù)感到可控，并且可以節省流量。

　　5、借助故事板來(lái)梳理Gif圖的內容

　　很多時(shí)候，Gif圖本身的簡(jiǎn)單形態(tài)使得它看起來(lái)不復雜，但是這其實(shí)使得很多設計師因此而出錯。通常，Gif圖本身迷人之處就是在于它的故事性，即使再短，它當中也包含著(zhù)敘事，故事性，甚至復雜的轉折和多變的轉場(chǎng)。

　　基本的故事變化和元素，這些是 Gif圖制作的基礎。在設計動(dòng)畫(huà)的時(shí)候，我們很容易忘記這些東西，借助故事板，可以幫你更好地梳理故事的走向，鏡頭的變化，情節的走向，值得注意的關(guān)鍵情節和轉折。

　　尤其是當你不是一個(gè)人來(lái)制作 Gif圖的時(shí)候，整個(gè)團隊可以借助故事板，將進(jìn)度統一起來(lái)，極大的改善溝通和統一的問(wèn)題，加快創(chuàng )作過(guò)程。

　　6、如果你使用PS來(lái)制作Gif圖，請務(wù)必保持整潔簡(jiǎn)練

　　在設計 Gif圖的時(shí)候，很多設計師會(huì )選擇使用 PS 來(lái)制作。一方面是足夠習慣，足夠順手，但是另外一方面，PS 本身的圖層管理和制作機制還是很容易導致混亂的。

　　PS 中元素和圖層管理需要兼顧的太多，以至于在制作 Gif圖的時(shí)候，稍微增刪或者移動(dòng)一些內容，就很容易輸出一個(gè)不理想、不可控的 Gif圖。

　　同時(shí)，如果沒(méi)有正確地標注圖層，之后又進(jìn)行了相對復雜的操作之后，很容易導致多米諾骨牌一樣的錯誤。更令人頭疼的是，修改一個(gè)地方之后，后續很多圖層都需要進(jìn)行調整和修改，最終會(huì )帶來(lái)大量的重復性的工作。

　　所以，在 PS 中制作 Gif圖，要盡量保持整潔，條理清晰。

　　7、增加創(chuàng )意元素，并保持循環(huán)

　　Gif圖在絕大多數情況下會(huì )自動(dòng)循環(huán)播放，而用戶(hù)很多時(shí)候也樂(lè )于長(cháng)時(shí)間的循環(huán)觀(guān)看，但是想要讓它平滑自然地循環(huán)并非易事。

　　如果你想讓 Gif圖中保持循環(huán)，那么我建議你盡量從一個(gè)簡(jiǎn)單的設計元素入手，比如幾何形狀之類(lèi)的東西。這樣可以更容易進(jìn)行首尾位置的匹配。

　　在 Gif圖當中創(chuàng )建循環(huán)很大程度是希望留住用戶(hù)，因為任何不協(xié)調和錯位都會(huì )讓人注意到，不夠完美不夠平滑，就會(huì )讓用戶(hù)感到跳出感，從而移開(kāi)注意力。而這種要求，也意味著(zhù)設計師要注意每一幀的設計。

　　當然，努力的最終結果是值得的!

　　8、運動(dòng)狀態(tài)要保持模糊效果

　　Gif圖當中的模糊效果，其實(shí)和老式相機中的運動(dòng)抓拍效果是一致的，很多處于中間態(tài)的運動(dòng)，其實(shí)是不那么清晰的。而這一點(diǎn)和我們的視覺(jué)是保持一致的。如今相機的成像質(zhì)量越來(lái)越高，但是我們的眼睛并沒(méi)有隨之快速的進(jìn)化。

　　在 Gif圖當中，幀數通常不會(huì )太高，如果圖片的細節始終保持清晰則容易呈現出跳幀，運動(dòng)狀態(tài)的物體適當保持模糊效果，則更接近我們日常觀(guān)察的細節，從而讓 Gif圖帶來(lái)接近視頻拍攝的效果，用戶(hù)也會(huì )因此感到真實(shí)和精彩。

　　9、Gif圖要盡可能小

　　如你所知，社交媒體、博客、網(wǎng)站、電子郵件，甚至APP 都是 Gif 使用大戶(hù)，Gif圖片已經(jīng)深入到我們生活的方方面面。但是不同地方的圖片規格不同，使用場(chǎng)景也不一樣，因此，Gif 需要足夠小才能兼容不同的需求。下面是一些幫你縮小 Gif圖尺寸的方法：

　　盡量讓 Gif圖的幀數保持在 150 幀以?xún)?，否則在很多地方都會(huì )被限制，因為太大了。

　　導出 Gif圖的時(shí)候，請將有損壓縮設置在5~ 10 之間，這樣將更大程度的壓縮最終的圖片尺寸。你可以多加嘗試，盡量尋找質(zhì)量和尺寸上的平衡點(diǎn)。

　　使用盡量少的顏色。這不僅僅是出于設計的考慮，更少的色彩能夠很大程度上降低文件的大小，意味著(zhù) Gif圖可以更小，或者持續時(shí)間更長(cháng)，加載更快。

　　盡量避免漸變。透明度是開(kāi)啟還是關(guān)閉會(huì )直接影響到 Gif圖的大小，如果想要確保文件不那么大，盡量避免吧。

　　10、針對移動(dòng)端設備進(jìn)行設計

　　這個(gè)注意事項其實(shí)你也應該早有預料?，F如今的用戶(hù)絕大多數的時(shí)間都消耗在移動(dòng)端的小屏幕上了。

　　在設計的時(shí)候，注意使用更小的視覺(jué)元素，避免智能手機用戶(hù)信息過(guò)載。另一方面，如果某些元素需要更加吸引用戶(hù)的注意力，可以使用更加大膽的顏色，或者借助動(dòng)畫(huà)效果，都是可以的。

　　同時(shí)，考慮到社交媒體上圖片素材的展現形式，可以盡量把 Gif圖設計成為方形的，這樣可以更好的兼容不同的屏幕和不同的平臺，同時(shí)也方便裁切。

　　結語(yǔ)

　　Gif圖在設計和創(chuàng )作上都非常有趣，但是它也有很多需要注意的問(wèn)題和相應的技巧，幸運的是，它們并沒(méi)有超出設計師的技能范疇。借助這些原則，相信你能設計出更加優(yōu)秀的 Gif圖。
　?。?a href="http://www.lsbmaoyi.com">邯鄲網(wǎng)絡(luò )公司）