聊聊那些令人愉悅的動(dòng)畫(huà)效果
由于靜態(tài)圖片傳達(dá)信息的有限性,很多動(dòng)態(tài)效果需要設(shè)計(jì)師通過(guò)添加設(shè)計(jì)說(shuō)明并配合口述才能表達(dá)。這樣做的優(yōu)點(diǎn)是節(jié)約時(shí)間,有助于實(shí)現(xiàn)快速迭代,成本較低;但這樣做的缺點(diǎn)是不夠直觀,很多細(xì)節(jié)存在于設(shè)計(jì)師自己的心中,僅通過(guò)靜態(tài)圖片和敘述沒(méi)有辦法完整地傳達(dá),冗長(zhǎng)的設(shè)計(jì)說(shuō)明讓人喪失耐心,設(shè)計(jì)師心中的畫(huà)面,往往到了開(kāi)發(fā)時(shí)被理解成了另外的樣子。
設(shè)計(jì)師內(nèi)心的動(dòng)畫(huà)
因此,在時(shí)間較為充裕的前提下,很多設(shè)計(jì)師開(kāi)始嘗試輸出動(dòng)態(tài)設(shè)計(jì)稿,以求將自己的設(shè)計(jì)理念用更加直觀且更吸引人的方式展現(xiàn)出來(lái)。
(網(wǎng)頁(yè)動(dòng)態(tài)設(shè)計(jì)稿案例)
(移動(dòng)應(yīng)用動(dòng)態(tài)設(shè)計(jì)稿案例)
在進(jìn)行動(dòng)畫(huà)效果設(shè)計(jì)的過(guò)程中,會(huì)涉及到怎樣的思考,應(yīng)該如何做出妥善的決策呢,筆者收集了一些案例,希望能和大家交流討論。本文將會(huì)先從從流暢、適度、驚喜這三個(gè)角度展開(kāi)。
一、???流暢
平滑清晰的動(dòng)畫(huà)總是受歡迎的,相反,一卡一頓的模糊動(dòng)畫(huà)使人感到煩悶。
那么怎樣才能輸出流暢清晰又便于展示的動(dòng)態(tài)設(shè)計(jì)稿呢?
下面介紹一種dribbble設(shè)計(jì)師們常用的輸出方法:
①???使用After Effects編輯動(dòng)態(tài)效果并渲染輸出成QuickTime文件
②???將Quicktime文件導(dǎo)入Photoshop中,選擇文件→保存為Web格式→GIF,并調(diào)整輸出設(shè)置,可參考下圖:
③???點(diǎn)擊保存,流暢又清晰的gif就導(dǎo)出啦:)
本案例參考設(shè)計(jì)師Dash的Dribbble主頁(yè):?http://dribbble.com/Dash
本文案例中的AE源文件模板請(qǐng)戳:http://dribbble.com/shots/1089895-UI8-Presentation-Template
其他設(shè)計(jì)師AE源文件下載:http://dribbble.com/shots/1187158-iOS-7-animation-ae-giveaway
再分享一個(gè)移動(dòng)端手勢(shì)合集,可以幫助設(shè)計(jì)師在動(dòng)畫(huà)中直觀的表達(dá)觸發(fā)動(dòng)畫(huà)的交互方式:http://areuswade.com/precomposed-touch-gestures/
二、適度
中國(guó)有句古話,過(guò)猶不及。 動(dòng)畫(huà)固然高端洋氣酷炫帥斃,但也不是越多越好,設(shè)計(jì)得越復(fù)雜越討人喜歡。動(dòng)畫(huà)效果的濫用也會(huì)讓用戶產(chǎn)生眩暈感,失去聚焦點(diǎn),甚至產(chǎn)生厭煩和抵觸的情緒。
①???在不影響性能和響應(yīng)度的前提下設(shè)計(jì)動(dòng)畫(huà)
如果動(dòng)畫(huà)影響到了性能和響應(yīng)度,那就變成了累贅,不僅不能提升用戶體驗(yàn)反而成了讓人惱火的存在。這時(shí),要么想辦法改進(jìn)為輕量的動(dòng)畫(huà),要么干脆不要。
②???權(quán)衡開(kāi)發(fā)成本
越獨(dú)特的動(dòng)畫(huà),往往開(kāi)發(fā)成本也越大。設(shè)計(jì)動(dòng)畫(huà)效果之前,先明確自己這樣設(shè)計(jì)的目的,可以反問(wèn)自己這樣的目的是否一定需要使用動(dòng)畫(huà)的方式才能達(dá)成良好的效果, 若確實(shí)需要,又能否優(yōu)先采用開(kāi)發(fā)容易實(shí)現(xiàn)的效果來(lái)達(dá)到同樣的目的。建議和開(kāi)發(fā)同事一起探討設(shè)計(jì)思路,權(quán)衡成本。
③???重復(fù)多次出現(xiàn)的動(dòng)畫(huà)越短越簡(jiǎn)單越好
再美的東西,看多了也容易審美疲勞。使用非常頻繁的操作,不建議使用過(guò)于絢麗的動(dòng)畫(huà)效果,如果的確需要?jiǎng)赢?huà)作為平滑過(guò)渡,推薦使用較為基本的干擾較小的動(dòng)畫(huà)。另外,當(dāng)長(zhǎng)時(shí)間的等待無(wú)法避免時(shí),可以考慮讓等待時(shí)出現(xiàn)的內(nèi)容具有一定的隨機(jī)性。
④???若非特殊情況需要,動(dòng)畫(huà)效果應(yīng)保持在舒適度范圍內(nèi),避免眩暈和干擾
一些flash網(wǎng)站,設(shè)計(jì)得非常炫,初看讓人印象深刻,但卻難以留住用戶。頁(yè)面的動(dòng)畫(huà)元素太多,使人眼花繚亂, 喪失焦點(diǎn),不知所措,新鮮感一過(guò),就再也不想看了。
在設(shè)計(jì)時(shí),可以通過(guò)控制動(dòng)畫(huà)出現(xiàn)的時(shí)機(jī),觸發(fā)方式和影響范圍來(lái)避免這類問(wèn)題的發(fā)生。譬如在一些網(wǎng)頁(yè)的設(shè)計(jì)中,滾動(dòng)到特定區(qū)域才會(huì)觸發(fā)特定內(nèi)容區(qū)域內(nèi)的動(dòng)畫(huà),動(dòng)畫(huà)效果顯示完畢后,只會(huì)在下次刷新并滾動(dòng)到相應(yīng)位置時(shí),才會(huì)再次出現(xiàn)。
三、???驚喜
驚喜通常是意料之外,情理之中的。抓準(zhǔn)時(shí)機(jī),設(shè)計(jì)巧妙的動(dòng)畫(huà)夠能提升產(chǎn)品體驗(yàn),增加趣味性,在給用戶帶來(lái)驚喜的同時(shí)為產(chǎn)品目標(biāo)服務(wù)。如何激發(fā)用戶探索的興趣,讓用戶產(chǎn)生成就感,提供超出用戶預(yù)期的愉悅體驗(yàn),是設(shè)計(jì)時(shí)需要思考的方向。
我們?cè)谑褂梦⑿诺臅r(shí)候會(huì)留意到,當(dāng)發(fā)送特定關(guān)鍵詞時(shí)會(huì)觸發(fā)微信背景某些絢麗特效。這些效果不是固定的,特殊的日子會(huì)有新的彩蛋,經(jīng)常能帶給我們一些驚喜。
游戲中往往會(huì)設(shè)置不同關(guān)卡和成就,有小有大,當(dāng)玩家一個(gè)個(gè)達(dá)成的時(shí)候,會(huì)獲得一定的獎(jiǎng)勵(lì),此時(shí)用戶就會(huì)產(chǎn)生成就感,獲得自我滿足。同樣的思路,當(dāng)用戶在完成注冊(cè)、支付、上傳文件成功或者是完成別的較為復(fù)雜費(fèi)時(shí)較長(zhǎng)的任務(wù)時(shí),也可以通過(guò)類似的方式,給用戶激勵(lì)。
Haze是個(gè)人很喜歡的一款天氣應(yīng)用,它的動(dòng)態(tài)效果與交互模式簡(jiǎn)潔而新穎,完全超出了我對(duì)天氣應(yīng)用的預(yù)期,讓人愛(ài)不釋手。制作Haze的團(tuán)隊(duì)最近又出了一款Thunderspace的應(yīng)用,延續(xù)了同樣的設(shè)計(jì)風(fēng)格,大家有興趣也可以下載體驗(yàn)一下。
不得不提到設(shè)計(jì)師們都很喜歡的一個(gè)應(yīng)用Path。令筆者印象深刻的是它的睡眠動(dòng)畫(huà),點(diǎn)擊去睡了之后,屏幕漸漸變暗,從底部緩緩升起一輪月亮,月亮的陰晴圓缺還會(huì)根據(jù)當(dāng)前的時(shí)間產(chǎn)生變化。
deal in的界面底部有一個(gè)黃牛皮紙袋,你可以根據(jù)洗好長(zhǎng)按一個(gè)項(xiàng)目并把他拖入到袋中, 操作的感覺(jué)就像是你把它從紙上撕下來(lái)一樣,充滿趣味。
小結(jié):
1、動(dòng)畫(huà)要做到平滑清晰
2、動(dòng)畫(huà)效果不能濫用,也不是越復(fù)雜越好
3、找準(zhǔn)時(shí)機(jī),給用戶一點(diǎn)驚喜吧
在設(shè)計(jì)動(dòng)態(tài)效果的實(shí)際流程中,還需要具體考慮動(dòng)畫(huà)的呈現(xiàn)方式,觸發(fā)時(shí)機(jī)和持續(xù)時(shí)長(zhǎng)等,需要和開(kāi)發(fā)同事保持良好的溝通,以確保設(shè)計(jì)從單純的概念真正落地為實(shí)在的產(chǎn)品, 關(guān)于這部分的心得體會(huì)希望在接下來(lái)的文章中和大家探討:)
干貨文章,希望多一些這樣的文章,太有用了。