設計動態GIFs：給ui設計師的入門指南
原文出處： www.justinmind.com on March 29, 2018.已經作者同意翻譯轉載。
GIFs製作簡單、分享起來好玩， 是一個和觀眾溝通的好方法！以下是如何製作動態GIFs的方式。
無論你是不是把GIF 發音成 “ jif ” 都沒有關係！你一定在網路上到處都見過它們～
他們在Buzzfeed的文章中，讓你讀到三更半夜；他們充斥在從美妝到金融各種類型的部落格中；他們在社群媒體中稱霸，連在使用教學教程裡也能看見它們的蹤影。
他們受歡迎到可以說是網頁的語言。
GIFs改變了我們的線上溝通方式，且在形塑二十一世紀的文化中扮演了重大角色。
除了取得一份入門指南，還有其他對謙卑的GIF表達敬意更好的方法嗎？在這篇文章中，Justinmind將會解釋如何設計動態GIFs，包含一點點歷史和在設計過程中充分利用他們的一些訣竅和技巧。
什麼是GIF？
GIF，正式名稱是圖形互換格式，是一段短的動態圖像。他們是大概在三十年前（真假，那麼久？）由電腦科學家和全能天才Steve Wilhite創造出來。
GIFs其實只是被剪輯的圖像集結在一起並在你的瀏覽器裡重複播放。他們被廣泛使用且受歡迎的原因是因為檔案尺寸相對較小。
小尺寸是很好用的，因為他們不需要花一輩子的時間下載，就算你的數據機正忙著發出奇怪的撥號聲。
為什麼要使用GIFs？
除了GIF能用在任何一個場合以外，使用GIFs更是一個促進參與的方式。 他們不需要任何解釋或增加訊息就足以說一個故事。
考慮在你的行銷和設計中使用GIFs，因為他們能夠：
- 為你的訊息提供額外的脈絡
- 展示你的個性（每個人都有自己喜歡的GIFs…對嗎？）
- 告訴人們你掌握到網路文化的脈動
是什麼造就了一個好的動畫GIFs？
坦白說，GIFs就是讚。他有效地連結你的觀眾，有娛樂效果又能傳送訊息。GIF簡短、迅速、切中要點，在線上溝通中，是一個強大的利器！
但是，如何能把一個動態GIFs設計好呢？這裡有一些提示能讓你做出成功的GIFs：
- 好的GIFs有高解析度，沒有人喜歡顆粒感
- 保持小尺寸檔案，有些網頁會有尺寸限制
- 保持低幀率以維持平滑
- 長度大約2~4秒，這不是短片
四個讓創造GIFs 更容易的工具
純手動做一個GIF並不難，事實上，無論你想在APP中或網頁中使用，都有一些方法可以讓你自己製作，這邊提供一些受歡迎的工具讓你開始你的GIF製作之旅：
Gifs.com
簡潔介面和直覺的使用方式，Gifs讓你從你喜歡的網頁現有的內容創造Gifs。且支援YouTube, Vine 和 Facebook videos，你只需要複製網址就可以達成你要的。
Giphy.com
我們常用Giphy，他是一個GIFs的搜尋引擎，如果你心中已有預想的GIF，那你大概都能在Giphy找到，如果沒有，恩～那它也很好用，且你一做完自己的GIF就能立刻分享。
And then I was like
使用你的網路攝影機創造一些原創內容放到And then I was like上，這個網站可以讓你成為明日之星。想想把自拍提高一個層次…
RecordIt
如果你的展品中有你想展示的特點，RecordIt是一個很好的選擇。RecordIt會紀錄你在螢幕上選取的部分，讓你可以按自己的需求去編輯。RecordIt的教程容易理解，讓你能立刻成為GIFs大師。
製作你自己的動態GIFs
如果你自製 GIF而不依靠上述工具，你也可以使用Adobe Photoshop，令人驚嘆的Photoshop可讓你在幾分鐘內製作你自己的GIFs。
拍攝一個影像並從中製作GIF是很常見的，你可以用上述的RecordIt或SceenFlow（另外一個擷取螢幕的APP，有動畫工具供你利用）。
Photoshop所做的就是將一系列照片做成一個迴圈，你也能在Photoshop中從一個短片製作出一個GIF。
有興趣嘗試可以參考這篇Adobe的教程。
在你的互動原型中置入GIFs
當要製作你的彈出原型時，你可以利用Justinmind將 動態GIFs嵌入到你的互動原型中。
自製GIFs時，你使用你選擇的軟體（提示：使用上述工具），並且製作一個靜態的GIF當做第一屏，顯示到有事件被觸發為止。
然後在UI的元件上設定一個事件，元件將會觸發動畫播放，你要利用一個設定值事件、選擇你的影像，然後設定影像路徑去使用你的動畫GIF。
結論
GIFs是一個在線上展示個性、傳達訊息或是製造一點趣味的好方法。他們能夠增進你的行銷溝通並且人性化你的品牌。今天就開始使用上述工具製作屬於你自己的GIFs，很快你就能成為專家了！
Originally published at www.justinmind.com on March 29, 2018.
