前言
時(shí)下對(duì)動(dòng)效的追捧，瘋狂至可以用一句話形容——“沒有動(dòng)效的APP，簡(jiǎn)直不是好的APP”。優(yōu)秀的動(dòng)效設(shè)計(jì)在提升產(chǎn)品體驗(yàn)、用戶粘性方面的積極作用有目共睹，已然成為現(xiàn)下Web、APP產(chǎn)品交互設(shè)計(jì)和界面設(shè)計(jì)必不可少的元素。筆者想從常見基礎(chǔ)動(dòng)效、動(dòng)效作用、動(dòng)效的應(yīng)用設(shè)計(jì)和動(dòng)效評(píng)判四個(gè)方面簡(jiǎn)單談?wù)剬?duì)動(dòng)效理解。
?
Part 1 基礎(chǔ)動(dòng)效
常見動(dòng)效通常是由多個(gè)基礎(chǔ)動(dòng)效組合而成。下面就讓我們來(lái)看看有哪些常見的基礎(chǔ)動(dòng)效。
?
- 位移和速度
位移是物體從一個(gè)位置到另一個(gè)位置的距離。動(dòng)畫中的元素通過(guò)位移的變化產(chǎn)生了動(dòng)態(tài)的效果。
速度是和位移密不可分的變量。相同的位移、不同的速度，元素可以呈現(xiàn)不同的動(dòng)態(tài)效果（如：勻速、加速、減速和緩入緩出等）。速度的變化可以增加動(dòng)感，更容易引起關(guān)注。
?
- 放大和縮小
界面元素等比放大或縮小的過(guò)程。
放大
縮小
?
- 消失和出現(xiàn)
界面元素從無(wú)到有或從有到無(wú)的過(guò)程。
?
- 翻轉(zhuǎn)
翻轉(zhuǎn)可以是界面元素呈現(xiàn)3D效果的180度轉(zhuǎn)動(dòng)，也可以是界面元素90度的折疊效果。
翻轉(zhuǎn)
翻折
?
- 旋轉(zhuǎn)
旋轉(zhuǎn)可以是界面元素圍繞中心點(diǎn)在平面上的轉(zhuǎn)動(dòng)，也可以整個(gè)界面所有元素的轉(zhuǎn)動(dòng)，如移動(dòng)設(shè)備橫屏和豎屏之間的切換。
局部旋轉(zhuǎn)
全部旋轉(zhuǎn)
?
- 變形
界面元素根據(jù)操作觸發(fā)或設(shè)計(jì)自發(fā)的形狀改變。
?
- 變色
變色是指動(dòng)效中界面元素的色彩變化。
?
- 其他
更多基礎(chǔ)動(dòng)效內(nèi)容推薦，見本文附錄。
?
Part 2 動(dòng)效作用
總結(jié)動(dòng)效應(yīng)用的眾多作用，可以將它們歸納為五個(gè)方面：友好、有趣、反饋、過(guò)渡、引導(dǎo)。以下一起來(lái)詳細(xì)了解下動(dòng)效在這幾個(gè)方面起到的具體作用，同時(shí)欣賞一些優(yōu)秀的動(dòng)效案例。
?
友好
- 與手勢(shì)結(jié)合，增強(qiáng)操控感
當(dāng)界面的動(dòng)態(tài)與用戶手指在屏幕上的運(yùn)動(dòng)一致時(shí)，用戶會(huì)感覺到自己控制了這個(gè)界面，仿佛不是在操控一個(gè)智能設(shè)備的界面，更不是被界面操控，而是作用于一個(gè)符合真實(shí)世界運(yùn)動(dòng)規(guī)則的物體。這種模擬現(xiàn)實(shí)操作的情境帶入，讓手勢(shì)操作更易于學(xué)習(xí)，體驗(yàn)更流暢。
?
- 讓錯(cuò)誤不再令人沮喪
無(wú)論是外部因素造成的網(wǎng)絡(luò)鏈接中斷、系統(tǒng)出錯(cuò)，或者是用戶主動(dòng)操作引起的用戶名、密碼輸入錯(cuò)誤等等，出錯(cuò)總是那么令人討厭。頻繁的出錯(cuò)讓用戶覺得自己很愚蠢，這種感覺很糟糕。萌萌噠的動(dòng)效可以中和失敗帶來(lái)的沮喪，讓出錯(cuò)變得更友好可愛。
?
有趣
- 讓等待不再無(wú)聊
等待文件下載、等待頁(yè)面刷新…傻傻的等待什么也不能做，真的好boring！有趣的動(dòng)效分分鐘吸引你的眼球，當(dāng)你還沉浸在創(chuàng)意無(wú)限、或是萌萌噠的動(dòng)效中的時(shí)候，無(wú)聊的等待時(shí)間已經(jīng)結(jié)束了呢。
?
- 增添趣味性，創(chuàng)造超出預(yù)期的驚喜
一直以來(lái)登錄是最常規(guī)的不可避免的操作，當(dāng)我們?cè)谝粋€(gè)新網(wǎng)站上迫不及待想要發(fā)表評(píng)論時(shí)，對(duì)于它的出現(xiàn)是有一點(diǎn)厭煩的。但當(dāng)我看到這個(gè)動(dòng)效的時(shí)候，真的覺得太有趣了，驚喜之余第一次愉快地完成了登錄。
?
- 讓界面充滿活力
動(dòng)效賦予了界面更多活力，甚至自帶了人格，而不再是機(jī)械、呆板的界面。
?
過(guò)渡
- 表現(xiàn)層級(jí)關(guān)系
轉(zhuǎn)場(chǎng)動(dòng)效是從一個(gè)界面切換到另一個(gè)界面的過(guò)渡。出色的轉(zhuǎn)場(chǎng)動(dòng)效能夠通過(guò)空間即視感，很好地展現(xiàn)兩個(gè)界面之間的層級(jí)關(guān)系。
?
- 增加界面轉(zhuǎn)場(chǎng)的延續(xù)感
兩個(gè)可以相互切換的界面之間，存在某些共同的界面元素，在設(shè)計(jì)轉(zhuǎn)場(chǎng)動(dòng)效時(shí)，保存共同界面元素的延續(xù)顯示，能夠使界面轉(zhuǎn)場(chǎng)更加流暢自然。
?
- 隱藏和展示界面元素
界面空間有限，需要展現(xiàn)的信息很多。這個(gè)時(shí)候，可以將當(dāng)前任務(wù)下不需要的界面元素隱藏，將空間留給需要展示的元素。
?
反饋
- 讓反饋更高效觸達(dá)
生硬的文字反饋和直觀的動(dòng)效反饋相較比，高下立見。動(dòng)效反饋還可以帶上一些情感的元素，抓住用戶的情緒。
?
- 令人愉快的提示
?
?
引導(dǎo)
- 新手引導(dǎo)操作
動(dòng)效操作演示，讓新手用戶能夠快速學(xué)習(xí)上手。
?
?
- 吸引注意力
當(dāng)有重要的信息需要用戶注意或嘗試操作時(shí)，恰當(dāng)好處的動(dòng)效能夠有效地吸引用戶的注意力。
?
Part 3 動(dòng)效應(yīng)用
利用基礎(chǔ)動(dòng)效，并結(jié)合動(dòng)效的作用，我們嘗試對(duì)京東的服飾APP《京致衣櫥》進(jìn)行通用動(dòng)效的設(shè)計(jì)。下面來(lái)看實(shí)例。
?
等待動(dòng)效
- 頁(yè)面加載動(dòng)效
融入服飾元素，增加有趣的頁(yè)面加載動(dòng)效，讓加載等待不再枯燥。
?
- 操作等待動(dòng)效
增加簡(jiǎn)潔耐看的小動(dòng)效，讓通訊等待狀態(tài)良好地反饋給用戶。
?
刷新動(dòng)效
- 首頁(yè)刷新
設(shè)計(jì)首頁(yè)獨(dú)有的刷新動(dòng)效，融入女性時(shí)尚購(gòu)物元素，體現(xiàn)APP調(diào)性，還可以根據(jù)運(yùn)營(yíng)需要在節(jié)日、大促等更新符合主題的動(dòng)效圖。
?
- 普通頁(yè)面刷新
刷新動(dòng)效的設(shè)計(jì)需要符合app簡(jiǎn)約時(shí)尚視覺風(fēng)格。
?
列表相關(guān)動(dòng)效
- 列表加載
列表加載動(dòng)效使用和頁(yè)面下拉刷新、操作等待相同的視覺元素，保持了APP整體風(fēng)格一致。
?
2.列表到底提示
添加小彩蛋，列表到底連續(xù)上滑，會(huì)出現(xiàn)擬人的有趣提示文案。
?
轉(zhuǎn)場(chǎng)動(dòng)效
保留兩個(gè)轉(zhuǎn)場(chǎng)界面之間的共同元素，使轉(zhuǎn)場(chǎng)過(guò)渡更加流暢自然。
?
1.衣櫥-搭配商店查看商品大圖
?
2.圈子-搭配大圖跳轉(zhuǎn)到搭配詳情頁(yè)
?
3.搭配小圖跳轉(zhuǎn)到搭配詳情頁(yè)
?
收藏動(dòng)效
增加社區(qū)Feeds或商品收藏/取消收藏的小動(dòng)效，優(yōu)化操作反饋體驗(yàn)。
彩色加載底圖
這個(gè)不屬于動(dòng)效，但仍是一個(gè)有趣的點(diǎn)。當(dāng)網(wǎng)絡(luò)不暢時(shí)，給預(yù)加載的底圖增加豐富的色彩，不再是一片呆板的死灰。
?
Part 4 動(dòng)效評(píng)判
如何評(píng)斷一個(gè)動(dòng)效的好壞？從動(dòng)效的作用來(lái)看，好的動(dòng)效設(shè)計(jì)需要滿足以下幾個(gè)點(diǎn)：
- 提供了更好的操作體驗(yàn)
- 提供了有效的信息、反饋等
- 幫助用戶操作或完成任務(wù)
- 觸發(fā)了積極的用戶情感
除以上之外，動(dòng)效的時(shí)間長(zhǎng)度也是非常重要的因素。過(guò)長(zhǎng)的、冗余的動(dòng)效會(huì)影響用戶的操作，更嚴(yán)重的是還可能引起用戶負(fù)面的體驗(yàn)。故恰到好處地掌握動(dòng)效的播放時(shí)間也是制作好動(dòng)效的必備技能之一。
?
有更多關(guān)于APP動(dòng)效的想法，歡迎一起探討。
?
附錄
指向性動(dòng)效：http://www.cocoachina.com/design/20140520/8481.html；
提示性動(dòng)效：http://www.chinaz.com/design/2015/0527/409688.shtml；
空間擴(kuò)展動(dòng)效：http://www.ui.cn/detail/13726.html；
突出顯示動(dòng)效：http://www.cocoachina.com/design/20140526/8547.html；
反饋動(dòng)效：?http://www.ui.cn/detail/13581.html。
?
聲明：本文Part1和Part2的圖片均來(lái)自于網(wǎng)絡(luò)。
Via:?jdc
