那些界面動(dòng)畫設(shè)計(jì)需要了解的事情

0 評(píng)論 3794 瀏覽 3 收藏 5 分鐘

??? 細(xì)節(jié)決定成敗,今天來談?wù)剟?dòng)畫在用戶體驗(yàn)上扮演哪些重要的角色。隨著裝置效能的提升,越來越多的應(yīng)用程式開始加入動(dòng)畫到應(yīng)用里,利用動(dòng)畫的效果,透過各種各式各樣的動(dòng)畫,事情更容易理解、焦慮的心情減少了、枯燥的狀態(tài)變的有意思了

本文章會(huì)先從動(dòng)畫的任務(wù)開始,瞭解動(dòng)畫如何應(yīng)用在介面設(shè)計(jì)上,接著會(huì)從卡通瞭解如何設(shè)計(jì)更真實(shí)自然的動(dòng)畫,最后會(huì)提出一些使用動(dòng)畫要注意的事項(xiàng)。

動(dòng)畫的任務(wù)

動(dòng)畫能夠幫助使用者瞭解物體的狀態(tài),及狀態(tài)之間的因果關(guān)系,如果使用的恰當(dāng),動(dòng)畫能夠大幅度的減少使用者在狀態(tài)認(rèn)知的負(fù)擔(dān),并建立正確的心智模型(Metal Model)。 以下,我們將介紹動(dòng)畫的所帶來的幫助:

一、解釋狀態(tài)之間的變化

二、吸引使用者的注意力

三、告訴使用者應(yīng)該做什么

使用者常常打開一個(gè)應(yīng)用程式后,就不曉得接下來該作什么事情,特別是在初次使用或者極限狀態(tài)發(fā)生的時(shí)候,在這些情況下,除了使用文字與清楚的顏色提示使用者外,使用動(dòng)畫更能引導(dǎo)使用者進(jìn)行操作。 在 Flipboard 應(yīng)用中,剛啟動(dòng)的頁面會(huì)在畫面右測(cè),紙張會(huì)不時(shí)的翻起,提示你可以向左翻閱。 在 Path 應(yīng)用中,在第一次使用時(shí),右方的導(dǎo)航列也會(huì)不時(shí)的滑動(dòng),提醒使用者這邊有個(gè)抽屜能夠滑開來。

四、操作反饋

w600_f9ec709b9cdd1d0afa28f58a30f1dfb8

五、減少使用者的焦慮

w600_714faa564779625f0229764b665e3b2a

六、突顯顯重要的功能

利用動(dòng)畫效果,可以清楚的提示使用者重要的功能在哪里,并吸引他們?nèi)ヅ鲇|這些功能,如80/20法則,除了透過對(duì)比的方式凸顯重要的元素外,利用動(dòng)畫可能會(huì)是個(gè)不錯(cuò)的方式。

七、幫助使用者建立心智模型

八、手勢(shì)的引導(dǎo)

w600_8d8ce745d58644d30f772611ce96ac36

九、狀態(tài)提示

w600_02dec4aefac3ef226b034be829227502

動(dòng)畫要符合真實(shí)性

物體不會(huì)憑空出現(xiàn)

在現(xiàn)實(shí)中,所有實(shí)體從來不會(huì)憑空出現(xiàn),操作介面上應(yīng)該避免物體突然出現(xiàn)在畫面上的情況。

預(yù)先動(dòng)作

就好像跳遠(yuǎn)前需要助跑一樣,在動(dòng)畫開始之前,使用一個(gè)預(yù)先動(dòng)作,讓整個(gè)動(dòng)畫顯的自然且順暢。約翰?拉賽爾(John Lasseter)曾說過,”沒有先兆的動(dòng)畫會(huì)顯的突然、僵硬與不自然”。

移動(dòng)具有加速度

使用加速度而不是固定速率,真實(shí)的物體不會(huì)在開始就有一定的速度,肯定需要一段加速階段,動(dòng)畫設(shè)計(jì)上特別需要注意這點(diǎn)。

需要注意哪些事情

避免使用不重要的動(dòng)畫

用動(dòng)畫把使用者的注意力引導(dǎo)到重要且不容易被發(fā)現(xiàn)的地方上

通過適當(dāng)?shù)膭?dòng)畫,讓使用者者理解介面的變化

利用適當(dāng)?shù)膭?dòng)畫,幫助使用者者建立心智模型

文章來源:UI中國

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!