APP知識(shí)!告訴你APP動(dòng)效設(shè)計(jì)分為那幾種。

來(lái)源:mux.baidu 作者:mux 學(xué)習(xí):5154人次

如果把APP比作一位美女,那么icon是她的證件照,界面是她的形體,而動(dòng)效則是她的肢體語(yǔ)言。在如今玲瑯滿目的App中,如何脫穎而出?設(shè)計(jì)師要考慮的,不光是產(chǎn)品如何更合理的展現(xiàn)結(jié)構(gòu)與功能,更重要的是思考自己的App是否能做到簡(jiǎn)便易懂的同時(shí),又給用戶新穎感?

此時(shí),有限的屏幕空間緊靠文字的提示是不夠的,App需要更多的新鮮血液——“動(dòng)效設(shè)計(jì)”。動(dòng)效設(shè)計(jì)可以拓展空間內(nèi)容,簡(jiǎn)化引導(dǎo)流程,降低學(xué)習(xí)成本,更重要的是給用戶帶來(lái)意想不到——類似于“Cool”的驚喜,它就像人類的肢體語(yǔ)言,通過(guò)肢體語(yǔ)言傳達(dá)更多的抽象信息和性格展現(xiàn)。肢體語(yǔ)言(body language)又稱身體語(yǔ)言,是指通過(guò)頭、眼、頸、手、肘、臂、身、胯、足等人體部位的協(xié)調(diào)活動(dòng)來(lái)傳達(dá)人物的思想,形象地借以表情達(dá)意的一種溝通方式。一個(gè)人要向外界傳達(dá)完整的信息,單純的語(yǔ)言成分只占7/100,聲調(diào)占38/100,另外的55/100信息都需要由非語(yǔ)言的體態(tài)來(lái)傳達(dá)。肢體語(yǔ)言的重要性可見(jiàn)一斑。

肢體語(yǔ)言大致可分為三類動(dòng)作:基本動(dòng)作,招牌動(dòng)作和高難度動(dòng)作,這三種動(dòng)作是如何在APP設(shè)計(jì)中體現(xiàn)呢?

一、基本動(dòng)效讓用戶舒服

基本動(dòng)作也可稱為日常動(dòng)作,如坐立,行走,握手,擁抱等.對(duì)應(yīng)APP中的基本動(dòng)作分三類:

    指向性動(dòng)效(滑動(dòng),彈出等)提示性動(dòng)效(滑動(dòng)刪除,下拉刷新等)空間擴(kuò)展(翻動(dòng),放大等)

不要小瞧基本動(dòng)作,試想當(dāng)你看到一位美女起身向你走來(lái)結(jié)果駝背,外八字,是啥感覺(jué)!APP亦是如此。流暢,自然映射,重力模擬這些看似簡(jiǎn)單但卻能讓用戶在操作時(shí)輕松自在并有強(qiáng)烈的代入感。這類動(dòng)效最重要的是讓用戶感到毫無(wú)負(fù)擔(dān)又如沐春風(fēng),也就是不要奪人眼球,悄無(wú)聲息的順應(yīng)用戶行為,引導(dǎo)用戶需求。

這類動(dòng)效在設(shè)計(jì)過(guò)程中需要主意幾點(diǎn):

    系統(tǒng)兼容和資源占用動(dòng)態(tài)速度的節(jié)奏仿生性or現(xiàn)實(shí)重現(xiàn)

舉例:

動(dòng)效控件

APP知識(shí)!告訴你APP動(dòng)效設(shè)計(jì)分為那幾種。

2.加載動(dòng)畫(huà)

APP知識(shí)!告訴你APP動(dòng)效設(shè)計(jì)分為那幾種。

3.翻頁(yè)動(dòng)畫(huà)

APP知識(shí)!告訴你APP動(dòng)效設(shè)計(jì)分為那幾種。

二、招牌動(dòng)效加深用戶印象

招牌動(dòng)作是基于基本動(dòng)作有選擇性的差異化展現(xiàn)。例如針對(duì)空間擴(kuò)展而設(shè)計(jì)的path加號(hào)按鈕動(dòng)畫(huà)。facebook 推出的paper關(guān)閉消息的拉伸曲線動(dòng)畫(huà)等。

巧妙的設(shè)計(jì)在滿足產(chǎn)品功能需求的基礎(chǔ)上更能讓用戶驚艷。這類動(dòng)效是APP的專屬符號(hào),APP的品牌和逼格展現(xiàn)通過(guò)此類動(dòng)效有較大的發(fā)揮空間。這就像Michael Jackson的亮相pose,他本人or模仿者只要一擺出這個(gè)POSE我們就立馬想到MJ。同樣這類動(dòng)效的設(shè)計(jì)更具嘗試性和前瞻性,它是動(dòng)效趨勢(shì)的實(shí)踐和探索,甚至能引發(fā)跟風(fēng)潮流。

    這類動(dòng)效設(shè)計(jì)需要注意的是:操作前的提示引導(dǎo)夸張化和個(gè)性化的表現(xiàn)對(duì)動(dòng)態(tài)趨勢(shì)的預(yù)測(cè)

舉例:

手勢(shì)提示的動(dòng)畫(huà)

APP知識(shí)!告訴你APP動(dòng)效設(shè)計(jì)分為那幾種。

特型動(dòng)畫(huà)

APP知識(shí)!告訴你APP動(dòng)效設(shè)計(jì)分為那幾種。

前瞻性動(dòng)效演示

APP知識(shí)!告訴你APP動(dòng)效設(shè)計(jì)分為那幾種。

三、高難度動(dòng)效讓用戶『WOW』

基本動(dòng)效讓用戶舒服,招牌動(dòng)效讓用戶印象深刻,只有這些對(duì)于一款“高逼格”標(biāo)簽的App還不夠。在這個(gè)大家都很拼的世界,不來(lái)點(diǎn)讓人經(jīng)驗(yàn)的高難度動(dòng)作很難讓別人對(duì)你刮目相看。這類動(dòng)效很酷,很炫,可讓用戶作長(zhǎng)時(shí)間的視線停留享受,讓用戶『WOW』的同時(shí),不得不為設(shè)計(jì)動(dòng)效的同學(xué)點(diǎn)贊,大大提升了對(duì)APP所屬品牌及開(kāi)發(fā)團(tuán)隊(duì)實(shí)力的認(rèn)可。

當(dāng)然,不要忘了APP的主要功用,高難度動(dòng)作只是錦上添花抑或畫(huà)龍點(diǎn)睛。所以在APP設(shè)計(jì)中高難度動(dòng)作并不一定都會(huì)使用,要根據(jù)APP的切實(shí)需要進(jìn)行設(shè)計(jì)。在不干擾主功能的前提下,進(jìn)行探索展示。所以這類動(dòng)效多出現(xiàn)在引導(dǎo)頁(yè)或者特殊功能展示上例如手機(jī)清理APP展示清理進(jìn)度的儀表動(dòng)效等。

這類動(dòng)效的需要注意的是:在滿足系統(tǒng)資源占用的前提下盡可能發(fā)揮吧!Just do it!

儀表盤(pán)動(dòng)畫(huà)

APP知識(shí)!告訴你APP動(dòng)效設(shè)計(jì)分為那幾種。

基本動(dòng)效,招牌動(dòng)效和高難度動(dòng)效的合理運(yùn)用,可以讓App變得更出眾,更性感,更有趣。在App設(shè)計(jì)過(guò)程中,這三類動(dòng)效要遵循以基本動(dòng)效為主,招牌動(dòng)效為輔,高難度動(dòng)效精選使用,切勿過(guò)度炫技的準(zhǔn)則。在全民扁平化的設(shè)計(jì)趨勢(shì)中,相信動(dòng)效會(huì)為設(shè)計(jì)帶來(lái)更多的可能和驚喜。設(shè)計(jì)師們又多了一片可發(fā)揮的領(lǐng)域,各位加油吧!

動(dòng)效設(shè)計(jì)好文合集!

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!