在(zài)制作 GIF 圖片的(de)時(shí)候，這(zhè)10個(gè)注意事項幫你做得更好

這(zhè)是(shì)一(yī / yì ／yí)個(gè)什麽都在(zài)變快的(de)時(shí)代。在(zài)互聯網上(shàng)，一(yī / yì ／yí)切都開始動起來(lái)，短視頻開始流行，而(ér) Gif圖早就(jiù)已經像病毒一(yī / yì ／yí)樣占據了(le／liǎo)網絡的(de)每個(gè)角落。用戶用 Gif圖來(lái)傳達信息，來(lái)表達情緒，甚至記錄生活。怎麽能不(bù)愛 Gif圖呢？

但是(shì)就(jiù)和(hé / huò)所有的(de)好東西一(yī / yì ／yí)樣，優質的(de) Gif圖從來(lái)都不(bù)是(shì)輕易得來(lái)。無論是(shì)制造動态的(de) UI界面，還是(shì)有趣的(de)表情，又或者是(shì)好玩兒的(de)動态小插畫，想要(yào / yāo)确保它足夠吸引用戶，讓人(rén)感覺對味，還足夠小，這(zhè)并不(bù)是(shì)一(yī / yì ／yí)件簡單的(de)事情。

不(bù)過，不(bù)用擔心，設計一(yī / yì ／yí)個(gè)稱職的(de) Gif圖是(shì)有技巧的(de)，接下來(lái)，分享的(de) 10 個(gè)技巧，能讓你的(de) Gif圖設計得更優秀。

1、不(bù)要(yào / yāo)提供多餘無效的(de)内容

雖然設計師會在(zài)自己所熱愛的(de)項目中投入更多，但是(shì)在(zài)做 Gif動态圖的(de)時(shí)候，在(zài)傳達信息的(de)同時(shí)，要(yào / yāo)盡量簡化其中的(de)内容，一(yī / yì ／yí)般而(ér)言，更少的(de)信息能夠讓你在(zài)制作動畫的(de)時(shí)候獲得更多的(de)自由和(hé / huò)可能性！

一(yī / yì ／yí)定要(yào / yāo)克制住加入大(dà)量内容的(de)沖動。用戶在(zài)觀看你的(de) Gif圖的(de)時(shí)候，很容易被過多的(de)内容所淹沒，尤其是(shì)當你想要(yào / yāo)借助 Gif圖來(lái)傳達特定的(de)情緒和(hé / huò)感受的(de)時(shí)候，多餘的(de)色彩和(hé / huò)内容很容易弱化它們。

不(bù)要(yào / yāo)過度設計。圍繞着核心的(de)元素和(hé / huò)調色闆來(lái)設計，讓它們足夠獨特和(hé / huò)誘人(rén)。

2、在(zài)Gif圖中建立一(yī / yì ／yí)緻的(de)視覺

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

你可以(yǐ)在(zài)設計的(de)時(shí)候使用品牌的(de)配色來(lái)對它進行設計，将品牌的(de)形象、LOGO和(hé / huò)其他(tā)元素在(zài) Gif圖中呈現，讓品牌、企業和(hé / huò)産品以(yǐ)更加富有活力的(de)方式呈現出(chū)來(lái)。

而(ér)用戶則能夠借助這(zhè)些元素，來(lái)和(hé / huò)品牌本身産生關聯。在(zài)特定的(de)情形和(hé / huò)需求之(zhī)下，Gif圖能夠幫助用戶了(le／liǎo)解産品的(de)功能和(hé / huò)其他(tā)的(de)信息，而(ér)品牌化的(de)配色則能夠強化這(zhè)種關聯。

比如 GE 就(jiù)在(zài) Gif圖當中提供了(le／liǎo)非常值得期待的(de)氛圍，在(zài)官方的(de) Tumblr 當中分享這(zhè)些有趣的(de) Gif 圖，展示 GE 在(zài)科學和(hé / huò)機械設計上(shàng)的(de)造詣。借助 #badassmachines 這(zhè)樣的(de)标簽，讓他(tā)們在(zài)社交媒體上(shàng)進行更有效的(de)傳播。

3、删除Gif圖中所有的(de)額外幀

當你在(zài)設計 Gif圖的(de)時(shí)候，無論你使用哪種類型的(de)動畫，Gif圖中，總會有某些時(shí)刻是(shì)狀态停止的(de)，創建好 Gif圖之(zhī)後，應該通過調整，删除掉額外的(de)、停止不(bù)同的(de)幀。

删除額外的(de)幀，僅保留其中一(yī / yì ／yí)幀，并根據動畫的(de)狀态和(hé / huò)節奏來(lái)調整該幀的(de)時(shí)長，可以(yǐ)縮減 Gif圖的(de)大(dà)小和(hé / huò)播放時(shí)候的(de)壓力。

這(zhè)樣的(de)調整不(bù)僅能夠讓 Gif圖整體質量保持不(bù)變，而(ér)且同時(shí)可以(yǐ)減少不(bù)必要(yào / yāo)的(de)空間占用。

4、在(zài)上(shàng)傳Gif圖的(de)時(shí)候，保持良好的(de)可訪問性

作爲(wéi / wèi)設計師，你應該熟悉用戶群體，并且将 Gif圖中可能會分散精力的(de)視覺内容給去掉。

最典型的(de)，如果你所面對的(de)用戶群體當中有視力障礙并且使用屏幕閱讀功能或者癫痫患者，那麽盡量兼顧到(dào)他(tā)們的(de)需求，文字内容盡量放在(zài) Gif 之(zhī)外，單獨顯示，并且避免頻繁的(de)閃爍效果。

不(bù)斷移動的(de) Gif圖會很大(dà)程度上(shàng)轉移用戶的(de)注意力，在(zài)一(yī / yì ／yí)屏當中使用多個(gè) Gif圖的(de)時(shí)候，尤其要(yào / yāo)注意這(zhè)一(yī / yì ／yí)點。如果有大(dà)量文本内容的(de)時(shí)候，Gif圖中的(de)色彩和(hé / huò)特效盡量控制數量，因爲(wéi / wèi)它們可能會過多抓取用戶注意力。

避免 Gif圖自動播放，這(zhè)樣讓用戶感到(dào)可控，并且可以(yǐ)節省流量。

5、借助故事闆來(lái)梳理Gif圖的(de)内容

很多時(shí)候，Gif圖本身的(de)簡單形态使得它看起來(lái)不(bù)複雜，但是(shì)這(zhè)其實使得很多設計師因此而(ér)出(chū)錯。通常，Gif圖本身迷人(rén)之(zhī)處就(jiù)是(shì)在(zài)于(yú)它的(de)故事性，即使再短，它當中也(yě)包含着叙事，故事性，甚至複雜的(de)轉折和(hé / huò)多變的(de)轉場。

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

尤其是(shì)當你不(bù)是(shì)一(yī / yì ／yí)個(gè)人(rén)來(lái)制作 Gif圖的(de)時(shí)候，整個(gè)團隊可以(yǐ)借助故事闆，将進度統一(yī / yì ／yí)起來(lái)，極大(dà)的(de)改善溝通和(hé / huò)統一(yī / yì ／yí)的(de)問題，加快創作過程。

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

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

PS 中元素和(hé / huò)圖層管理需要(yào / yāo)兼顧的(de)太多，以(yǐ)至于(yú)在(zài)制作 Gif圖的(de)時(shí)候，稍微增删或者移動一(yī / yì ／yí)些内容，就(jiù)很容易輸出(chū)一(yī / yì ／yí)個(gè)不(bù)理想、不(bù)可控的(de) Gif圖。

同時(shí)，如果沒有正确地(dì / de)标注圖層，之(zhī)後又進行了(le／liǎo)相對複雜的(de)操作之(zhī)後，很容易導緻多米諾骨牌一(yī / yì ／yí)樣的(de)錯誤。更令人(rén)頭疼的(de)是(shì)，修改一(yī / yì ／yí)個(gè)地(dì / de)方之(zhī)後，後續很多圖層都需要(yào / yāo)進行調整和(hé / huò)修改，最終會帶來(lái)大(dà)量的(de)重複性的(de)工作。

所以(yǐ)，在(zài) PS 中制作 Gif圖，要(yào / yāo)盡量保持整潔，條理清晰。

7、增加創意元素，并保持循環

Gif圖在(zài)絕大(dà)多數情況下會自動循環播放，而(ér)用戶很多時(shí)候也(yě)樂于(yú)長時(shí)間的(de)循環觀看，但是(shì)想要(yào / yāo)讓它平滑自然地(dì / de)循環并非易事。

如果你想讓 Gif圖中保持循環，那麽我建議你盡量從一(yī / yì ／yí)個(gè)簡單的(de)設計元素入手，比如幾何形狀之(zhī)類的(de)東西。這(zhè)樣可以(yǐ)更容易進行首尾位置的(de)匹配。

在(zài) Gif圖當中創建循環很大(dà)程度是(shì)希望留住用戶，因爲(wéi / wèi)任何不(bù)協調和(hé / huò)錯位都會讓人(rén)注意到(dào)，不(bù)夠完美不(bù)夠平滑，就(jiù)會讓用戶感到(dào)跳出(chū)感，從而(ér)移開注意力。而(ér)這(zhè)種要(yào / yāo)求，也(yě)意味着設計師要(yào / yāo)注意每一(yī / yì ／yí)幀的(de)設計。

當然，努力的(de)最終結果是(shì)值得的(de)！

8、運動狀态要(yào / yāo)保持模糊效果

Gif圖當中的(de)模糊效果，其實和(hé / huò)老式相機中的(de)運動抓拍效果是(shì)一(yī / yì ／yí)緻的(de)，很多處于(yú)中間态的(de)運動，其實是(shì)不(bù)那麽清晰的(de)。而(ér)這(zhè)一(yī / yì ／yí)點和(hé / huò)我們的(de)視覺是(shì)保持一(yī / yì ／yí)緻的(de)。如今相機的(de)成像質量越來(lái)越高，但是(shì)我們的(de)眼睛并沒有随之(zhī)快速的(de)進化。

在(zài) Gif圖當中，幀數通常不(bù)會太高，如果圖片的(de)細節始終保持清晰則容易呈現出(chū)跳幀，運動狀态的(de)物體适當保持模糊效果，則更接近我們日常觀察的(de)細節，從而(ér)讓 Gif圖帶來(lái)接近視頻拍攝的(de)效果，用戶也(yě)會因此感到(dào)真實和(hé / huò)精彩。

9、Gif圖要(yào / yāo)盡可能小

如你所知，社交媒體、博客、網站、電子(zǐ)郵件，甚至APP 都是(shì) Gif 使用大(dà)戶，Gif圖片已經深入到(dào)我們生活的(de)方方面面。但是(shì)不(bù)同地(dì / de)方的(de)圖片規格不(bù)同，使用場景也(yě)不(bù)一(yī / yì ／yí)樣，因此，Gif 需要(yào / yāo)足夠小才能兼容不(bù)同的(de)需求。下面是(shì)一(yī / yì ／yí)些幫你縮小 Gif圖尺寸的(de)方法：

盡量讓 Gif圖的(de)幀數保持在(zài) 150 幀以(yǐ)内，否則在(zài)很多地(dì / de)方都會被限制，因爲(wéi / wèi)太大(dà)了(le／liǎo)。

導出(chū) Gif圖的(de)時(shí)候，請将有損壓縮設置在(zài)5~ 10 之(zhī)間，這(zhè)樣将更大(dà)程度的(de)壓縮最終的(de)圖片尺寸。你可以(yǐ)多加嘗試，盡量尋找質量和(hé / huò)尺寸上(shàng)的(de)平衡點。

使用盡量少的(de)顔色。這(zhè)不(bù)僅僅是(shì)出(chū)于(yú)設計的(de)考慮，更少的(de)色彩能夠很大(dà)程度上(shàng)降低文件的(de)大(dà)小，意味着 Gif圖可以(yǐ)更小，或者持續時(shí)間更長，加載更快。

盡量避免漸變。透明度是(shì)開啓還是(shì)關閉會直接影響到(dào) Gif圖的(de)大(dà)小，如果想要(yào / yāo)确保文件不(bù)那麽大(dà)，盡量避免吧。

10、針對移動端設備進行設計

這(zhè)個(gè)注意事項其實你也(yě)應該早有預料。現如今的(de)用戶絕大(dà)多數的(de)時(shí)間都消耗在(zài)移動端的(de)小屏幕上(shàng)了(le／liǎo)。

在(zài)設計的(de)時(shí)候，注意使用更小的(de)視覺元素，避免智能手機用戶信息過載。另一(yī / yì ／yí)方面，如果某些元素需要(yào / yāo)更加吸引用戶的(de)注意力，可以(yǐ)使用更加大(dà)膽的(de)顔色，或者借助動畫效果，都是(shì)可以(yǐ)的(de)。

同時(shí)，考慮到(dào)社交媒體上(shàng)圖片素材的(de)展現形式，可以(yǐ)盡量把 Gif圖設計成爲(wéi / wèi)方形的(de)，這(zhè)樣可以(yǐ)更好的(de)兼容不(bù)同的(de)屏幕和(hé / huò)不(bù)同的(de)平台，同時(shí)也(yě)方便裁切。

結語

Gif圖在(zài)設計和(hé / huò)創作上(shàng)都非常有趣，但是(shì)它也(yě)有很多需要(yào / yāo)注意的(de)問題和(hé / huò)相應的(de)技巧，幸運的(de)是(shì)，它們并沒有超出(chū)設計師的(de)技能範疇。借助這(zhè)些原則，相信你能設計出(chū)更加優秀的(de) Gif圖。