編者按：動(dòng)效化顯然已成為移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的新趨勢(shì)，如何設(shè)計(jì)出有趣且吸引人的動(dòng)效已成為設(shè)計(jì)師們的新課題。不同的產(chǎn)品適合不同類型的動(dòng)效，有些產(chǎn)品適合炫酷的動(dòng)效，有些則不適合。切記不要把動(dòng)效設(shè)計(jì)成華而不實(shí)的花架子，而應(yīng)該將其視為提升用戶體驗(yàn)的新方法。

移動(dòng)互聯(lián)網(wǎng)時(shí)代已經(jīng)到來，APP已如天空的繁星，數(shù)也數(shù)不清。隨著手機(jī)硬件的不斷升級(jí)，實(shí)現(xiàn)炫酷且流暢的動(dòng)效不再是遙遠(yuǎn)的夢(mèng)想。如果你是APP達(dá)人，喜歡試用各種APP，你肯定會(huì)發(fā)現(xiàn)越來越多的APP開始動(dòng)效化。

一個(gè)真正的美女一定是同時(shí)兼具外在美和內(nèi)在美，評(píng)價(jià)一段動(dòng)效也是如此。一段真正“美”的動(dòng)效需要同時(shí)具備兩個(gè)條件：首先它需要是生動(dòng)且有趣的，既好看又流暢；再次它不是可有可無的，需要具備優(yōu)化交互和提升體驗(yàn)的作用。

一、APP動(dòng)效的外在美

一段動(dòng)效首先需要是生動(dòng)且有趣的，不僅要有好看的外觀還要有流暢的體驗(yàn)。要做到這點(diǎn)，需要賦予動(dòng)效以生命力，具體有如下幾種方法：

1.1模擬慣性

現(xiàn)實(shí)中物體的運(yùn)動(dòng)是有慣性的，比如公交車突然剎車時(shí)乘客會(huì)突然往前一倒。仔細(xì)觀察下面3段動(dòng)效，圖像在變化（放大、縮小和翻轉(zhuǎn)）的末端都會(huì)“超出”一點(diǎn)再立即“反彈”回來，如此的處理方法使得整個(gè)動(dòng)效充滿活力，顯得生動(dòng)有趣。

1.2模擬重力

與慣性一樣，重力也是現(xiàn)實(shí)中存在的現(xiàn)象，所有物體在無向上的支持力的情況下都會(huì)下墜，比如傾倒垃圾。一般APP刪除卡片的動(dòng)效就是橫向滑動(dòng)直至消失，但是下面這段動(dòng)效卻加入了重力效應(yīng)。即卡片在橫向滑動(dòng)的同時(shí)也在翻轉(zhuǎn)并下墜，就像現(xiàn)實(shí)中往垃圾桶中傾倒垃圾一樣。在使得整個(gè)動(dòng)效生動(dòng)有趣的同時(shí)也便于用戶理解操作含義。

1.3均勻變速

一個(gè)優(yōu)秀的動(dòng)效肯定不會(huì)是勻速運(yùn)動(dòng)的，勻速運(yùn)動(dòng)的物體顯得生硬和死板，就像機(jī)器人一樣。要想讓一個(gè)圖像運(yùn)動(dòng)的有活力，就需要對(duì)其運(yùn)動(dòng)的速度進(jìn)行“設(shè)計(jì)”。仔細(xì)觀察下圖所示動(dòng)效，雖然界面中不同元素的運(yùn)動(dòng)速度不盡相同，但其運(yùn)動(dòng)均遵循一定的原則，其中之一就是均勻變速，切記“急起”。就是說界面元素在運(yùn)動(dòng)時(shí)的初始速度要為0，以勻加速開始運(yùn)動(dòng)，而在運(yùn)動(dòng)結(jié)束階段往往是可以急停的。

1.4碎片化運(yùn)動(dòng)

使一款應(yīng)用變得個(gè)性十足的一個(gè)好方法就是給它加上炫酷的動(dòng)效，而使一個(gè)動(dòng)效炫酷的常用方法就是碎片化運(yùn)動(dòng)。簡單說就是把界面中的圖像拆解成一個(gè)個(gè)碎片，然后讓它們進(jìn)行不同步的運(yùn)動(dòng)，利用時(shí)間間隔和變速產(chǎn)生炫酷的效果。就如下面一則動(dòng)效，圖像中的不同元素有節(jié)奏的呈現(xiàn)，利用時(shí)間差來制造效果。

二、APP動(dòng)效的內(nèi)在美

真正優(yōu)秀的動(dòng)效不是只有漂亮外表的花瓶，還得具備優(yōu)化交互和提升體驗(yàn)的作用。下面總結(jié)了3個(gè)動(dòng)效的“內(nèi)在美”，分別為引導(dǎo)、簡化和增強(qiáng)反饋。

2.1引導(dǎo)

圖形界面本是難懂且抽象的，增強(qiáng)引導(dǎo)是降低軟件操作難度和提升用戶體驗(yàn)的好方法。

2.1.1動(dòng)態(tài)聚焦

通過動(dòng)態(tài)化的處理引導(dǎo)用戶聚焦界面的關(guān)鍵部位，以使體驗(yàn)更加的流暢。青蛙能夠快速捕捉移動(dòng)中的物體，人眼也具有相似特征，運(yùn)動(dòng)中的物體總能引起下意識(shí)的關(guān)注。如下圖所示動(dòng)效，屏幕上方的數(shù)字不是直接顯示一個(gè)數(shù)值，而是從0迅速遞增到該數(shù)值，特意表現(xiàn)一個(gè)動(dòng)態(tài)的效果，目的就是為了吸引用戶的目光，起到聚焦的作用。國內(nèi)的支付寶錢包APP也利用了此類特效。

2.1.2示意過渡

過渡動(dòng)效就是給界面的變化加上流暢的過渡，目的是引導(dǎo)用戶理解到底發(fā)生了什么，而不會(huì)使其不知所措。如下圖所示動(dòng)效，添加卡片的過程進(jìn)行了生動(dòng)的模擬，讓用戶很輕易地理解發(fā)生了什么。試想一下，如果該頁面沒有滑動(dòng)效果，而是直接生硬的跳轉(zhuǎn)，是不是差勁很多？

2.1.3空間轉(zhuǎn)場

轉(zhuǎn)場動(dòng)效是被設(shè)計(jì)師所普遍重視的一種特效，它的作用也是引導(dǎo)用戶，讓用戶更好地理解頁面跳轉(zhuǎn)，知道自己身在何方。下圖所示一則動(dòng)效就是一個(gè)漂亮的轉(zhuǎn)場動(dòng)效，為了避免兩個(gè)頁面之間的跳轉(zhuǎn)過于生硬，利用動(dòng)效填補(bǔ)上了頁面跳轉(zhuǎn)的中間過程，使得體驗(yàn)更加流暢和自然。

2.2簡化

有時(shí)優(yōu)秀的設(shè)計(jì)就是出色的簡化。簡化界面信息和交互層級(jí)可以降低操作難度和提升用戶體驗(yàn)。

2.2.1隱藏二級(jí)操作項(xiàng)

利用動(dòng)效可以使界面中的部分信息隱藏，當(dāng)進(jìn)行某些操作后隱藏的內(nèi)容會(huì)動(dòng)態(tài)展開，從而達(dá)到簡化初始界面的目的，使界面簡潔大氣。

2.2.2 按鈕動(dòng)效化

使按鈕動(dòng)效化能夠讓界面重要信息動(dòng)態(tài)浮現(xiàn)在同一按鈕上，使得用戶的目光緊緊盯著按鈕，弱化了頁面跳轉(zhuǎn)帶來的干擾，使體驗(yàn)更加流暢。

2.3增強(qiáng)反饋

軟件的反饋對(duì)于體驗(yàn)的提高來講至關(guān)重要，增強(qiáng)反饋可以起到更好的提示作用，使體驗(yàn)過程更加輕松和愉悅。抖動(dòng)是增強(qiáng)反饋的方法之一，用動(dòng)效反饋替代圖形文字的靜態(tài)提示，更加自然和引人注目。下圖所示動(dòng)效出自蘋果的Pages軟件，當(dāng)進(jìn)入編輯態(tài)后待編輯對(duì)象進(jìn)入不斷的抖動(dòng)狀態(tài)，起到很好的引導(dǎo)作用。

總結(jié)

動(dòng)效化顯然已成為移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的新趨勢(shì)，如何設(shè)計(jì)出有趣且吸引人的動(dòng)效已成為設(shè)計(jì)師們的新課題。不同的產(chǎn)品適合不同類型的動(dòng)效，有些產(chǎn)品適合炫酷的動(dòng)效，有些則不適合。切記不要把動(dòng)效設(shè)計(jì)成華而不實(shí)的花架子，而應(yīng)該將其視為提升用戶體驗(yàn)的新方法。

說到移動(dòng)動(dòng)效，這里有幾篇好文：

先惡補(bǔ)移動(dòng)動(dòng)效基礎(chǔ)知識(shí)！
《流動(dòng)之美！探討一下移動(dòng)動(dòng)效設(shè)計(jì)》

再來組優(yōu)秀作品欣賞！
《帥呆了！一組令人愉悅的APP動(dòng)效設(shè)計(jì)》

最后是真正干貨！
《超贊！高大上的動(dòng)效設(shè)計(jì)方法及流程總結(jié)》

原文地址：mux.baidu

【優(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)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量74萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(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)頁設(shè)計(jì) 微信號(hào)：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：