一、為什么動(dòng)？

首先，為什么要?jiǎng)?？可能你會想到以下幾條理由：

1. 這讓我的作品看起來很炫酷，碉堡了！
2. 動(dòng)效會帶來流量，助我完成KPI！
3. 別人都這么做了，我也得做！
4. 編輯讓我這么干的！

呵呵，你要這么想就完了。

那么該如何衡量一個(gè)動(dòng)效是否應(yīng)該出現(xiàn)呢，我們認(rèn)為有幾個(gè)考核標(biāo)準(zhǔn)：

1. 這個(gè)動(dòng)效是否會影響性能？

首先，這個(gè)動(dòng)效是否會影響性能？這個(gè)是最重要的，添加任何動(dòng)效前都要考慮是否會影響產(chǎn)品的性能，如果一個(gè)很酷炫的動(dòng)效會拖累性能，使體驗(yàn)變得卡頓不流暢，那么必須毫不猶豫的砍掉或簡化。

例子：化身間諜

比如這個(gè)例子，這是一個(gè)穿越情景的過場動(dòng)畫，隨著年份的倒轉(zhuǎn)背景出現(xiàn)各個(gè)歷史大事件，給人以歷歷在目的感覺，設(shè)計(jì)師考慮到了多張圖片會出現(xiàn)卡頓的可能性，所以特意降低了每張圖的清晰度，因?yàn)閮?nèi)容本身就是老照片的風(fēng)格，所以這種降低畫質(zhì)的手法反而增強(qiáng)了畫面的真實(shí)感。

2. 這個(gè)動(dòng)效是否會提高產(chǎn)品的可用性？

任何動(dòng)效的出現(xiàn)都必須帶有明確的目的性，能夠解決用戶在使用過程中的困惑，而不是炫技。單純的炫技只會分散用戶的注意力，弱化內(nèi)容，變得適得其反。

例子：翻頁提示

比如這個(gè)上滑提示。不用解釋，用戶一看知道該做什么。動(dòng)效增加了產(chǎn)品的可用性，所以這樣的動(dòng)效是非常有意義的！

3. 這個(gè)動(dòng)效是否會給你的產(chǎn)品帶來獨(dú)特氣質(zhì)？

這里所說的氣質(zhì)是動(dòng)效本身會有助于增強(qiáng)用戶對于產(chǎn)品的認(rèn)知和情緒帶入。一個(gè)相得益彰的動(dòng)效會為你的產(chǎn)品錦上添花，深化你的主題和功能，注意，一定是與主題相關(guān)的，牽強(qiáng)的搭配只會叫人覺得莫名其妙，毫無意義。

例子：人生四時(shí)

再看這個(gè)例子，人生四時(shí)，四根火柴依次燃燒，慢慢燃盡，這種油盡燈枯的感覺很切合的體現(xiàn)了產(chǎn)品生老病死的主題。

4. 重新審視第一條，看你的動(dòng)效是否影響性能

所以，合理的動(dòng)效不應(yīng)是花拳繡腿，而應(yīng)該是解決問題的手段。

二、哪里動(dòng)？

好，我們再看看哪里需要?jiǎng)有?，這里舉幾個(gè)例子：

1. 加載

首先是出現(xiàn)在加載環(huán)境，不管是網(wǎng)頁還是H5都不可避免的會出現(xiàn)讓用戶等待的情況，在等待的過程中為了讓用戶知道他的手機(jī)沒有死機(jī)以及網(wǎng)絡(luò)是通暢的，我們應(yīng)該在這個(gè)時(shí)候加入一些與主題相關(guān)的動(dòng)效來提醒他內(nèi)容正在加載中。

例子：化身間諜H5 loading

這是一個(gè)穿越類的H5，所以設(shè)計(jì)師在設(shè)計(jì)loading的時(shí)候選用了蟲洞的理念，與內(nèi)容本身緊密貼合。

2. 轉(zhuǎn)場

第二個(gè)情景是轉(zhuǎn)場。具有意義的轉(zhuǎn)場會降低產(chǎn)品割裂感，我們看兩個(gè)例子就明白了。

例子：QQ會員觀影特權(quán)

這個(gè)例子里元素在默認(rèn)狀態(tài)下會做上下浮動(dòng)的效果，當(dāng)我們滑動(dòng)時(shí)候，元素很自然的做了一個(gè)出場入場的效果。很自然，沒有割裂感。對吧？

3. 頁面元素的互動(dòng)

也可以為網(wǎng)頁元素增加一些必要的動(dòng)效。

例子：好聲音第四季首頁：

看下好聲音的專題頁面，在網(wǎng)頁上的能夠點(diǎn)擊的按鈕或者文字鏈，在鼠標(biāo)經(jīng)過時(shí)都有點(diǎn)變化，這個(gè)十分必要。因?yàn)楸砻嫔系淖兓瘯o用戶一種心理暗示，那就是點(diǎn)擊后也會有變化。

4. 心理需要

這里所說的心理需求是指氣氛和情景的營造，例如節(jié)日，游戲活動(dòng)等產(chǎn)品，是需要一些動(dòng)效去滿足用戶心理需求的。大家都知道在微信里輸入“生日快樂”是會掉下生日蛋糕的，這個(gè)動(dòng)效就比干巴巴的文字有趣多了。

例子：一封家書

一封家書，注意看，背景有飄落的雪花，漫天大雪勾起思鄉(xiāng)情，對吧，合情合理，有情有義！

三、怎么動(dòng)？

好，說完哪里動(dòng)，我們現(xiàn)在看看怎么動(dòng)。

1. 基于真實(shí)形態(tài)的模擬

基于真實(shí)的動(dòng)畫會叫人看起來自然流暢，符合規(guī)律，比如物體運(yùn)動(dòng)時(shí)的加速度現(xiàn)象。

例子：Look

注意看這個(gè)筆畫的動(dòng)勢，是有快有慢的，模擬了寫字時(shí)起筆收筆的那種節(jié)奏感，所以看起來是自然真實(shí)的。

2. 人物動(dòng)作夸張化

在H5的設(shè)計(jì)中，經(jīng)常會出現(xiàn)各種各樣的人物形象，夸張的人物動(dòng)作會生動(dòng)你的形象，增加趣味性，給用戶以驚喜。

例子：巴菲特這一年

巴菲特老爺爺，動(dòng)作很親切。

3. 給元素賦予彈性

有彈性的物體會叫用戶覺得具有生命感和真實(shí)性，彈的程度取決于你對元素軟硬度的設(shè)定。

例子：拍個(gè)大頭鬼

三個(gè)小鬼一跳一跳，彈性賦予了他們頑強(qiáng)的生命力。

4. 蒙太奇

這是一種類似蒙太奇的手法，通過快速切換的畫面來形成一種奇妙后現(xiàn)代感覺。

例子：傳奇硬箱

炫酷了，節(jié)奏很快，提氣！

好，以上只是一些基本的動(dòng)效手法，在實(shí)際的應(yīng)用中其實(shí)有很多手段，在這里我建議大家可以去看看迪士尼和皮克斯的動(dòng)畫，應(yīng)為動(dòng)畫本身是一種對于動(dòng)作行為高度概括的手段。雖然這些都是電影，但是他們使用的手段和遵循的理念是非常值得我們?nèi)W(xué)習(xí)和借鑒的。注意觀察這些大牛們的作品，你會發(fā)現(xiàn)他們的作品中充滿了走心的細(xì)節(jié)。

四、結(jié)語：

簡單來說，當(dāng)用戶打開一個(gè)界面，注意力首先會被動(dòng)態(tài)的物體吸引，然后才會把注意力轉(zhuǎn)向顏色對比強(qiáng)的部分，最后才是形狀。這一過程是人在進(jìn)化過程中形成的本能反應(yīng)，基本適用所有用戶。同時(shí)一個(gè)非常重要且容易被忽略的原則：用戶的注意力是有限的，而且越來越少。很可能在用戶注意到一段動(dòng)效之后，注意力和耐心已經(jīng)用盡，無法看到其他內(nèi)容就著急去下一個(gè)界面了。

所以，對于動(dòng)效這樣一個(gè)非常強(qiáng)勢的工具，一定要用在希望用戶注意的部分，并且認(rèn)真打磨。真正做到“不為動(dòng)而動(dòng)”。

文章來源：優(yōu)設(shè)   作者:程遠(yuǎn)

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.shtzxx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)