隨著技術(shù)的快速發(fā)展，動(dòng)效不再是視覺上的華美，更多的用戶所要求的期望功能。動(dòng)效解決了很多功能問題和接口，可以真正與用戶互動(dòng)。下面與創(chuàng)新互聯(lián)編者《APP界面設(shè)計(jì)中使用動(dòng)效的注意事項(xiàng)》，提高界面接口的功能增加情感的力量。

1.系統(tǒng)狀態(tài)在你的程序在后臺(tái)總發(fā)生一些過程，如正在從服務(wù)器下載數(shù)據(jù)，進(jìn)行計(jì)算。這總是需要一些時(shí)間的。你需要讓用戶知道這個(gè)程序沒有凍結(jié)，顯示正在處理的狀態(tài)。視覺交互給用戶一種控制程序的感覺。 加載完成度加載時(shí)間對(duì)大多數(shù)產(chǎn)品是不可避免的。而動(dòng)效雖然不能解決這個(gè)問題，但會(huì)減少一點(diǎn)問題。當(dāng)我們不能縮短時(shí)，當(dāng)然可以使等待變得更愉快。有創(chuàng)意的過程動(dòng)效可以減少用戶感知的時(shí)間。動(dòng)效影響用戶感知你的產(chǎn)品，使它看起來比實(shí)際上更好。

如果一個(gè)應(yīng)用在加載時(shí)為用戶提供了一些有趣的事情，這會(huì)使得用戶更少關(guān)注等待本身。圖片來源：Ramotion

下拉刷新

這組很流行的動(dòng)效是“下拉刷新”，它發(fā)起一個(gè)移動(dòng)設(shè)備上的內(nèi)容更新的過程。

圖片來源：Zee Young提示：刷新動(dòng)效應(yīng)該與設(shè)計(jì)整體匹配——如果應(yīng)用很小，動(dòng)效也應(yīng)該是。

通知因?yàn)檫\(yùn)動(dòng)會(huì)吸引注意力，動(dòng)效是一個(gè)令人愉快的方式可以與沒有太多經(jīng)驗(yàn)的用戶進(jìn)行交互。移動(dòng)的對(duì)象立即抓住了用戶的注意力。

2.導(dǎo)航和轉(zhuǎn)換

最基本的動(dòng)效是轉(zhuǎn)換。這種類型的動(dòng)效背后的邏輯是幫助用戶理解發(fā)生在頁面上的布局的變化，改變了什么以及以后如何再次改變。一個(gè)典型的例子是一個(gè)漢堡包按鈕，進(jìn)行切換隱藏內(nèi)容。

動(dòng)效設(shè)計(jì)可以有效地引導(dǎo)用戶愉快的接受通知。圖片來源：Gal Shir盡管漢堡包動(dòng)效可能在這里是最推薦的，還是有很多其他方式的動(dòng)畫導(dǎo)航。

導(dǎo)航之間的轉(zhuǎn)換設(shè)計(jì)師使用動(dòng)效在導(dǎo)航之間切換用戶上下文，解釋屏幕上的元素的變化。

不同狀態(tài)之間的轉(zhuǎn)換應(yīng)該充當(dāng)中介的UI,幫助用戶理解屏幕上的變化是發(fā)生了什么。圖片來源：Ehsan Rahimi

視覺元素之間的層次結(jié)構(gòu)和聯(lián)系動(dòng)效可以好的描述對(duì)象，并說明它們?nèi)绾芜M(jìn)行交互的。

動(dòng)效說明了元素是如何交互的。圖片來源：Vitaly Rubtsov

功能變化在某些情況下，設(shè)計(jì)師們不得不設(shè)計(jì)一個(gè)在一定條件下變化但操作按鈕。我們經(jīng)常在空間受限的手機(jī)設(shè)計(jì)中看到。

“開始”和“停止”按鈕可能是最常見的多態(tài)按鈕的例子。圖片來源：KREATIVA Studio這種類型的動(dòng)畫顯示了當(dāng)用戶進(jìn)行交互時(shí)元素是怎樣改變的。在下面的示例中，當(dāng)用戶按浮動(dòng)操作按鈕，加號(hào)變成了一支鉛筆。這表示鉛筆是主要的功能。這個(gè)小的細(xì)節(jié)意味著接下來發(fā)生不同的情況，知道圖標(biāo)意味著這兩種狀態(tài)。按鈕改變從一個(gè)“+”到“鉛筆”表明按鈕的功能發(fā)生了變化。

3.視覺反饋

任何用戶界面的視覺反饋都是至關(guān)重要的。它可以讓用戶有控制感，讓用戶感覺理解在給定的時(shí)間的當(dāng)前上下文的系統(tǒng)。 反饋確認(rèn)APP界面設(shè)計(jì)的元素如按鈕和控件應(yīng)該有的，即使他們是在另一個(gè)圖層后面。在物質(zhì)世界中，按鈕、控件和其他與我們進(jìn)行交互的對(duì)象。人們都會(huì)在交互中期望類似水平的用戶界面控件的響應(yīng)能力。為了彌合這一差距，視覺和運(yùn)動(dòng)軌跡需要即時(shí)輸入，動(dòng)畫的外觀和方式直接進(jìn)行操作。

可視化的行為的結(jié)果動(dòng)效可以提高每一個(gè)交互并且是加強(qiáng)用戶預(yù)成型的操作。在下面的例子中，當(dāng)用戶點(diǎn)擊“支付”，一個(gè)轉(zhuǎn)輪短暫出現(xiàn)在應(yīng)用中表示成功的狀態(tài)。動(dòng)效讓用戶覺得他們可以很容易支付而且用戶會(huì)很喜歡這樣的細(xì)節(jié)。

視覺反應(yīng)可以增加用戶的參與度并取悅用戶。圖片來源：Michal Villar

工具和教程下面的教程可以幫助您把動(dòng)效融入你的Android或者iOS項(xiàng)目中：用Adobe After Effects制作動(dòng)效。用圖形和動(dòng)效指南幫助你為應(yīng)用程序添加一個(gè)動(dòng)效到你的Android程序，使用iOS自定義的動(dòng)畫項(xiàng)目

總結(jié)

動(dòng)效在使用時(shí)是一種強(qiáng)大的復(fù)雜的方式。它為設(shè)計(jì)增加了生命，即使在最簡(jiǎn)單的交互吸引用戶，讓你的作品脫穎而出。精心設(shè)計(jì)的動(dòng)效增強(qiáng)用戶體驗(yàn)。

當(dāng)前文章：APP界面設(shè)計(jì)中使用動(dòng)效的注意事項(xiàng)
分享網(wǎng)址：http://jinyejixie.com/news/167179.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站改版、企業(yè)網(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í)需注明來源： 創(chuàng)新互聯(lián)