如今動(dòng)效設(shè)計(jì)越來越被重視,尤其是在ios 7發(fā)布之后,一個(gè)優(yōu)雅、靈動(dòng)的動(dòng)效,成為很多優(yōu)秀app的標(biāo)配。
首先讓我們來一起思考一下,為什么要設(shè)計(jì)動(dòng)效?是為了好看、酷炫、還是流行?這些當(dāng)然都是,但是最重要的是,有意義的動(dòng)效,可以解釋應(yīng)用的邏輯、層次和交互機(jī)制。動(dòng)效是可以幫助用戶理解應(yīng)用的。恰當(dāng)?shù)膽?yīng)用動(dòng)效,可以替代大段的文字,闡述應(yīng)用的含義。比如ios 6中刪除圖片的那個(gè)動(dòng)效,照片飛入垃圾桶,然后垃圾桶蓋上蓋子抖一抖,非常生動(dòng)的傳達(dá)了刪除照片的含義。
最典型的利用動(dòng)效表現(xiàn)產(chǎn)品邏輯的地方,就是轉(zhuǎn)場動(dòng)畫,大家對于這樣的動(dòng)畫再熟悉不過了,下一層級的頁面,一般會(huì)從右側(cè)覆蓋進(jìn)入,返回上一層級頁面,會(huì)向右側(cè)滑動(dòng)退出,這種轉(zhuǎn)場動(dòng)畫很好的營造出一種空間感和邏輯感。
Yep是一個(gè)基于地理位置的交友a(bǔ)pp,用戶可以發(fā)起一個(gè)聚會(huì),吃飯、喝茶、運(yùn)動(dòng)或者其他什么。比如用戶選擇了“就餐”,其他選項(xiàng)收縮淡出,“就餐”圖標(biāo)移位并變成地圖上的一個(gè)圖釘!熬筒汀眻D標(biāo)的變化過程可以將前后兩個(gè)界面無縫的銜接起來,闡明了基于地理位置的篩選機(jī)制,表達(dá)出“在這個(gè)位置就餐”的明確概念。在地圖界面中點(diǎn)擊“OK”按鈕,界面元素淡出,地圖整體向后退去,融入到雷達(dá)一樣的動(dòng)效當(dāng)中,圓形掃描區(qū)域所代表的就是以用戶當(dāng)前位置為中心的50 公里半徑范圍。這一連串的動(dòng)效,實(shí)現(xiàn)了界面之間的平滑過渡,也闡明了應(yīng)用所要表達(dá)的邏輯。
Yep用動(dòng)效表達(dá)邏輯
視覺設(shè)計(jì)可以還原物理世界的真實(shí)感,動(dòng)效也可以。比如Flipboard的翻頁動(dòng)效,給人一種硬紙板的感覺,iBook的翻頁動(dòng)效,給人一種柔軟紙張的感覺,這種不同的材質(zhì)感,都是通過動(dòng)效來表現(xiàn)的。
用動(dòng)效表現(xiàn)材質(zhì)
用動(dòng)效表現(xiàn)材質(zhì),不會(huì)增加用戶的視覺負(fù)擔(dān),在操控上更有真實(shí)感,所以就算擬物化的視覺設(shè)計(jì)已經(jīng)慢慢在衰退,具有真實(shí)意義的動(dòng)效卻得以保留。
細(xì)節(jié)處的小動(dòng)效可以為產(chǎn)品增加亮點(diǎn),帶來驚喜的體驗(yàn)。就像Tumblr點(diǎn)贊的動(dòng)畫,紅心飄起來時(shí),就像飛了一個(gè)吻,讓人感覺心花怒放,取消點(diǎn)贊時(shí),心都碎了。這種小細(xì)節(jié)讓人愛不釋手。
Tumblr的動(dòng)效設(shè)計(jì)
利用動(dòng)效速度的微妙變化,可以表現(xiàn)出應(yīng)用的風(fēng)格?焖倏梢泽w現(xiàn)靈活輕盈,慢速可以體現(xiàn)優(yōu)雅委婉。如卯榫體現(xiàn)傳統(tǒng)文化,動(dòng)效緩慢優(yōu)雅,slingshot是一款閱后即焚的即時(shí)通app,快速的動(dòng)效體現(xiàn)了它敏捷迅速的風(fēng)格。
無論是快是慢,兩款app的動(dòng)效都有慢入慢出的效果,體現(xiàn)出真實(shí)世界物體的慣性規(guī)律。不同的動(dòng)效節(jié)奏會(huì)給用戶帶來不同的感受,但運(yùn)動(dòng)規(guī)律應(yīng)該遵循現(xiàn)實(shí)的運(yùn)動(dòng)規(guī)律和節(jié)奏。符合基本運(yùn)動(dòng)規(guī)律,先快后慢、先慢后快、勻速、自由落體等,基本都有現(xiàn)實(shí)的運(yùn)動(dòng)事件做參照。
平面設(shè)計(jì)
工業(yè)設(shè)計(jì)
CG插畫
UI交互
室內(nèi)設(shè)計(jì)
建筑環(huán)境