優(yōu)秀 Motion 設(shè)計的9條設(shè)計原則

人們對Motion動畫效果有天然喜好度，這是其能在互聯(lián)網(wǎng)上迅速傳播的基礎(chǔ)，因為真的深受用戶喜愛。這些動圖易于理解，卻又能在幾秒鐘內(nèi)傳達出極具影響力的信息。 類似像星巴克這樣的品牌之所以在社交媒體上使用了很多 GIF，是因為人們傾向于與它們互動——這種內(nèi)容能夠提升互聯(lián)網(wǎng)所有平臺上的用戶參與度，今天一起看一下優(yōu)秀 Motion 設(shè)計的 9 條設(shè)計原則。



1.不要過于復(fù)雜
設(shè)計師在創(chuàng)作過程中沉迷其中是很正常的，尤其是在他們真正熱愛的項目中。但 GIF 設(shè)計可能是一項令人困惑且復(fù)雜的工作。我們建議在傳達信息的同時，盡可能保持設(shè)計簡潔。總而言之，設(shè)計中元素越少，您在動畫制作過程中的自由度就越大！ 

2.建立一致的視覺識別
動圖是向用戶展現(xiàn)品牌形象的絕佳方式。通過制作一部圍繞品牌展開故事的全球最短影片，您的品牌可以成為人們能夠產(chǎn)生共鳴的理想形象。 雖然動效設(shè)計可以有無限可能，但你肯定需要為動效的整體外觀和風格制定一些指導(dǎo)原則。

3.刪除動效設(shè)計中的所有額外幀 

無論你的 GIF 設(shè)計中包含什么類型的動畫，運動都有可能在某個時刻暫停。創(chuàng)建動畫時，請尋找運動中的停頓，并找出動效 中實際上沒有任何動作的幀。 

4.應(yīng)用時考慮可訪問性

作為一名設(shè)計師，您非常清楚用戶可能會被不同類型的視覺內(nèi)容分散注意力——當您設(shè)計 GIF 時，您是在為所有互聯(lián)網(wǎng)用戶進行設(shè)計。 這包括使用屏幕閱讀器或患有癲癇癥的用戶。您可以通過在替代文本中描述您的 GIF 或?qū)㈩l繁的閃爍和閃光降至最低來緩解這些問題。 與視頻類似，GIF 的持續(xù)運動會分散用戶的注意力，如果用戶無法停止，可能會感到沮喪。在同一頁面中添加多個 GIF 時，務(wù)必牢記這一點。如果您的文字內(nèi)容較多，不妨限制 GIF 設(shè)計的顏色和運動幅度，以免文字失去感染力，影響用戶的注意力。

5.使用故事板來保持思路清晰

讓你的動效真正符合網(wǎng)民的審美，它需要一個背景故事。人們錯誤地認為，由于 GIF 的時長很短，任何簡單的動畫都可以。 您將要使用的基礎(chǔ)故事和元素是 GIF 設(shè)計的基石。因此，它們應(yīng)該在實施和構(gòu)思方面放在首位。因此，我們建議您使用故事板來理清各個部分。

6.發(fā)揮創(chuàng)意，打造循環(huán)
設(shè)計一個可以無限循環(huán)播放的 GIF 動圖并非易事。循環(huán)播放的 GIF 的妙處在于，由于循環(huán)之間的過渡流暢，人們可以欣賞更長時間。如果你想在 GIF 中添加循環(huán)，我們建議你從簡單的設(shè)計開始——盡量使用幾何形狀。這樣更容易匹配 GIF 動圖開頭和結(jié)尾的元素位置。 在 GIF 設(shè)計中創(chuàng)建循環(huán)動畫之所以具有挑戰(zhàn)性，是因為一切都必須流暢進行，以至于任何細微的錯誤都會立即引起用戶的注意。這使得沒有完美定位的元素沒有絲毫的回旋余地，這意味著你需要密切關(guān)注 GIF 的每一幀。

7.盡可能包含運動模糊
設(shè)計中的運動模糊最初是為了模仿老式相機，在快速運動時圖像會略微模糊。如今情況已不復(fù)存在，相機已經(jīng)非常先進，我們不再會出現(xiàn)那種模糊，就像我們的眼睛不會模糊我們看到的動作一樣。 在 GIF 設(shè)計中，你仍然需要使用動態(tài)模糊，因為如果不使用，GIF 動圖實際上就是一堆靜態(tài)幀拼湊而成的。這會導(dǎo)致 GIF 動圖看起來搖搖晃晃，不像用戶期望的那樣流暢。動態(tài)模糊可以讓你的 GIF 動圖看起來更自然，幾乎就像用相機拍攝的真實視頻一樣。

8.盡量保持文件大小較小
眾所周知，你的 GIF 設(shè)計幾乎可以在互聯(lián)網(wǎng)上的任何內(nèi)容上使用。社交媒體平臺、博客、網(wǎng)站或電子郵件提供商。這也是它們?nèi)绱擞腥さ脑蛑弧獛缀跞魏稳硕伎梢栽谌魏我惶斓钠聊簧险业剿鼈儭?/p>

盡量將文件的總幀數(shù)保持在 150 以下- 否則，您的 GIF 設(shè)計將因太重而難以上傳到任何最常用的平臺上。 導(dǎo)出 GIF 時，請將損耗設(shè)置為 5 到 10 之間。這將提高文件的壓縮率，因為 GIF 在壓縮過程中可以承受像素損失，而圖像或其他數(shù)據(jù)則不會。請嘗試各種設(shè)置，找到一個既能減小文件大小，又不損壞最終 GIF 設(shè)計的設(shè)置。 盡量減少顏色的使用。這不僅出于設(shè)計方面的考慮，而且添加更多顏色會顯著增加文件大小。顏色越少，GIF 的動畫和時長就越有發(fā)揮空間。 完全避免使用漸變。透明度要么打開，要么關(guān)閉，這意味著你最終會得到一張臟兮兮的圖片，或者一個無法上傳到任何地方的巨型文件。

9.擁有面向移動設(shè)備的
動效設(shè)計時應(yīng)考慮兼容移動端，從大屏幕到小屏幕，人們的體驗發(fā)生了巨大的變化。 當在設(shè)計 GIF 動圖時，盡量使用較小的元素，以免智能手機用戶感到負擔過重。另一個好的做法是，當你想吸引用戶對某個元素的注意力時，使用大膽的顏色，這樣無論用戶使用哪種設(shè)備，動圖都能很好地呈現(xiàn)。 

最后，好的Motion動效設(shè)計時應(yīng)該結(jié)合您的產(chǎn)品/品牌調(diào)性去量身定制，最終可以分成品牌動態(tài)識別部分和系統(tǒng)動畫效果部分，再納入到您的產(chǎn)品動畫庫中，這些專業(yè)及系統(tǒng)性的動效工作可以對您的產(chǎn)品起到深遠的影響。