最近越來(lái)越多的國(guó)內(nèi)公司開(kāi)始關(guān)注動(dòng)效設(shè)計(jì)了，越來(lái)越多的團(tuán)隊(duì)意識(shí)到動(dòng)效在產(chǎn)品用戶體驗(yàn)中的重要性。
隨著國(guó)際大品牌蘋果和谷歌的引領(lǐng)，最近越來(lái)越多的國(guó)內(nèi)公司開(kāi)始關(guān)注動(dòng)效設(shè)計(jì)了，越來(lái)越多的團(tuán)隊(duì)已經(jīng)意識(shí)到動(dòng)效在產(chǎn)品用戶體驗(yàn)中的重要性了，更多的射雞師們也開(kāi)始投身動(dòng)效設(shè)計(jì)領(lǐng)域。
但是說(shuō)到底，我們到底為什么需要?jiǎng)有гO(shè)計(jì)？或者說(shuō)我們到底需要什么樣的動(dòng)效？做動(dòng)效設(shè)計(jì)也有段時(shí)間了，于是嘗試用一些案例，從產(chǎn)品本身出發(fā)來(lái)說(shuō)說(shuō)我所思考的動(dòng)效設(shè)計(jì)。
（文中部分案例為設(shè)計(jì)師個(gè)人作品，部分為線上產(chǎn)品，都是我非常非常欣賞的作品。如不慎冒犯請(qǐng)戳我替換掉）
一、加強(qiáng)體驗(yàn)舒適度
嗯，就是讓用戶更加爽更加爽的用你的產(chǎn)品。
具體表現(xiàn)在：
1.表現(xiàn)層級(jí)關(guān)系
為了展現(xiàn)層與層的關(guān)系，是抽屜，是打開(kāi)，還是平級(jí)切換等等，讓用戶知道這個(gè)界面和上一個(gè)、下一個(gè)的關(guān)系。這已經(jīng)是非常最常見(jiàn)的運(yùn)用了。
2.與用戶手勢(shì)結(jié)合，更自然的動(dòng)畫(huà)表現(xiàn)
當(dāng)用戶手勢(shì)操作的時(shí)候，讓界面的動(dòng)態(tài)走向更符合手指的運(yùn)動(dòng)，從而讓用戶感覺(jué)到是自己控制了界面的動(dòng)向，而不是機(jī)械化的跳轉(zhuǎn)。
City guide app?用手勢(shì)可以向左向右扔卡片
3.愉快的提示功能
在某些需要提醒的時(shí)候能吸引用戶的注意，但是又不會(huì)生硬，符合預(yù)期的出現(xiàn)。
Action button feedback?出錯(cuò)提示
City Guides?啟動(dòng)時(shí)提示用戶可以左右滑動(dòng)卡片
4.額外增加界面的活力
在用戶預(yù)期之外增加的驚喜，可以是帥氣的，可以是賣萌，可以有些物理屬性，總之讓用戶感知到產(chǎn)品的生命力。
readme.io?萌萌的輸入框
amazon?Q彈的菜單
tumblr??不喜歡我 心都碎了呢~
5.吸引用戶持久的注意力
也是屬于增加用戶的驚喜感，在某些數(shù)據(jù)量較大的界面中添加一些動(dòng)效，讓用戶保持注意力。
Bubbles?以動(dòng)態(tài)的形式展現(xiàn)數(shù)據(jù)點(diǎn)
二、減弱不可避免的不適感
雖然我們的產(chǎn)品，我們的交互，我們的設(shè)計(jì)，我們的工程獅都在努力把產(chǎn)品打造的更加優(yōu)秀，更加完美，但是總有一些無(wú)法避免的問(wèn)題、或者有可能會(huì)出現(xiàn)的bug、外界條件的不給力等因素，造成我們的產(chǎn)品體驗(yàn)下降。這些時(shí)候適當(dāng)?shù)脑黾右恍﹦?dòng)效可以彌補(bǔ)在出現(xiàn)這些情況時(shí)的不適體驗(yàn)。
比如下面這些：
1.讓等待變得更愉快
常出現(xiàn)在加載、刷新、發(fā)送等界面中，讓等待變得可視化，甚至不再那么無(wú)聊。
Download Progress?讓下載不再枯燥
App loader?有趣的loading動(dòng)畫(huà)
gear-powered?拉了還想拉的下拉刷新
2.失敗界面的動(dòng)效
比如刷新失敗、頁(yè)面錯(cuò)誤、未聯(lián)網(wǎng)提示這些。
download?就算失敗了還是感覺(jué)萌萌噠~
3.增加界面與界面銜接的延續(xù)感
界面的跳轉(zhuǎn)不可以避免，但是如果讓本來(lái)分別獨(dú)立的2個(gè)界面或者事件擁有了某種特定的聯(lián)系，可以顯得更加好玩，不再是生硬的跳轉(zhuǎn)。
iOS Animation Download?界面跳轉(zhuǎn)時(shí)保留部分元素到下一個(gè)界面
Filter Menu?保留需要的條目 移走不再用的
三、不易被察覺(jué)的動(dòng)效
特意把這一類單獨(dú)說(shuō)一下，由于不容易被發(fā)現(xiàn)，普通用戶通常會(huì)忽略它們的存在，但很多時(shí)候這些小細(xì)節(jié)讓交互變得更加有趣。
1.默默增加反饋感
為用戶的操作提供有趣的正反饋。
Twitter?收藏的點(diǎn)擊反饋
2.去除用戶不再需要的元素
隨著用戶的操作，有的內(nèi)容已經(jīng)是用戶不再關(guān)注的。這時(shí)候可以將他們隱藏起來(lái)。
CityHour Calendar Animated Interaction
上面的例子大部分都是比較特色鮮明的，但是大多數(shù)實(shí)際情況中的優(yōu)秀動(dòng)效設(shè)計(jì)都會(huì)涉及到好幾點(diǎn)同時(shí)都滿足。總的來(lái)說(shuō)動(dòng)效還是為用戶體驗(yàn)而服務(wù)的，動(dòng)效設(shè)計(jì)師尤其要注意交互邏輯，才能讓你的作品看起來(lái)不但動(dòng)效帥氣逼人而且真正發(fā)揮了實(shí)際的作用。
最后要提醒的是，千萬(wàn)不要犧牲了用戶寶貴的時(shí)間用來(lái)看你毫無(wú)目的的動(dòng)效。
文章總結(jié)了一些自己的想法，有不足之處希望各位可以指出~
原文：UI中國(guó)
作者：小怪怪怪獸
