十年前，用戶界面避免使用動(dòng)畫，大多數(shù)與彈出界面和閃爍性廣告相關(guān)，但這已經(jīng)發(fā)生了變化。如今，交互設(shè)計(jì)和動(dòng)畫的細(xì)節(jié)制作讓現(xiàn)代網(wǎng)站和app產(chǎn)生根本的不同。這種心態(tài)的轉(zhuǎn)變?cè)趜urb的聲明中有清晰地表達(dá)。
我們不再只是設(shè)計(jì)靜態(tài)屏幕。我們?cè)O(shè)計(jì)的是如何使用戶可以從屏幕中得到具有愉悅感的內(nèi)容。
如果我們要設(shè)計(jì)更好的產(chǎn)品，那么我們需要從最初開始全心接受app和網(wǎng)站的交互特性。
為什么動(dòng)畫起作用
從本質(zhì)上來(lái)說(shuō)，動(dòng)態(tài)動(dòng)作在用戶界面中享有最高的地位。文本拷貝和靜態(tài)圖像都不能與運(yùn)動(dòng)相抗衡。我們的眼睛天生就會(huì)注意移動(dòng)物體——這幾乎是一種反射。我們可以很好利用這個(gè)功能性動(dòng)畫。
什么是功能性動(dòng)畫？
功能性動(dòng)畫，作為設(shè)計(jì)功能的一部分，是嵌入在UI中的一種微妙的動(dòng)畫。它有一個(gè)非常清晰和合乎邏輯的目的
減少認(rèn)知負(fù)荷
防止盲點(diǎn)變化
在空間關(guān)系中建立更好的回憶
在以人為中心的設(shè)計(jì)方法中，用戶是主要的焦點(diǎn)。用戶界面需要直觀、具響應(yīng)性和人性化。功能性動(dòng)畫可以幫助你實(shí)現(xiàn)這些目標(biāo)。
功能性動(dòng)畫如何提高用戶體驗(yàn)
我們對(duì)app或網(wǎng)站的體驗(yàn)和印象是由多種因素共同作用形成的，其中交互作用扮演著重要的角色。當(dāng)我們找到合適的環(huán)境時(shí)，在我們的設(shè)計(jì)中加入動(dòng)態(tài)是有意義和功能的。經(jīng)過(guò)深思熟慮和測(cè)試的功能性動(dòng)畫有可能實(shí)現(xiàn)多個(gè)功能，包括：
1.視覺(jué)反饋
良好的交互設(shè)計(jì)提供反饋。反饋承認(rèn)系統(tǒng)已經(jīng)接收到用戶的行為，并演示了交互的結(jié)果，不管它是否成功，這個(gè)組的動(dòng)畫都需要非常精細(xì)，并且具有設(shè)計(jì)感
按鍵反饋
在現(xiàn)實(shí)生活中，按鍵響應(yīng)我們的交互，這就是我們?nèi)绾纹谕挛锲鹱饔玫姆绞健榱四軌蝾A(yù)測(cè)用戶的數(shù)字界面，我們應(yīng)該采取同樣的方式
來(lái)源：Jaron Pulver
動(dòng)作結(jié)果視覺(jué)化
通過(guò)遵循原則可以看到，不告訴你，你可以使用動(dòng)畫反饋來(lái)強(qiáng)調(diào)出錯(cuò)的地方。例如，在不正確的密碼輸入上，出現(xiàn)視覺(jué)抖動(dòng)動(dòng)畫。這就像搖頭一樣，好像在說(shuō)“不，再試一次”。用戶會(huì)注意到動(dòng)畫，并立即了解當(dāng)前的狀態(tài)。
您還可以加強(qiáng)用戶正在執(zhí)行的操作。在下面的例子中，當(dāng)用戶點(diǎn)擊“提交”時(shí)，一個(gè)微調(diào)器會(huì)在app顯示成功狀態(tài)之前短暫出現(xiàn)。選擇目錄動(dòng)畫讓用戶覺(jué)得流程已經(jīng)成功完成。
圖片致謝：Colin Garven
2.軟化處理的狀態(tài)改變
在設(shè)計(jì)中，加入動(dòng)畫的其他好的地方是在變化的時(shí)刻。特別是在web上，用戶界面上的狀態(tài)變化經(jīng)常需要進(jìn)行硬性的削減，這可能會(huì)使他們難以跟上。沒(méi)有什么比突然的變化更讓人感到不自然的了。界面的突然變化對(duì)用戶來(lái)說(shuō)是很難處理的。這些變化的時(shí)刻應(yīng)該通過(guò)UI設(shè)計(jì)添加一些動(dòng)畫來(lái)軟化。
建立連接
動(dòng)畫轉(zhuǎn)換應(yīng)該作為用戶界面的不同狀態(tài)之間的中介，幫助用戶理解當(dāng)屏幕狀態(tài)發(fā)生變化時(shí)，到底發(fā)生了什么。用戶只需跟蹤動(dòng)作并了解兩個(gè)UI狀態(tài)是如何相關(guān)的，就可以了。
圖片致謝：Anish Chandran
動(dòng)畫轉(zhuǎn)換也能很好地關(guān)聯(lián)縮略圖和視圖細(xì)節(jié)。動(dòng)畫卡片從它原來(lái)的位置變成了模式的位置，使它清楚地表明內(nèi)容是相同的，只是有更多的細(xì)節(jié)。
對(duì)改變喚起注意
動(dòng)畫可以幫助你的眼睛看到一個(gè)新的物體，來(lái)自于它的顯露或者隱藏的物體位置，并且可以再次被發(fā)現(xiàn)。我們可以使用動(dòng)畫來(lái)喚起對(duì)隱藏或顯示的信息變化的關(guān)注，比如打開一邊抽屜的內(nèi)容。在下面的例子中，當(dāng)你點(diǎn)擊漢堡包圖標(biāo)時(shí)，主導(dǎo)航就會(huì)跳出來(lái)。這個(gè)動(dòng)作讓你知道主菜單并沒(méi)有消失。
圖片致謝：Tamas Kojo
3.系統(tǒng)狀態(tài)可見(jiàn)性
作為Jakob Nielsen 10個(gè)可用性的原始方法之一，系統(tǒng)狀態(tài)的可見(jiàn)性仍然是用戶界面設(shè)計(jì)中最重要的原則之一。對(duì)于用戶來(lái)說(shuō)，在任何予定的時(shí)間內(nèi)了解和清楚他們系統(tǒng)當(dāng)前的上下文是非常重要的
進(jìn)度指標(biāo)
數(shù)據(jù)上傳和下載過(guò)程是制作功能性動(dòng)畫的好機(jī)會(huì)。動(dòng)態(tài)加載條設(shè)置了對(duì)操作的處理速度的期望值。在某些失敗的例子中，動(dòng)畫是很有幫助的。即使是一個(gè)不愉快的通知，比如數(shù)據(jù)下載失敗，也應(yīng)該以一種更好的方式傳達(dá)。
圖片致謝：xjw
下拉刷新
用戶的等待時(shí)間是從他們行動(dòng)的那一刻開始的，最壞的情況是，沒(méi)有任何跡象表明，系統(tǒng)已經(jīng)收到了他們發(fā)出指令。刷新動(dòng)作的吸引力應(yīng)該有一個(gè)即時(shí)的反應(yīng)。重要的是，在收到用戶的請(qǐng)求后應(yīng)立即給出一些可視化反饋，以表明流程已經(jīng)啟動(dòng)。而動(dòng)畫會(huì)幫你解決這個(gè)問(wèn)題。
圖片致謝：Tony Babel
4.動(dòng)畫說(shuō)明
有時(shí)用戶需要一些額外的幫助來(lái)理解用戶流，或者如何與某些界面元素相互作用。尤其是用戶界面。對(duì)于用戶來(lái)說(shuō)，用戶界面中包含了新的或不熟悉的特性或交互。
登陸界面
用戶登陸要求完美的用戶體驗(yàn)，而在用戶界面上的動(dòng)畫會(huì)對(duì)第一次使用app的用戶產(chǎn)生巨大的影響，動(dòng)畫會(huì)以一種娛樂(lè)的方式，給你無(wú)限的自由來(lái)傳達(dá)任何信息，不管主題多么復(fù)雜，多么枯燥。
視覺(jué)提示
動(dòng)畫可以提供一些有用的視覺(jué)線索。在第一次打開頁(yè)面時(shí)，最常見(jiàn)的是說(shuō)明類動(dòng)畫。動(dòng)畫顯示了頁(yè)面的某些元素是如何被使用的。這種類型的動(dòng)畫可以在游戲中找到，它通常與漸進(jìn)式解密聯(lián)系。當(dāng)你進(jìn)一步進(jìn)入游戲時(shí)，游戲機(jī)制會(huì)顯示出來(lái)。只有當(dāng)用戶達(dá)到他們的經(jīng)驗(yàn)的適當(dāng)點(diǎn)時(shí)，才會(huì)觸發(fā)這些提示。
結(jié)論
當(dāng)使用復(fù)雜的方法時(shí)，動(dòng)畫是強(qiáng)大的工具
我們需要從一開始就全心接受這個(gè)動(dòng)作，并把它看作是我們?cè)O(shè)計(jì)的自然組成部分，因?yàn)樵O(shè)計(jì)不僅僅是視覺(jué)呈現(xiàn)。
正如喬布斯所闡述的設(shè)計(jì)理念:不僅僅是它的樣子和感覺(jué)，設(shè)計(jì)就是它的工作方式。
原文來(lái)源：https://www.webdesignerdepot.com
聯(lián)系客服
