如何讓介面中的動畫設計較容易被實現?

animatio

一般而言設計師交接給工程師製作時,除了輸出的圖檔之外還會有一份設計文件,用來交代畫面上的間距、文字、顏色等等資訊,有很多文章都在講解如何寫一份好的設計文件,例如這一篇

隨者設計發展,動畫的重要性也逐漸受到重視,設計大舌頭也特別寫了一篇文章說明動畫效果的重要性: 2015 動畫效果會是介面設計的趨勢嗎?。然而動畫效果較不容易用設計文件說明。

通常設計師會透由原型(prototype)來表達動畫效果,運用像 After Effect、Framer.js、Origami 等等工具製作,但這些工具的產出大多是展示用途,工程師不太能夠直接拿來用, 於是工程師看完設計的動畫之後,還必須自己再用程式寫出那樣的效果。這樣的流程常常會有工程師看到原型後說動畫太複雜做不到,或需要花太多資源去做,以及做出的動畫效果跟原型展示不一致的情況發生。

用程式思維做動畫

要如何讓所設計的動畫較容易實現呢?最好的方式就是設計師能夠懂得程式語法,直接用程式做動畫,再產出程式給工程師整合至程式中,既省工、事後又不用麻煩工程師微調。但術業有專攻,設計師大多沒有點選程式的技能,一般團隊當中不太能夠這樣做。

這時候要能銜接設計師和工程師,或許可以從 “先設計動畫再尋找實現方法” 的流程,改變成 “先尋找能用的程式再設計動畫”

舉例來說,以網頁而言動畫通常以 CSS 和 Javascript 實現。網路上已經有很多插件(plugin)可以用,設計師會用到的動畫效果大多都已經涵蓋,其中這些插件不乏有許多有提供範例網頁讓人測試效果,設計師在進行動畫設計前或許可以先找找一些既有的插件,說不定就能找到適合使用的。以下介紹三種能夠預覽動畫產出的插件網頁。


Bounce.js

介面中的動畫設計 Bounce.js

這個插件支援 Javascript 寫法也能直接產出 CSS 使用,它可以做出可愛的彈跳/果凍效果,也可以用延遲(delay)串接動畫,並支援動畫時間(duration)和彈跳次數(bounces),以及有四種客製化的動畫執行速度(easing),以下用 bounce.js 做出來的例子。按這裡玩玩看例子,或者可以連進 bounce.js網站客製自己的動畫。


Animate.css

這是一個純 CSS 的插件,它有充足的動畫樣本可以使用,足以達成大多數的動畫效果,也可以設定動畫時間(duration)和撥放次數。
介面中的動畫設計 animatecss


CSS3 Keyframes Animation Generator

這個網站可以產生 CSS 動畫,參數多、自由度大,想要實現較複雜的效果可以參考。以下是用它所產生的例子,或進也可以連進網站自己客製化動畫。

介面中的動畫設計 shake


設計師要怎麼試用這些套件呢?

套用的方法很簡單,以 CSS3 Keyframes Animation Generator 來說,在網站上調整出自己想要的效果之後,其實就可以將 CSS 交接給程式人員了。如果設計師自己想要看看效果用在自己的作品上如何,只要會基本的 html和 css也辦的到。假設想將效果套用到一顆按鈕上,首先將網站生成的 CSS 複製下來,然後 CSS class 名稱再加上 active 和 focus,讓它在按下去後才啟動動畫,之後在 html 裡加上這個 class,例如 <button class=”element-animation”> 按我! </button> 就大功告成了。

3


哪種團隊適合這樣的做法?

用插件去設計動畫多少會限制創意發展,如果程式人員願意配合開發新創意,溝通無礙,那設計師盡情用所熟悉的工具表達動畫設計也無妨。但如果在開發時間緊湊、程式人員配合度不高、組織及階層龐大等情況之下,或許也可以參考這樣的做法。

這樣的做法有何限制呢?

1. 插件不適用或過於龐大:不同專案會有不同的系統,不見得所有插件都能夠使用,再者有一些插件過於龐大會影響效能,因此設計師在使用前務必要跟程式人員討論。

2. 手持裝置App動畫怎麼辦?: 不像網路環境有這麼多範例可以使用,App 必須多少懂一些原生程式才能設計動畫。網路上有一些不錯的資源教導設計師如何設計手持裝置的動畫,iOS 方面例如 Meng To 出的網路書 Design+Code

3. 轉場動畫怎麼辦?:多數插件只針對頁面中的物件做效果,但如果是頁面/元件之間的轉場動畫,可能就需要客製化去撰寫程式了。當然網路上仍有很多轉場動畫插件可以使用,設計師可以去 Codepen 或 freebiesbug 逛逛尋找靈感。

 

設計與程式間的距離逐漸縮小,程式人員必須注意使用者體驗才能設計好產品,而設計人員也要能夠了解到程式的運作與限制,所做出的設計才不至於在天上飛。例如以動畫設計來看,設計師或多或少都需要懂得一些程式原理,設計師交給工程師的東西才能順利被實作。隨者設計的發展,設計與程式間的界線會越來越模糊,設計師只要學習適當的工具,做出的產品也會越來越好。

 

如何讓介面中的動畫設計較容易被實現?

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

訂閱設計大舌頭

隨時關注第一手 UX、UI、科技、設計新知

Facebook
LinkedIn
Telegram
Twitter