我們擅長(cháng)商業(yè)策略與用戶(hù)體驗的完美結合。
歡迎瀏覽我們的案例。
這是一個(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.wxlp666.cn">邯鄲網(wǎng)絡(luò )公司)
小米應用商店發(fā)布消息稱(chēng) 持續開(kāi)展“APP 侵害用戶(hù)權益治理”系列行動(dòng) 11:37:04
騰訊云與CSIG成立政企業(yè)務(wù)線(xiàn) 加速數字技術(shù)在實(shí)體經(jīng)濟中的落地和應用 11:34:49
樂(lè )視回應還有400多人 期待新的朋友加入 11:29:25
亞馬遜表示 公司正在將其智能購物車(chē)擴展到馬薩諸塞州的一家全食店 10:18:04
三星在元宇宙平臺推出游戲 玩家可收集原材料制作三星產(chǎn)品 09:57:29
特斯拉加州San Mateo裁減229名員工 永久關(guān)閉該地區分公司 09:53:13