創(chuàng)新互聯(lián)小編今天與大家分享的是《APP界面動(dòng)效設(shè)計(jì)原則》，首先我們先來(lái)了解一下具體的好的動(dòng)效是什么樣的。

一、APP界面好的動(dòng)效是什么樣

動(dòng)效并不是設(shè)計(jì)師為了炫技設(shè)計(jì)出來(lái)的東西，它是有很多現(xiàn)實(shí)意義的。為了更加高效(心甘情愿)的去實(shí)現(xiàn)動(dòng)效(做苦力)。我們首先需要知道什么動(dòng)效是好動(dòng)效。簡(jiǎn)單來(lái)講。動(dòng)效有以下三個(gè)方面的價(jià)值。

1. 滿足用戶的心理預(yù)期

我們生活在一個(gè)物理世界，任何事物的運(yùn)動(dòng)都是符合物理世界的客觀規(guī)律的。因此，人對(duì)于事物的觀察和理解都是出于對(duì)物理規(guī)律的理解。而虛擬界面上的元素都是現(xiàn)實(shí)世界中并不存在的東西，會(huì)讓用戶有陌生感。

通過(guò)合理的動(dòng)效，讓虛擬界面模擬物理世界的規(guī)律，例如慣性、視差等等，可以讓這個(gè)虛擬的世界與物理世界產(chǎn)生交集。用戶會(huì)把自己對(duì)物理世界的認(rèn)知映射到對(duì)產(chǎn)品的認(rèn)知上。

下面舉兩個(gè)例子來(lái)說(shuō)說(shuō)具體是怎么映射的：

質(zhì)量

物體都擁有質(zhì)量，質(zhì)量帶來(lái)了我們最常見(jiàn)的物理現(xiàn)象：慣性。在這個(gè)例子中、方塊在界面上通過(guò)加速、減速、反彈、過(guò)沖等等動(dòng)態(tài)來(lái)模擬所謂的重量感，讓這個(gè)簡(jiǎn)單的界面元素有了實(shí)在感。

空間

我們所處的世界是三維的，然而受顯示設(shè)備的影響，目前大家接觸的大部分人機(jī)界面還是二維的，如何通過(guò)一個(gè)二維平面來(lái)模擬三維的世界呢?

在這個(gè)例子中，近處的方塊運(yùn)動(dòng)的快，遠(yuǎn)處的方塊運(yùn)動(dòng)的遠(yuǎn)。通過(guò)這樣的視差的效果，整個(gè)屏幕有縱深感，不再是一個(gè)簡(jiǎn)單的二維平面。我們很容易感受到，方塊間的層疊順序。同理，類似簡(jiǎn)單的動(dòng)效，可以很輕易的表達(dá)元素的層級(jí)。

小結(jié)：合理的動(dòng)效可以滿足用戶的心理預(yù)期，越是符合人對(duì)物理世界認(rèn)知的設(shè)計(jì)，就越容易幫助用戶去預(yù)判或者理解產(chǎn)品的交互邏輯。

2. 引導(dǎo)用戶注意力

如果把一個(gè)界面上的所有元素，按照明顯程度來(lái)排序，顯而易見(jiàn)我們會(huì)得到這樣一個(gè)順序：動(dòng)態(tài) > 色彩 > 明度。

所以通過(guò)合理的動(dòng)效，可以低成本的抓取人的注意力，讓他們關(guān)注設(shè)計(jì)師想讓他們關(guān)注的東西。

網(wǎng)易新聞的刷新動(dòng)畫(huà)，就是一個(gè)很優(yōu)秀的例子：

在這個(gè)例子中，左上角有一個(gè)非常簡(jiǎn)單的白色線狀 icon，并不會(huì)干擾整個(gè)頁(yè)面的主功能，顏色，以及視覺(jué)。但是通過(guò)小的動(dòng)畫(huà)，提升了 icon 的視覺(jué)層級(jí)。讓我們很容易注意到它，起到了非常好的提示效果。

3. 情感化設(shè)計(jì)

情感話設(shè)計(jì)的目標(biāo)是在用戶接觸和使用產(chǎn)品的過(guò)程中，激發(fā)用戶的正向情感，比如愉快，信任，滿足;避免用戶產(chǎn)生負(fù)向情感，比如失望，挫折感，痛苦。正向的情感會(huì)使用戶更樂(lè)于使用產(chǎn)品，遇到使用過(guò)程的一些小問(wèn)題也更加包容。

而優(yōu)良的界面動(dòng)效可以打磨產(chǎn)品的品質(zhì)感，下面就是動(dòng)效在情感化設(shè)計(jì)中的優(yōu)秀例子：

twitter 點(diǎn)贊后，心會(huì)亮起的同時(shí)，還有一個(gè)小小的禮花效果。雖然完全沒(méi)必要加上這個(gè)禮花效果，但是這種豐富的細(xì)節(jié)會(huì)讓用戶對(duì)產(chǎn)品產(chǎn)生一個(gè)正向的情感關(guān)聯(lián)，而這種關(guān)聯(lián)最終將贏得用戶對(duì)產(chǎn)品的認(rèn)同。

Facebook 點(diǎn)贊之后，可以表達(dá)你的態(tài)度，比如流淚，憤怒或者是贊。雖然在功能上來(lái)說(shuō)，這些表情有靜態(tài)的就可以了。但是正是動(dòng)畫(huà)中豐富的表情細(xì)節(jié)，進(jìn)一步引導(dǎo)用戶愿意去表態(tài)。不僅給人以驚喜，也顯著的提升表態(tài)的使用量。

動(dòng)效的價(jià)值就講到這里，接下來(lái)，基于以上三點(diǎn)，我會(huì)說(shuō)一說(shuō)怎樣去構(gòu)建一個(gè)合理高效的動(dòng)效體系。

二、優(yōu)秀的界面動(dòng)效體系

優(yōu)秀的界面動(dòng)效體系設(shè)計(jì)的四點(diǎn)原則：

• 通過(guò)動(dòng)效暗示二維界面暗含的三維層級(jí)關(guān)系，及其暗含的操作邏輯。
• 引導(dǎo)用戶的注意力向界面重點(diǎn)元素。
• 通過(guò)動(dòng)態(tài)設(shè)計(jì)讓情感化設(shè)計(jì)變得更生動(dòng)。
• 動(dòng)效的視覺(jué)效果統(tǒng)一，控制數(shù)量，不濫用。

接下來(lái)用 iOS 系統(tǒng)動(dòng)效來(lái)舉例子，眾所周知 iOS 的動(dòng)效系統(tǒng)經(jīng)過(guò)了多次的迭代，已經(jīng)做的非常好，而上述四點(diǎn)，在接下來(lái)的例子中都有體現(xiàn)。

層級(jí)暗示

切換界面的時(shí)候，所有打開(kāi)的 APP 界面覆蓋在剛才的主界面上面，同時(shí)主界面模糊，內(nèi)容區(qū)域的縮小，共同營(yíng)造出原來(lái)界面往深處后退的效果。很直觀的表達(dá)了主界面和 APP 界面的層級(jí)關(guān)系。

在鍵盤(pán)機(jī)的時(shí)代，通過(guò)菜單進(jìn)入一個(gè)新頁(yè)面的時(shí)候，通常做法是整個(gè)頁(yè)面刷新一下，但是這樣操作久了，打開(kāi)菜單太多，很容易讓人有一種「迷路」的困惑。在這個(gè)動(dòng)畫(huà)中，通過(guò)界面的左滑、右滑來(lái)表達(dá)不同界面之間的層級(jí)關(guān)系。即使看不到主菜單，你也知道自己是從哪兒進(jìn)來(lái)的。

操作暗示

在這個(gè)例子中，長(zhǎng)按一個(gè) 圖標(biāo)進(jìn)入編輯模式，所有圖標(biāo)都會(huì)開(kāi)始晃動(dòng)。雖然整個(gè)頁(yè)面并沒(méi)有任何文字提示說(shuō)明「現(xiàn)在圖標(biāo)可以拖動(dòng)的」，但是這種抖動(dòng)的不穩(wěn)定感很直觀的表達(dá)了設(shè)計(jì)者的意圖。

當(dāng)輸入密碼錯(cuò)誤的時(shí)候，密碼輸入欄會(huì)顯示出一個(gè)搖頭的效果。完全可以想象，假設(shè)用一個(gè)錯(cuò)誤提示的彈窗，不僅會(huì)中斷用戶的操作流程，引起人的反感，而且很容易讓人受挫。通過(guò)動(dòng)效，設(shè)計(jì)者用一種更友好簡(jiǎn)單的方式達(dá)到了提示的目的。

趣味

這里是開(kāi)關(guān)狀態(tài)的過(guò)度，我們可以看到月亮?xí)杏潱i的狀態(tài)有鎖上和開(kāi)啟兩種。這些有趣味的細(xì)節(jié)動(dòng)效給用戶帶來(lái)驚喜，提升界面的品質(zhì)。

克制

舉了那么多正面例子，下面也說(shuō)兩個(gè)反例。這兩張圖都是我在 dribbble 找到的點(diǎn)贊量非常高的圖。但是實(shí)際上，完全不推薦在產(chǎn)品中使用這樣的效果。

動(dòng)效不能濫用，要控制數(shù)量。在這頁(yè)面中，所有東西都在動(dòng)。很難讓人抓住視覺(jué)重心。當(dāng)菜單欄下滑的時(shí)候，每一個(gè)菜單都會(huì)有一個(gè)抖動(dòng)的效果。我們并不知道這個(gè)菜單為什么要這樣顫，看起來(lái)作者只是為了炫技這么做，實(shí)際上并沒(méi)有傳達(dá)任何的內(nèi)容，還會(huì)無(wú)形的增加了用戶的操作負(fù)擔(dān)。

好的動(dòng)效要控制在0.3~0.5秒，本例中，菜單出現(xiàn)幾乎花費(fèi)了一秒。頻繁打開(kāi)菜單很容易引起人的疲倦，可以說(shuō)是畫(huà)蛇添足了。

小結(jié)

此內(nèi)容講到這里，本篇里面我們了解了界面動(dòng)效的價(jià)值：

• 滿足用戶心理預(yù)期
• 引導(dǎo)用戶注意力
• 情感化設(shè)計(jì)

也接觸到一下優(yōu)秀的界面動(dòng)效實(shí)例：

• 通過(guò)動(dòng)效暗示二維界面暗含的三維層級(jí)關(guān)系，及其暗含的操作邏輯。
• 引導(dǎo)用戶的注意力向界面重點(diǎn)元素。
• 通過(guò)動(dòng)態(tài)設(shè)計(jì)讓情感化設(shè)計(jì)變得更生動(dòng)。
• 動(dòng)效的視覺(jué)效果統(tǒng)一，控制數(shù)量，不濫用。

分享標(biāo)題：APP界面動(dòng)效設(shè)計(jì)原則
轉(zhuǎn)載來(lái)源：http://www.js-pz168.com/news47/165347.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、域名注冊(cè)、網(wǎng)站設(shè)計(jì)公司、建站公司、靜態(tài)網(wǎng)站、微信小程序

廣告

聲明：本網(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)