編者按：對(duì)一個(gè)全無(wú)經(jīng)驗(yàn)的動(dòng)效新手而言晶乔，如何制作出「正確」而不是「華麗」的動(dòng)效?今天這篇Medium 上的好文较木，從克制几迄、交互敘述流程蔚龙、一步完成、不是動(dòng)效的錯(cuò)和把握細(xì)節(jié)五個(gè)方面映胁，附上案例分析木羹，幫你學(xué)會(huì)基礎(chǔ)的動(dòng)畫(huà)制作技巧。
首先解孙，我想大家會(huì)有這樣的問(wèn)題：什么是微交互 (micro-interaction)?
來(lái)自 UXPin(一款在線可交互原型制作工具)的 Carrie Cousins 給出了如下定義：“微交互是在交互設(shè)備上的單一交互流程的細(xì)節(jié)優(yōu)化坑填。”
可能不是太容易理解弛姜，那就多看幾遍吧脐瑰。
在進(jìn)入正題之前，有一點(diǎn)我要先聲明一下廷臼，接下來(lái)我要分析的 UI 動(dòng)效都是出自非常牛逼的大神之手蚪黑。我非常尊敬他們和他們的作品，他們非常樂(lè)意分享他們的經(jīng)驗(yàn)和未完成的稿件中剩。不過(guò)在我分析作品的時(shí)候不少設(shè)計(jì)師的態(tài)度都非常差忌穿。這可不是我的風(fēng)格。我都是用嚴(yán)肅的眼光去看待設(shè)計(jì)的结啼，但是會(huì)用娛樂(lè)性的方式表達(dá)我的觀點(diǎn)掠剑。如果我碰巧說(shuō)了些不中聽(tīng)的話，還請(qǐng)多多包涵郊愧。
讓我們開(kāi)始吧!
一朴译、看在手繪板的份上，克制一下自己
設(shè)計(jì)師就像一朵含苞待放的花兒一樣需要精(Jin)心(Qian)的照顧和呵護(hù)属铁，但在設(shè)計(jì)高質(zhì)量的微交互時(shí)眠寿，在你完稿前都充滿著摧殘。
動(dòng)效設(shè)計(jì)是個(gè)嘗試新想法并驗(yàn)收成果的好途徑焦蘑。下面這個(gè)作品出自 Sergey Valiukh(一位在字型盯拱、排版、色彩以及動(dòng)效方面特別牛逼的人)之手，一起來(lái)看看狡逢。
下面我們一幀一幀地來(lái)分析：
1宁舰、首先能最直觀的感受到的是圖片的“3D翻動(dòng)”效果，這在我看來(lái)是完全沒(méi)必要的奢浑，甚至是違法的(開(kāi)個(gè)玩笑蛮艰，只是確保你還在看)。在這個(gè)作品中雀彼，如果把任何一個(gè)多余的動(dòng)效去掉來(lái)簡(jiǎn)潔的表述的話會(huì)是一個(gè)不錯(cuò)的想法壤蚜。
2、其次徊哑，你可能注意到了預(yù)覽流中的圖片是被裁剪過(guò)的仍律，而在編輯界面中是原圖尺寸。在實(shí)際應(yīng)用中這顯然是不可行的实柠。
3水泉、第三點(diǎn)，可以注意到頂部導(dǎo)航欄的圖標(biāo)過(guò)渡的時(shí)間特別特別地長(zhǎng)窒盐。第一次看會(huì)覺(jué)得很棒草则，但是看久了就會(huì)很煩。微交互要迅速蟹漓，要簡(jiǎn)潔炕横，要有明顯地速度變化，持續(xù)時(shí)間最多在300~400毫秒葡粒。
4份殿、看完了這些之后，咱們?cè)賮?lái)看看底部嗽交，這里兩個(gè)圖標(biāo)并不是同時(shí)出現(xiàn)卿嘲，這意味著一個(gè)錯(cuò)誤的交互敘述流程(多余地強(qiáng)調(diào))和理解時(shí)間的延長(zhǎng)。
總結(jié)：
動(dòng)效設(shè)計(jì)時(shí)會(huì)有許許多多這樣的參數(shù)需要考慮夫壁。你需要明確哪些可以用拾枣、哪些不可以用、哪里可以再簡(jiǎn)短盒让、哪里不用花太多精力梅肤，并從中獲取清晰易用的經(jīng)驗(yàn)。這并不是說(shuō)你不能天馬行空加上一些有趣的細(xì)節(jié)邑茄，只是說(shuō)這些細(xì)節(jié)可能會(huì)讓整體顯得很累贅姨蝴。
小技巧：
去掉多余的部分。時(shí)刻提醒自己這些細(xì)節(jié)動(dòng)效是不是保持了簡(jiǎn)潔的微交互肺缕，還是讓交互體驗(yàn)變?cè)懔?
關(guān)鍵詞：
克制
二左医、不要為了效果而犧牲敘述
交互敘述流程(narrative)在用戶體驗(yàn)中非常重要授帕，一部分是因?yàn)檫@與使用者的預(yù)期相關(guān)，連貫的交互敘述流程不會(huì)超出使用者的認(rèn)知負(fù)荷;另一部分是因?yàn)檫@與我們大腦收集和理解信息大致模式相關(guān)炒辉。此外這還與我們的心智模式有關(guān)聯(lián)豪墅∪郑總之黔寇，交互敘述流程很重要。
SrikantShetty(一位強(qiáng)壯的動(dòng)畫(huà)設(shè)計(jì)師)的這個(gè)作品為我們呈現(xiàn)了一個(gè)非痴睹龋“好”的例子缝裤。
看到這個(gè)動(dòng)效的第一感覺(jué)是不是很詭異，以為是在線條上輸入文字颊郎，然而卻彈出了一個(gè)隱藏式的文本框憋飞。這種點(diǎn)按-彈出-輸入的交互敘述流程挺讓人心煩的，或許是想看上去酷炫一點(diǎn)吧姆吭。然而這種交互敘述流程打斷了我們輸入信息時(shí)的預(yù)期流程榛做。我們不得不停下來(lái)去面對(duì)這樣的意外，調(diào)整好心態(tài)后才能繼續(xù)操作内狸。
當(dāng)設(shè)計(jì)師有所“靈感”的時(shí)候多半會(huì)設(shè)計(jì)出這種詭異的交互敘述流程检眯。他們往往會(huì)為了吊炸天的效果下半天功夫，對(duì)交互的核心敘述流程卻不怎么在意昆淡。這么做事實(shí)上讓交互流程看上去像是一團(tuán)糟锰瘸。
好的微交互的敘述流程是清晰且順暢的，看看下面的作品昂灵，順便和上面這幅做個(gè)對(duì)比：
高下立現(xiàn)避凝，交互敘述流程非常的簡(jiǎn)潔和自然。雖然左邊的動(dòng)效有一個(gè)線框彈跳的效果眨补，它卻起到了細(xì)節(jié)優(yōu)化的效果管削，而不是畫(huà)蛇添足。
小技巧：
保持交互敘述流程的簡(jiǎn)潔和順暢撑螺。
關(guān)鍵詞：
交互敘述流程
三佩谣、動(dòng)效如果不能一步完成，那就干脆放棄
幾乎所有出彩的微交互的動(dòng)效都是一步到位或是步驟統(tǒng)一实蓬，那些不是很好的往往敗在了過(guò)于復(fù)雜的動(dòng)效上茸俭。
在這個(gè)例子中，Romain Passelande(他的 Dribbble 不要太屌)的動(dòng)效讓我“虎軀一震”安皱。
不太熟悉動(dòng)畫(huà)的朋友可能看不到我所看到的內(nèi)容调鬓。這幅動(dòng)效中有兩個(gè)單獨(dú)的動(dòng)作：直線的轉(zhuǎn)換和圖標(biāo)的旋轉(zhuǎn)。這兩個(gè)動(dòng)作實(shí)際上可以合并為一個(gè)動(dòng)作酌伊，然而實(shí)際上并沒(méi)有這樣腾窝，Romain把他們分開(kāi)了缀踪。如果看的不是很明顯，那么看一下這張對(duì)比圖：
左右兩邊的動(dòng)效就是把直線的轉(zhuǎn)換和圖標(biāo)的旋轉(zhuǎn)這兩個(gè)動(dòng)作分開(kāi)進(jìn)行的虹脯，中間的動(dòng)效則是用一個(gè)動(dòng)作整齊劃一的完成驴娃，既不繁瑣也不累贅。
小技巧：
確保微交互的動(dòng)效是一步完成的循集，如果有多個(gè)動(dòng)作在不同時(shí)間和位置進(jìn)行唇敞，那么干脆放棄吧。
關(guān)鍵詞：
一步完成
四咒彤、問(wèn)題不是出在動(dòng)效上疆柔，而是在設(shè)計(jì)規(guī)劃上
學(xué)習(xí)過(guò) UI 精細(xì)動(dòng)畫(huà)的朋友可能深有體會(huì)：在靜態(tài)樣本做成拆分細(xì)節(jié)動(dòng)作的時(shí)候往往會(huì)遇到困難。這個(gè)可以理解镶柱，好的微交互設(shè)計(jì)都會(huì)有這樣的問(wèn)題：把動(dòng)作精確到每一幀非常難旷档。然而糟糕的微交互設(shè)計(jì)讓人更糟心。
下面這張表格是我對(duì)設(shè)計(jì)和動(dòng)效的理論知識(shí)的總結(jié)歸納歇拆，你們拿去當(dāng)做參考好了鞋屈。
一般來(lái)說(shuō)，大家都會(huì)往點(diǎn)點(diǎn)的位置努力故觅。點(diǎn)點(diǎn)我用了紫粉色好讓大家在項(xiàng)目中期趕時(shí)間的時(shí)候快速定位厂庇。
接下來(lái)讓我們跳出理論進(jìn)入實(shí)踐：如何拆分動(dòng)效的動(dòng)作。
這是由 Sam Thibault 完成的動(dòng)效作品逻卖，作品中“加入購(gòu)物車”(add to cart)按鈕那令人費(fèi)解的轉(zhuǎn)換和形狀的改變填充了圖片下方的空白宋列，然而這顯得很多余，也加重了使用者的認(rèn)知負(fù)荷评也。
在影片制作過(guò)程中有這樣一個(gè)說(shuō)法：如果有問(wèn)題那一定是劇本出了問(wèn)題炼杖，糟糕的劇本就是糟糕的電影，設(shè)計(jì)也是如此盗迟，糟糕的設(shè)計(jì)就是糟糕的微交互坤邪。
小技巧：
在你挑動(dòng)效的問(wèn)題之前先確保你的設(shè)計(jì)沒(méi)有問(wèn)題。
關(guān)鍵詞：
不是動(dòng)效的錯(cuò)
五罚缕、不遺漏任何一個(gè)細(xì)節(jié)
“你不接球的話一定會(huì)錯(cuò)過(guò)射門(mén)艇纺。”這話是 Wayne Gretzky(冰球運(yùn)動(dòng)員)說(shuō)的邮弹。顯然他很擅長(zhǎng)躲避著撞擊的同時(shí)在冰面上翩翩起舞黔衡。仔細(xì)想想，用這話形容交互設(shè)計(jì)師進(jìn)行微交互設(shè)計(jì)的時(shí)候是多么貼切：有太多太多細(xì)節(jié)了腌乡。大部分設(shè)計(jì)師并不是很習(xí)慣設(shè)計(jì)300~400毫秒的動(dòng)畫(huà)盟劫，所以很容易敷衍了事。
下面這個(gè)作品由 Ivan Bjelajac 設(shè)計(jì)与纽，在這作品中我發(fā)現(xiàn)有5個(gè)細(xì)節(jié)還可以優(yōu)化一下侣签。
1塘装、菜單按鈕和返回按鈕可以添加簡(jiǎn)潔優(yōu)雅的過(guò)渡動(dòng)效，菜單按鈕隨頁(yè)面上滑顯得不是很協(xié)調(diào)影所。
2蹦肴、黃色方塊的右箭頭的縮放旋轉(zhuǎn)效果不是很必要。這樣看上去有些奇怪猴娩，它應(yīng)該隨著內(nèi)容進(jìn)行轉(zhuǎn)變阴幌。
3、漸隱漸出的正文段落其實(shí)沒(méi)有必要胀溺。
4裂七、從左向右滑動(dòng)的標(biāo)題如果是從內(nèi)容上淡入淡出的話會(huì)比滑動(dòng)漸隱要好很多皆看。
5仓坞、在圖片轉(zhuǎn)換為頂部橫幅的時(shí)候人物照片被裁剪了。這里如果將圖片重構(gòu)一下與內(nèi)容相呼應(yīng)會(huì)更好一些腰吟。
和下面的對(duì)細(xì)節(jié)嚴(yán)格要求的動(dòng)效作品相比簡(jiǎn)直是天壤之別无埃。
小技巧：
對(duì)待細(xì)節(jié)不能松懈，不遺漏任何一個(gè)細(xì)節(jié)毛雇。
關(guān)鍵詞：
把握細(xì)節(jié)
總結(jié)
這里我想說(shuō)就算你沒(méi)有任何動(dòng)畫(huà)經(jīng)驗(yàn)嫉称，只要時(shí)刻記住下面這些要點(diǎn)，你也有可能制作出精美絕倫的微交互設(shè)計(jì)灵疮。
克制
交互敘述流程
一步完成
不是動(dòng)效的錯(cuò)
把握細(xì)節(jié)
盡管這不能保證你一定能做出牛逼的動(dòng)效织阅，但這是邁向正確的方向。
