動(dòng)效是應(yīng)用程序或網(wǎng)站開發(fā)的熱點(diǎn):部分人認(rèn)為動(dòng)效會(huì)使屏幕和頁面超載,而其他人則表示它對(duì)用戶體驗(yàn)有很多大的幫助。無論如何,今天大多數(shù)用戶都希望鏈接的動(dòng)效是必須的。讓我們看看哪些類型的UI動(dòng)效受大家歡迎和廣泛使用,以及它們?nèi)绾斡绊懹脩趔w驗(yàn)。
1、加載和進(jìn)度
這可能是眾多的UI動(dòng)效中最多樣化。它們的目的是告知用戶它們?cè)趹?yīng)用程序或網(wǎng)站上的進(jìn)展。很難想象等待中不理解發(fā)生了什么更糟糕的事情——加載和進(jìn)度動(dòng)效解決了這個(gè)問題。例如,下拉動(dòng)效顯示頁面正在重新加載內(nèi)容。進(jìn)度條告知用戶進(jìn)入過程的時(shí)間和完成完成的時(shí)間。
Gal Shir的這個(gè)概念顯示了付款確認(rèn)的過程:當(dāng)用戶正在等待時(shí),進(jìn)度條正在填補(bǔ)以使其清楚。屏幕上的動(dòng)畫圓圈也營造出活躍過程的感覺。
Dimest的進(jìn)度條動(dòng)畫 基于引人注目的色彩對(duì)比度和添加到主要部分的小顆粒的特殊效果。欄右側(cè)的計(jì)數(shù)器還包含進(jìn)度百分比。
2、導(dǎo)航
這種類型的動(dòng)畫通過界面導(dǎo)航用戶。它提示某些布局元素是可點(diǎn)擊的,可滑動(dòng)的,可拉動(dòng)的或可點(diǎn)擊的的提示。例如,當(dāng)Web界面布局中的某些東西在懸停時(shí)的動(dòng)畫效果時(shí)。它通過增強(qiáng)視覺層次和直觀的導(dǎo)航,吸引用戶注意交互的核心元素。
Piotr Kohut在UI設(shè)計(jì)概念中的動(dòng)畫微交互:當(dāng)您點(diǎn)擊卡片時(shí),它會(huì)以動(dòng)效響應(yīng),向您顯示按鈕被按下的狀態(tài)以及卡片的數(shù)量隨動(dòng)作而變化。
Prekesh交互式標(biāo)簽欄設(shè)計(jì)的有趣和吸引人:配置文件圖標(biāo)向右或向左移動(dòng),就好像它正在查看用戶按下的圖標(biāo)一樣。
Oleg Frolov的動(dòng)畫交互概念顯示了一個(gè)轉(zhuǎn)換成光標(biāo)的搜索圖標(biāo)。
3、動(dòng)作完成
另一種類型的UI動(dòng)畫對(duì)應(yīng)用程序或網(wǎng)站可用性具有戰(zhàn)略意義?;旧?,這個(gè)動(dòng)效通知用戶動(dòng)作已經(jīng)完成,例如:按鈕被按下,菜單打開或關(guān)閉,文件上載,付款被接受等等進(jìn)行反饋。
它為什么如此重要?因?yàn)橹恍椟c(diǎn)擊屏幕或點(diǎn)擊鼠標(biāo)進(jìn)行各種操作,我們就需要了解正在發(fā)生的事情。它不同于物體間的相互作用。
簡單的例子:用鍵盤輸入文字,感受按鍵紋理,阻力和聽到聲音,與在智能手機(jī)屏幕上輸入文字完全不同,后者沒有給出任何物理反饋。因此,振動(dòng)和視覺符號(hào)發(fā)揮了重要作用,讓用戶在交互過程中充滿信心。
當(dāng)您點(diǎn)擊電子商務(wù)網(wǎng)站上的“支付”按鈕時(shí),但是沒有任何反應(yīng)時(shí)也會(huì)發(fā)生同樣的情況。你會(huì)覺得付款完成了嗎?你應(yīng)該再次按下“支付”按鈕,還是再注冊(cè)一次支付方式并付款那么他將兩次拿走你的錢?給出一個(gè)快速的視覺提示,例如更改按鈕的顏色,將其轉(zhuǎn)換為勾號(hào)符號(hào)或或者打開一個(gè)彈出窗口,提供進(jìn)一步的細(xì)節(jié),不僅可以幫助用戶,而且?guī)椭切┎粫?huì)亂花錢或數(shù)以百計(jì)的錯(cuò)誤點(diǎn)擊的企業(yè)主。
Gal Shir的這個(gè)簡單動(dòng)畫顯示了從待辦事項(xiàng)列表中刪除任務(wù)的過程。它模仿了我們?cè)诩埫嫔纤龅倪^程相同:用戶只需在文本上滑動(dòng),當(dāng)復(fù)選框轉(zhuǎn)換為勾選時(shí),它會(huì)被劃掉。
Jakub Antalik的這個(gè)移動(dòng)界面概念顯示了勾選動(dòng)畫,以標(biāo)記動(dòng)作在單獨(dú)的屏幕上完成。
4、滾動(dòng)
毫無疑問,我們花了幾個(gè)小時(shí)的時(shí)間滾動(dòng)可能沒有特效效果和動(dòng)畫效果。然而,運(yùn)動(dòng)使得過程更加優(yōu)雅和諧。它經(jīng)常模仿來自物理世界的自然相互作用,并賦予界面整體外觀。請(qǐng)記住,滾動(dòng)可以應(yīng)用于不同的方向,不僅是垂直方向,也可以是水平方向。
然而,這不僅僅是關(guān)于美。這種動(dòng)畫還可以幫助支持屏幕上更多空間的視覺錯(cuò)覺,或者快速闡明元素的限制。特別是在移動(dòng)界面和有限的屏幕空間。
Radesign的 Web UI動(dòng)效, 其中的照片不會(huì)立即顯示,而是通過滾動(dòng)逐漸打開。
Robbin Senijn的 活潑的滾動(dòng)動(dòng)效將滾動(dòng)和視覺拆卸物品形象的機(jī)制和諧地結(jié)合起來。
5、轉(zhuǎn)變
正如我在關(guān)于流行的UI設(shè)計(jì)趨勢(shì)的文章中所提到的,在許多設(shè)計(jì)師的作品集中都可以找到轉(zhuǎn)換這一動(dòng)效的實(shí)驗(yàn)。動(dòng)效過渡為用戶界面的交互增添了原創(chuàng)性和趣味性。它們?cè)试S應(yīng)用程序、登錄頁面或網(wǎng)站脫穎而出。更重要的是,他們經(jīng)常與現(xiàn)實(shí)世界有著強(qiáng)烈的聯(lián)系。當(dāng)網(wǎng)頁像紙質(zhì)雜志的頁面翻過來一樣,或者像真實(shí)的那樣拉出卡片時(shí),它會(huì)是多么吸引人的,令人難忘。它甚至可能是用戶在網(wǎng)站上停留更長時(shí)間的原因(這對(duì)SEO有好處)或APP。
Zhenya Rynzhuk的優(yōu)雅設(shè)計(jì)特點(diǎn)是翻頁與翻頁之間的過渡。
6、解釋器
這種類型的動(dòng)效通常出現(xiàn)在教程、工具提示和具有信息性視覺內(nèi)容的屏幕中。Motion允許設(shè)計(jì)師吸引用戶注意圖形并提供快速提示。在這里您還可以找到動(dòng)畫人物和插圖。
由Miko?ajSzymanowski制作的具有突出3D圖形的動(dòng)畫教程,其中提供了關(guān)于應(yīng)用程序如何以最少的文本工作的清晰視覺指導(dǎo)。
7、品牌化
在UI設(shè)計(jì)中整合視覺品牌標(biāo)識(shí)現(xiàn)在并不是什么新鮮事。公司的顏色和排版、標(biāo)志和吉祥物,提供可視化、自定義插圖和照片。這些所有東西使產(chǎn)品和市場攜手共進(jìn)。動(dòng)效在這個(gè)視角中越來越多地出現(xiàn)。例如,標(biāo)志動(dòng)效可以增添情緒并引起用戶的注意。
Zhenya Rynzhuk的啟動(dòng)畫面動(dòng)效使應(yīng)用程序加載過程變得美觀,并為應(yīng)用程序創(chuàng)造了與跑步者性質(zhì)相呼應(yīng)的動(dòng)態(tài)。
標(biāo)志動(dòng)效在屏幕上變化的移動(dòng)UI設(shè)計(jì)理念由Johny Vino設(shè)計(jì)。
總結(jié)
無論動(dòng)效看起來多么吸引人和時(shí)尚,您在應(yīng)用程序或網(wǎng)站中應(yīng)用它的應(yīng)該經(jīng)過充分權(quán)衡和充分測試來決定的。讓我們簡要回顧一下交互設(shè)計(jì)中UI動(dòng)效的優(yōu)缺點(diǎn)和缺點(diǎn)。
優(yōu)點(diǎn):
- 增強(qiáng)了可用性
- 原貌
- 節(jié)省屏幕或頁面的空間
- 為交互增加便利和速度
- 明確從系統(tǒng)到用戶的反饋
- 支持視覺層次和完整性
缺點(diǎn):
- 更高的加載時(shí)間(與靜態(tài)圖像相比)
- 分心因素(太多動(dòng)效對(duì)用戶來說很累)
- 耗費(fèi)時(shí)間和精力的技術(shù)實(shí)現(xiàn)(開發(fā)此類交互需要更多的工作時(shí)間)。
因此,在做出決定之前,將所有這些因素與用戶研究一起分析。
原文地址:https://icons8.com/articles/interaction-design-basic-types-ui-animation/
全站高品質(zhì)素材免費(fèi)下載!