十年前,用戶界面避免使用動畫,大多數(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)圖像都不能與運(yùn)動相抗衡。我們的眼睛天生就會注意移動物體——這幾乎是一種反射。我們可以很好利用這個功能性動畫。
什么是功能性動畫?
功能性動畫,作為設(shè)計功能的一部分,是嵌入在UI中的一種微妙的動畫。它有一個非常清晰和合乎邏輯的目的
減少認(rèn)知負(fù)荷
防止盲點(diǎn)變化
在空間關(guān)系中建立更好的回憶
在以人為中心的設(shè)計方法中,用戶是主要的焦點(diǎn)。用戶界面需要直觀、具響應(yīng)性和人性化。功能性動畫可以幫助你實(shí)現(xiàn)這些目標(biāo)。
功能性動畫如何提高用戶體驗(yàn)
我們對app或網(wǎng)站的體驗(yàn)和印象是由多種因素共同作用形成的,其中交互作用扮演著重要的角色。當(dāng)我們找到合適的環(huán)境時,在我們的設(shè)計中加入動態(tài)是有意義和功能的。經(jīng)過深思熟慮和測試的功能性動畫有可能實(shí)現(xiàn)多個功能,包括:
1.視覺反饋
良好的交互設(shè)計提供反饋。反饋承認(rèn)系統(tǒng)已經(jīng)接收到用戶的行為,并演示了交互的結(jié)果,不管它是否成功,這個組的動畫都需要非常精細(xì),并且具有設(shè)計感
按鍵反饋
在現(xiàn)實(shí)生活中,按鍵響應(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ǎn)擊“提交”時,一個微調(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)你點(diǎn)擊漢堡包圖標(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.動畫說明
有時用戶需要一些額外的幫助來理解用戶流,或者如何與某些界面元素相互作用。尤其是用戶界面。對于用戶來說,用戶界面中包含了新的或不熟悉的特性或交互。
登陸界面
用戶登陸要求好的用戶體驗(yàn),而在用戶界面上的動畫會對一次使用app的用戶產(chǎn)生巨大的影響,動畫會以一種娛樂的方式,給你無限的自由來傳達(dá)任何信息,不管主題多么復(fù)雜,多么枯燥。
視覺提示
動畫可以提供一些有用的視覺線索。在一次打開頁面時,最常見的是說明類動畫。動畫顯示了頁面的某些元素是如何被使用的。這種類型的動畫可以在游戲中找到,它通常與漸進(jìn)式解密聯(lián)系。當(dāng)你進(jìn)一步進(jìn)入游戲時,游戲機(jī)制會顯示出來。只有當(dāng)用戶達(dá)到他們的經(jīng)驗(yàn)的適當(dāng)點(diǎn)時,才會觸發(fā)這些提示。
結(jié)論
當(dāng)使用復(fù)雜的方法時,動畫是強(qiáng)大的工具
我們需要從一開始就全心接受這個動作,并把它看作是我們設(shè)計的自然組成部分,因?yàn)樵O(shè)計不僅僅是視覺呈現(xiàn)。
正如喬布斯所闡述的設(shè)計理念:不僅僅是它的樣子和感覺,設(shè)計就是它的工作方式。
網(wǎng)站題目:在UI設(shè)計中,使用功能性動畫的四種方法
標(biāo)題鏈接:http://jinyejixie.com/news40/189190.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計、定制網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)站營銷、網(wǎng)站維護(hù)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)