在UI設(shè)計(jì)中，使用功能性動(dòng)畫的四種方法
2022-08-12 分類： 網(wǎng)站建設(shè)
十年前，用戶界面避免使用動(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ì)上來說，動(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)過深思熟慮和測(cè)試的功能性動(dòng)畫有可能實(shí)現(xiàn)多個(gè)功能，包括：
1.視覺反饋
良好的交互設(shè)計(jì)提供反饋。反饋承認(rèn)系統(tǒng)已經(jīng)接收到用戶的行為，并演示了交互的結(jié)果，不管它是否成功，這個(gè)組的動(dòng)畫都需要非常精細(xì)，并且具有設(shè)計(jì)感
按鍵反饋
在現(xiàn)實(shí)生活中，按鍵響應(yīng)我們的交互，這就是我們?nèi)绾纹谕挛锲鹱饔玫姆绞?。為了能夠預(yù)測(cè)用戶的數(shù)字界面，我們應(yīng)該采取同樣的方式
來源：Jaron Pulver
動(dòng)作結(jié)果視覺化
通過遵循原則可以看到，不告訴你，你可以使用動(dòng)畫反饋來強(qiáng)調(diào)出錯(cuò)的地方。例如，在不正確的密碼輸入上，出現(xiàn)視覺抖動(dòng)動(dòng)畫。這就像搖頭一樣，好像在說“不，再試一次”。用戶會(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)畫讓用戶覺得流程已經(jīng)成功完成。
圖片致謝：Colin Garven
2.軟化處理的狀態(tài)改變
在設(shè)計(jì)中，加入動(dòng)畫的其他好的地方是在變化的時(shí)刻。特別是在web上，用戶界面上的狀態(tài)變化經(jīng)常需要進(jìn)行硬性的削減，這可能會(huì)使他們難以跟上。沒有什么比突然的變化更讓人感到不自然的了。界面的突然變化對(duì)用戶來說是很難處理的。這些變化的時(shí)刻應(yīng)該通過UI設(shè)計(jì)添加一些動(dòng)畫來軟化。
建立連接
動(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)畫卡片從它原來的位置變成了模式的位置，使它清楚地表明內(nèi)容是相同的，只是有更多的細(xì)節(jié)。
對(duì)改變喚起注意
動(dòng)畫可以幫助你的眼睛看到一個(gè)新的物體，來自于它的顯露或者隱藏的物體位置，并且可以再次被發(fā)現(xiàn)。我們可以使用動(dòng)畫來喚起對(duì)隱藏或顯示的信息變化的關(guān)注，比如打開一邊抽屜的內(nèi)容。在下面的例子中，當(dāng)你點(diǎn)擊漢堡包圖標(biāo)時(shí)，主導(dǎo)航就會(huì)跳出來。這個(gè)動(dòng)作讓你知道主菜單并沒有消失。
圖片致謝：Tamas Kojo
3.系統(tǒng)狀態(tài)可見性
作為Jakob Nielsen 10個(gè)可用性的原始方法之一，系統(tǒng)狀態(tài)的可見性仍然是用戶界面設(shè)計(jì)中最重要的原則之一。對(duì)于用戶來說，在任何予定的時(shí)間內(nèi)了解和清楚他們系統(tǒng)當(dāng)前的上下文是非常重要的
進(jìn)度指標(biāo)
數(shù)據(jù)上傳和下載過程是制作功能性動(dòng)畫的好機(jī)會(huì)。動(dòng)態(tài)加載條設(shè)置了對(duì)操作的處理速度的期望值。在某些失敗的例子中，動(dòng)畫是很有幫助的。即使是一個(gè)不愉快的通知，比如數(shù)據(jù)下載失敗，也應(yīng)該以一種更好的方式傳達(dá)。
圖片致謝：xjw
下拉刷新
用戶的等待時(shí)間是從他們行動(dòng)的那一刻開始的，最壞的情況是，沒有任何跡象表明，系統(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è)問題。
圖片致謝：Tony Babel
4.動(dòng)畫說明
有時(shí)用戶需要一些額外的幫助來理解用戶流，或者如何與某些界面元素相互作用。尤其是用戶界面。對(duì)于用戶來說，用戶界面中包含了新的或不熟悉的特性或交互。
登陸界面
用戶登陸要求好的用戶體驗(yàn)，而在用戶界面上的動(dòng)畫會(huì)對(duì)一次使用app的用戶產(chǎn)生巨大的影響，動(dòng)畫會(huì)以一種娛樂的方式，給你無限的自由來傳達(dá)任何信息，不管主題多么復(fù)雜，多么枯燥。
視覺提示
動(dòng)畫可以提供一些有用的視覺線索。在一次打開頁面時(shí)，最常見的是說明類動(dòng)畫。動(dòng)畫顯示了頁面的某些元素是如何被使用的。這種類型的動(dòng)畫可以在游戲中找到，它通常與漸進(jìn)式解密聯(lián)系。當(dāng)你進(jìn)一步進(jìn)入游戲時(shí)，游戲機(jī)制會(huì)顯示出來。只有當(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ì)不僅僅是視覺呈現(xiàn)。
正如喬布斯所闡述的設(shè)計(jì)理念:不僅僅是它的樣子和感覺，設(shè)計(jì)就是它的工作方式。
網(wǎng)站題目：在UI設(shè)計(jì)中，使用功能性動(dòng)畫的四種方法
標(biāo)題鏈接：http://www.rwnh.cn/news40/189190.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、定制網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)站營(yíng)銷、網(wǎng)站維護(hù)
聲明：本網(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)
猜你還喜歡下面的內(nèi)容
- 網(wǎng)站優(yōu)化——站內(nèi)優(yōu)化和站外優(yōu)化的重要性分析 2022-08-12
- 建設(shè)網(wǎng)站對(duì)于表單的驗(yàn)證碼如何處理 2022-08-12
- 網(wǎng)站吸引訪客注意力必備七大要素 2022-08-12
- 站內(nèi)文章SEO寫作技巧 2022-08-12
- 成都微信微網(wǎng)站建設(shè)是這樣做好的! 2022-08-12
- 極好滴網(wǎng)站建設(shè)方法和網(wǎng)站制作流程! 2022-08-12
- 企業(yè)微信公眾號(hào)日常維護(hù)技巧 2022-08-12
- 營(yíng)銷型網(wǎng)站的十大優(yōu)勢(shì). 2022-08-12
- 這樣才是保護(hù)文本正確姿勢(shì) 2022-08-12
- 收錄大于訪問量的網(wǎng)站是否正常? 2022-08-12
- 淺析如何讓營(yíng)銷型企業(yè)網(wǎng)站產(chǎn)生更大的價(jià)值 2022-08-12
- 如何填滿[購(gòu)買關(guān)鍵詞]這個(gè)燒錢無底洞！ 2022-08-12
- 為網(wǎng)站選擇logo時(shí)要牢記的4件事 2022-08-12
- 營(yíng)銷型網(wǎng)站建設(shè)的必備因素您知道多少？ 2022-08-12
- 成都做網(wǎng)站需求提早預(yù)備啥資料怎么提交 2022-08-12
- 網(wǎng)站的建設(shè)使用戶產(chǎn)生反感的原因 2022-08-12
- 網(wǎng)站建設(shè)內(nèi)鏈有利于引導(dǎo)蜘蛛爬行 2022-08-12
- 成都營(yíng)銷型企業(yè)網(wǎng)站建設(shè)必不可少的功能有哪些？ 2022-08-12
- 「百度營(yíng)銷」做網(wǎng)絡(luò)營(yíng)銷工作好不好?待遇怎么樣? 2022-08-12