瘋狂流行的動(dòng)效！究竟是交互設(shè)計(jì)還是視覺(jué)設(shè)計(jì)？

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

在很多外行人眼中，看到一個(gè)App動(dòng)畫不錯(cuò)，往往脫口而出的是“哇，這個(gè)App交互好棒！”。或者老板覺(jué)得產(chǎn)品太死板了，會(huì)對(duì)著大家說(shuō)“我們的產(chǎn)品交互還需要再打磨一下”。其實(shí)從嚴(yán)格意義上來(lái)說(shuō)，動(dòng)效作為交互反饋的一部分也屬于交互設(shè)計(jì)的范疇，但是大部分交互設(shè)計(jì)師既沒(méi)有動(dòng)效設(shè)計(jì)的能力，也一般不會(huì)去做這種事情，而現(xiàn)在努力學(xué)習(xí)動(dòng)效的往往又是那些視覺(jué)大牛們。那做動(dòng)效設(shè)計(jì)的工作流程到底是如何開展的呢？

要了解這個(gè)問(wèn)題，我們先要看動(dòng)效設(shè)計(jì)的目的是什么？

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

早期互聯(lián)網(wǎng)產(chǎn)品動(dòng)畫較少時(shí)，大部分動(dòng)效都是為了解決某個(gè)具體的交互問(wèn)題而存在的，有很強(qiáng)的目標(biāo)性。比如iOS上book的翻頁(yè)效果，因?yàn)橛脩魧?duì)手勢(shì)翻頁(yè)沒(méi)有很好的認(rèn)知也不會(huì)很快適應(yīng)，所以需要模擬真實(shí)的翻書效果讓用戶適應(yīng)。

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

2，讓界面更靈動(dòng)活潑

因?yàn)楝F(xiàn)在越來(lái)越流行扁平化，所以設(shè)計(jì)師都開始用更簡(jiǎn)單的元素盡量去突出內(nèi)容。但是如果只是純粹的扁平的話就未免有點(diǎn)太粗糙了，給人一種界面很死板、沒(méi)怎么設(shè)計(jì)的感覺(jué)。所以為了泥補(bǔ)這個(gè)問(wèn)題，動(dòng)效可以讓扁平的界面更活潑起來(lái)。

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

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

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

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

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

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

附：

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

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