2019-9-2 ui設(shè)計(jì)分享達(dá)人
動(dòng)效在用戶界面中的應(yīng)用是當(dāng)今引起人們高度關(guān)注和爭(zhēng)論的話題。雖然有很多人覺(jué)得動(dòng)效是一個(gè)不必要的功能,他會(huì)使用戶界面過(guò)載并使其變得更加復(fù)雜,但大多數(shù)用戶都認(rèn)為動(dòng)效是交互體驗(yàn)不可或缺的一部分。設(shè)計(jì)人員和開發(fā)人員研究了越來(lái)越復(fù)雜的方法,使動(dòng)畫看起來(lái)令人愉快,并且能夠解決現(xiàn)代應(yīng)用程序和網(wǎng)站的問(wèn)題。
為什么用戶如此熱愛動(dòng)效?大多數(shù)情況下,因?yàn)閯?dòng)效支持實(shí)際和真實(shí)交互的本質(zhì),它創(chuàng)造了與人們?cè)诂F(xiàn)實(shí)生活中物理對(duì)象交互時(shí)所具有的感受和感知水平。這種感覺(jué)可以提高用戶的積極性,因?yàn)橛脩舾杏X(jué)越自然,處理應(yīng)用程序或網(wǎng)站所需的精力就越少,工作方式也就越清晰。讓用戶滿意,沒(méi)有任何秘密,滿足和愉悅是鼓勵(lì)人們?cè)俅问褂迷摦a(chǎn)品的最重要的事情。
就像界面中的所有內(nèi)容以及與之交互的過(guò)程一樣,動(dòng)效必須是一個(gè)功能元素,而不僅僅是裝飾。在規(guī)劃圍繞數(shù)字產(chǎn)品的用戶旅程時(shí)考慮運(yùn)動(dòng)元素,設(shè)計(jì)師應(yīng)該在決定將其應(yīng)用于布局或過(guò)渡之前,深入分析其提高產(chǎn)品的可用性,實(shí)用性和可取性的潛力。用戶界面中的動(dòng)效需要經(jīng)過(guò)深思熟慮的思考,并且始終需要有一個(gè)明確的目標(biāo)。在交互過(guò)程中使用它的優(yōu)點(diǎn)和實(shí)用性必須是顯而易見的并且要大于可能存在的缺點(diǎn)。動(dòng)效應(yīng)該成為錦上添花,而不是美中不足。
定義問(wèn)題
使用動(dòng)效不僅具有吸引力,也是揭示可能存在問(wèn)題的最佳方法之一。它可以在設(shè)計(jì)過(guò)程的任何一個(gè)階段進(jìn)行:
用戶調(diào)查會(huì)讓你知道目標(biāo)用戶是誰(shuí),他們的年齡,偏好,技術(shù)水平,使用產(chǎn)品的環(huán)境和條件,以及來(lái)自用戶方面的許多其他因素會(huì)影響用戶體驗(yàn);
營(yíng)銷研究將洞察現(xiàn)有產(chǎn)品的強(qiáng)弱面,形成用戶忠誠(chéng)度的方法,這是界定USP解決特定用戶問(wèn)題的良好依據(jù),也是產(chǎn)品呈現(xiàn)和表現(xiàn)原始方式的良好基礎(chǔ);
UX線框圖階段可以考慮交互,布局和轉(zhuǎn)場(chǎng)的邏輯,并得到可以通過(guò)動(dòng)效增強(qiáng)目的的第一個(gè)假設(shè);
原型設(shè)計(jì)階段將揭示與屏幕實(shí)時(shí)交互的新方式;
UI設(shè)計(jì)階段將為產(chǎn)品方案和系統(tǒng)提供復(fù)雜的視覺(jué)展示,為應(yīng)用程序或網(wǎng)站應(yīng)用動(dòng)效提供新的視角;
用戶測(cè)試將揭示動(dòng)效元素的方案是否正確,它們的好處是否真的大于可能存在的缺點(diǎn)。
在每個(gè)階段,如果設(shè)計(jì)師設(shè)定的目標(biāo)是揭示用戶可能遇到的大或小問(wèn)題,那么動(dòng)效以及任何其他設(shè)計(jì)元素都可以扮演問(wèn)題解決者的角色。
讓我們回顧一下可以通過(guò)界面動(dòng)效解決的一些典型問(wèn)題。
問(wèn)題:我想知道行動(dòng)已經(jīng)完成
這是可以通過(guò)在UI中應(yīng)用動(dòng)效細(xì)節(jié)輕松快速解決的問(wèn)題之一。通過(guò)清晰的運(yùn)動(dòng)并結(jié)合微交互,為用戶創(chuàng)建快速反饋,使得導(dǎo)航變得簡(jiǎn)單直觀,同時(shí)也變得更加。動(dòng)效按鈕、切換鍵、切換開關(guān)和其他交互元素在幾秒鐘內(nèi)通知用戶,激活快速視覺(jué)感知的所有潛力。
開關(guān)控制動(dòng)畫
漢堡菜單動(dòng)畫
漢堡按鈕互動(dòng)
標(biāo)簽欄交互
添加按鈕交互
橡膠指示器
問(wèn)題:我想知道行動(dòng)正在進(jìn)行中
當(dāng)用戶與數(shù)字產(chǎn)品交互時(shí),他們想知道每一步都發(fā)生了什么。讓用戶等待將會(huì)導(dǎo)致用戶流失。但是,當(dāng)用戶得到反饋時(shí),等待就不會(huì)那么煩人了。所以,這方面應(yīng)該在設(shè)計(jì)中著重考慮,通過(guò)界面動(dòng)效來(lái)減少等待感有很多種方法。這是“拉動(dòng)-刷新”發(fā)揮作用最大效果的最佳時(shí)機(jī)。
拉動(dòng)刷新
預(yù)載
拉動(dòng)刷新
拉下 - 沙漏
拉下 - 太空船
問(wèn)題:我看不到進(jìn)展,也不明白需要多長(zhǎng)時(shí)間
通常僅僅讓用戶知道該過(guò)程正在進(jìn)行是不夠的。他們想要的還有很多:看看進(jìn)展的速度和所需要的時(shí)間。此時(shí),界面動(dòng)效就是一個(gè)很好的幫手。加載條和進(jìn)度條,動(dòng)效時(shí)間軸和其他動(dòng)態(tài)元素等等,都可以一石二鳥:
1、它們能夠讓用戶明確當(dāng)前進(jìn)度狀態(tài)
2、它們可以成為消除互動(dòng)過(guò)程中等待的負(fù)面情緒的一種娛樂(lè)元素
3、它們可以成為一個(gè)病毒性的功能,用戶希望與其他人分享,并吸引更多的用戶來(lái)使用產(chǎn)品
時(shí)間線應(yīng)用程序的GIF
動(dòng)態(tài)滾動(dòng)的GIF
問(wèn)題:我不想讓我的屏幕弄得一團(tuán)糟
在界面設(shè)計(jì)中考慮這一點(diǎn)至關(guān)重要。如果屏幕或頁(yè)面的信息看起來(lái)亂七八糟,這些信息沒(méi)有經(jīng)過(guò)明確的梳理編組,那么用戶需要付出額外的努力來(lái)了解它的工作原理以及可以找到所需信息的位置。
在絕大多數(shù)情況下,用戶希望擁有能夠簡(jiǎn)化和改善他們生活的應(yīng)用程序和網(wǎng)站,甚至可能會(huì)為他們做一些工作,而不是在交互上花費(fèi)更多的精力和時(shí)間。動(dòng)效在增強(qiáng)與各種數(shù)據(jù)模塊和部分交互方面是一種很好的方法,即使是在高度數(shù)據(jù)飽和和復(fù)雜的界面中,也能夠使所有內(nèi)容清晰明了。
問(wèn)題:我想先看看關(guān)鍵的事情
視覺(jué)層次和清晰的導(dǎo)航一直是設(shè)計(jì)人員創(chuàng)造交互式數(shù)字產(chǎn)品的一大關(guān)注點(diǎn)。用戶應(yīng)根據(jù)其目標(biāo)和條件,立即關(guān)注交互的關(guān)鍵要素。界面中的動(dòng)效元素為這方面提供了強(qiáng)大的支持力,使布局中重要元素的視覺(jué)標(biāo)記更快、更清晰。
問(wèn)題:我想要感受自然的互動(dòng)
這是大多數(shù)用戶無(wú)法形容的問(wèn)題,但對(duì)用戶體驗(yàn)有著很大的影響。如果用戶說(shuō)“我不確定出了什么問(wèn)題,但肯定有問(wèn)題”,試著考慮讓動(dòng)效更加自然。界面中的動(dòng)效可以創(chuàng)造出令人愉快的錯(cuò)覺(jué),接近與物理對(duì)象的自然交互,這通常不需要太多的認(rèn)知過(guò)程。例如,如果拉動(dòng)物體,按下它,移出標(biāo)簽,動(dòng)作應(yīng)該感覺(jué)自然。用戶無(wú)法看到設(shè)計(jì)師完成這項(xiàng)復(fù)雜工作的難度,他們會(huì)認(rèn)為這是理所當(dāng)然的,而讓他們感到舒適的事實(shí),將是對(duì)設(shè)計(jì)解決方案的最大贊譽(yù)。
這種問(wèn)題同樣存在與WEB界面中。在滾動(dòng)網(wǎng)頁(yè)時(shí),布局元素的平滑移動(dòng)可以顯著增強(qiáng)用戶體驗(yàn),并且創(chuàng)建一個(gè)整體流暢交互的感覺(jué),而不是幾個(gè)單獨(dú)的頁(yè)面??傊?,這是令人愉快并且有吸引力的,這些情緒是留住用戶的一個(gè)很好的因素。
問(wèn)題:屏幕/頁(yè)面很無(wú)聊
在談?wù)摻缑鏁r(shí),人們常常把功能性和可用性作為關(guān)鍵或者有時(shí)甚至是唯一需要考慮的因素前置到前面。這是正確的,也是合乎邏輯的,但是不能否定這樣一個(gè)事實(shí),那就是人們不僅僅受邏輯驅(qū)動(dòng)。情感和審美滿意度等因素對(duì)用戶體驗(yàn)的影響也很大。一方面,實(shí)用性和可用性與情感和美學(xué)之間的巧妙平衡可以給用戶帶來(lái)友好的產(chǎn)品。動(dòng)效在界面設(shè)計(jì)上是一個(gè)很好的助推器。它可以勾勒出色彩和漸變的美,將生活氣息融入到布局中,使運(yùn)動(dòng)充滿活力,反之亦然,通過(guò)運(yùn)動(dòng)和原始過(guò)渡增強(qiáng)用戶界面元素的力量。
因此,毫無(wú)疑問(wèn),用戶界面中的動(dòng)效在解決各種交互問(wèn)題方面具有巨大的潛力。盡管如此,即使是添加到UI中的最細(xì)微的動(dòng)作也需要經(jīng)過(guò)深思熟慮的考慮,不僅要分析優(yōu)點(diǎn),還分析可能存在的缺點(diǎn)。動(dòng)效應(yīng)該幫助用戶,這是它在界面中的主要目標(biāo)。
轉(zhuǎn)自-ui
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com