移動(dòng)互聯(lián)網(wǎng)時(shí)代已經(jīng)到來(lái)，app已如天空的繁星，數(shù)也數(shù)不清。隨著手機(jī)硬件的不斷升級(jí)，實(shí)現(xiàn)炫酷且流暢的動(dòng)效不再是遙遠(yuǎn)的夢(mèng)想。如果你是app達(dá)人，喜歡試用各種app，你肯定會(huì)發(fā)現(xiàn)越來(lái)越多的app開始動(dòng)效化。
來(lái)源：百度MUX
一個(gè)真正的美女一定是同時(shí)兼具外在美和內(nèi)在美，評(píng)價(jià)一段動(dòng)效也是如此。一段真正“美”的動(dòng)效需要同時(shí)具備兩個(gè)條件，首先它需要是生動(dòng)且有趣的，既好看又流暢；再次它不是可有可無(wú)的，需要具備優(yōu)化交互和提升體驗(yàn)的作用。
1. app動(dòng)效的外在美
一段動(dòng)效首先需要是生動(dòng)且有趣的，不僅要有好看的外觀還要有流暢的體驗(yàn)。要做到這點(diǎn)，需要賦予動(dòng)效以生命力，具體有如下幾種方法：
現(xiàn)實(shí)中物體的運(yùn)動(dòng)是有慣性的，比如公交車突然剎車時(shí)乘客會(huì)突然往前一倒。仔細(xì)觀察下面3段動(dòng)效，圖像在變化（放大、縮小和翻轉(zhuǎn)）的末端都會(huì)“超出”一點(diǎn)再立即“反彈”回來(lái)，如此的處理方法使得整個(gè)動(dòng)效充滿活力，顯得生動(dòng)有趣。
1.2 模擬重力
與慣性一樣，重力也是現(xiàn)實(shí)中存在的現(xiàn)象，所有物體在無(wú)向上的支持力的情況下都會(huì)下墜，比如傾倒垃圾。一般app刪除卡片的動(dòng)效就是橫向滑動(dòng)直至消失，但是下面這段動(dòng)效卻加入了重力效應(yīng)。即卡片在橫向滑動(dòng)的同時(shí)也在翻轉(zhuǎn)并下墜，就像現(xiàn)實(shí)中往垃圾桶中傾倒垃圾一樣。在使得整個(gè)動(dòng)效生動(dòng)有趣的同時(shí)也便于用戶理解操作含義。
一個(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)。簡(jiǎn)單說就是把界面中的圖像拆解成一個(gè)個(gè)碎片，然后讓它們進(jìn)行不同步的運(yùn)動(dòng)，利用時(shí)間間隔和變速產(chǎn)生炫酷的效果。就如下面一則動(dòng)效，圖像中的不同元素有節(jié)奏的呈現(xiàn)，利用時(shí)間差來(lái)制造效果。
2. app動(dòng)效的內(nèi)在美
真正優(yōu)秀的動(dòng)效不是只有漂亮外表的花瓶，還得具備優(yōu)化交互和提升體驗(yàn)的作用。下面總結(jié)了3個(gè)動(dòng)效的“內(nèi)在美”，分別為引導(dǎo)、簡(jiǎn)化和增強(qiáng)反饋。
2.1 引導(dǎo)
圖形界面本是難懂且抽象的，增強(qiáng)引導(dǎo)是降低軟件操作難度和提升用戶體驗(yàn)的好方法。
通過動(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)的效果，目的就是為了吸引用戶的目光，起到聚焦的作用。國(guó)內(nèi)的支付寶錢包APP也利用了此類特效。
過渡動(dòng)效就是給界面的變化加上流暢的過渡，目的是引導(dǎo)用戶理解到底發(fā)生了什么，而不會(huì)使其不知所措。如下圖所示動(dòng)效，添加卡片的過程進(jìn)行了生動(dòng)的模擬，讓用戶很輕易地理解發(fā)生了什么。試想一下，如果該頁(yè)面沒有滑動(dòng)效果，而是直接生硬的跳轉(zhuǎn)，是不是差勁很多？
轉(zhuǎn)場(chǎng)動(dòng)效是被設(shè)計(jì)師所普遍重視的一種特效，它的作用也是引導(dǎo)用戶，讓用戶更好地理解頁(yè)面跳轉(zhuǎn)，知道自己身在何方。下圖所示一則動(dòng)效就是一個(gè)漂亮的轉(zhuǎn)場(chǎng)動(dòng)效，為了避免兩個(gè)頁(yè)面之間的跳轉(zhuǎn)過于生硬，利用動(dòng)效填補(bǔ)上了頁(yè)面跳轉(zhuǎn)的中間過程，使得體驗(yàn)更加流暢和自然。
2.2 簡(jiǎn)化
有時(shí)優(yōu)秀的設(shè)計(jì)就是出色的簡(jiǎn)化。簡(jiǎn)化界面信息和交互層級(jí)可以降低操作難度和提升用戶體驗(yàn)。
2.2.1 隱藏二級(jí)操作項(xiàng)
利用動(dòng)效可以使界面中的部分信息隱藏，當(dāng)進(jìn)行某些操作后隱藏的內(nèi)容會(huì)動(dòng)態(tài)展開，從而達(dá)到簡(jiǎn)化初始界面的目的，使界面簡(jiǎn)潔大氣。
2.2.2 按鈕動(dòng)效化
使按鈕動(dòng)效化能夠讓界面重要信息動(dòng)態(tài)浮現(xiàn)在同一按鈕上，使得用戶的目光緊緊盯著按鈕，弱化了頁(yè)面跳轉(zhuǎn)帶來(lái)的干擾，使體驗(yàn)更加流暢。
軟件的反饋對(duì)于體驗(yàn)的提高來(lái)講至關(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)作用。
3. 總結(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)的新方法。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
暫無(wú)評(píng)論哦，快來(lái)評(píng)論一下吧！
全部評(píng)論（0條）