@可風f?（金山網(wǎng)絡(luò)交互設(shè)計師）：自從iOS7發(fā)布后UI圈就開始瘋狂流行起動畫效果，尤其是在Facebook Home之后，大家覺得如果沒有酷炫轉(zhuǎn)場、扭來扭去元素，產(chǎn)品就好像上個世紀的老古董一樣。但是讓整個圈子爭相學習的風尚背后卻還仍然有一個爭議：動效是交互設(shè)計還是視覺設(shè)計？

在很多外行人眼中，看到一個App動畫不錯，往往脫口而出的是“哇，這個App交互好棒！”?；蛘呃习逵X得產(chǎn)品太死板了，會對著大家說“我們的產(chǎn)品交互還需要再打磨一下”。其實從嚴格意義上來說，動效作為交互反饋的一部分也屬于交互設(shè)計的范疇，但是大部分交互設(shè)計師既沒有動效設(shè)計的能力，也一般不會去做這種事情，而現(xiàn)在努力學習動效的往往又是那些視覺大牛們。那做動效設(shè)計的工作流程到底是如何開展的呢？

要了解這個問題，我們先要看動效設(shè)計的目的是什么？

1，在用戶體驗上為了達到某種目標的引導(dǎo)

早期互聯(lián)網(wǎng)產(chǎn)品動畫較少時，大部分動效都是為了解決某個具體的交互問題而存在的，有很強的目標性。比如iOS上book的翻頁效果，因為用戶對手勢翻頁沒有很好的認知也不會很快適應(yīng)，所以需要模擬真實的翻書效果讓用戶適應(yīng)。

又或者在Safari下載文件后，文件的進度和管理會在Dock的下載文件夾下，用戶不容易發(fā)現(xiàn)和注意到，這時會有一個圖標飛入到下載文件夾的動畫，告訴用戶下載的文件已經(jīng)到這里了。

2，讓界面更靈動活潑

因為現(xiàn)在越來越流行扁平化，所以設(shè)計師都開始用更簡單的元素盡量去突出內(nèi)容。但是如果只是純粹的扁平的話就未免有點太粗糙了，給人一種界面很死板、沒怎么設(shè)計的感覺。所以為了泥補這個問題，動效可以讓扁平的界面更活潑起來。

比如Skype將普通的菜單彈出過程加上了果凍效果，讓整個界面可愛了許多。類似于這樣的動效有很多其實只是為了好看而制作的，他們屬于視覺設(shè)計的部分，是為了讓界面視覺更優(yōu)秀。

所以可以看出動效即兼顧了交互的功能性，還具有美觀性的特征，應(yīng)該是交互設(shè)計師和視覺設(shè)計師互相合作的結(jié)果。

我們團隊在具體開展動效設(shè)計的過程中，交互設(shè)計師會扮演導(dǎo)演的角色，視覺設(shè)計師扮演攝影師的角色。在設(shè)計動效時，交互設(shè)計師要先想明白動效所能解決的問題是什么，需要應(yīng)用在什么場景下，以及把控動效的實現(xiàn)自然柔和不要過度。而視覺設(shè)計師不但要負責動效的制作，還會根據(jù)產(chǎn)品的特點加上很多風格化的效果。

交互設(shè)計師并不是動效的制作者，相比較而言視覺設(shè)計師不但更方便修改產(chǎn)品的素材，而且對產(chǎn)品的視覺把控能力也更強一些，所以更適合成為制作者。所以我覺得交互設(shè)計師要多了解動效的實現(xiàn)原理，學會運用動效解決問題，思考動效的概念。但是鼓勵視覺設(shè)計師盡量多的掌握動效制作技術(shù)，讓自己的效果圖動起來。

視覺設(shè)計師在動效設(shè)計上需要交互設(shè)計師的把控，避免成為花瓶。和界面一樣，動效在實現(xiàn)過程中也會影響到用戶體驗，比如過渡的并不自然，或者雖然很好看但是太花哨反而影響信息的閱讀等，這些都可以讓交互設(shè)計師幫忙check一下。

最后希望各位UI和UE同學，在面對新的流行趨勢下能夠更多的理解和認識它，不盲從，一起探索更好的工作方法。

附：

動效有多炫？看《最近這個超火！23個FACEBOOK PAPER中的設(shè)計細節(jié)》，多圖殺貓，手機慎入。

原文地址：zhuanlan.zhihu
作者：@可風f

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量72萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：