交互

動效設計如何影響用戶體驗？

2788

動效是應用程序或網站開發(fā)的熱點：部分人認為動效會使屏幕和頁面超載，而其他人則表示它對用戶體驗有很多大的幫助。無論如何，今天大多數(shù)用戶都希望鏈接的動效是必須的。讓我們看看哪些類型的UI動效受大家歡迎和廣泛使用，以及它們如何影響用戶體驗。

1、加載和進度

這可能是眾多的UI動效中最多樣化。它們的目的是告知用戶它們在應用程序或網站上的進展。很難想象等待中不理解發(fā)生了什么更糟糕的事情——加載和進度動效解決了這個問題。例如，下拉動效顯示頁面正在重新加載內容。進度條告知用戶進入過程的時間和完成完成的時間。

Gal Shir的這個概念顯示了付款確認的過程：當用戶正在等待時，進度條正在填補以使其清楚。屏幕上的動畫圓圈也營造出活躍過程的感覺。

Dimest的進度條動畫基于引人注目的色彩對比度和添加到主要部分的小顆粒的特殊效果。欄右側的計數(shù)器還包含進度百分比。

2、導航

這種類型的動畫通過界面導航用戶。它提示某些布局元素是可點擊的，可滑動的，可拉動的或可點擊的的提示。例如，當Web界面布局中的某些東西在懸停時的動畫效果時。它通過增強視覺層次和直觀的導航，吸引用戶注意交互的核心元素。

Piotr Kohut在UI設計概念中的動畫微交互：當您點擊卡片時，它會以動效響應，向您顯示按鈕被按下的狀態(tài)以及卡片的數(shù)量隨動作而變化。

Prekesh交互式標簽欄設計的有趣和吸引人：配置文件圖標向右或向左移動，就好像它正在查看用戶按下的圖標一樣。

Oleg Frolov的動畫交互概念顯示了一個轉換成光標的搜索圖標。

3、動作完成

另一種類型的UI動畫對應用程序或網站可用性具有戰(zhàn)略意義?；旧希@個動效通知用戶動作已經完成，例如：按鈕被按下，菜單打開或關閉，文件上載，付款被接受等等進行反饋。

它為什么如此重要？因為只需點擊屏幕或點擊鼠標進行各種操作，我們就需要了解正在發(fā)生的事情。它不同于物體間的相互作用。

簡單的例子：用鍵盤輸入文字，感受按鍵紋理，阻力和聽到聲音，與在智能手機屏幕上輸入文字完全不同，后者沒有給出任何物理反饋。因此，振動和視覺符號發(fā)揮了重要作用，讓用戶在交互過程中充滿信心。

當您點擊電子商務網站上的“支付”按鈕時，但是沒有任何反應時也會發(fā)生同樣的情況。你會覺得付款完成了嗎？你應該再次按下“支付”按鈕，還是再注冊一次支付方式并付款那么他將兩次拿走你的錢？給出一個快速的視覺提示，例如更改按鈕的顏色，將其轉換為勾號符號或或者打開一個彈出窗口，提供進一步的細節(jié)，不僅可以幫助用戶，而且?guī)椭切┎粫y花錢或數(shù)以百計的錯誤點擊的企業(yè)主。

Gal Shir的這個簡單動畫顯示了從待辦事項列表中刪除任務的過程。它模仿了我們在紙面上所做的過程相同：用戶只需在文本上滑動，當復選框轉換為勾選時，它會被劃掉。

Jakub Antalik的這個移動界面概念顯示了勾選動畫，以標記動作在單獨的屏幕上完成。

4、滾動

毫無疑問，我們花了幾個小時的時間滾動可能沒有特效效果和動畫效果。然而，運動使得過程更加優(yōu)雅和諧。它經常模仿來自物理世界的自然相互作用，并賦予界面整體外觀。請記住，滾動可以應用于不同的方向，不僅是垂直方向，也可以是水平方向。

然而，這不僅僅是關于美。這種動畫還可以幫助支持屏幕上更多空間的視覺錯覺，或者快速闡明元素的限制。特別是在移動界面和有限的屏幕空間。

Radesign的 Web UI動效，其中的照片不會立即顯示，而是通過滾動逐漸打開。

Robbin Senijn的活潑的滾動動效將滾動和視覺拆卸物品形象的機制和諧地結合起來。

5、轉變

正如我在關于流行的UI設計趨勢的文章中所提到的，在許多設計師的作品集中都可以找到轉換這一動效的實驗。動效過渡為用戶界面的交互增添了原創(chuàng)性和趣味性。它們允許應用程序、登錄頁面或網站脫穎而出。更重要的是，他們經常與現(xiàn)實世界有著強烈的聯(lián)系。當網頁像紙質雜志的頁面翻過來一樣，或者像真實的那樣拉出卡片時，它會是多么吸引人的，令人難忘。它甚至可能是用戶在網站上停留更長時間的原因（這對SEO有好處）或APP。

Zhenya Rynzhuk的優(yōu)雅設計特點是翻頁與翻頁之間的過渡。