有用勝于有趣:6 條 UX 設(shè)計(jì)動(dòng)畫原則
作者 José Torre 是 TomTom 公司的資深視覺設(shè)計(jì)師,有感于動(dòng)畫被大量錯(cuò)誤使用的現(xiàn)狀,結(jié)合自身多年的設(shè)計(jì)經(jīng)驗(yàn),總結(jié)出 6 條動(dòng)畫設(shè)計(jì)原則,通過豐富的案例介紹了在何時(shí)、何處、如何使用動(dòng)畫及其克服障礙的心得體會。
1.動(dòng)畫不應(yīng)在最后添加
你確定了所有交互并且視覺設(shè)計(jì)已經(jīng)定稿,但是你感覺少了些什么。這時(shí)你可能會想「是時(shí)候加些動(dòng)畫點(diǎn)綴一下了」。這是一個(gè)巨大的錯(cuò)誤,也是動(dòng)畫被濫用的原因之一。在設(shè)計(jì)過程最后考慮動(dòng)畫通常會和在 PPT 中添加過渡效果混為一談,這是完全錯(cuò)誤的。
如果把用戶體驗(yàn)看作是一個(gè)蛋糕,在大多數(shù)的情況下,動(dòng)畫被認(rèn)為是蛋糕頂部的櫻桃,但是我完全不同意這個(gè)觀點(diǎn)。我認(rèn)為動(dòng)畫應(yīng)該是你混入蛋糕糊的另一種原料。
我為本文描述動(dòng)畫快速繪制的草圖
在你繪制線框圖的時(shí)候,動(dòng)畫就應(yīng)該成竹在胸了。這就像在按下按鈕后,特定物體會根據(jù)箭頭指示的方向移動(dòng)那么簡單。保持簡單有助于你無需關(guān)注過多樣式,就能發(fā)現(xiàn)動(dòng)效的目的(或特定目的的動(dòng)效)。也會讓你不過于依戀動(dòng)畫,因?yàn)閯?dòng)畫不總是問題的解決方案。如果它無法助你達(dá)成目標(biāo),棄之即可,無用的動(dòng)畫將會成為最終用戶的障礙。
這就把我們直接帶入到下一條原則。
2.動(dòng)畫一定要有用
多余的動(dòng)畫會占用用戶寶貴的時(shí)間,并且用戶在獲得初次愉悅之后就會厭倦,這就是為什么動(dòng)畫需要有功能性的原因。假如你想知道哪些動(dòng)畫可以幫助你,下面是一些案例。
減輕生硬的切換
沒有過渡 vs 水平滑動(dòng)過渡
不管是不是設(shè)計(jì)師,我們都對此很熟悉。你在屏幕 A 中點(diǎn)按一個(gè)按鈕,砰!一個(gè)完全不同的屏幕(B)突然出現(xiàn)了。然后你會疑惑,它是從哪來的?我按下的是正確的按鈕嗎?接下來呢?如果「B」看起來和「A」很像怎么辦?用戶可能會認(rèn)為什么都未發(fā)生。這展示了動(dòng)畫中最常見的一類,變化時(shí)刻??紤]下從屏幕 A 到 B 這次「旅程」花費(fèi)了多長時(shí)間,哪些對象應(yīng)在屏幕中保留,它們將如何達(dá)到那里?但請不要過度使用,因?yàn)榻酉聛砟銓l(fā)現(xiàn),動(dòng)畫最好在「無形」中發(fā)揮作用。
提供上下文
沒有過渡 vs 從底部滑入
有時(shí)候你進(jìn)入了某個(gè)頁面,但是并不確定如何與之交互。一種幫助用戶理解的好方法就是在特定物體進(jìn)入時(shí),提供一些它的特性的線索。以文章列表舉例,滑動(dòng)它們有助于用戶理解可以不停的刷動(dòng)查看更多。你甚至可以更進(jìn)一步,讓它們一個(gè)接一個(gè)的定時(shí)滑動(dòng)出現(xiàn),強(qiáng)調(diào)這些項(xiàng)目都是分開的,你可以與當(dāng)中的任一個(gè)進(jìn)行交互。
假如你決定點(diǎn)擊其中一個(gè)項(xiàng)目,然后它展開了那篇文章的全部內(nèi)容,之前與其他信息處于同一層級的信息現(xiàn)在變成了主要內(nèi)容。過渡動(dòng)畫是加強(qiáng)用戶選擇的一種好方法,不僅展示了你仍然和處于選中狀態(tài)的同一物體進(jìn)行交互,而且也會給你帶來更多的屏幕空間。
提供定位
當(dāng)用戶界面和用戶之間的所有障礙被移除后,用戶界面變得更加真實(shí)具體起來,因此賦予用戶空間定位感變得十分重要。你可以通過讓動(dòng)畫保持一致和 app 的結(jié)構(gòu)易于理解做到這一點(diǎn)。
一個(gè)物體向左移出屏幕,如果它再次出現(xiàn),從邏輯上講,應(yīng)該來自其移出的地方。這將幫助你的用戶理解 app 的面貌,用戶在使用時(shí)會感覺更加舒暢。反之則會引發(fā)混亂,用戶甚至可能會認(rèn)為他們看到的完全不是同一個(gè)物體。
內(nèi)容從底部進(jìn)入 vs 內(nèi)容從右邊(箭頭的指向)進(jìn)入
這同樣適用于屏幕上出現(xiàn)的視覺提示。想象你點(diǎn)擊了一個(gè)帶有向右指示箭頭的列表項(xiàng),邏輯上的過渡應(yīng)該是自右向左滑動(dòng),好像用戶視圖向右移動(dòng)一樣,加強(qiáng)了用戶界面中的視覺線索。
很多時(shí)候你會看到 UI 元素與過渡動(dòng)效相矛盾。這有點(diǎn)惱人,我認(rèn)為這些是我們應(yīng)該避免的,否則動(dòng)畫會讓用戶看起來很突兀,因?yàn)樗鼈冞`反了用戶的預(yù)期。
提供及時(shí)反饋
你曾否問過自己,我按下那個(gè)按鈕了嗎?它做了什么?我應(yīng)該再按一次嗎?回答可能是肯定的,你或許會一遍又一遍的點(diǎn)擊,只為確認(rèn)實(shí)際上你在最初的時(shí)候就按下了。這就是為什么提供及時(shí)反饋是重要的原因,即便 app 沒有立即做出反應(yīng)。
在這個(gè)世界中,你的手指通常會蓋住點(diǎn)按按鈕,動(dòng)畫在為用戶提供他們所需的安慰上發(fā)揮了巨大的作用。
輕微的顏色變化 vs 快速動(dòng)畫
在某些情況下,你甚至可以更進(jìn)一步并讓其更加吸引人。假如你的應(yīng)用中有一個(gè)「星星」按鈕,它是你的「英雄」操作之一(從未見過,我知道)。這時(shí)你就可以好玩一點(diǎn),來讓用戶開心。讓他們感到這是有獎(jiǎng)勵(lì)的,用戶就會想要重復(fù)這個(gè)操作。注意下時(shí)間,動(dòng)畫需要及時(shí)被感知,否則它就會變得緩慢并且很快就被討厭。還有一點(diǎn),不要讓其吸引過頭。
讓內(nèi)容感覺是實(shí)時(shí)的
沒有過渡 vs 從頂部滑入
如果你的 app 或者網(wǎng)頁有實(shí)時(shí)的內(nèi)容,比如照片,評論或者某種計(jì)數(shù)器,動(dòng)畫可以幫助你完成兩件事情:順暢地添加新元素以及緩沖加載這些元素可能造成的延遲。
講故事
幾乎在每一個(gè)應(yīng)用程序中,都會有一個(gè)解釋事情出錯(cuò)或者介紹新特性的地方。插圖在這里發(fā)揮著巨大的作用,它提供了一種更加視覺化、及時(shí)的方式來幫助用戶理解某個(gè)問題,以及如何將其解決。如果說一圖勝千言的話,想象一下動(dòng)畫,那可是每秒30張圖片。
嘗試讓用戶微笑,即使是負(fù)面的消息。
這種類型的屏幕頁面正是動(dòng)畫可以大放異彩的時(shí)機(jī),讓用戶難忘,給用戶帶來微笑,即使情況不妙。然而,如果你的 app 總是顯示一個(gè)錯(cuò)誤頁面,那么你可能希望忽略這點(diǎn)。你最不想要的就是讓用戶記住每次的錯(cuò)誤。
既然你了解了在何時(shí)(When)、何處(Where)使用動(dòng)畫,那么我們接下來便是如何(How)使用了。
3.動(dòng)畫必須反映品牌
考慮一下一個(gè)物體從左到右的簡單動(dòng)效。事實(shí)上,僅僅通過調(diào)整緩動(dòng)曲線就可以有無數(shù)種方法?;诖四憧梢詾槟愕膭?dòng)畫賦予個(gè)性??纯聪旅娴睦?,它們使用了相同的動(dòng)效和計(jì)時(shí),唯一的區(qū)別就是緩動(dòng)曲線。
A:快速&活潑,B:順滑&自然,C:彈性
雖然有無窮無盡的可能性,但是在你變得瘋狂以及讓你的轉(zhuǎn)場過渡像果凍一樣彈跳之前,考慮下你的品牌、用戶以及你希望傳播的調(diào)性。如果動(dòng)畫與調(diào)性不符,你的用戶會感到尷尬并喪失對你品牌的信任。想象一下,如果你的銀行 app 擁有你在游戲中看到的彈跳風(fēng)格動(dòng)畫,你會信任它嗎?
雖然動(dòng)畫反映品牌很重要,但是你在設(shè)計(jì)動(dòng)畫時(shí)需要牢記的是下一條原則。
4.動(dòng)畫不應(yīng)成為唯一的英雄
動(dòng)畫是扭轉(zhuǎn)局面的英雄,但不是一個(gè)形單影只的英雄,而更像是作為一個(gè)團(tuán)隊(duì)并肩作戰(zhàn)的忍者神龜。如果你的動(dòng)畫占據(jù)了舞臺中心,你不是在設(shè)計(jì)一個(gè)體驗(yàn),而是在強(qiáng)迫用戶觀看一場電影。
炫酷 vs 一致
動(dòng)畫應(yīng)該是體驗(yàn)整體的一部分,作為視覺設(shè)計(jì)的補(bǔ)充和交互體驗(yàn)的支持,保持克制是動(dòng)畫設(shè)計(jì)的關(guān)鍵。 在大多數(shù)情況下,優(yōu)秀的動(dòng)畫甚至不會引起用戶的注意。
如果你正在設(shè)計(jì)動(dòng)畫,你的工作不是取悅用戶,而是盡可能用一種最簡單、最直觀和最自然的方式來助其實(shí)現(xiàn)目標(biāo),下一條原則就是與之相關(guān)的。
5.動(dòng)畫必須感覺自然
線性動(dòng)畫 vs 緩入緩出
我知道「感覺」這個(gè)單詞可能有點(diǎn)模棱兩可,但請耐心聽我說。因?yàn)橛脩糁苯优c用戶界面進(jìn)行交互,那么在某種程度上會有一種對用戶界面遵循物理規(guī)律的特定預(yù)期。雖然你與之交互的列表會根據(jù)快慢進(jìn)行回應(yīng)是個(gè)好案例,但這同樣適用于其他對象。
然而,這并不意味著所有的 app 都應(yīng)該有同樣的反應(yīng)。在真實(shí)的世界中,如果你踢下球,它們并不會以同樣的方式作為反應(yīng)。足球會飛走但是保齡球有可能讓你的腳受傷。就像我在前面的原則中提到的,這都關(guān)乎你希望品牌傳遞的調(diào)性和重點(diǎn)。
你必須定義應(yīng)用的「材料」和重點(diǎn)是什么,并展示對應(yīng)的行為,但請記住如果需要應(yīng)該不斷地優(yōu)化調(diào)整,這樣才不會違背下條原則。
6.動(dòng)畫不應(yīng)該浪費(fèi)時(shí)間
兩個(gè)動(dòng)畫都是6秒。
動(dòng)畫可被用來調(diào)整用戶的感知時(shí)間,所以在對你有利的時(shí)候使用它。對于人類的大腦來說,任何少于 0.1 秒的動(dòng)作都可看作是瞬時(shí)的,少于 1 秒的動(dòng)作視為無縫的。所以,如果一個(gè)過程耗時(shí) 6 秒,你可將其分解為幾個(gè)不同的的動(dòng)畫。這個(gè)技巧會讓整個(gè)過程感覺更快并且讓用戶保持關(guān)注。
你也可以用動(dòng)畫來偽裝一個(gè)即時(shí)動(dòng)作,這個(gè)動(dòng)作實(shí)際上在后臺會耗時(shí)更長。這會讓應(yīng)用看起來響應(yīng)更快,即便整個(gè)過程會花費(fèi)比用戶看起來更長的時(shí)間。
你無法模仿現(xiàn)實(shí)世界中的一切,你需要考慮用戶的預(yù)期。如果你在用戶界面按了一個(gè)按鈕,你會預(yù)期一個(gè)及時(shí)反饋,因此這就不是應(yīng)用物理規(guī)律的最佳時(shí)機(jī),不要在像這樣的情況下使用緩入動(dòng)畫。
好了,如果你做到了我真正相信的那些,如果你運(yùn)用了這些原則,那么你正以正確的方式來制作最佳的動(dòng)畫,這提升的不僅是你的用戶界面的觀感,還有用戶對其的體驗(yàn)。既然你了解了這些原則,你仍然需要越過一些障礙。
最后的障礙
如果你希望吸引用戶,你需要提供一個(gè)無縫的體驗(yàn),如果運(yùn)用得當(dāng)?shù)脑挘瑒?dòng)畫絕對會助你完成目標(biāo)。然而這并非一帆風(fēng)順,因?yàn)闊o論設(shè)計(jì)任何東西,你都需要為一個(gè)不斷迭代的過程做好準(zhǔn)備。
你還需要知道如何制作原型并收集反饋,如果你的同事缺乏相關(guān)詞匯,溝通起來將會十分困難。如果不使用擬聲詞(例如「那個(gè)按鈕更像是嗖的一聲發(fā)射然后嘣的一聲爆炸,你知道吧?」),他們將無法評論你的動(dòng)畫。因此我認(rèn)為最好的方法就是向人們介紹下動(dòng)畫的 12 條基本原則,他們在熟悉了那些術(shù)語之后就能夠以你能理解的方式來表達(dá)自我了。
最后一個(gè)要跨越的障礙就是你的開發(fā)團(tuán)隊(duì)能夠/希望投入到動(dòng)畫中的精力。你真的需要推動(dòng)并且向他們展示在一個(gè)動(dòng)畫作為良好用戶體驗(yàn)固有成分的世界里,問題不是是否要,而是在何時(shí)你們必須緊跟這一潮流?你們做的越快,效果越好。用戶將對此十分感激,而你們也會大獲其益。
延伸閱讀:
Transitional Interfaces?by?Pasquale D’Silva
UI Animation and UX: A Not-So-Secret Friendship?by?Val Head
Invisible animation?by?Steven Fabre
Creating Usability with Motion: The UX in Motion Manifesto?by?Issara Willenskomer
原文作者:José Torre
翻譯作者:孫啟玉
譯文來源:https://zhuanlan.zhihu.com/p/27620327?utm_medium=social&utm_source
原文地址:https://blog.prototypr.io/6-animation-guidelines-for-ux-design-74c90eb5e47a
本文由 @孫啟玉 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
第五點(diǎn)的圖是不是反了?
請問各位大神是用什么做這些動(dòng)畫交互的?
這個(gè)文章非常好