優(yōu)秀的設(shè)計(jì)是無(wú)形的，一個(gè)優(yōu)秀的動(dòng)效能你的App變得友好而且抓人眼球，但是絕不會(huì)讓用戶分心。今天分享7個(gè)移動(dòng)App 動(dòng)效的設(shè)計(jì)技巧以及9條設(shè)計(jì)原則，幫你做出美觀并實(shí)用的動(dòng)效！
UI界面動(dòng)效設(shè)計(jì)方法：
視覺(jué)反饋
對(duì)于任何用戶界面來(lái)講，視覺(jué)反饋都是至關(guān)重要的。在現(xiàn)實(shí)生活中，人們和任何物體的交互都是伴隨著回應(yīng)的。
同樣地，人們期待從APP元素中得到一個(gè)類似的效果。App給的視覺(jué)，聽(tīng)覺(jué)及觸覺(jué)反饋，使用戶感到他們?cè)诓倏谹PP。同時(shí)視覺(jué)反饋有個(gè)更簡(jiǎn)單的用途：它暗示著您的APP運(yùn)行正常。當(dāng)一個(gè)按鈕在放大或者一個(gè)被滑動(dòng)圖像在朝著正確方向移動(dòng)，那么很明顯，這個(gè)APP在運(yùn)行著呢，在回應(yīng)著用戶的操作。下面的例子顯示，當(dāng)用戶點(diǎn)擊屏幕以示完成任務(wù)時(shí)，包含有數(shù)據(jù)的方塊就縮小并且變成了綠色。
功能改變
這種動(dòng)效展示出元素在與用戶進(jìn)行交互的時(shí)候，是如何發(fā)生變化的。當(dāng)您想要闡明一個(gè)元素功能如何變化時(shí)，這種動(dòng)效是最好的選擇。它經(jīng)常與按鈕，圖標(biāo)和其它小設(shè)計(jì)元素一起使用。
空間擴(kuò)展
大部分的移動(dòng)APP都有非常復(fù)雜的結(jié)構(gòu)，所以設(shè)計(jì)師的的工作就是盡可能地簡(jiǎn)化APP的導(dǎo)航。對(duì)于這項(xiàng)任務(wù)來(lái)講，動(dòng)效是極其有幫助的。如果您的動(dòng)效展示出了元素被藏在哪里，那么用戶下次找起來(lái)就會(huì)很容易了。第一個(gè)例子中，我們看到導(dǎo)航欄的菜單，當(dāng)用戶點(diǎn)擊按鈕時(shí)，它顛倒過(guò)來(lái)了：
元素的層次結(jié)構(gòu)及其交互
動(dòng)效好地描述了界面的各個(gè)部分并且闡明了它們之間是如何進(jìn)行交互的。動(dòng)效中每個(gè)元素都有其目的和定位。比如，一個(gè)按鈕可以激活彈出菜單，那么此菜單最好從按鈕彈出而不是從屏幕側(cè)面滑出來(lái)：這樣就會(huì)給用戶顯示按下按鈕的回應(yīng)，幫助用戶理解這兩個(gè)元素（按鈕和彈出菜單）是有聯(lián)系的。
所有動(dòng)效都應(yīng)該闡釋元素之間是如何聯(lián)系的。這種層次結(jié)構(gòu)和元素的互動(dòng)對(duì)于一個(gè)直觀的界面來(lái)講是非常重要的。下面第一個(gè)例子顯示當(dāng)按鈕被點(diǎn)擊后菜單欄出現(xiàn)，并且在用戶的眼里，菜單欄和按鈕本質(zhì)上是同樣的元素，只是變大了：
視覺(jué)提示
動(dòng)效暗示如何與元素進(jìn)行交互。當(dāng)一款A(yù)PP的元素間有不可預(yù)估的互動(dòng)模式時(shí)，動(dòng)效提供視覺(jué)線索就十分必要了。在這個(gè)例子中，當(dāng)用戶打開(kāi)一個(gè)博文系列時(shí)，帶有文章的卡片就從屏幕的右側(cè)出現(xiàn)，用戶就可以知道要水平地滑動(dòng)來(lái)瀏覽這些卡片：
系統(tǒng)狀態(tài)
在您的APP中，總有那么幾個(gè)進(jìn)程在后臺(tái)運(yùn)行著：從服務(wù)器下載數(shù)據(jù)，進(jìn)行計(jì)算等。您的任務(wù)就是讓用戶知道APP并沒(méi)有停止運(yùn)行或者崩潰掉，要讓用戶知道APP在工作著。通過(guò)App表現(xiàn)出來(lái)的視覺(jué)符號(hào)的進(jìn)展給用戶一種控制感。理想狀態(tài)下，APP中的每個(gè)進(jìn)程都應(yīng)該被一個(gè)獨(dú)立的動(dòng)效所伴隨。比如，當(dāng)音頻錄制正在進(jìn)行，屏幕可能要顯示一條波動(dòng)的音頻軌道。實(shí)時(shí)聲波動(dòng)效就可以顯示出聲音的大小。
這種動(dòng)效最常見(jiàn)的一種類型就是下拉刷新動(dòng)效：
有趣的動(dòng)效
有趣的動(dòng)效可以畫(huà)龍點(diǎn)睛也可以畫(huà)虎類犬。它們通常都沒(méi)有什么意義，而且會(huì)讓開(kāi)發(fā)的工作變得異常復(fù)雜。但一個(gè)非常獨(dú)特的動(dòng)效就可能很吸引用戶并且讓您的APP脫穎而出。這是設(shè)計(jì)師讓用戶愛(ài)上他們產(chǎn)品的一個(gè)秘密武器。獨(dú)特的動(dòng)效可以助您創(chuàng)立一個(gè)識(shí)別度高的品牌。
在我們的例子中，移動(dòng)的圓圈看起來(lái)非常別致并且很吸引人的注意力。沿著屏幕移動(dòng)的這種效果能夠帶來(lái)愉悅感和游戲感，簡(jiǎn)單并且有趣。
我也非常確信下拉刷新的動(dòng)效如果做成正在煮菜的鍋，會(huì)給人耳目一新的感受：
在制作有趣的動(dòng)效時(shí)要注意兩點(diǎn)：
1）一定保證動(dòng)效不會(huì)遮蓋或者隱藏APP的功能；
2）一定不能耗時(shí)間。
設(shè)計(jì)的主要原則
我們已經(jīng)看過(guò)了動(dòng)效的主要類型和功能。為了設(shè)計(jì)出真正成功的動(dòng)效，請(qǐng)時(shí)刻牢記Walt Disney最初提出來(lái)的動(dòng)畫(huà)的9條原則，這些原則可以非常有效地應(yīng)用在UI設(shè)計(jì)中。
1. 材質(zhì)
給用戶展示界面元素是由什么構(gòu)成的：輕盈的還是笨重的？死板的還是靈活的？平面的還是多維度的？你需要讓用戶對(duì)界面元素的交互模式有個(gè)基本的感覺(jué)。
2. 運(yùn)動(dòng)軌跡
你需要闡明運(yùn)動(dòng)的自然屬性。一般原則顯示沒(méi)有生命的機(jī)械物體的運(yùn)動(dòng)軌跡通常都是直線，而有生命的物體擁有更為復(fù)雜和非直線性的運(yùn)動(dòng)軌跡。您要決定您的UI要給用戶呈現(xiàn)的什么樣的印象，并且將這種屬性賦予它。
3. 時(shí)間
在設(shè)計(jì)動(dòng)效時(shí)，時(shí)間是最有爭(zhēng)議的和最重要的考慮之一。在現(xiàn)實(shí)世界中，物體并不遵守直線運(yùn)動(dòng)規(guī)則因?yàn)樗鼈冃枰獣r(shí)間來(lái)加速或者減速，使用曲線運(yùn)動(dòng)規(guī)則會(huì)讓元素的移動(dòng)變得更加自然。
4. 聚焦動(dòng)效
要集中注意力于屏幕的某一特定區(qū)域。例如，閃爍的圖標(biāo)就會(huì)吸引用戶的注意，用戶會(huì)知道那有個(gè)提醒并去點(diǎn)擊。這種動(dòng)效常用于有太多細(xì)節(jié)和元素從而無(wú)法將特殊元素區(qū)別化的界面中。
5. 跟隨和重疊
跟隨是一個(gè)動(dòng)作的終止部分。物體不會(huì)迅速地停止或者開(kāi)始移動(dòng)，每個(gè)運(yùn)動(dòng)都可以被拆解為每個(gè)部分按照各自速率移動(dòng)的細(xì)小動(dòng)作。例如，當(dāng)您扔個(gè)球，在球出手后，您的手也依然在移動(dòng)。
重疊意味著在第一個(gè)動(dòng)作結(jié)束前開(kāi)始的第二個(gè)動(dòng)作，這樣可以吸引用戶的注意力，因?yàn)閮蓚€(gè)動(dòng)作之間并沒(méi)有一段靜止期。
6. 次要?jiǎng)有?br />次要?jiǎng)有г瓌t類似于跟隨和重疊原則。簡(jiǎn)要地講，主要?jiǎng)有Э杀淮我獎(jiǎng)有О殡S。次要?jiǎng)有巩?huà)面更加生動(dòng)，但如果一不小心就會(huì)引起用戶不必要的分神。
7. 緩入和緩出
緩入/緩出是設(shè)計(jì)的基礎(chǔ)原則，尤其是在移動(dòng)開(kāi)發(fā)UI動(dòng)效，和普通的動(dòng)畫(huà)制作中同等重要。雖然易于理解，但此原則卻常常容易被忽略。緩入/緩出原則是來(lái)自于現(xiàn)實(shí)世界中物體不可能立刻開(kāi)始或者立刻停止運(yùn)動(dòng)的事實(shí)。任何物體都需要一定的時(shí)間用來(lái)加速或者減速。當(dāng)你使用緩入/緩出原則來(lái)設(shè)計(jì)動(dòng)效時(shí)，將會(huì)導(dǎo)出非常真實(shí)的運(yùn)動(dòng)模式。
8.預(yù)期
預(yù)期原則適用于提示性視覺(jué)元素。在動(dòng)效展現(xiàn)之前，我們給用戶點(diǎn)時(shí)間讓他們預(yù)測(cè)一些要發(fā)生的事情。完成預(yù)期其中一種方法就是使用我們上述的緩入原則。物體朝特定方向移動(dòng)也可以給出預(yù)期視覺(jué)提示：例如，一疊卡片出現(xiàn)在屏幕上，你可以讓這疊卡片最上面的一張卡傾斜，那么用戶就可以推測(cè)出這些卡片可以移動(dòng)。
9. 韻律
動(dòng)效中的韻律和音樂(lè)與舞蹈中的韻律有著同樣的功能；它使動(dòng)效結(jié)構(gòu)化。使用韻律可以使動(dòng)效更加自然。
10.夸張
夸張的表現(xiàn)方法常常會(huì)被用到，但它并不是那么容易被闡釋，因?yàn)樗腔诒豢鋸埢念A(yù)期動(dòng)作或效果。它可以幫助吸引額外的注意力到特殊元素上。
在這篇文章中，我們探討了動(dòng)效的類型，以及設(shè)計(jì)動(dòng)效的原則。希望能幫助你創(chuàng)造出獨(dú)特有效的動(dòng)效。
這里有需要您記住的且非常重要的4點(diǎn)：
1. 記住誰(shuí)是您的目標(biāo)用戶，并且設(shè)計(jì)您的原型方案去解決他們的問(wèn)題；
2. 請(qǐng)確保您的動(dòng)效的每個(gè)元素都具有其背后的基本原因（為什么是這樣？為什么會(huì)是如此？為什么這個(gè)時(shí)間點(diǎn)？）；
3. 為了使您的產(chǎn)品有特色，努力模仿自然界的運(yùn)動(dòng)模式來(lái)創(chuàng)造自然的動(dòng)效；

4. 在項(xiàng)目的任何階段，都要隨時(shí)與開(kāi)發(fā)人員保持溝通；

本文來(lái)自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽：重慶網(wǎng)站建設(shè)公司,成都網(wǎng)頁(yè)設(shè)計(jì)公司,成都網(wǎng)站設(shè)計(jì)公司,高端網(wǎng)站建設(shè)

本文題目：移動(dòng)APP的7種動(dòng)效設(shè)計(jì)和9條設(shè)計(jì)原則
網(wǎng)頁(yè)路徑：http://www.rwnh.cn/news/165969.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、自適應(yīng)網(wǎng)站、微信公眾號(hào)、做網(wǎng)站、云服務(wù)器

廣告

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