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