在我們熱火朝天往畫面上添加各種動(dòng)效的時(shí)候，我們是不是應(yīng)該問(wèn)問(wèn)自己，這么做真的對(duì)嗎？凡事是否都應(yīng)該有個(gè)度，動(dòng)效當(dāng)然也不會(huì)例外。下面我們就從“為什么動(dòng)？”“哪里動(dòng)？”“怎么動(dòng)？”這三個(gè)方面來(lái)說(shuō)說(shuō)我們的一點(diǎn)想法：

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

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

這讓我的作品看起來(lái)很炫酷，碉堡了！
動(dòng)效會(huì)帶來(lái)流量，助我完成KPI！
別人都這么做了，我也得做！
編輯讓我這么干的！
呵呵，你要這么想就完了。

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

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

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

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

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

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

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

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

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

二、哪里動(dòng)？

好，我們?cè)倏纯茨睦镄枰獎(jiǎng)有?，這里舉幾個(gè)例子：

1. 加載

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

2. 轉(zhuǎn)場(chǎng)

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

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

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

4. 心理需要

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

三、怎么動(dòng)？

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

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

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

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

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

3. 給元素賦予彈性

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

4. 蒙太奇

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

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

四、結(jié)語(yǔ)：

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

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

分享標(biāo)題：分享動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用
鏈接URL：http://jinyejixie.com/news44/324994.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、微信小程序、定制開發(fā)、網(wǎng)站導(dǎo)航、微信公眾號(hào)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)