網(wǎng)站建設(shè)APP時(shí)怎么使用動(dòng)效設(shè)計(jì)發(fā)布者：本站 時(shí)間：2022-05-28 11:05:29
在用戶(hù)體驗(yàn)設(shè)計(jì)中，app動(dòng)畫(huà)呈現(xiàn)了無(wú)限的創(chuàng)造可能性，同時(shí)也是目前引起熱議的設(shè)計(jì)趨勢(shì)。在今天的文章中，我們將討論在app設(shè)計(jì)中如何使用動(dòng)畫(huà)來(lái)獲得積極的用戶(hù)體驗(yàn)和流暢的交互操作。
因?yàn)樗袞|西都被整合到一個(gè)頁(yè)面，app動(dòng)畫(huà)必須是功能型元素而不是裝飾性元素。動(dòng)效元素應(yīng)該在策劃用戶(hù)旅程初期就考慮。設(shè)計(jì)動(dòng)畫(huà)時(shí)，你需要分析它們?cè)诳捎眯院涂善谕陨系挠绊憽绻憧床坏椒e極的影響，就要重新考慮下。在交互過(guò)程中，動(dòng)效的優(yōu)點(diǎn)和效用必須是顯而易見(jiàn)的，并且要超過(guò)可能出現(xiàn)的缺陷。好的UI動(dòng)畫(huà)可以達(dá)到錦上添花的作用。讓我們回顧一下能增強(qiáng)用戶(hù)界面體驗(yàn)的最流行的幾種動(dòng)畫(huà)類(lèi)型。
反饋型動(dòng)畫(huà)
反饋型動(dòng)畫(huà)告訴用戶(hù)特定的操作是成功了還是失敗了。即使在最基本的操作中，這種動(dòng)畫(huà)也能保持用戶(hù)和app之間的交流。某種程度上，它能在物理世界引發(fā)和真實(shí)物體之間的互動(dòng)。比如，當(dāng)你按一個(gè)真的按鈕時(shí)，你能感受到這個(gè)動(dòng)作的力度和按鈕的阻力。在移動(dòng)設(shè)備上，這種情況是不可能的：你只是點(diǎn)擊屏幕，但是卻沒(méi)有相應(yīng)的反饋。這就是為什么在與傳感器屏幕交互時(shí)，我們通過(guò)震動(dòng)和視覺(jué)符號(hào)來(lái)獲得反饋。這是UI動(dòng)畫(huà)拯救游戲的時(shí)代。如果動(dòng)作完成，動(dòng)畫(huà)按鈕、切換、開(kāi)關(guān)、滴答或交叉符號(hào)會(huì)迅速通知用戶(hù)。
比如，這是cinema app買(mǎi)票的交互流程。從放映頁(yè)面到選擇座位的過(guò)渡，是通過(guò)電影海報(bào)動(dòng)畫(huà)完成的，屏幕變成了電影大廳的樣子。按下所需的座位，用戶(hù)可以看到按鈕顏色的變化，理解系統(tǒng)并獲取數(shù)據(jù)。打鉤的動(dòng)畫(huà)標(biāo)志著任務(wù)的結(jié)束。
APP怎么使用動(dòng)效設(shè)計(jì)
另一個(gè)例子可以在澆水跟蹤app的交互中看到：澆水后，用戶(hù)按下按鈕，圖像從水滴形狀變成打鉤符號(hào)，表示所需操作已經(jīng)完成。
APP怎么使用動(dòng)效設(shè)計(jì)
即使是基本的導(dǎo)航，移動(dòng)動(dòng)畫(huà)添加的可能不僅僅是反饋，還可增加樂(lè)趣。反思這個(gè)可擴(kuò)展按鈕的概念：通過(guò)少量運(yùn)動(dòng)，它模仿了像果凍這種物質(zhì)的物理特性。
APP怎么使用動(dòng)效設(shè)計(jì)
進(jìn)行中的動(dòng)畫(huà)
如果交互的過(guò)程稍長(zhǎng)，用戶(hù)必須等待，他們更愿意了解發(fā)生了什么，以及進(jìn)展如何。這種動(dòng)態(tài)交互的最大優(yōu)點(diǎn)是為用戶(hù)提供了保證，使他們?cè)谑褂卯a(chǎn)品的過(guò)程中能夠感知并且保持信心。一個(gè)自信的用戶(hù)意味著積極的用戶(hù)體驗(yàn)，并為留住高水平用戶(hù)提供了良好的基礎(chǔ)。進(jìn)度條、時(shí)間線(xiàn)和其他動(dòng)態(tài)元素的動(dòng)畫(huà)可以起到一箭雙雕的作用：
– 告訴用戶(hù)目前的進(jìn)度。
– 提供娛樂(lè)性元素，減少等待中的負(fù)面情緒。
– 優(yōu)雅原創(chuàng)的設(shè)計(jì)可能成為現(xiàn)象級(jí)功能，用戶(hù)將愿意與他人分享，并吸引更多用戶(hù)參與其中。
下面，你會(huì)看到一個(gè)時(shí)間軸app：等待的時(shí)間是由從白天到黑夜的過(guò)渡插畫(huà)來(lái)支持的，數(shù)字顯示的是等待的時(shí)長(zhǎng)。
APP怎么使用動(dòng)效設(shè)計(jì)
加載動(dòng)畫(huà)
這是移動(dòng)端使用最多的動(dòng)畫(huà)。它可以被認(rèn)為是進(jìn)度動(dòng)畫(huà)的子動(dòng)畫(huà)，因?yàn)樗嬖V用戶(hù)加載過(guò)程是活動(dòng)的。加載動(dòng)畫(huà)有不同的變體，如加載，預(yù)加載、下拉刷新。
這是Slumber app對(duì)下拉刷新的運(yùn)用：拉下新一集，用戶(hù)等待時(shí)會(huì)看到加載小菊花的微動(dòng)畫(huà)，表示正在刷新過(guò)程中。而動(dòng)效插畫(huà)使用戶(hù)在等待過(guò)程中也不至于太無(wú)聊。
APP怎么使用動(dòng)效設(shè)計(jì)
吸引注意動(dòng)畫(huà)
這種動(dòng)畫(huà)在用戶(hù)與你的app交互時(shí)起著用戶(hù)體驗(yàn)可供性作用，它支持一般的視覺(jué)層次，通過(guò)動(dòng)作捕捉用戶(hù)的注意力，并將其導(dǎo)向必要的細(xì)節(jié)處。這樣可以節(jié)省掃描整個(gè)屏幕的寶貴時(shí)間，使導(dǎo)航更加清晰直觀。
這一組美味漢堡app的互動(dòng)動(dòng)畫(huà)功能是，改變價(jià)格。它給這個(gè)過(guò)程增加了生氣，使它變得自然。而且通過(guò)移動(dòng)，它會(huì)立刻吸引用戶(hù)的眼球，以這種方式提供一個(gè)提示信息。
APP怎么使用動(dòng)效設(shè)計(jì)
過(guò)渡動(dòng)畫(huà)
過(guò)渡的動(dòng)畫(huà)在交互過(guò)程中，從一個(gè)屏幕到另一個(gè)屏幕，給APP增添了個(gè)性，使其變得優(yōu)雅。
這是完美菜譜app的過(guò)渡動(dòng)畫(huà)：用戶(hù)可以自定義他們的菜單，根據(jù)他們的目標(biāo)和飲食限制。滑動(dòng)的目標(biāo)卡之間的轉(zhuǎn)換，給用戶(hù)積極的體驗(yàn)。
APP怎么使用動(dòng)效設(shè)計(jì)
是的，這不僅僅是美觀的問(wèn)題。在我們最近的文章《關(guān)于移動(dòng)應(yīng)用程序的概念性UI動(dòng)畫(huà)》中，我們展示了一些例子，說(shuō)明了過(guò)渡動(dòng)畫(huà)如何在元素之間添加更多空間的錯(cuò)覺(jué)，從而使布局變得透氣、明亮，如下所示：
APP怎么使用動(dòng)效設(shè)計(jì)
當(dāng)用戶(hù)從餅狀圖到列表視圖，保存和標(biāo)記顏色時(shí)，這里還有一個(gè)關(guān)于轉(zhuǎn)換過(guò)程創(chuàng)造性動(dòng)畫(huà)的例子:動(dòng)畫(huà)使屏幕與數(shù)據(jù)可視化之間的連接緊密相連，讓用戶(hù)看到這一聯(lián)系。
APP怎么使用動(dòng)效設(shè)計(jì)
營(yíng)銷(xiāo)型動(dòng)畫(huà)
品牌與UI設(shè)計(jì)的巧妙結(jié)合對(duì)提高品牌認(rèn)知度有重要作用。在大多數(shù)情況下，它是動(dòng)態(tài)的logo、吉祥物類(lèi)似的，通常被有效地應(yīng)用于啟動(dòng)頁(yè)。APP的營(yíng)銷(xiāo)動(dòng)畫(huà)通常集中于吸引人們注意品牌標(biāo)志。這是我們?yōu)閃hizzly設(shè)計(jì)的動(dòng)畫(huà)logo，這是一個(gè)用來(lái)推銷(xiāo)年輕人才的APP。動(dòng)畫(huà)很迷人，令人印象深刻，具有生動(dòng)的感染力。
APP怎么使用動(dòng)效設(shè)計(jì)
動(dòng)效通知
通知能吸引用戶(hù)去更新app。在不那么引人注目的動(dòng)畫(huà)支持下，通知變得更加吸引人，讓用戶(hù)不錯(cuò)過(guò)重要信息。下面你可以看到Home Budget app中的一個(gè)例子:通知不僅以明亮的顏色突出顯示，還模仿了脈動(dòng)進(jìn)行突出顯示。
APP怎么使用動(dòng)效設(shè)計(jì)
滑動(dòng)動(dòng)畫(huà)
滾動(dòng)是我們?cè)趙eb和移動(dòng)端中使用的典型交互之一。這種動(dòng)畫(huà)增添了美感和優(yōu)雅氣質(zhì)，使產(chǎn)品變得時(shí)尚、創(chuàng)意、和諧。記住，滾動(dòng)可以應(yīng)用于不同的方向，不僅是垂直的，也可以是水平的，如下圖所示。
APP怎么使用動(dòng)效設(shè)計(jì)
講故事和游戲化
在APP中使用動(dòng)畫(huà)的另一個(gè)原因是它成為故事或游戲的一部分。動(dòng)畫(huà)貼紙、徽章、獎(jiǎng)勵(lì)、吉祥物——這些是讓?xiě)?yīng)用界面變得有趣和生動(dòng)的幾種方法。比如，這里你可以看到Mood Messenger使用的動(dòng)畫(huà)貼紙，它反映出了不同的情緒，使用它們可以增加強(qiáng)烈的情感吸引力。
APP怎么使用動(dòng)效設(shè)計(jì)
UI動(dòng)畫(huà)的利弊
在APP中使用動(dòng)效，設(shè)計(jì)師應(yīng)該分析它們可能對(duì)APP產(chǎn)生的正面和負(fù)面影響。我們簡(jiǎn)單的整理下，將有助于你的決策。
在APP中使用動(dòng)效的好處：
1、節(jié)省屏幕空間
2、增加可用性
3、創(chuàng)意
4、方便和簡(jiǎn)單的交互
5、能夠同時(shí)完成多項(xiàng)功能
6、加快互動(dòng)過(guò)程
7、向用戶(hù)提供清晰的反饋
8、創(chuàng)建必要的期望
另一方面，設(shè)計(jì)師不得不考慮的缺點(diǎn)：
1、加載時(shí)間
2、干擾因素
3、耗時(shí)費(fèi)力的技術(shù)實(shí)現(xiàn)。
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話(huà)：021-58370032
關(guān)鍵詞標(biāo)簽：上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開(kāi)發(fā)