巧用動效解決問題

2019-9-2    ui設計分享達人

Image title

動效在用戶界面中的應用是當今引起人們高度關(guān)注和爭論的話題。雖然有很多人覺得動效是一個不必要的功能,他會使用戶界面過載并使其變得更加復雜,但大多數(shù)用戶都認為動效是交互體驗不可或缺的一部分。設計人員和開發(fā)人員研究了越來越復雜的方法,使動畫看起來令人愉快,并且能夠解決現(xiàn)代應用程序和網(wǎng)站的問題。


為什么用戶如此熱愛動效?大多數(shù)情況下,因為動效支持實際和真實交互的本質(zhì),它創(chuàng)造了與人們在現(xiàn)實生活中物理對象交互時所具有的感受和感知水平。這種感覺可以提高用戶的積極性,因為用戶感覺越自然,處理應用程序或網(wǎng)站所需的精力就越少,工作方式也就越清晰。讓用戶滿意,沒有任何秘密,滿足和愉悅是鼓勵人們再次使用該產(chǎn)品的最重要的事情。


就像界面中的所有內(nèi)容以及與之交互的過程一樣,動效必須是一個功能元素,而不僅僅是裝飾。在規(guī)劃圍繞數(shù)字產(chǎn)品的用戶旅程時考慮運動元素,設計師應該在決定將其應用于布局或過渡之前,深入分析其提高產(chǎn)品的可用性,實用性和可取性的潛力。用戶界面中的動效需要經(jīng)過深思熟慮的思考,并且始終需要有一個明確的目標。在交互過程中使用它的優(yōu)點和實用性必須是顯而易見的并且要大于可能存在的缺點。動效應該成為錦上添花,而不是美中不足。


Image title



定義問題


使用動效不僅具有吸引力,也是揭示可能存在問題的最佳方法之一。它可以在設計過程的任何一個階段進行:


用戶調(diào)查會讓你知道目標用戶是誰,他們的年齡,偏好,技術(shù)水平,使用產(chǎn)品的環(huán)境和條件,以及來自用戶方面的許多其他因素會影響用戶體驗;


營銷研究將洞察現(xiàn)有產(chǎn)品的強弱面,形成用戶忠誠度的方法,這是界定USP解決特定用戶問題的良好依據(jù),也是產(chǎn)品呈現(xiàn)和表現(xiàn)原始方式的良好基礎;


UX線框圖階段可以考慮交互,布局和轉(zhuǎn)場的邏輯,并得到可以通過動效增強目的的第一個假設;


原型設計階段將揭示與屏幕實時交互的新方式;


UI設計階段將為產(chǎn)品方案和系統(tǒng)提供復雜的視覺展示,為應用程序或網(wǎng)站應用動效提供新的視角;


用戶測試將揭示動效元素的方案是否正確,它們的好處是否真的大于可能存在的缺點。


Image title


在每個階段,如果設計師設定的目標是揭示用戶可能遇到的大或小問題,那么動效以及任何其他設計元素都可以扮演問題解決者的角色。


讓我們回顧一下可以通過界面動效解決的一些典型問題。



問題:我想知道行動已經(jīng)完成


這是可以通過在UI中應用動效細節(jié)輕松快速解決的問題之一。通過清晰的運動并結(jié)合微交互,為用戶創(chuàng)建快速反饋,使得導航變得簡單直觀,同時也變得更加。動效按鈕、切換鍵、切換開關(guān)和其他交互元素在幾秒鐘內(nèi)通知用戶,激活快速視覺感知的所有潛力。


Image title

開關(guān)控制動畫

Image title

漢堡菜單動畫

Image title

漢堡按鈕互動

Image title

標簽欄交互

Image title

添加按鈕交互

Image title

橡膠指示器


問題:我想知道行動正在進行中


當用戶與數(shù)字產(chǎn)品交互時,他們想知道每一步都發(fā)生了什么。讓用戶等待將會導致用戶流失。但是,當用戶得到反饋時,等待就不會那么煩人了。所以,這方面應該在設計中著重考慮,通過界面動效來減少等待感有很多種方法。這是“拉動-刷新”發(fā)揮作用最大效果的最佳時機。

Image title

拉動刷新

Image title

預載

Image title

拉動刷新

Image title

拉下 - 沙漏

Image title

拉下 - 太空船


問題:我看不到進展,也不明白需要多長時間


通常僅僅讓用戶知道該過程正在進行是不夠的。他們想要的還有很多:看看進展的速度和所需要的時間。此時,界面動效就是一個很好的幫手。加載條和進度條,動效時間軸和其他動態(tài)元素等等,都可以一石二鳥:


1、它們能夠讓用戶明確當前進度狀態(tài)


2、它們可以成為消除互動過程中等待的負面情緒的一種娛樂元素


3、它們可以成為一個病毒性的功能,用戶希望與其他人分享,并吸引更多的用戶來使用產(chǎn)品

Image title

時間線應用程序的GIF

Image title

動態(tài)滾動的GIF


問題:我不想讓我的屏幕弄得一團糟


在界面設計中考慮這一點至關(guān)重要。如果屏幕或頁面的信息看起來亂七八糟,這些信息沒有經(jīng)過明確的梳理編組,那么用戶需要付出額外的努力來了解它的工作原理以及可以找到所需信息的位置。


在絕大多數(shù)情況下,用戶希望擁有能夠簡化和改善他們生活的應用程序和網(wǎng)站,甚至可能會為他們做一些工作,而不是在交互上花費更多的精力和時間。動效在增強與各種數(shù)據(jù)模塊和部分交互方面是一種很好的方法,即使是在高度數(shù)據(jù)飽和和復雜的界面中,也能夠使所有內(nèi)容清晰明了。

Image title

Image title

Image title

Image title



問題:我想先看看關(guān)鍵的事情


視覺層次和清晰的導航一直是設計人員創(chuàng)造交互式數(shù)字產(chǎn)品的一大關(guān)注點。用戶應根據(jù)其目標和條件,立即關(guān)注交互的關(guān)鍵要素。界面中的動效元素為這方面提供了強大的支持力,使布局中重要元素的視覺標記更快、更清晰。

Image title


Image title



問題:我想要感受自然的互動


這是大多數(shù)用戶無法形容的問題,但對用戶體驗有著很大的影響。如果用戶說“我不確定出了什么問題,但肯定有問題”,試著考慮讓動效更加自然。界面中的動效可以創(chuàng)造出令人愉快的錯覺,接近與物理對象的自然交互,這通常不需要太多的認知過程。例如,如果拉動物體,按下它,移出標簽,動作應該感覺自然。用戶無法看到設計師完成這項復雜工作的難度,他們會認為這是理所當然的,而讓他們感到舒適的事實,將是對設計解決方案的最大贊譽。

Image title

Image title

Image title


這種問題同樣存在與WEB界面中。在滾動網(wǎng)頁時,布局元素的平滑移動可以顯著增強用戶體驗,并且創(chuàng)建一個整體流暢交互的感覺,而不是幾個單獨的頁面。總之,這是令人愉快并且有吸引力的,這些情緒是留住用戶的一個很好的因素。


Image title

Image title

Image title

Image title



問題:屏幕/頁面很無聊


在談論界面時,人們常常把功能性和可用性作為關(guān)鍵或者有時甚至是唯一需要考慮的因素前置到前面。這是正確的,也是合乎邏輯的,但是不能否定這樣一個事實,那就是人們不僅僅受邏輯驅(qū)動。情感和審美滿意度等因素對用戶體驗的影響也很大。一方面,實用性和可用性與情感和美學之間的巧妙平衡可以給用戶帶來友好的產(chǎn)品。動效在界面設計上是一個很好的助推器。它可以勾勒出色彩和漸變的美,將生活氣息融入到布局中,使運動充滿活力,反之亦然,通過運動和原始過渡增強用戶界面元素的力量。

Image title

Image title

Image title

Image title

Image title

因此,毫無疑問,用戶界面中的動效在解決各種交互問題方面具有巨大的潛力。盡管如此,即使是添加到UI中的最細微的動作也需要經(jīng)過深思熟慮的考慮,不僅要分析優(yōu)點,還分析可能存在的缺點。動效應該幫助用戶,這是它在界面中的主要目標。

轉(zhuǎn)自-ui

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔