網(wǎng)站建設APP時(shí)怎么使用動(dòng)效設計發(fā)布者：本站     時(shí)間：2022-05-28 11:05:29

在用戶(hù)體驗設計中，app動(dòng)畫(huà)呈現了無(wú)限的創(chuàng )造可能性，同時(shí)也是目前引起熱議的設計趨勢。在今天的文章中，我們將討論在app設計中如何使用動(dòng)畫(huà)來(lái)獲得積極的用戶(hù)體驗和流暢的交互操作。

因為所有東西都被整合到一個(gè)頁(yè)面，app動(dòng)畫(huà)必須是功能型元素而不是裝飾性元素。動(dòng)效元素應該在策劃用戶(hù)旅程初期就考慮。設計動(dòng)畫(huà)時(shí)，你需要分析它們在可用性和可期望性上的影響——如果你看不到積極的影響，就要重新考慮下。在交互過(guò)程中，動(dòng)效的優(yōu)點(diǎn)和效用必須是顯而易見(jiàn)的，并且要超過(guò)可能出現的缺陷。好的UI動(dòng)畫(huà)可以達到錦上添花的作用。讓我們回顧一下能增強用戶(hù)界面體驗的最流行的幾種動(dòng)畫(huà)類(lèi)型。

 

反饋型動(dòng)畫(huà)
反饋型動(dòng)畫(huà)告訴用戶(hù)特定的操作是成功了還是失敗了。即使在最基本的操作中，這種動(dòng)畫(huà)也能保持用戶(hù)和app之間的交流。某種程度上，它能在物理世界引發(fā)和真實(shí)物體之間的互動(dòng)。比如，當你按一個(gè)真的按鈕時(shí)，你能感受到這個(gè)動(dòng)作的力度和按鈕的阻力。在移動(dòng)設備上，這種情況是不可能的：你只是點(diǎn)擊屏幕，但是卻沒(méi)有相應的反饋。這就是為什么在與傳感器屏幕交互時(shí)，我們通過(guò)震動(dòng)和視覺(jué)符號來(lái)獲得反饋。這是UI動(dòng)畫(huà)拯救游戲的時(shí)代。如果動(dòng)作完成，動(dòng)畫(huà)按鈕、切換、開(kāi)關(guān)、滴答或交叉符號會(huì )迅速通知用戶(hù)。

比如，這是cinema app買(mǎi)票的交互流程。從放映頁(yè)面到選擇座位的過(guò)渡，是通過(guò)電影海報動(dòng)畫(huà)完成的，屏幕變成了電影大廳的樣子。按下所需的座位，用戶(hù)可以看到按鈕顏色的變化，理解系統并獲取數據。打鉤的動(dòng)畫(huà)標志著(zhù)任務(wù)的結束。

APP怎么使用動(dòng)效設計

 

另一個(gè)例子可以在澆水跟蹤app的交互中看到：澆水后，用戶(hù)按下按鈕，圖像從水滴形狀變成打鉤符號，表示所需操作已經(jīng)完成。

APP怎么使用動(dòng)效設計

 

即使是基本的導航，移動(dòng)動(dòng)畫(huà)添加的可能不僅僅是反饋，還可增加樂(lè )趣。反思這個(gè)可擴展按鈕的概念：通過(guò)少量運動(dòng)，它模仿了像果凍這種物質(zhì)的物理特性。

APP怎么使用動(dòng)效設計

 

進(jìn)行中的動(dòng)畫(huà)
如果交互的過(guò)程稍長(cháng)，用戶(hù)必須等待，他們更愿意了解發(fā)生了什么，以及進(jìn)展如何。這種動(dòng)態(tài)交互的最大優(yōu)點(diǎn)是為用戶(hù)提供了保證，使他們在使用產(chǎn)品的過(guò)程中能夠感知并且保持信心。一個(gè)自信的用戶(hù)意味著(zhù)積極的用戶(hù)體驗，并為留住高水平用戶(hù)提供了良好的基礎。進(jìn)度條、時(shí)間線(xiàn)和其他動(dòng)態(tài)元素的動(dòng)畫(huà)可以起到一箭雙雕的作用：

– 告訴用戶(hù)目前的進(jìn)度。

– 提供娛樂(lè )性元素，減少等待中的負面情緒。

– 優(yōu)雅原創(chuàng )的設計可能成為現象級功能，用戶(hù)將愿意與他人分享，并吸引更多用戶(hù)參與其中。

 

下面，你會(huì )看到一個(gè)時(shí)間軸app：等待的時(shí)間是由從白天到黑夜的過(guò)渡插畫(huà)來(lái)支持的，數字顯示的是等待的時(shí)長(cháng)。

APP怎么使用動(dòng)效設計

 

加載動(dòng)畫(huà)
這是移動(dòng)端使用最多的動(dòng)畫(huà)。它可以被認為是進(jìn)度動(dòng)畫(huà)的子動(dòng)畫(huà)，因為它告訴用戶(hù)加載過(guò)程是活動(dòng)的。加載動(dòng)畫(huà)有不同的變體，如加載，預加載、下拉刷新。

這是Slumber app對下拉刷新的運用：拉下新一集，用戶(hù)等待時(shí)會(huì )看到加載小菊花的微動(dòng)畫(huà)，表示正在刷新過(guò)程中。而動(dòng)效插畫(huà)使用戶(hù)在等待過(guò)程中也不至于太無(wú)聊。

APP怎么使用動(dòng)效設計

 

吸引注意動(dòng)畫(huà)
這種動(dòng)畫(huà)在用戶(hù)與你的app交互時(shí)起著(zhù)用戶(hù)體驗可供性作用，它支持一般的視覺(jué)層次，通過(guò)動(dòng)作捕捉用戶(hù)的注意力，并將其導向必要的細節處。這樣可以節省掃描整個(gè)屏幕的寶貴時(shí)間，使導航更加清晰直觀(guān)。

這一組美味漢堡app的互動(dòng)動(dòng)畫(huà)功能是，改變價(jià)格。它給這個(gè)過(guò)程增加了生氣，使它變得自然。而且通過(guò)移動(dòng)，它會(huì )立刻吸引用戶(hù)的眼球，以這種方式提供一個(gè)提示信息。

APP怎么使用動(dòng)效設計

 

過(guò)渡動(dòng)畫(huà)
過(guò)渡的動(dòng)畫(huà)在交互過(guò)程中，從一個(gè)屏幕到另一個(gè)屏幕，給APP增添了個(gè)性，使其變得優(yōu)雅。

這是完美菜譜app的過(guò)渡動(dòng)畫(huà)：用戶(hù)可以自定義他們的菜單，根據他們的目標和飲食限制?；瑒?dòng)的目標卡之間的轉換，給用戶(hù)積極的體驗。

APP怎么使用動(dòng)效設計

是的，這不僅僅是美觀(guān)的問(wèn)題。在我們最近的文章《關(guān)于移動(dòng)應用程序的概念性UI動(dòng)畫(huà)》中，我們展示了一些例子，說(shuō)明了過(guò)渡動(dòng)畫(huà)如何在元素之間添加更多空間的錯覺(jué)，從而使布局變得透氣、明亮，如下所示：

APP怎么使用動(dòng)效設計

當用戶(hù)從餅狀圖到列表視圖，保存和標記顏色時(shí)，這里還有一個(gè)關(guān)于轉換過(guò)程創(chuàng )造性動(dòng)畫(huà)的例子:動(dòng)畫(huà)使屏幕與數據可視化之間的連接緊密相連，讓用戶(hù)看到這一聯(lián)系。

APP怎么使用動(dòng)效設計

營(yíng)銷(xiāo)型動(dòng)畫(huà)
品牌與UI設計的巧妙結合對提高品牌認知度有重要作用。在大多數情況下，它是動(dòng)態(tài)的logo、吉祥物類(lèi)似的，通常被有效地應用于啟動(dòng)頁(yè)。APP的營(yíng)銷(xiāo)動(dòng)畫(huà)通常集中于吸引人們注意品牌標志。這是我們?yōu)閃hizzly設計的動(dòng)畫(huà)logo，這是一個(gè)用來(lái)推銷(xiāo)年輕人才的APP。動(dòng)畫(huà)很迷人，令人印象深刻，具有生動(dòng)的感染力。

APP怎么使用動(dòng)效設計

 

動(dòng)效通知
通知能吸引用戶(hù)去更新app。在不那么引人注目的動(dòng)畫(huà)支持下，通知變得更加吸引人，讓用戶(hù)不錯過(guò)重要信息。下面你可以看到Home Budget app中的一個(gè)例子:通知不僅以明亮的顏色突出顯示，還模仿了脈動(dòng)進(jìn)行突出顯示。

APP怎么使用動(dòng)效設計

 

滑動(dòng)動(dòng)畫(huà)
滾動(dòng)是我們在web和移動(dòng)端中使用的典型交互之一。這種動(dòng)畫(huà)增添了美感和優(yōu)雅氣質(zhì)，使產(chǎn)品變得時(shí)尚、創(chuàng )意、和諧。記住，滾動(dòng)可以應用于不同的方向，不僅是垂直的，也可以是水平的，如下圖所示。

APP怎么使用動(dòng)效設計

 

講故事和游戲化
在A(yíng)PP中使用動(dòng)畫(huà)的另一個(gè)原因是它成為故事或游戲的一部分。動(dòng)畫(huà)貼紙、徽章、獎勵、吉祥物——這些是讓?xiě)媒缑孀兊糜腥ず蜕鷦?dòng)的幾種方法。比如，這里你可以看到Mood Messenger使用的動(dòng)畫(huà)貼紙，它反映出了不同的情緒，使用它們可以增加強烈的情感吸引力。

APP怎么使用動(dòng)效設計

 

UI動(dòng)畫(huà)的利弊
在A(yíng)PP中使用動(dòng)效，設計師應該分析它們可能對APP產(chǎn)生的正面和負面影響。我們簡(jiǎn)單的整理下，將有助于你的決策。

 

在A(yíng)PP中使用動(dòng)效的好處：

1、節省屏幕空間

2、增加可用性

3、創(chuàng )意

4、方便和簡(jiǎn)單的交互

5、能夠同時(shí)完成多項功能

6、加快互動(dòng)過(guò)程

7、向用戶(hù)提供清晰的反饋

8、創(chuàng )建必要的期望

 

另一方面，設計師不得不考慮的缺點(diǎn)：

1、加載時(shí)間

2、干擾因素

3、耗時(shí)費力的技術(shù)實(shí)現。