動(dòng)效可以以更加廣泛、多樣的方式，打通產(chǎn)品，將產(chǎn)品的美學(xué)和功能統(tǒng)一到一個(gè)系統(tǒng)之下。

如果重新審視10年前的網(wǎng)頁和移動(dòng)端應(yīng)用的話，你會(huì)發(fā)現(xiàn)動(dòng)效和動(dòng)畫在這個(gè)時(shí)期簡直是犯規(guī)一般的存在：瀏覽器和硬件設(shè)備吃不消，它們根本無法成為設(shè)計(jì)最佳實(shí)踐。十年前你所能看到的動(dòng)畫和動(dòng)效，通常是使用Flash實(shí)現(xiàn)，或者短暫的存在于彈出框和閃爍的按鈕特效中。但是情況在最近的幾年出現(xiàn)了巨大的轉(zhuǎn)變，iOS和Android 設(shè)備的大規(guī)模普及，移動(dòng)端芯片的性能提升，讓設(shè)計(jì)師在移動(dòng)端APP上實(shí)現(xiàn)多樣的動(dòng)畫和動(dòng)效，成為了可能，而今天，動(dòng)畫和動(dòng)效已經(jīng)成為了如今UI和UX設(shè)計(jì)當(dāng)中，最重要的組成部分之一。時(shí)間這一維度的加入，令靜態(tài)的UI動(dòng)態(tài)地呈現(xiàn)，設(shè)計(jì)師可以因此而可以創(chuàng)造出更加豐富多彩的世界。

現(xiàn)代的UI界面不再是一系列靜態(tài)的分屏。將時(shí)間的維度添加到UI界面中就產(chǎn)生了動(dòng)效，它彌合了人類認(rèn)知和軟件本身之間的溝壑，用戶更容易理解和使用軟件了。

那些最直觀、令人愉悅的動(dòng)效設(shè)計(jì)常常將一些有趣的細(xì)節(jié)加入到其中，在之前的那篇《動(dòng)效在UI設(shè)計(jì)中的三個(gè)關(guān)鍵用途》當(dāng)中，已經(jīng)詳細(xì)闡述了UI設(shè)計(jì)中動(dòng)效的三個(gè)關(guān)鍵用途，這些用例大都是這樣做的。在今天的文章中，我將繼續(xù)通過實(shí)戰(zhàn)案例，為你闡釋如何讓你的UI界面更加有趣而富有生命力。

讓加載動(dòng)效更具視覺愉悅感

當(dāng)APP 的打開動(dòng)效足夠有視覺愉悅感的時(shí)候，用戶每次打開的時(shí)候都會(huì)為之感到開心愉悅。但是，動(dòng)效能做的并不止于此，下面的案例中，Uber的打開動(dòng)效不僅讓用戶體會(huì)到愉悅感，而且它的展開式動(dòng)效還很好地“控制”了用戶雙眼的視覺焦點(diǎn)。

用有吸引力的視覺設(shè)計(jì)引導(dǎo)新用戶

新用戶第一次打開你的APP的時(shí)候，通常需要經(jīng)過新用戶引導(dǎo)流程，快速了解APP的功能和特色，而這也是用戶和你的APP的第一次交互。而APP給用戶的第一印象也非常重要，所以初次的引導(dǎo)體驗(yàn)應(yīng)該足夠好，平滑的過渡動(dòng)效加持的引導(dǎo)流程，對于初次使用的用戶而言有著巨大的影響，同APP的用戶留存率有著直接的關(guān)聯(lián)。

下面的新用戶引導(dǎo)的動(dòng)效就充滿了創(chuàng)意和個(gè)性，充滿驚喜的視覺設(shè)計(jì)和直觀簡練的文案都給用戶以良好的印象，非常值得學(xué)習(xí)。

交互式提醒

不同的APP在功能上有著許多差異，許多新的功能可能用戶之前從未接觸過，加入交互式的小貼士能夠幫助用戶更好的熟悉APP，而這種動(dòng)態(tài)而智能的呈現(xiàn)方式，能讓APP顯得更加貼心而靈活。

提供方向上的視覺線索

當(dāng)UI界面中狀態(tài)發(fā)生改變的時(shí)候，動(dòng)效的重要作用就顯現(xiàn)出來了。狀態(tài)改變之后，新的界面出現(xiàn)，用戶需要知道新的界面和之前的界面之間的關(guān)系，而動(dòng)效就是線索。

靜態(tài)的設(shè)計(jì)通常難以闡明狀態(tài)之間的相互關(guān)系。

對于建立內(nèi)容之間的關(guān)系這件事而言，動(dòng)效非常的實(shí)用，它可以作為不同UI狀態(tài)之間的連接點(diǎn)。

闡述元素之間的關(guān)系

精心設(shè)計(jì)的過渡動(dòng)效能夠?qū)⒂脩舻囊暰€引導(dǎo)到設(shè)計(jì)師希望用戶看到的位置，引導(dǎo)用戶去交互。動(dòng)效在UI當(dāng)中能夠有針對性地對一些元素進(jìn)行強(qiáng)調(diào)，并且闡明不同元素之間的關(guān)系。

轉(zhuǎn)場動(dòng)效連接了播放和暫停按鈕之間的兩個(gè)狀態(tài)，從而闡明了兩者之間的關(guān)系。

空間意識

意境地圖是人類對于空間和關(guān)系的理解的關(guān)鍵點(diǎn)，而動(dòng)效能夠幫助用戶對界面的空間關(guān)系有更深的了解，明白界面元素從哪里來，到哪里去。

用戶借助動(dòng)效明白他們所處的位置，找到他們想去的地方。

提供清晰的反饋

動(dòng)效能夠強(qiáng)化用戶正在進(jìn)行的交互的效果，幫助用戶了解操作的進(jìn)行方向，產(chǎn)生的結(jié)果，確定操作成功與否，以及為何會(huì)如此。

揭示問題

當(dāng)你需要設(shè)計(jì)界面中的錯(cuò)誤狀態(tài)的時(shí)候，你需要讓用戶清晰的意識到系統(tǒng)正在報(bào)錯(cuò)，而動(dòng)效在此處作用也很重要。密碼輸入錯(cuò)誤的時(shí)候，密碼輸入框抖動(dòng)的特效，就是一個(gè)很好的實(shí)例。它模擬了人們搖頭抖動(dòng)的效果，直觀而擬人化地給予用戶以報(bào)錯(cuò)反饋。

多個(gè)元素層協(xié)同為用戶傳遞信息將會(huì)更加有效。

確認(rèn)效果

動(dòng)效能夠以更視覺化的方式呈現(xiàn)用戶操作之后的結(jié)果。展示結(jié)果，而不要去描述，通過反饋呈現(xiàn)交互所產(chǎn)生的結(jié)果。

在Stripe 這個(gè)APP實(shí)例中，當(dāng)用戶點(diǎn)擊支付之后，按鈕呈現(xiàn)出短暫的加載過程之后，顯示支付成功。成功的對勾標(biāo)識會(huì)讓用戶覺得支付很簡單，而短暫的加載則讓用戶感受到了這個(gè)過程，但是這又不會(huì)讓他們等待很久。

展現(xiàn)邏輯

邏輯是幾乎所有的動(dòng)效都具備的一個(gè)特征。你需要讓你的動(dòng)效符合整體的邏輯，尤其是在移動(dòng)端的APP上。有限的空間和復(fù)雜的實(shí)際狀況是用戶絕大多數(shù)所面臨的狀況，你需要充分利用空間，打通環(huán)節(jié)，降低產(chǎn)品的復(fù)雜性，使用動(dòng)效將界面和元素以富有邏輯的方式呈現(xiàn)出來，就很有必要了。

你需要讓你的動(dòng)效充滿目的性，也富有邏輯，有太多的APP因?yàn)椴豢深A(yù)測的交互和過于繁復(fù)花哨的動(dòng)效而最終失敗。雖然有的動(dòng)效做到很贊，在實(shí)現(xiàn)上也沒問題，但是它讓界面顯得混亂，這就成問題了。

現(xiàn)實(shí)中約定俗成的交互習(xí)慣和之前產(chǎn)品給用戶養(yǎng)成的習(xí)慣，使得手勢交互有了一套常規(guī)的法則。不一致的交互方式，會(huì)破壞用的使用習(xí)慣，毀掉整個(gè)用戶體驗(yàn)。

結(jié)語

動(dòng)效可以以更加廣泛、多樣的方式，打通產(chǎn)品，將產(chǎn)品的美學(xué)和功能統(tǒng)一到一個(gè)系統(tǒng)之下。所以，你需要有目標(biāo)的設(shè)計(jì)動(dòng)效，因?yàn)閯?dòng)效存在的首要目的并不是讓你的產(chǎn)品看起來酷，而是功能，是讓產(chǎn)品可用，具備好的體驗(yàn)，然后才是其他。

原文作者：Nick Babich

原文地址：uxplanet

譯者：@陳子木

譯文地址：http://www.uisdc.com/motion-bring-apps-to-life