如果重新審視10年前的網(wǎng)頁(yè)和移動(dòng)端應(yīng)用的話，你會(huì)發(fā)現(xiàn)動(dòng)效和動(dòng)畫在這個(gè)時(shí)期簡(jiǎn)直是犯規(guī)一般的存在：瀏覽器和硬件設(shè)備吃不消，它們根本無(wú)法成為設(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)知和軟件本身之間的溝壑，用戶更容易理解和使用軟件了。

說(shuō)道軟件，這篇文章《新人手冊(cè)！動(dòng)效設(shè)計(jì)幾乎都是這10個(gè)軟件做的（內(nèi)附教程）》幫你總結(jié)了常見的動(dòng)效設(shè)計(jì)軟件。

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

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

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

這篇騰訊ISUX的進(jìn)階好文能讓你的動(dòng)效更加自然：《騰訊超全干貨！如何讓你的動(dòng)畫更自然？》

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

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

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

交互式提醒

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

提供方向上的視覺(jué)線索

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

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

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

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

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

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

空間意識(shí)

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

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

提供清晰的反饋

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

如果你能合理的融入一些動(dòng)效設(shè)計(jì)技巧，這些反饋能夠化腐朽為神奇?？纯催@篇文章吧：《5個(gè)小技巧，用動(dòng)效提升界面的用戶體驗(yàn)就這么簡(jiǎn)單》

揭示問(wèn)題

當(dāng)你需要設(shè)計(jì)界面中的錯(cuò)誤狀態(tài)的時(shí)候，你需要讓用戶清晰的意識(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)效能夠以更視覺(jué)化的方式呈現(xiàn)用戶操作之后的結(jié)果。展示結(jié)果，而不要去描述，通過(guò)反饋呈現(xiàn)交互所產(chǎn)生的結(jié)果。

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

展現(xiàn)邏輯

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

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

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

結(jié)語(yǔ)

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

【這些最佳實(shí)踐幫你在UI設(shè)計(jì)上更上一層樓】

1. 《網(wǎng)頁(yè)設(shè)計(jì)中，如何突破柵格的限制又保持協(xié)調(diào)？》
2. 《幫你搞定長(zhǎng)滾動(dòng)網(wǎng)頁(yè)的設(shè)計(jì)最佳實(shí)踐》
3. 《覺(jué)得自己學(xué)了假設(shè)計(jì)？真正的新用戶引導(dǎo)應(yīng)該這么設(shè)計(jì)》
4. 《老生常談！設(shè)計(jì)高素質(zhì)的UI應(yīng)該掌握這7個(gè)關(guān)鍵屬性》
5. 《這8個(gè)要點(diǎn)，能讓你的網(wǎng)頁(yè)首圖抓住用戶注意力》

原文地址：uxplanet
原文作者：Nick Babich
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

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

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬(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