動(dòng)效在交互方案中的 5 種作用
產(chǎn)品設(shè)計(jì)中,動(dòng)效往往被視為提升用戶體驗(yàn)的神奇元素。然而,動(dòng)效的真正價(jià)值遠(yuǎn)不止于視覺上的“酷炫”。它是交互設(shè)計(jì)中的一部分,能夠引導(dǎo)用戶注意力、提供操作反饋、表達(dá)界面結(jié)構(gòu)關(guān)系等。
提起動(dòng)效,很多設(shè)計(jì)師可能首先想到的是「酷炫」。一個(gè)應(yīng)用有了動(dòng)效,好像就會(huì)在設(shè)計(jì)上顯得更「高級(jí)」。
有一次,我在上課,講到「完整的交互方案應(yīng)該包含的內(nèi)容」,其中把動(dòng)效放在了最末尾的位置。
有個(gè)同學(xué)提問:我們領(lǐng)導(dǎo)認(rèn)為動(dòng)效是交互中最重要的。老師為什么說,交互是最不重要的呢?
這是個(gè)很好的問題。
提起交互,很多人會(huì)誤以為「那些頁(yè)面上能動(dòng)的部分,就是交互的部分」。
其實(shí)這是對(duì)交互的極大誤解。
交互的本質(zhì),是通過理解需求,找到業(yè)務(wù)上的目標(biāo),以及用戶使用這個(gè)功能的體驗(yàn)訴求,然后用最合理的方案去實(shí)現(xiàn)這個(gè)需求。
所以,交互的核心是通過方案來解決問題。
動(dòng)效,是交互方案中很小的一部分。它主要是為了讓方案的體驗(yàn)更流暢,讓用戶在使用的時(shí)候更容易理解「當(dāng)前發(fā)生了什么」的一種手段。
這就好比,一個(gè)電影,最關(guān)鍵的是劇本;如果劇本很爛(比如《小時(shí)代》圖片),即使里面特效天花亂墜,那依然不妨礙它是一部爛片。
關(guān)于動(dòng)效的作用,我搜索了幾個(gè)比較權(quán)威的設(shè)計(jì)規(guī)范。
其中,谷歌的 Material Design 規(guī)范里,對(duì)動(dòng)效的作用,解釋得最為清楚。
谷歌認(rèn)為,動(dòng)效有以下 5 種作用:
一、引導(dǎo)用戶的注意力
比如 Things App 中,點(diǎn)擊右下角的懸浮按鈕,會(huì)出現(xiàn)新建一條待辦的動(dòng)效。這個(gè)動(dòng)效,是引導(dǎo)用戶的注意力:
從懸浮按鈕 ?? 新的待辦,自然流暢
二、用戶完成操作的反饋
這一點(diǎn)運(yùn)用的很多,比如小紅書的點(diǎn)贊操作:點(diǎn)擊點(diǎn)贊按鈕,展現(xiàn)動(dòng)效
??3.
三、表達(dá)元素/頁(yè)面間的結(jié)構(gòu)關(guān)系和空間關(guān)系
比如在淘寶app 里,點(diǎn)擊「立即購(gòu)買」按鈕,從下向上出現(xiàn)「訂單確認(rèn)」的浮層。
這里,浮層的動(dòng)效,保證了用戶可以理解浮層與原來頁(yè)面的空間關(guān)系(浮層在上,頁(yè)面在下)。
四、加載時(shí)間的掩護(hù)
這種也很常見,比如我們經(jīng)常遇到的「加載中」提示。
在愛奇藝 app 中,點(diǎn)擊某個(gè)視頻,進(jìn)入視頻詳情頁(yè),會(huì)展現(xiàn)「正在全力加載」的動(dòng)效,為內(nèi)容的加載預(yù)留更多時(shí)間
五、展現(xiàn)產(chǎn)品個(gè)性,突出細(xì)節(jié)美,愉悅用戶?
在得到 app 中,下拉刷新的時(shí)候,展現(xiàn)它的 IP,貓頭鷹。
貓頭鷹眨眼又扭頭,展現(xiàn)了產(chǎn)品的品牌個(gè)性。
以上介紹了動(dòng)效的 5 種作用。
本文由人人都是產(chǎn)品經(jīng)理作者【沐風(fēng)】,微信公眾號(hào):【沐風(fēng)的UX充電站】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于 CC0 協(xié)議。
- 目前還沒評(píng)論,等你發(fā)揮!