APP改版:怎么做動(dòng)效設(shè)計(jì)?
產(chǎn)品使用過(guò)程中,優(yōu)秀的動(dòng)效設(shè)計(jì)可以讓產(chǎn)品體驗(yàn)更為流暢,給用戶一個(gè)舒心順暢的用戶體驗(yàn);同時(shí)也能增加產(chǎn)品趣味性與品牌特色,讓用戶產(chǎn)生興趣并提高品牌認(rèn)知度。
一、動(dòng)效的重要性
用戶在使用產(chǎn)品時(shí),都希望有一個(gè)良好的使用體驗(yàn)。但生硬的變化、偶爾的卡頓、固定死板的效果,這些都不是我們希望看到的。這會(huì)大大增加用戶的負(fù)面情緒,產(chǎn)生不好的用戶體驗(yàn)。再加上網(wǎng)速等不可抗力因素,那么整體的產(chǎn)品體驗(yàn)就會(huì)變得非常糟糕。
而出色的動(dòng)效,可以使頁(yè)面之間聯(lián)系更加緊密,整體體驗(yàn)更加流暢,減少用戶的負(fù)面情緒;同時(shí),動(dòng)效也可以增加產(chǎn)品的趣味性與品牌特色,讓用戶產(chǎn)生興趣并提高品牌認(rèn)知度。
動(dòng)效設(shè)計(jì)作為一種高級(jí)的表現(xiàn)形式,它的展示要符合現(xiàn)實(shí)世界的客觀規(guī)律。不能脫離現(xiàn)實(shí),要符合用戶的認(rèn)知,真實(shí)自然。
現(xiàn)在,越來(lái)越的人開(kāi)始重視動(dòng)效設(shè)計(jì)了。包括一些招聘信息當(dāng)中,有不少都明確表示有動(dòng)效設(shè)計(jì)能力者優(yōu)先的字樣。那么,當(dāng)你掌握動(dòng)效設(shè)計(jì)這項(xiàng)技能后,無(wú)疑是會(huì)大大增加自身的競(jìng)爭(zhēng)力。同時(shí),對(duì)于整體產(chǎn)品的參與程度也更高。
二、動(dòng)效的常見(jiàn)類型
1. 提示類動(dòng)效
網(wǎng)易考拉 and 聚美優(yōu)品
提示類動(dòng)效常見(jiàn)的形式為默認(rèn)狀態(tài)或者打開(kāi)APP首頁(yè),固定位置的循環(huán)動(dòng)畫(huà)。如懸浮icon,按鈕icon等,主要的目的是吸引用戶點(diǎn)擊查看關(guān)鍵項(xiàng)目或通告。其他還包括一些引導(dǎo)類動(dòng)畫(huà),比如用戶第一次打開(kāi)產(chǎn)品時(shí),頁(yè)面的一步步指引性提示操作的動(dòng)效。
2. 反饋類動(dòng)效
京東金融 and BILIBILI
反饋類動(dòng)效包含的效果很多。通常需要用戶進(jìn)行操作,包括點(diǎn)擊滑動(dòng)等等,從而得到相對(duì)應(yīng)的反饋。其中,按鈕效果、導(dǎo)航欄標(biāo)簽變化、下拉刷新、彈窗動(dòng)畫(huà)等等都包括在內(nèi)。更細(xì)節(jié)的位置還包括收藏、點(diǎn)贊、發(fā)送等等。
3. 切換類動(dòng)效
網(wǎng)易考拉 and 轉(zhuǎn)轉(zhuǎn)
切換類動(dòng)效最常見(jiàn)的形式包括banner滑動(dòng)切換、開(kāi)屏loading的切換、以及一些卡片類切換形式等等?;瑒?dòng)可以讓用戶連續(xù)不間斷的去執(zhí)行某項(xiàng)操作。搭配合理的動(dòng)效,可以讓用戶感到不錯(cuò)的流暢性與一體感,增加使用頻率。
4. 內(nèi)容擴(kuò)展動(dòng)效
高德地圖 and App Store
內(nèi)容擴(kuò)展類動(dòng)效:當(dāng)點(diǎn)擊卡片或者按鈕時(shí),會(huì)從此基礎(chǔ)上向外擴(kuò)展出更多的樣式或內(nèi)容??梢允峭粚蛹?jí)的擴(kuò)展,也可以是新層級(jí)的出現(xiàn)。
5. 空間變化動(dòng)效
Dribbble
此動(dòng)效的變化略有復(fù)雜,變化的范圍較大。通常會(huì)涉及到多個(gè)元素或位置的變化,樣式炫酷,吸引力夠足。不過(guò),在使用時(shí)要慎重考慮。
上面說(shuō)的動(dòng)效變化均為微動(dòng)效的變化,讓用戶有所感知稍有留意即可;過(guò)分復(fù)雜的動(dòng)畫(huà)如果使用不恰當(dāng)或多次使用會(huì)使用戶產(chǎn)生審美疲勞,同時(shí)對(duì)網(wǎng)速和手機(jī)配置都是個(gè)考驗(yàn)。
6. 創(chuàng)意性動(dòng)效
Dribbble
創(chuàng)意性動(dòng)效一般是點(diǎn)睛之筆或是錦上添花的效果設(shè)計(jì)。有時(shí)一些小的細(xì)節(jié)動(dòng)畫(huà)往往更能使用戶留意并記住;當(dāng)然,也有些動(dòng)效比較大型,同樣可能會(huì)遇到‘空間變化動(dòng)效’所遇到的問(wèn)題。
以上是我對(duì)常出現(xiàn)的一些動(dòng)效的大致劃分。像反饋類動(dòng)效也會(huì)包含其他的效果。比如‘切換類動(dòng)效’、‘?dāng)U展動(dòng)效’等;而擴(kuò)展動(dòng)效和空間變化動(dòng)效也會(huì)有所交集。
好的動(dòng)效設(shè)計(jì),應(yīng)該是以微動(dòng)效為主;能夠讓用戶使用的流暢舒服。在使用時(shí),讓用戶留意到即可,而不應(yīng)該過(guò)多的占有用戶的感知,從而阻礙用戶對(duì)頁(yè)面中主要內(nèi)容的關(guān)注度。
三、動(dòng)效的相關(guān)原則
①時(shí)間相關(guān)的原則:緩動(dòng)、偏移、延遲
②關(guān)聯(lián)性相關(guān)的原則:父子關(guān)系
③連續(xù)性相關(guān)的原則:轉(zhuǎn)化、值變、遮罩、覆蓋、復(fù)制
④時(shí)間層級(jí)結(jié)構(gòu)相關(guān)的原則:視差
⑤空間連續(xù)性相關(guān)的原則:維度、變焦運(yùn)動(dòng)
1. 緩動(dòng)(Easing)
緩動(dòng)可以說(shuō)是最最基礎(chǔ)的動(dòng)效了。絕大多數(shù)的效果中都會(huì)加上緩動(dòng),從而避免生硬的變換形式出現(xiàn)。連貫的、符合自然規(guī)律的動(dòng)效可以有效避免用戶注意力的流失,避免卡頓造成的不良體驗(yàn)。
2. mp;3. 偏移(Offset)/延遲(Delay)
偏移和延遲的作用是通過(guò)視差或時(shí)間差等方式,區(qū)別不同元素的出現(xiàn)或消失。從而讓用戶在分清楚元素之前,就能通過(guò)動(dòng)效變化趨勢(shì)辨別出不同元素之間存在的不同功能與關(guān)系。
4. 父子關(guān)系(Parenting)
父子關(guān)系顧名思義,就是操作主元素從而使得子元素跟隨變化。這種動(dòng)效加強(qiáng)了元素之間的聯(lián)系,讓用戶可以有更多的掌控感,也增加了反饋的及時(shí)性,實(shí)時(shí)觀察元素間的變化。
5. 轉(zhuǎn)化(Transformation)
轉(zhuǎn)化效果,由一個(gè)元素轉(zhuǎn)化為一個(gè)或多個(gè)不同形狀的元素;這種轉(zhuǎn)變的效果非常明顯,可以很好的吸引用戶的注意力,有非常不錯(cuò)的一體性。icon,按鈕或是進(jìn)度條的設(shè)計(jì)當(dāng)中都可以運(yùn)用到。
6. 值變(Value change)
頁(yè)面中文字、英文或數(shù)字等文本的變化。通過(guò)用戶的操作,文字或數(shù)字實(shí)時(shí)進(jìn)行變化,那么用戶會(huì)得到更直觀的感受。在動(dòng)效設(shè)計(jì)當(dāng)中加入值變,并與其他元素搭配使用,會(huì)有更好的用戶體驗(yàn)。
7. 遮罩(Masking)
保持原有的內(nèi)容,在特定的范圍里通過(guò)用戶對(duì)遮罩的操作進(jìn)而改變形狀或位置,形成新的元素或展示形式。也是一種流暢性和一體性都非常高的動(dòng)效形式。
8. 覆蓋(Masking)
涉及Z軸空間上的一種表現(xiàn)形式。用戶通過(guò)操作使得上層的元素位移從而展示出下層更多的功能選擇。不過(guò),這種操作的弊端是需要一些學(xué)習(xí)成本,才能知曉層級(jí)的排布。
9. 復(fù)制(Cloning)
用戶通過(guò)操作,元素由一種變?yōu)槎喾N。動(dòng)效體現(xiàn)上強(qiáng)調(diào)分離和結(jié)合,形式感的增加也讓用戶得到更加明確的反饋。
10. 時(shí)差(Parallax)
當(dāng)用戶進(jìn)行滑動(dòng)操作時(shí),在原視覺(jué)界面的基礎(chǔ)上增加空間層次結(jié)構(gòu)的展示。通過(guò)時(shí)間差,創(chuàng)造出一快一慢兩種不同視覺(jué)感受的效果??梢宰層脩羟宄馗惺艿絻?nèi)容的不同,以及更加逼真的層次感。
11. 維度(Dimensionality)
通過(guò)維度的變化來(lái)達(dá)到立體視覺(jué)效果。翻轉(zhuǎn)、折疊、浮動(dòng)等效果都包括在內(nèi),是一種三維的效果表現(xiàn)形式。
12. 變焦運(yùn)動(dòng)(Zoom)
這里的變焦運(yùn)動(dòng),是界面中圖片或是元素在不進(jìn)行空間移動(dòng)的情況下的放大縮小變化。讓用戶有一種元素是在非常大的場(chǎng)景中變化的感知,感受到類似于攝影機(jī)運(yùn)動(dòng)的效果。這種效果屬于無(wú)縫銜接,讓用戶有很好的空間感。
四、動(dòng)效的制作軟件
1. After Effects
動(dòng)效設(shè)計(jì)的首選,功能強(qiáng)大、插件眾多。搭配Airbnb發(fā)布的Lottie,可以將制作的動(dòng)效直接生成代碼交給開(kāi)發(fā)人員,而且支持的平臺(tái)很多。簡(jiǎn)化了交付文件、縮短了溝通時(shí)間。Lottie目前支持的效果不多,不過(guò)大多數(shù)的動(dòng)效設(shè)計(jì)都是沒(méi)有問(wèn)題的。AE目前不支持手機(jī)實(shí)時(shí)查看,無(wú)法測(cè)試交互。有一定的學(xué)習(xí)成本。
2. Principle
操作較簡(jiǎn)單、上手快、效果好、界面簡(jiǎn)潔??梢栽谑謾C(jī)上實(shí)時(shí)查看交互效果,可以快速生成高保真原型,制作demo非常迅速;不過(guò),制作整體的大型項(xiàng)目略有乏力。
3. Hype
可制作的效果非常多,操作不難??梢哉f(shuō)是無(wú)代碼制作原型或動(dòng)效的神器。在Hype能夠制作出來(lái)的效果,理論上開(kāi)發(fā)基本都可以實(shí)現(xiàn)。軟件生成的html代碼可以交給開(kāi)發(fā)人員使用。
4. Flinto
Flinto和Principle非常相似,上手簡(jiǎn)單、學(xué)習(xí)成本不高、可制作的效果也不少。和Principle一樣,制作完整大型的項(xiàng)目不是很方便。
5. Framer
Framer設(shè)計(jì)精度很高,可以在多個(gè)移動(dòng)平臺(tái)上測(cè)試查看。但學(xué)習(xí)成本較高,需要有代碼基礎(chǔ)。
6. ProtoPie
ProtoPie是韓國(guó)公司打造的原型設(shè)計(jì)工具,界面簡(jiǎn)潔、自帶教程、上手簡(jiǎn)單。Mac、Win等多平臺(tái)都可使用。同時(shí)還可以生成二維碼,供多態(tài)設(shè)備查看測(cè)試。
7. Axure
Axure是很多人常用的原型制作工具,可以制作出很多動(dòng)態(tài)效果,生成的代碼可以使用。但制作復(fù)雜效果時(shí)需要一些學(xué)習(xí)成本;且在移動(dòng)設(shè)備上預(yù)覽非常麻煩。
工具畢竟是工具,所以選擇適合自己的就好?;蛘哌x擇公司團(tuán)隊(duì)規(guī)定使用的軟件進(jìn)行設(shè)計(jì)。如果只是單純制作demo,或是需要輸出代碼交付給開(kāi)發(fā)的話,使用AE即可;如果想要可交互可展示類的效果,那么Principle、Hype、ProtoPie均可;Principle的高效、Hype的豐富效果和ProtoPie的多平臺(tái)團(tuán)隊(duì)展示各有優(yōu)點(diǎn)。
五、動(dòng)效的落地交付
當(dāng)我們制作好動(dòng)效之后,交付標(biāo)注和文檔是一個(gè)非常重要的環(huán)節(jié)。其實(shí)一款產(chǎn)品中的很多動(dòng)效都是使用的控件默認(rèn)效果,實(shí)際的效果在Principle和Flinto這種交互動(dòng)效軟件中可以很好的體現(xiàn)出來(lái)。
像loading、下拉刷新、缺省頁(yè)、升級(jí)彈窗等有特殊需求的頁(yè)面效果,就需要我們來(lái)設(shè)計(jì)制作了。我個(gè)人經(jīng)常使用AE搭配bodymovin擴(kuò)展插件,直接輸出json文件交付給開(kāi)發(fā)人員。細(xì)節(jié)處通過(guò)文檔或?qū)崟r(shí)溝通來(lái)解決。
但還是會(huì)有一些動(dòng)效是用插件無(wú)法解決無(wú)法輸出的。這個(gè)時(shí)候就需要一份清晰完整的說(shuō)明文檔來(lái)配合開(kāi)發(fā)人員制作,將效果的還原程度最大化。
在交付文檔中有幾個(gè)環(huán)節(jié)需要我們進(jìn)行填寫(xiě)。其中包括:動(dòng)效GIF展示圖、觸發(fā)條件、變換的元素和屬性、曲線圖和數(shù)值、備注、起始時(shí)間、持續(xù)時(shí)間、變換數(shù)值等等。
1. GIF展示圖
我們需要做一個(gè)demo,要讓開(kāi)發(fā)人員清楚我們要做的效果是什么樣子的。讓開(kāi)發(fā)人員可以進(jìn)行效果的評(píng)估,同時(shí)得到反饋。畢竟,口說(shuō)無(wú)憑。我們還可以給靜態(tài)效果圖上的變換元素上標(biāo)注清楚序號(hào),以免后期元素太多而造成的混亂情況出現(xiàn)。
2. 觸發(fā)條件、元素、變換屬性
這三點(diǎn)是一個(gè)基礎(chǔ)的概述。觸發(fā)條件是讓我們寫(xiě)出元素是如何被觸發(fā)啟動(dòng)的;并且界面中哪些元素會(huì)進(jìn)行變換;有哪些屬性會(huì)發(fā)生變化。在這里,我們要給元素起好名,并且標(biāo)注好序號(hào)。
3. 曲線顯示
常用的曲線樣式有加速曲線(Ease In Sine)、減速曲線(Ease Out Sine)、緩動(dòng)曲線(Ease In Out Sine)、彈性曲線(Ease Out Elastic)等。我們可以畫(huà)出曲線樣式或是直接在軟件中截圖,同時(shí)標(biāo)出曲線屬性和數(shù)值。具體數(shù)值的獲取可以在Principle或者網(wǎng)站http://cubic-bezier.com中獲取。
4. 備注
我們可以將此動(dòng)效用文字的形式具體描述出來(lái);或者寫(xiě)出動(dòng)效發(fā)生時(shí)的一些注意事項(xiàng)及關(guān)鍵點(diǎn)。
5. 變換數(shù)值
最后,就是要寫(xiě)出效果的起始時(shí)間、持續(xù)時(shí)間、變換屬性數(shù)值這些更加具體的內(nèi)容了。這里用的時(shí)間單位是毫秒;主要是位移、不透明度、縮放、旋轉(zhuǎn)等數(shù)值的變化。
不只是交付文檔,我們還可以設(shè)計(jì)制作動(dòng)效時(shí)間表。制作時(shí)間表的目的是規(guī)范我們的動(dòng)效數(shù)值,比如讓所有彈窗出現(xiàn)消失的時(shí)間和效果數(shù)值都相同等。將產(chǎn)品中出現(xiàn)的效果進(jìn)行統(tǒng)一的整理,方便后期的修改和總結(jié)。
在這個(gè)注重用戶體驗(yàn)的時(shí)代,動(dòng)效設(shè)計(jì)越來(lái)越重要。好的動(dòng)效,不僅可以讓用戶在使用產(chǎn)品時(shí)更加的舒服,沒(méi)有違和感;同時(shí),也增加了產(chǎn)品的品質(zhì)感。
作為UI設(shè)計(jì)師,接觸動(dòng)效、學(xué)習(xí)動(dòng)效不僅讓我們?cè)黾有碌募寄?,增加自身?jìng)爭(zhēng)力;同時(shí),可以讓我們?cè)诨A(chǔ)設(shè)計(jì)上、工作溝通對(duì)接上等都有提高,
作者:FLYXMF,微信公眾號(hào):Fly Lab
本文由 @FLYXMF 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于CC0協(xié)議。
漲姿勢(shì)了!
你好,能推薦下動(dòng)效的學(xué)習(xí)路徑/教程嗎? 下半年會(huì)需要進(jìn)行動(dòng)效設(shè)計(jì)并跟開(kāi)發(fā)溝通 ??
總結(jié)的很全面,學(xué)習(xí)啦