起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)給界面交互加點(diǎn)“鮮”——淺談界面動(dòng)畫
提到動(dòng)畫，顧名思義會(huì)自然聯(lián)想到一些動(dòng)畫作品，例如《進(jìn)擊的巨人》、《火影忍者》等等，動(dòng)畫以非常迅猛的速度發(fā)展且已經(jīng)達(dá)到非常成熟的狀態(tài)，滲入到了我們的日常生活中，這些都是屬于影視動(dòng)畫(video)的范疇。在動(dòng)畫的家族里，還有一位相對(duì)低調(diào)靦腆的成員叫做平面動(dòng)畫(Motion Graphic)，而平面動(dòng)畫的分支界面動(dòng)畫在游戲中漸漸被人們關(guān)注，與那些與場景風(fēng)格、界面材質(zhì)統(tǒng)一的界面動(dòng)畫讓游戲更加有代入感和吸引力，今天就來和大家分享下界面動(dòng)畫和其運(yùn)用到界面設(shè)計(jì)中的案例。
1.什么叫做平面動(dòng)畫(Motion Graphic)和界面動(dòng)畫?
最初平面動(dòng)畫是跟隨電影而被人們所以認(rèn)識(shí)，而它的出現(xiàn)可以追溯到原始社會(huì)。從視頻中可以看到，如今的平面動(dòng)畫對(duì)比傳統(tǒng)影視動(dòng)畫顯得更加的靈動(dòng)多變和夸張。在僅僅是進(jìn)行形態(tài)和運(yùn)動(dòng)的模擬和遵循客觀物理現(xiàn)實(shí)的基礎(chǔ)上，平面動(dòng)畫少了很多的限制，在擬物動(dòng)畫的基礎(chǔ)上進(jìn)行了加工，這讓設(shè)計(jì)師有了更大的發(fā)揮空間。如今它已被廣泛運(yùn)用于我們生活中的各個(gè)地方，電影片頭、電視廣告、手機(jī)APP、LOGO、交互設(shè)計(jì)和網(wǎng)絡(luò)游戲中：
而引言中所提到的界面動(dòng)畫，可以簡單理解為平面動(dòng)畫的分支，實(shí)際上界面動(dòng)畫在我們的日常生活中就更多見了，掏出你的手機(jī)便能感受到，真是無動(dòng)畫不歡。與上面的平面動(dòng)畫對(duì)比，界面動(dòng)畫因?yàn)闀?huì)承載操作和功能而顯得低調(diào)了很多，并不是越炫越好，其解決的問題是讓用戶“可預(yù)見性”，給用戶交待清楚界面之間的跳轉(zhuǎn)、切換，而帶來非常自然的體驗(yàn)，達(dá)到“無需思考”，甚至帶來驚喜，打個(gè)不太恰當(dāng)?shù)谋确?，好的?dòng)畫效果如同在用戶面前耍了一個(gè)很酷的魔術(shù)，自然流暢而不牽強(qiáng)拖沓。
值得一提的是，ios7的扁平化風(fēng)格，拋棄了材質(zhì)和擬物化，采用扁平化的設(shè)計(jì)風(fēng)格將會(huì)給設(shè)計(jì)者在界面動(dòng)畫上帶來更多的想象和發(fā)揮的空間。
2.有哪些常用的界面動(dòng)畫形式?
在介紹界面動(dòng)畫前先簡單介紹下動(dòng)畫與材質(zhì)之間的關(guān)系，動(dòng)畫與材質(zhì)如同血與肉關(guān)系，需要遵循客觀物理現(xiàn)實(shí)和人的視覺經(jīng)驗(yàn)，這樣的動(dòng)畫才會(huì)看上去自然不違和，比如一個(gè)乒乓球與一塊石頭從一米高度往下掉的運(yùn)動(dòng)軌跡顯然是不同的，這些不同也體現(xiàn)在其落地形體發(fā)生的擠壓、伸張變化，回到界面材質(zhì)上來，兩個(gè)不同材質(zhì)風(fēng)格的界面，其動(dòng)畫風(fēng)格也是有所差異的，如果一個(gè)”重金屬風(fēng)格”的界面，配上非常輕盈靈動(dòng)甚至還有伸縮的動(dòng)畫風(fēng)格，無論動(dòng)畫做得多么流暢，這看起來都是非常別扭的，下圖示意了“輕”與“重”的運(yùn)動(dòng)和變形軌跡：
那么在游戲中，我們平時(shí)接觸到的界面動(dòng)畫形式有哪些呢，給大家列舉幾個(gè)：
· 淡入淡出
“我輕輕的來正如我輕輕的走”，淡入淡出正是帶給用戶這樣的感覺，禮貌而又優(yōu)雅，是最常見的動(dòng)畫效果。如下圖，《激戰(zhàn)2》的界面打開淡入效果，界面材質(zhì)用的非常輕盈類似羊皮紙的紋理，配合水彩潑墨風(fēng)格。在淡入的基礎(chǔ)上融合了一些紋理層次效果，非常有細(xì)節(jié)而優(yōu)雅。
《激戰(zhàn)2》界面淡入
《暗黑血統(tǒng)》界面材質(zhì)就”重”得多，在淡入的動(dòng)畫上，配合上下兩部分區(qū)域的的位移滑入，營造出了重金屬的機(jī)械風(fēng)，動(dòng)畫效果短促又干脆，與其材質(zhì)和風(fēng)格相互融合。
《暗黑血統(tǒng)》界面淡入
· 位移
位移效果與淡入淡出一樣，常常是為了交待界面的出現(xiàn)與消失行為，它還經(jīng)常與淡入淡出結(jié)合而形成“淡入淡出+位移”。并且根據(jù)位移速度帶有強(qiáng)度不同的緩沖效果、并發(fā)生擠壓或拉伸?！恫氐貍髌妗返腘PC冒泡對(duì)話就使用了“位移+淡入”效果：
《藏地傳奇》界面位移+淡入
? 翻轉(zhuǎn)
界面翻轉(zhuǎn)大多數(shù)用在界面之間的切換，但因運(yùn)動(dòng)幅度較大且相對(duì)動(dòng)畫所需要的時(shí)間較長，容易給用戶帶來視覺疲勞和一些負(fù)面的情感因素，對(duì)于一些尺寸較大的界面，需要慎重使用，小的界面如卡牌抽獎(jiǎng)的結(jié)果展示等可以嘗試使用。《DOTA2》的擊殺者界面切換翻轉(zhuǎn)效果：
《DOTA2》界面翻轉(zhuǎn)
《激戰(zhàn)2》 技能欄
? 切換
界面之間的切換，同位移效果一樣，切換動(dòng)畫往往也是配合淡入和淡出，常用于tab標(biāo)簽頁的內(nèi)容頁之間的切換。
《藏地傳奇》人物與屬性頁切換
? 抖動(dòng)和閃爍
抖動(dòng)和閃爍動(dòng)畫往往是為了吸取玩家的注意力，因該動(dòng)畫節(jié)奏較快，容易讓玩家注意。在游戲中也常用于如Boss受擊、戰(zhàn)斗反饋、提示相關(guān)?！兜叵鲁菑?qiáng)襲者》中的小箭頭抖動(dòng)提示效果和buff閃爍：
《地下城強(qiáng)襲者》箭頭抖動(dòng)提示
《地下城強(qiáng)襲者》buff閃爍提示
除了以上列舉的幾種動(dòng)畫形式之外，還有非常多很酷的動(dòng)畫效果沒有在這里列舉出來，大家可以在平時(shí)的游戲或軟件體驗(yàn)中多積累;但更重要的是，要善于觀察生活并在其中獲取靈感，并能將其運(yùn)用到我們的游戲界面中來，讓游戲變得更加有趣和吸引力且提升游戲的用戶體驗(yàn)。
還需要注意的是，界面動(dòng)畫設(shè)計(jì)者的身份猶如影視動(dòng)畫的導(dǎo)演，要有取舍和主次地設(shè)計(jì)，掌握好度，不能一味地讓界面變得更炫更酷。借用動(dòng)畫大師richard williams總結(jié)的動(dòng)畫三點(diǎn)原則來結(jié)尾：1. 要簡單、2. 要清楚、3. 一切盡在你的掌握中。
本文作者 San
哪些圖都是什么app的，可以備注上嘛？