那些界面動(dòng)畫設(shè)計(jì)需要了解的事情
??? 細(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)畫能夠幫助使用者瞭解物體的狀態(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è)抽屜能夠滑開來。 四、操作反饋
五、減少使用者的焦慮 六、突顯顯重要的功能 利用動(dòng)畫效果,可以清楚的提示使用者重要的功能在哪里,并吸引他們?nèi)ヅ鲇|這些功能,如80/20法則,除了透過對(duì)比的方式凸顯重要的元素外,利用動(dòng)畫可能會(huì)是個(gè)不錯(cuò)的方式。 七、幫助使用者建立心智模型 八、手勢(shì)的引導(dǎo) 九、狀態(tài)提示 物體不會(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中國動(dòng)畫的任務(wù)
動(dòng)畫要符合真實(shí)性
需要注意哪些事情
- 目前還沒評(píng)論,等你發(fā)揮!